.ot-sase-diagram {
  color: #fff;
  overflow: hidden;
}
.ot-sase-diagram .bg-emerald {
  background-color: #10b981;
}
.ot-sase-diagram .text-emerald {
  color: #10b981;
}
.ot-sase-diagram .border-emerald {
  border-color: #10b981 !important;
}
.ot-sase-diagram .bg-blue {
  background-color: #3b82f6;
}
.ot-sase-diagram .text-blue {
  color: #3b82f6;
}
.ot-sase-diagram .border-blue {
  border-color: #3b82f6 !important;
}
.ot-sase-diagram .bg-amber {
  background-color: #f59e0b;
}
.ot-sase-diagram .text-amber {
  color: #f59e0b;
}
.ot-sase-diagram .border-amber {
  border-color: #f59e0b !important;
}
.ot-sase-diagram .font-serif {
  font-family: var(--bs-font-serif, 'Source Serif 4', serif);
}
.ot-sase-diagram .glass-panel {
  backdrop-filter: blur(12px);
  background: #ffffff08;
  border: 1px solid #ffffff1a;
}
.ot-sase-diagram .backdrop-blur {
  backdrop-filter: blur(8px);
}
.ot-sase-diagram .transition-all {
  transition: all 0.3s ease;
}
.ot-sase-diagram .toggle-switch {
  transition: background-color 0.3s ease;
}
.ot-sase-diagram .diagram-module {
  transition: all 0.3s ease;
}
.ot-sase-diagram .diagram-module.cursor-pointer:hover {
  box-shadow: 0 0 15px #ffffff1a;
  filter: brightness(1.2);
  transform: translateY(-2px);
}
.ot-sase-diagram .diagram-module.is-active {
  filter: brightness(1.2);
  transform: scale(1.02);
  z-index: 10;
}
.ot-sase-diagram .diagram-module.is-active .fw-medium {
  color: #fff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.ot-sase-diagram .diagram-module.is-active.core-services {
  border-color: #10b981 !important;
  box-shadow: 0 0 30px #10b9814d;
}
.ot-sase-diagram .diagram-module.is-active.virtual-cloud {
  border-color: #0000 !important;
  box-shadow: none !important;
}
.ot-sase-diagram .diagram-module.is-active.virtual-cloud .virtual-cloud-dashed {
  border-color: #10b981 !important;
  box-shadow: 0 0 30px #10b9814d;
}
.ot-sase-diagram .diagram-module.is-active.edge-node,
.ot-sase-diagram .diagram-module.is-active[data-module='pam'] {
  box-shadow: 0 0 20px #10b98166;
}
.ot-sase-diagram .diagram-module.is-active[data-module='node-4'],
.ot-sase-diagram .diagram-module.is-active[data-module='sdwan'] {
  box-shadow: 0 0 20px #3b82f666;
}
.ot-sase-diagram .diagram-module.is-active[data-module='node-5'],
.ot-sase-diagram .diagram-module.is-active[data-module='orchestration'] {
  box-shadow: 0 0 20px #f59e0b66;
}
.ot-sase-diagram.has-active-module .diagram-module:not(.is-active) {
  filter: grayscale(0.8);
  opacity: 0.3;
}
.ot-sase-diagram.has-active-module .core-services:has(.diagram-module.is-active) {
  filter: none !important;
  opacity: 1 !important;
}
.ot-sase-diagram.has-active-module .core-services:has(.diagram-module.is-active) > .diagram-module:not(.is-active) {
  filter: grayscale(0.8) !important;
  opacity: 0.3 !important;
}
.ot-sase-diagram.has-active-module .diagram-path:not(.is-active) {
  opacity: 0.1;
}
.ot-sase-diagram.has-active-module .lock-icon:not(.is-active) {
  filter: grayscale(1);
  opacity: 0.2;
}
.ot-sase-diagram .diagram-path {
  transition:
    opacity 0.3s ease,
    filter 0.3s ease;
}
.ot-sase-diagram .diagram-path.is-active {
  opacity: 1 !important;
}
.ot-sase-diagram .diagram-path.is-active path {
  stroke-width: 4px;
  filter: drop-shadow(0 0 8px currentcolor);
}
@keyframes slide-up-fade {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-down-fade {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}
.ot-sase-diagram .explainer-card {
  border-color: #10b98166;
  border-left: 4px solid #10b981;
  transition: all 0.3s ease;
}
.ot-sase-diagram .explainer-card.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}
.ot-sase-diagram.is-animating .diagram-layer--1 {
  animation: slide-up-fade 0.8s ease forwards;
}
.ot-sase-diagram.is-animating .diagram-layer--3,
.ot-sase-diagram.is-animating .virtual-cloud {
  animation: slide-down-fade 0.8s ease 0.8s forwards;
  opacity: 0;
}
.ot-sase-diagram.is-animating .diagram-layer--top-clouds {
  animation: slide-down-fade 0.8s ease 1.2s forwards;
  opacity: 0;
}
.ot-sase-diagram.is-animating .diagram-path path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-line 1.5s ease 1.8s forwards;
}
.ot-sase-diagram.is-animating .path-group-amber path,
.ot-sase-diagram.is-animating .path-group-blue path {
  animation: draw-line 1.5s ease 1.8s forwards;
}
.ot-sase-diagram .diagram-layer--1,
.ot-sase-diagram .diagram-layer--3,
.ot-sase-diagram .diagram-layer--top-clouds,
.ot-sase-diagram .virtual-cloud {
  opacity: 0;
}
.ot-sase-diagram.is-layout-saas .path-group-amber.is-active path:nth-child(2),
.ot-sase-diagram.is-layout-saas .path-group-amber.is-active path:nth-child(4),
.ot-sase-diagram.is-layout-saas .path-group-amber.is-active path:nth-child(6) {
  stroke-width: 2px !important;
  filter: none !important;
  opacity: 0.35 !important;
}
.ot-sase-diagram.is-layout-saas .path-group-blue,
.ot-sase-diagram.is-layout-saas .path-group-emerald,
.ot-sase-diagram.is-layout-saas [data-module='cloud-data'],
.ot-sase-diagram.is-layout-saas [data-module='cloud-third'] {
  display: none !important;
}
.ot-sase-diagram.is-layout-saas .diagram-layer--top-clouds > .d-flex {
  gap: 2rem !important;
  justify-content: flex-end !important;
}