/* The policy diagram uses the same motion controller as the other solution demos. */
.ri-page .pdr-flow-scroll {
  padding: 24px 20px;
  background: #fff;
  overflow-x: auto;
  scrollbar-color: #a4adb9 #f2f4f7;
}
.pdr-flow-scroll:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -4px;
}
.pdr-flow {
  position: relative;
  width: 100%;
  max-width: 1080px;
  min-width: 900px;
  aspect-ratio: 1000 / 400;
  margin: 0 auto;
  color: #26313f;
  isolation: isolate;
}
.ri-page main svg.pdr-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pdr-wire {
  fill: none;
  stroke: #667085;
  stroke-width: 1.8;
}
.pdr-wire-auto {
  stroke: #26804d;
}
.pdr-wire-review {
  stroke: #b64b3e;
}
.pdr-wire[data-motion-inactive] {
  stroke-dasharray: 0.06 0.04;
}
.pdr-packet {
  fill: #245fb5;
  opacity: 0;
  transform-origin: 0 0;
  transform-box: view-box;
}
.pdr-packet-auto {
  fill: #26804d;
}
.pdr-packet-review {
  fill: #b64b3e;
}
.pdr-symbol {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid #aeb7c4;
  border-radius: 8px;
  background: #f8fafc;
}
.ri-page main .pdr-symbol svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.6;
}
.pdr-pr {
  left: 6.5%;
  top: 34.75%;
  width: 7%;
  height: 17.5%;
  color: #536174;
}
.pdr-ai {
  left: 27%;
  top: 31%;
  width: 10%;
  height: 25%;
  color: #1d5db8;
  background: #edf4ff;
  border-color: #6c95d2;
}
.ri-page main .pdr-ai img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.pdr-caption {
  position: absolute;
  width: 19%;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: balance;
}
.pdr-caption span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 3px;
}
.pdr-pr-caption {
  left: 0.5%;
  top: 55.75%;
}
.pdr-ai-caption {
  left: 22.5%;
  top: 59.5%;
  color: #1d5db8;
}
.pdr-decision {
  position: absolute;
  left: 49.5%;
  width: 25%;
  height: 14%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ri-page main .pdr-decision > svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8;
  flex: 0 0 28px;
}
.pdr-decision strong {
  display: block;
  font-size: 17px;
  line-height: 1.4;
}
.pdr-decision span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.5;
}
.pdr-low-risk {
  top: 14%;
  color: #226b43;
}
.pdr-high-risk {
  top: 64.5%;
  color: #a13f34;
}
.pdr-outcome {
  left: 85.9%;
  width: 8%;
  height: 20%;
}
.pdr-approved {
  top: 11%;
  color: #226b43;
  border-color: #9bb9a6;
  background: #f5faf7;
}
.pdr-assigned {
  top: 61.5%;
  color: #a13f34;
  border-color: #d0a39c;
  background: #fff8f6;
}
.pdr-outcome > span {
  display: grid;
  place-items: center;
}
.pdr-flow [hidden] {
  display: none !important;
}
.pdr-approved-caption {
  left: 80.4%;
  top: 34.5%;
  color: #226b43;
}
.pdr-assigned-caption {
  left: 80.4%;
  top: 85%;
  color: #a13f34;
}
.pdr-lane.is-active .pdr-approved {
  background: #e6f4eb;
  border-color: #26804d;
}
.pdr-lane.is-active .pdr-assigned {
  background: #fcece7;
  border-color: #b64b3e;
}
.pdr-lane.is-active .pdr-caption {
  font-weight: 700;
}
.pdr-flow[data-route="blocked"] .pdr-assigned {
  background: #fbe9e7;
  border-color: #ad302d;
  color: #ad302d;
}
@media (max-width: 640px) {
  .ri-page .pdr-flow-scroll {
    padding: 16px 12px 24px;
  }
}