.ol-traceability {
  --ol-bg: var(--bs-body-bg, #fff);
  --ol-text: var(--bs-body-color, #212529);
  --ol-border: var(--bs-border-color, #dee2e6);
  --ol-muted-surface: var(--bs-tertiary-bg, #f8f9fa);
  --ol-red: var(--bs-danger, #dc3545);
  --ol-green: var(--bs-success, #198754);

  width: 100%;
  color: var(--ol-text);
}

.ol-traceability .ol-scenario {
  padding-block: 1.5rem;
}

.ol-traceability .ol-scenario-header,
.ol-traceability .ol-scenario-title,
.ol-traceability .ol-company-header,
.ol-traceability .ol-result-label {
  display: flex;
  gap: .75rem;
}

.ol-traceability .ol-scenario-header,
.ol-traceability .ol-company-header,
.ol-traceability .ol-result-label {
  justify-content: space-between;
}

.ol-traceability .ol-scenario-header {
  align-items: flex-start;
  margin-bottom: 1rem;
}

.ol-traceability .ol-scenario-title {
  align-items: center;
}

.ol-traceability .ol-scenario-title > * {
  margin: 0;
}

.ol-traceability .ol-status-dot {
  width: .7rem;
  height: .7rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ol-red);
}

.ol-traceability .ol-tracked .ol-status-dot {
  background: var(--ol-green);
}

.ol-traceability .ol-layout {
  display: grid;
  grid-template-columns:
    minmax(8.5rem, .72fr)
    minmax(17rem, 1.65fr)
    minmax(13rem, 1fr);
  align-items: stretch;
  gap: 1rem;
}

.ol-traceability .ol-shipments {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: .5rem;
  min-height: 15rem;
}

.ol-traceability .ol-company-body {
  padding: 1rem;
}

.ol-traceability .ol-company-header {
  margin-bottom: .5rem;
}

.ol-traceability .ol-company-header > * {
  margin: 0;
}

.ol-traceability .ol-network {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--ol-border);
}

.ol-traceability .ol-network-vertical {
  display: none;
}

.ol-traceability .ol-flow-base,
.ol-traceability .ol-route-selected,
.ol-traceability .ol-broadcast {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ol-traceability .ol-flow-base {
  stroke: currentColor;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.ol-traceability .ol-route-selected,
.ol-traceability .ol-broadcast {
  stroke: var(--ol-red);
  stroke-width: 2;
  opacity: 0;
}

.ol-traceability .ol-route-selected.is-active,
.ol-traceability .ol-broadcast.is-active {
  opacity: 1;
}

.ol-traceability .ol-broadcast {
  stroke-width: 2.25;
}

.ol-traceability .ol-node-ring {
  fill: var(--ol-bg);
  stroke:
    color-mix(
      in srgb,
      var(--ol-green) 74%,
      var(--ol-border)
    );
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  transition:
    fill .2s ease,
    stroke .2s ease;
}

.ol-traceability .ol-node-core {
  fill: var(--ol-green);
  transition: fill .2s ease;
}

.ol-traceability .ol-untracked .ol-node-ring,
.ol-traceability
  .ol-tracked
  .ol-customer-node.is-affected
  .ol-node-ring {
  fill:
    color-mix(
      in srgb,
      var(--ol-red) 14%,
      var(--ol-bg)
    );
  stroke: var(--ol-red);
}

.ol-traceability .ol-untracked .ol-node-core,
.ol-traceability
  .ol-tracked
  .ol-customer-node.is-affected
  .ol-node-core {
  fill: var(--ol-red);
}

.ol-traceability .ol-merge-box {
  fill:
    color-mix(
      in srgb,
      var(--ol-red) 10%,
      var(--ol-bg)
    );
  stroke: var(--ol-red);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.ol-traceability .ol-untracked .ol-merge-box {
  stroke-dasharray: 4 3;
}

.ol-traceability .ol-tracked .ol-merge-box {
  fill:
    color-mix(
      in srgb,
      var(--ol-green) 8%,
      var(--ol-bg)
    );
  stroke: var(--ol-green);
}

.ol-traceability .ol-merge-icon {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--ol-red);
  font-size: 1.15rem;
  line-height: 1;
}

.ol-traceability .ol-merge-logo {
  pointer-events: none;
}

.ol-traceability .ol-results {
  display: grid;
  align-content: start;
  gap: .7rem;
}

.ol-traceability .ol-result {
  padding-bottom: .7rem;
  border-bottom:
    var(--bs-border-width, 1px)
    solid
    var(--ol-border);
}

.ol-traceability .ol-result-label {
  margin-bottom: .4rem;
}

.ol-traceability .ol-result-label > * {
  margin: 0;
}

.ol-traceability .ol-result-value,
.ol-traceability .ol-metric-value,
.ol-traceability .ol-savings {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ol-traceability .ol-result-value,
.ol-traceability .ol-metric-value {
  white-space: nowrap;
}

.ol-traceability .ol-scope-track {
  position: relative;
  height: .75rem;
  overflow: hidden;
  border-radius:
    var(--bs-border-radius-pill, 50rem);
  background:
    color-mix(
      in srgb,
      var(--ol-green) 72%,
      var(--ol-muted-surface)
    );
  box-shadow:
    inset 0 0 0
    var(--bs-border-width, 1px)
    color-mix(
      in srgb,
      var(--ol-green) 30%,
      var(--ol-border)
    );
}

.ol-traceability .ol-scope-bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ol-red);
  transform:
    scaleX(var(--ol-extent, .1));
  transform-origin: left center;
  transition:
    transform
    .48s
    cubic-bezier(.2, .75, .25, 1);
}

.ol-traceability
  .ol-untracked
  .ol-scope-bar {
  transition: none;
  animation:
    ol-uncertain-scope
    var(--ol-pulse-duration, 3.4s)
    ease-in-out
    var(--ol-pulse-delay, 0s)
    infinite
    alternate;
}

.ol-traceability .ol-metrics {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(0, 1fr);
  gap: .75rem;
  padding-top: .15rem;
}

.ol-traceability .ol-metric > * {
  margin: 0;
}

.ol-traceability .ol-metric + .ol-metric {
  padding-left: .75rem;
  border-left:
    var(--bs-border-width, 1px)
    solid
    var(--ol-border);
}

.ol-traceability .ol-savings {
  grid-column: 1 / -1;
  color: var(--ol-green);
}

@keyframes ol-uncertain-scope {
  from {
    transform: scaleX(.8);
  }

  to {
    transform: scaleX(1);
  }
}

@media
  (min-width: 768px)
  and
  (max-width: 991.98px) {
  .ol-traceability .ol-layout {
    grid-template-columns:
      minmax(7rem, .65fr)
      minmax(14rem, 1.5fr)
      minmax(11.5rem, 1fr);
    gap: .75rem;
  }
}

@media (max-width: 767.98px) {
  .ol-traceability .ol-scenario-header,
  .ol-traceability .ol-company-header {
    display: block;
  }

  .ol-traceability
    .ol-scenario-header
    > :last-child,
  .ol-traceability
    .ol-company-header
    > :last-child {
    margin-top: .25rem;
  }

  .ol-traceability .ol-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ol-traceability .ol-shipments {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
  }

  .ol-traceability
    .ol-network-horizontal {
    display: none;
  }

  .ol-traceability
    .ol-network-vertical {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ol-traceability .ol-node-ring,
  .ol-traceability .ol-node-core,
  .ol-traceability .ol-scope-bar {
    transition: none;
  }

  .ol-traceability
    .ol-untracked
    .ol-scope-bar {
    animation: none;
    transform: scaleX(.92);
  }
}