.operational-interaction-diagram {
  background-color: #0000 !important;
}
.operational-interaction-diagram .oid-glass-card {
  backdrop-filter: blur(12px);
  background: #06554526 !important;
  border: 1px solid #10b98138 !important;
  box-shadow: 0 10px 30px #0003;
  position: relative;
  z-index: 5;
}
.operational-interaction-diagram .oid-ring-wrapper {
  border: 1px dashed #06554533;
  border-radius: 50%;
  box-shadow: inset 0 0 50px #0655450d;
  height: 500px;
  position: relative;
  width: 500px;
}
@media (max-width: 575.98px) {
  .operational-interaction-diagram .oid-ring-wrapper {
    height: 320px !important;
    width: 320px !important;
  }
  .operational-interaction-diagram .oid-ring-wrapper svg {
    display: none !important;
  }
  .operational-interaction-diagram .oid-ring-wrapper .oid-center-hub {
    height: 120px !important;
    width: 120px !important;
  }
  .operational-interaction-diagram .oid-ring-wrapper .oid-center-hub h4 {
    font-size: 0.8rem !important;
  }
  .operational-interaction-diagram .oid-ring-wrapper .oid-node {
    height: 50px !important;
    width: 50px !important;
  }
  .operational-interaction-diagram .oid-ring-wrapper .oid-node .oid-node__label {
    font-size: 0.5rem !important;
  }
}
.operational-interaction-diagram .oid-center-hub {
  border-radius: 50%;
  height: 200px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  width: 200px;
  z-index: 10;
}
.operational-interaction-diagram .oid-center-hub h4 {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1 !important;
}
.operational-interaction-diagram .oid-detail-glow {
  border-radius: inherit;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: background 0.3s ease;
  width: 100%;
}
.operational-interaction-diagram .oid-detail-takeaway {
  transition:
    background-color 0.3s ease,
    border-left-color 0.3s ease;
}
.operational-interaction-diagram .oid-node {
  background: #0f0f0f !important;
  border: 1px solid #ffffff14 !important;
  box-shadow: 0 4px 10px #0006;
  height: 80px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 80px;
}
.operational-interaction-diagram .oid-node:hover {
  transform: translate(-50%, -50%) scale(1.1) !important;
}
.operational-interaction-diagram .oid-node .oid-node__label {
  font-size: 0.95rem !important;
}
.operational-interaction-diagram svg line {
  stroke-width: 1px !important;
  transition:
    stroke 0.3s ease,
    stroke-width 0.3s ease;
}
.operational-interaction-diagram svg line.active {
  stroke-width: 1px !important;
}
.operational-interaction-diagram .oid-detail-eyebrow,
.operational-interaction-diagram .oid-eyebrow {
  font-family: var(--bs-font-monospace), monospace !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: color 0.3s ease;
}
.operational-interaction-diagram .oid-detail-text,
.operational-interaction-diagram .oid-intro,
.operational-interaction-diagram .oid-takeaway-text {
  color: #cbd5e1 !important;
  font-size: 1.55rem !important;
  line-height: 1.6 !important;
}
.operational-interaction-diagram .oid-detail-text p {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin-bottom: 1rem !important;
}
.operational-interaction-diagram .oid-detail-text p:last-child {
  margin-bottom: 0 !important;
}
.operational-interaction-diagram .oid-takeaway-label {
  font-family: var(--bs-font-monospace), monospace !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: color 0.3s ease;
}
.operational-interaction-diagram .oid-detail-eyebrow,
.operational-interaction-diagram .oid-detail-text,
.operational-interaction-diagram .oid-detail-title {
  transition: opacity 0.2s ease !important;
}
.operational-interaction-diagram.oid--emerald .oid-center-hub {
  background: #06554533 !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 0 25px #10b98159 !important;
}
.operational-interaction-diagram.oid--emerald .oid-detail-glow {
  background: radial-gradient(circle at 10% 10%, #06554526 0, #0000 60%) !important;
}
.operational-interaction-diagram.oid--emerald .oid-ring-wrapper {
  border-color: #06554533 !important;
  box-shadow: inset 0 0 50px #0655450d !important;
}
.operational-interaction-diagram.oid--emerald svg line {
  stroke: #10b98166 !important;
}
.operational-interaction-diagram.oid--emerald svg line.active {
  stroke: #10b981 !important;
  stroke-width: 2px !important;
}
.operational-interaction-diagram.oid--emerald .oid-node {
  background: #06554533 !important;
  border-color: #10b98166 !important;
}
.operational-interaction-diagram.oid--emerald .oid-node:hover {
  background: #06554566 !important;
  border-color: #10b981cc !important;
  box-shadow: 0 0 15px #10b9814d !important;
}
.operational-interaction-diagram.oid--emerald .oid-node.active {
  background: #06554599 !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 20px #10b98180 !important;
}
.operational-interaction-diagram.oid--emerald .oid-detail-eyebrow,
.operational-interaction-diagram.oid--emerald .oid-eyebrow,
.operational-interaction-diagram.oid--emerald .oid-takeaway-label {
  color: #10b981 !important;
}
.operational-interaction-diagram.oid--emerald .oid-detail-takeaway {
  background: #0655450d !important;
  border-left-color: #10b981 !important;
}
.operational-interaction-diagram.oid--green .oid-center-hub {
  background: #06554533 !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 0 25px #10b98159 !important;
}
.operational-interaction-diagram.oid--green .oid-detail-glow {
  background: radial-gradient(circle at 10% 10%, #06554526 0, #0000 60%) !important;
}
.operational-interaction-diagram.oid--green .oid-ring-wrapper {
  border-color: #06554533 !important;
  box-shadow: inset 0 0 50px #0655450d !important;
}
.operational-interaction-diagram.oid--green svg line {
  stroke: #f59e0b66 !important;
}
.operational-interaction-diagram.oid--green svg line.active {
  stroke: #f59e0b !important;
  stroke-width: 2px !important;
}
.operational-interaction-diagram.oid--green .oid-node {
  background: #06554533 !important;
  border-color: #10b98166 !important;
}
.operational-interaction-diagram.oid--green .oid-node:hover {
  background: #06554566 !important;
  border-color: #10b981cc !important;
  box-shadow: 0 0 15px #10b9814d !important;
}
.operational-interaction-diagram.oid--green .oid-node.active {
  background: #06554599 !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 20px #10b98180 !important;
}
.operational-interaction-diagram.oid--green .oid-detail-eyebrow,
.operational-interaction-diagram.oid--green .oid-eyebrow,
.operational-interaction-diagram.oid--green .oid-takeaway-label {
  color: #10b981 !important;
}
.operational-interaction-diagram.oid--green .oid-detail-takeaway {
  background: #0655450d !important;
  border-left-color: #10b981 !important;
}
.operational-interaction-diagram.oid--warning .oid-center-hub {
  background: #f59e0b1a !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 25px #f59e0b66 !important;
}
.operational-interaction-diagram.oid--warning .oid-detail-glow {
  background: radial-gradient(circle at 10% 10%, #f59e0b1a 0, #0000 60%) !important;
}
.operational-interaction-diagram.oid--warning .oid-ring-wrapper {
  border-color: #f59e0b33 !important;
  box-shadow: inset 0 0 50px #f59e0b0d !important;
}
.operational-interaction-diagram.oid--warning svg line {
  stroke: #f59e0b4d !important;
}
.operational-interaction-diagram.oid--warning svg line.active {
  stroke: #f59e0b !important;
}
.operational-interaction-diagram.oid--warning .oid-node:hover {
  background: #f59e0b33 !important;
  border-color: #f59e0b99 !important;
  box-shadow: 0 0 15px #f59e0b33 !important;
}
.operational-interaction-diagram.oid--warning .oid-node.active {
  background: #f59e0b4d !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 15px #f59e0b66 !important;
}
.operational-interaction-diagram.oid--warning .oid-detail-eyebrow,
.operational-interaction-diagram.oid--warning .oid-eyebrow,
.operational-interaction-diagram.oid--warning .oid-takeaway-label {
  color: #f59e0b !important;
}
.operational-interaction-diagram.oid--warning .oid-detail-takeaway {
  background: #f59e0b0d !important;
  border-left-color: #f59e0b !important;
}
.operational-interaction-diagram.oid--danger .oid-center-hub {
  background: #7f1d1d26 !important;
  border: 2px solid #7f1d1d !important;
  box-shadow: 0 0 25px #7f1d1d80 !important;
}
.operational-interaction-diagram.oid--danger .oid-detail-glow {
  background: radial-gradient(circle at 10% 10%, #7f1d1d26 0, #0000 60%) !important;
}
.operational-interaction-diagram.oid--danger .oid-ring-wrapper {
  border-color: #7f1d1d33 !important;
  box-shadow: inset 0 0 50px #7f1d1d0d !important;
}
.operational-interaction-diagram.oid--danger svg line {
  stroke: #7f1d1d4d !important;
}
.operational-interaction-diagram.oid--danger svg line.active {
  stroke: #ef4444 !important;
}
.operational-interaction-diagram.oid--danger .oid-node:hover {
  background: #7f1d1d4d !important;
  border-color: #ef444499 !important;
  box-shadow: 0 0 15px #ef444433 !important;
}
.operational-interaction-diagram.oid--danger .oid-node.active {
  background: #7f1d1d66 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 15px #ef444466 !important;
}
.operational-interaction-diagram.oid--danger .oid-detail-eyebrow,
.operational-interaction-diagram.oid--danger .oid-eyebrow,
.operational-interaction-diagram.oid--danger .oid-takeaway-label {
  color: #ef4444 !important;
}
.operational-interaction-diagram.oid--danger .oid-detail-takeaway {
  background: #7f1d1d0d !important;
  border-left-color: #7f1d1d !important;
}
.operational-interaction-diagram.oid--resolution .oid-center-hub {
  background: #1e1b4b26 !important;
  border: 2px solid #1e1b4b !important;
  box-shadow: 0 0 25px #1e1b4b80 !important;
}
.operational-interaction-diagram.oid--resolution .oid-detail-glow {
  background: radial-gradient(circle at 10% 10%, #1e1b4b26 0, #0000 60%) !important;
}
.operational-interaction-diagram.oid--resolution .oid-ring-wrapper {
  border-color: #1e1b4b33 !important;
  box-shadow: inset 0 0 50px #1e1b4b0d !important;
}
.operational-interaction-diagram.oid--resolution svg line {
  stroke: #1e1b4b4d !important;
}
.operational-interaction-diagram.oid--resolution svg line.active {
  stroke: #6366f1 !important;
}
.operational-interaction-diagram.oid--resolution .oid-node:hover {
  background: #1e1b4b4d !important;
  border-color: #6366f199 !important;
  box-shadow: 0 0 15px #6366f133 !important;
}
.operational-interaction-diagram.oid--resolution .oid-node.active {
  background: #1e1b4b66 !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 15px #6366f166 !important;
}
.operational-interaction-diagram.oid--resolution .oid-detail-eyebrow,
.operational-interaction-diagram.oid--resolution .oid-eyebrow,
.operational-interaction-diagram.oid--resolution .oid-takeaway-label {
  color: #6366f1 !important;
}
.operational-interaction-diagram.oid--resolution .oid-detail-takeaway {
  background: #1e1b4b0d !important;
  border-left-color: #1e1b4b !important;
}