.sase-solutions-diagram {
  color: #fff;
  overflow: hidden;
}
.sase-solutions-diagram .bg-emerald {
  background-color: #10b981;
}
.sase-solutions-diagram .text-emerald {
  color: #10b981;
}
.sase-solutions-diagram .border-emerald {
  border-color: #10b981 !important;
}
.sase-solutions-diagram .bg-blue {
  background-color: #3b82f6;
}
.sase-solutions-diagram .text-blue {
  color: #3b82f6;
}
.sase-solutions-diagram .border-blue {
  border-color: #3b82f6 !important;
}
.sase-solutions-diagram .bg-amber {
  background-color: #f59e0b;
}
.sase-solutions-diagram .text-amber {
  color: #f59e0b;
}
.sase-solutions-diagram .border-amber {
  border-color: #f59e0b !important;
}
.sase-solutions-diagram .font-serif {
  font-family: var(--bs-font-serif, 'Source Serif 4', serif);
}
.sase-solutions-diagram .glass-panel {
  backdrop-filter: blur(12px);
  background: #ffffff08;
  border: 1px solid #ffffff1a;
}
.sase-solutions-diagram .backdrop-blur {
  backdrop-filter: blur(8px);
}
.sase-solutions-diagram .transition-all {
  transition: all 0.3s ease;
}
.sase-solutions-diagram .toggle-switch {
  transition: background-color 0.3s ease;
}
.sase-solutions-diagram .diagram-module {
  transition: all 0.3s ease;
}
.sase-solutions-diagram .diagram-module.cursor-pointer:hover {
  box-shadow: 0 0 15px #ffffff1a;
  filter: brightness(1.2);
  transform: translateY(-2px);
}
.sase-solutions-diagram .diagram-module.is-active {
  filter: brightness(1.2);
  transform: scale(1.02);
  z-index: 10;
}
.sase-solutions-diagram .diagram-module.is-active .fw-medium {
  color: #fff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.sase-solutions-diagram .diagram-module.is-active.core-services {
  border-color: #10b981 !important;
  box-shadow: 0 0 30px #10b981cc !important;
}
.sase-solutions-diagram .diagram-module.is-active.virtual-cloud {
  border-color: #0000 !important;
  box-shadow: none !important;
}
.sase-solutions-diagram .diagram-module.is-active.virtual-cloud .virtual-cloud-dashed {
  border-color: #10b981 !important;
  box-shadow: 0 0 30px #10b9814d;
}
.sase-solutions-diagram .diagram-module.is-active.edge-node,
.sase-solutions-diagram .diagram-module.is-active[data-module='pam'] {
  box-shadow: 0 0 20px #10b981cc !important;
}
.sase-solutions-diagram .diagram-module.is-active[data-module='node-4'],
.sase-solutions-diagram .diagram-module.is-active[data-module='sdwan'] {
  box-shadow: 0 0 20px #3b82f666;
}
.sase-solutions-diagram .diagram-module.is-active[data-module='bms-cloud'],
.sase-solutions-diagram .diagram-module.is-active[data-module='node-5'],
.sase-solutions-diagram .diagram-module.is-active[data-module='orchestration'] {
  box-shadow: 0 0 20px #f59e0b66;
}
.sase-solutions-diagram.has-active-module .diagram-module:not(.is-active) {
  filter: grayscale(0.8);
  opacity: 0.3;
}
.sase-solutions-diagram.has-active-module .core-services:has(.diagram-module.is-active) {
  filter: none !important;
  opacity: 1 !important;
}
.sase-solutions-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;
}
.sase-solutions-diagram.has-active-module
  .core-services:has(.diagram-module.is-active)
  .diagram-module:not(.is-active)
  .fw-medium {
  color: #ffffffbf !important;
  font-weight: 500 !important;
  opacity: inherit !important;
}
.sase-solutions-diagram.has-active-module .diagram-path:not(.is-active) {
  opacity: 0.1;
}
.sase-solutions-diagram.has-active-module .lock-icon:not(.is-active) {
  filter: grayscale(1);
  opacity: 0.2;
}
.sase-solutions-diagram .sase-canvas-scroll-wrapper {
  overflow-x: auto;
}
@media (min-width: 992px) {
  .sase-solutions-diagram .sase-canvas-scroll-wrapper {
    overflow-x: visible;
  }
}
.sase-solutions-diagram .diagram-path {
  transition:
    opacity 0.3s ease,
    filter 0.3s ease;
}
.sase-solutions-diagram .diagram-path.is-active {
  opacity: 1 !important;
}
.sase-solutions-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;
  }
}
.sase-solutions-diagram .explainer-card {
  border-color: #10b98166;
  border-left: 4px solid #10b981;
  transition: all 0.3s ease;
}
.sase-solutions-diagram .explainer-card.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}
.sase-solutions-diagram .explainer-card p a {
  color: #10b981;
  font-weight: 600;
  -webkit-text-decoration: underline !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  transition: all 0.2s ease;
}
.sase-solutions-diagram .explainer-card p a:hover {
  color: #0d9668;
}
.sase-solutions-diagram.is-animating .diagram-layer--1 {
  animation: slide-up-fade 0.8s ease forwards;
}
.sase-solutions-diagram.is-animating .diagram-layer--3,
.sase-solutions-diagram.is-animating .virtual-cloud {
  animation: slide-down-fade 0.8s ease 0.8s forwards;
  opacity: 0;
}
.sase-solutions-diagram.is-animating .diagram-layer--top-clouds {
  animation: slide-down-fade 0.8s ease 1.2s forwards;
  opacity: 0;
}
.sase-solutions-diagram.is-animating .diagram-path path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-line 1.5s ease 1.8s forwards;
}
.sase-solutions-diagram.is-animating .path-group-amber path,
.sase-solutions-diagram.is-animating .path-group-blue path {
  animation: draw-line 1.5s ease 1.8s forwards;
}
.sase-solutions-diagram .diagram-layer--1,
.sase-solutions-diagram .diagram-layer--3,
.sase-solutions-diagram .diagram-layer--top-clouds,
.sase-solutions-diagram .virtual-cloud {
  opacity: 0;
}
.sase-solutions-diagram .solutions-tabs .btn {
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 4px;
  color: #fff;
  transition: all 0.3s ease;
}
.sase-solutions-diagram .solutions-tabs .btn.is-active,
.sase-solutions-diagram .solutions-tabs .btn:hover {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #000 !important;
}
.sase-solutions-diagram .solutions-tabs .btn.is-active {
  box-shadow: 0 0 15px #10b98199 !important;
}
.sase-solutions-diagram .only-layout-bms,
.sase-solutions-diagram .only-layout-hub,
.sase-solutions-diagram .only-layout-robin,
.sase-solutions-diagram .only-layout-saas {
  display: none !important;
}
.sase-solutions-diagram .hide-layout-bms,
.sase-solutions-diagram .hide-layout-hub,
.sase-solutions-diagram .hide-layout-robin,
.sase-solutions-diagram .hide-layout-saas,
.sase-solutions-diagram.is-layout-robin .only-layout-robin {
  display: flex !important;
}
.sase-solutions-diagram.is-layout-robin .hide-layout-robin {
  display: none !important;
}
.sase-solutions-diagram.is-layout-robin .invisible-layout-robin {
  opacity: 0 !important;
  pointer-events: none !important;
}
.sase-solutions-diagram.is-layout-robin [data-module='cloud-saas2'] {
  opacity: 0.25 !important;
  pointer-events: none !important;
}
.sase-solutions-diagram.is-layout-robin [data-module='cloud-saas2'] .lock-icon {
  border-color: #fff3 !important;
  opacity: 0.25 !important;
}
.sase-solutions-diagram.is-layout-robin [data-module='cloud-saas2'] .lock-icon i {
  color: #ffffff4d !important;
}
.sase-solutions-diagram.is-layout-robin .lock-icon-robin-bottom {
  border-color: #fff3 !important;
  opacity: 0.25 !important;
}
.sase-solutions-diagram.is-layout-robin .lock-icon-robin-bottom i {
  color: #ffffff4d !important;
}
.sase-solutions-diagram.is-layout-robin .marketplace-logo-container img {
  max-height: 36px !important;
  width: auto !important;
}
.sase-solutions-diagram.is-layout-bms .only-layout-bms {
  display: flex !important;
}
.sase-solutions-diagram.is-layout-bms .hide-layout-bms {
  display: none !important;
}
.sase-solutions-diagram.is-layout-bms .path-group-emerald {
  opacity: 0 !important;
}
.sase-solutions-diagram.is-layout-bms [data-module='cloud-data'],
.sase-solutions-diagram.is-layout-bms [data-module='cloud-saas1'],
.sase-solutions-diagram.is-layout-bms [data-module='cloud-saas2'],
.sase-solutions-diagram.is-layout-bms [data-module='cloud-third'] {
  filter: grayscale(1) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.sase-solutions-diagram.is-layout-bms .bms-crossout {
  position: relative;
}
.sase-solutions-diagram.is-layout-bms .bms-crossout:after {
  background-color: #f59e0b;
  content: '';
  height: 2px;
  left: -10%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-15deg);
  width: 120%;
}
.sase-solutions-diagram.is-layout-bms .bms-crossout:before {
  background-color: #f59e0b;
  content: '';
  height: 2px;
  left: -10%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(15deg);
  width: 120%;
}
.sase-solutions-diagram.is-layout-hub .only-layout-hub {
  display: flex !important;
}
.sase-solutions-diagram.is-layout-hub .only-layout-hub.lock-icon-hub {
  display: block !important;
}
.sase-solutions-diagram.is-layout-hub .hide-layout-hub {
  display: none !important;
}
.sase-solutions-diagram.is-layout-hub .diagram-module[data-module='marketplace'],
.sase-solutions-diagram.is-layout-hub .diagram-module[data-module='orchestration']:not(.edge-node),
.sase-solutions-diagram.is-layout-hub .diagram-module[data-module='sdwan']:not(.edge-node) {
  filter: grayscale(1) !important;
  opacity: 0.2 !important;
  pointer-events: none !important;
}
.sase-solutions-diagram.is-layout-hub [data-module='cloud-data'],
.sase-solutions-diagram.is-layout-hub [data-module='cloud-saas1'],
.sase-solutions-diagram.is-layout-hub [data-module='cloud-saas2'],
.sase-solutions-diagram.is-layout-hub [data-module='cloud-third'] {
  filter: grayscale(1) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.sase-solutions-diagram.is-layout-hub .path-group-amber,
.sase-solutions-diagram.is-layout-hub .path-group-blue,
.sase-solutions-diagram.is-layout-hub .path-group-emerald {
  opacity: 0 !important;
}
.sase-solutions-diagram.is-layout-saas .only-layout-saas {
  display: flex !important;
}
.sase-solutions-diagram.is-layout-saas .hide-layout-saas {
  display: none !important;
}
.sase-solutions-diagram.is-layout-saas .diagram-module[data-module='cloud-saas2'].is-active {
  box-shadow: none !important;
  filter: none !important;
  opacity: 0.7 !important;
}
.sase-solutions-diagram.is-layout-saas .path-group-amber.is-active path:nth-child(2),
.sase-solutions-diagram.is-layout-saas .path-group-amber.is-active path:nth-child(4),
.sase-solutions-diagram.is-layout-saas .path-group-amber.is-active path:nth-child(6) {
  stroke-width: 2px !important;
  filter: none !important;
  opacity: 0.35 !important;
}
.sase-solutions-diagram.is-layout-saas .path-group-blue,
.sase-solutions-diagram.is-layout-saas .path-group-emerald,
.sase-solutions-diagram.is-layout-saas [data-module='cloud-data'],
.sase-solutions-diagram.is-layout-saas [data-module='cloud-third'] {
  display: none !important;
}
.sase-solutions-diagram.is-layout-saas .diagram-layer--top-clouds > .d-flex {
  gap: 2rem !important;
  justify-content: flex-end !important;
}
.sase-solutions-diagram .bms-logo-container img,
.sase-solutions-diagram .marketplace-logo-container img,
.sase-solutions-diagram .robin-logo-container img,
.sase-solutions-diagram .saas-logo-container img {
  background: #fff;
  border: 1px solid #fffc;
  border-radius: 4px;
  box-shadow:
    0 4px 10px #00000059,
    0 1px 2px #0003;
  padding: 2px 5px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.sase-solutions-diagram .bms-logo-container img:hover,
.sase-solutions-diagram .marketplace-logo-container img:hover,
.sase-solutions-diagram .robin-logo-container img:hover,
.sase-solutions-diagram .saas-logo-container img:hover {
  box-shadow:
    0 6px 14px #00000073,
    0 2px 4px #00000040;
  transform: translateY(-2px);
}
.sase-solutions-diagram .marketplace-logo-container img {
  max-height: 38px !important;
  max-width: 100% !important;
  width: 100% !important;
}