html {
  height:100%;
}

body {
  width: 100%;
  height:100%;
  font-family: sans-serif;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gui-content-container {
  flex: 1;
  display: flex; 
      }

.embedFrame {
  flex: 1;
  border: none;
  height: 100%;
  width: 100%;
}

.embednavFrame {
            width: 15%; /* Adjust as needed for spacing */
            /*height: 400px; /* Or use a percentage of the viewport height (e.g., 50vh) */
            /*border: 1px solid #070707; /* Add a border for better visibility */
            /*margin: 0.1rem; /* Add some spacing around iframes */
            border: none;
            
            
        }

@font-face {
  font-family: 'SSTProLight';
  src: url(./font/SSTPro-Light.otf) format('woff');
}
@font-face {
  font-family: 'SSTProMedium';
  src: url(./font/SSTPro-Medium.otf) format('woff');
}
@font-face {
  font-family: 'SSTProRoman';
  src: url(./font/SSTPro-Roman.otf) format('woff');
}
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default - Change to Flex to show popup by default*/
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 25px; /* Location of the box */
      left: 0;
      top: 1;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: #fff; /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    
    /* Modal Content */
    .modal-content {
      background-color: #fff;
      margin: auto;
      border-radius: 4px;
      border: 1px solid #888;
      max-width: 736px;
      width: 100%;  /* Set the width to 100% of the parent */
      box-sizing: border-box;  /* Include padding and border in width */

    }
    
    
    .modal-header {
      font-family: SSTProLight;
      position: sticky;
      top: 0;
      font-size: 26px;
      font-weight: 300;
      padding-top: 24px;
      padding-bottom: 12px;
      padding-left:32px;
      padding-right:32px;
      z-index: 10; 
      
    }
    .modal-text {
      font-family: SSTProRoman;
      max-height: 70vh; /* Set the maximum height that fits your design */
      overflow-y: auto; /* Enable vertical scroll */
      font-size: 14px;
      line-height: 1.5;
      padding-left:32px;
      padding-right:32px;
      margin-bottom: 0px;
      font-weight: 400;
      color:#363636;
    }
    /* The Close Button */
    .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
    .acknowledge-btn-container {
      display: flex;
      justify-content: flex-end;
      padding-top: 32px;
      padding-bottom: 32px;
      padding-right:32px;
      
      
    }
    .acknowledge-btn {
        font-family: SSTProMedium;
        padding:10px 24px 10px 24px;
        border-radius:4px;
        background:#0072CE;
        color: #ffffff;
        border: none;
        line-height: 20px;
        font-size: 14px;
        font-weight: 300;
        cursor: pointer;
        transition: color 0.2s;
        letter-spacing: 0.25px;
    }

    .acknowledge-btn:hover {
      background:#00578F;
    }

    
    .legal-notice h2 {
      font-family: SSTProMedium;
      font-weight: 500;
      text-transform:capitalize;
      margin-top: 24px;
      margin-bottom: 0px;
      color:#000;
      font-size:14px;
    }
    .legal-notice p {
      margin-bottom: 0px;
      margin-top: 8px;
    }

    /* Welcome Modal Styles */
    .welcome-modal {
      z-index: 2; /* Higher than legal notice modal */
      display: none;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(0);
      transition: opacity 0.3s ease, transform 0.3s ease;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }

    .welcome-modal[style*="flex"] {
      display: flex !important;
    }

    .welcome-modal.welcome-modal-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Step 3: Position in bottom right corner */
    .welcome-modal.step-3-active {
      align-items: flex-end;
      justify-content: flex-end;
      padding: 0;
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .welcome-modal.step-3-active .welcome-modal-content {
      max-width: 400px;
      width: auto;
      height: auto;
      margin: 0 !important;
      position: fixed !important;
      bottom: 76px !important; /* 16px gap + footer height (will be overridden by JS) */
      right: 16px !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      transition: max-width 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out, bottom 0.3s ease-out, right 0.3s ease-out, left 0.3s ease-out, top 0.3s ease-out, margin 0.3s ease-out, opacity 0.3s ease-out;
    }

    /* Content animation classes - apply only to header-body-wrapper */
    .welcome-modal-header-body-wrapper {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
    }

    /* Slide animations for steps 0 and 1 */
    .welcome-modal-header-body-wrapper.content-slide-left {
      animation: slideLeftIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .welcome-modal-header-body-wrapper.content-slide-right {
      animation: slideRightIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* Exit animations */
    .welcome-modal-header-body-wrapper.content-slide-left-exit {
      animation: slideLeftOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .welcome-modal-header-body-wrapper.content-slide-right-exit {
      animation: slideRightOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes slideLeftIn {
      from {
        opacity: 0;
        transform: translateX(40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideRightIn {
      from {
        opacity: 0;
        transform: translateX(-40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideLeftOut {
      from {
        opacity: 1;
        transform: translateX(0);
      }
      to {
        opacity: 0;
        transform: translateX(-40px);
      }
    }

    @keyframes slideRightOut {
      from {
        opacity: 1;
        transform: translateX(0);
      }
      to {
        opacity: 0;
        transform: translateX(40px);
      }
    }

    /* Fade animations for step 3 */
    .welcome-modal-header-body-wrapper.content-fade-in {
      animation: fadeInContent 0.3s ease-out forwards;
    }

    .welcome-modal-header-body-wrapper.content-fade-out {
      animation: fadeOutContent 0.3s ease-out forwards;
    }

    @keyframes fadeInContent {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes fadeOutContent {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

    .welcome-modal-content {
      max-width: 700px;
      width: 90%;
      height: 450px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      position: relative;
      margin: auto;
      transform: translateY(-2%);
      transition: max-width 0.3s ease-out, width 0.3s ease-out, margin 0.3s ease-out, height 0.3s ease-out, bottom 0.3s ease-out, right 0.3s ease-out, left 0.3s ease-out, top 0.3s ease-out, transform 0.3s ease-out;
      overflow: hidden;
      will-change: max-width, width, height, bottom, right;
    }

    .welcome-step {
      display: flex;
      flex-direction: column;
      height: 100%;
      flex: 1 1 auto;
      min-height: 0;
      position: relative;
    }

    /* During transitions, steps need to overlap */
    .welcome-modal-content-wrapper {
      position: relative;
      overflow: hidden;
    }

    .welcome-step[style*="flex"]:not(:last-of-type[style*="flex"]) {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      z-index: 1;
    }

    .welcome-step[style*="flex"]:last-of-type {
      position: relative;
      z-index: 2;
    }

    /* During transitions, steps need to overlap */
    .welcome-step[style*="flex"] {
      position: relative;
    }

    /* Ensure footer never animates */
    .welcome-modal-footer {
      position: relative;
      z-index: 10;
      transform: none !important;
      animation: none !important;
      transition: none !important;
    }

    .welcome-modal-content-wrapper {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }

    .welcome-modal-header-body-wrapper {
      display: flex;
      flex-direction: column;
      gap: 16px;
      flex: 1 1 auto;
      min-height: 0;
      will-change: transform, opacity;
    }

    /* Step 1: Center justify text in body */
    .welcome-step[data-step="0"] .welcome-modal-content-wrapper {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
    }

    .welcome-step[data-step="0"] .welcome-modal-header-body-wrapper {
      flex: 1 1 auto;
      justify-content: center;
      gap: 0px !important;
    }

    .welcome-step[data-step="0"] .welcome-modal-header {
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
    }

    .welcome-step[data-step="0"] .welcome-modal-body {
      justify-content: center;
      align-items: center;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      padding-top: 0 !important;
      margin-top: 0 !important;
    }

    /* Step 3: Smaller, compact layout */
    .welcome-step[data-step="2"] {
      height: auto;
      min-height: auto;
    }

    .welcome-modal-header {
      padding: 32px 32px 0 32px;
      text-align: center;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .welcome-modal-title {
      font-family: SSTProLight;
      font-size: 26px;
      font-weight: 300;
      color: #292929;
      margin: 0;
      padding: 0;
      line-height: 1.2;
    }

    /* Step 0: 36px title */
    .welcome-step[data-step="0"] .welcome-modal-title {
      font-size: 36px;
    }

    /* Step 1: 20px title */
    .welcome-step[data-step="1"] .welcome-modal-title {
      font-size: 20px;
    }

    /* Step 2 (data-step="1"): Title 32px from top, 24px gap to cards */
    .welcome-step[data-step="1"] .welcome-modal-header {
      padding: 32px 32px 16px 32px;
    }

    /* Step 2: Remove gap between header and body */
    .welcome-step[data-step="1"] .welcome-modal-header-body-wrapper {
      gap: 0;
    }

    /* Step 2: Reduce body padding */
    .welcome-step[data-step="1"] .welcome-modal-body {
      padding: 0 32px 24px 32px;
    }

    /* Step 3 (data-step="2"): Title 32px from top, no gap to description */
    .welcome-step[data-step="2"] .welcome-modal-header {
      padding: 32px 24px 0 24px;
    }

    /* Step 3: Remove gap between header and body */
    .welcome-step[data-step="2"] .welcome-modal-header-body-wrapper {
      gap: 0;
    }

    .welcome-modal-body {
      flex: 1 1 auto;
      padding: 0 32px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      min-height: 0;
      box-sizing: border-box;
      overflow: visible;
      margin: 0;
    }

    .welcome-modal-description {
      font-family: SSTProRoman;
      font-size: 16px;
      line-height: 1.5;
      color: #5B5B5B;
      text-align: center;
      margin-top: 24px;
      padding: 0;
    }

    .welcome-mode-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      margin-top: 0px;
    }

    .welcome-mode-card {
      background-color: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      padding: 24px;
      text-align: center;
      transition: box-shadow 0.2s ease;
    }

    .welcome-mode-card:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .welcome-mode-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #f5f5f5;
    }

    .welcome-mode-icon.guided-icon {
      background-color: #E3F2FD;
    }

    .welcome-mode-icon.classic-icon {
      background-color: #F3E8FF;
    }

    .welcome-mode-title {
      font-family: SSTProMedium;
      font-size: 16px;
      font-weight: 500;
      color: #000;
      margin: 0 0 8px 0;
    }

    .welcome-mode-description {
      font-family: SSTProRoman;
      font-size: 14px;
      line-height: 1.5;
      color: #363636;
      margin: 0;
      text-align: center;
    }

    .welcome-modal-footer {
      padding: 24px 32px 32px 32px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin-top: auto;
      flex-shrink: 0;
      width: 100%;
      box-sizing: border-box;
    }

    .welcome-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      min-height: 8px;
      width: 100%;
    }

    .welcome-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #d0d0d0;
      cursor: pointer;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                  height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                  border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                  background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
      display: inline-block;
    }

    .welcome-dot.active {
      width: 24px;
      height: 8px;
      border-radius: 4px;
      background-color: #0072CE;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                  height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                  border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                  background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .welcome-btn-container {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .welcome-action-btn {
      min-width: 120px;
    }

    /* Step 3: Smaller button */
    .welcome-step[data-step="2"] .welcome-action-btn {
      min-width: 100px;
      padding: 8px 20px;
      font-size: 13px;
    }

    /* Step 3: Compact modal styling - padding already set above */

    .welcome-step[data-step="2"] .welcome-modal-body {
      padding: 0 24px;
    }

    .welcome-step[data-step="2"] .welcome-modal-footer {
      padding: 16px 24px 24px 24px;
    }

    .welcome-step[data-step="2"] .welcome-modal-title {
      font-size: 22px;
    }

    /* Highlight footer mode switch button when step 3 is active */
    body.welcome-step-3-active #footer button,
    body.welcome-step-3-active #footer [role="button"],
    body.welcome-step-3-active #footer .toggle,
    body.welcome-step-3-active #footer .switch,
    body.welcome-step-3-active #footer input[type="button"],
    body.welcome-step-3-active #footer input[type="checkbox"] + label,
    body.welcome-step-3-active #footer label[for*="mode"],
    body.welcome-step-3-active #footer label[for*="Mode"] {
      animation: glowBlue 2s ease-in-out infinite;
      box-shadow: 0 0 10px rgba(0, 114, 206, 0.5),
                  0 0 20px rgba(0, 114, 206, 0.3),
                  0 0 30px rgba(0, 114, 206, 0.2),
                  0 0 0 3px rgba(0, 114, 206, 0.4);
      outline: none !important;
    }

    @keyframes glowPulse {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
      }
      10% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
      }
      20% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.05);
      }
      30% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.08);
      }
      40% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
      }
      50% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1.08);
      }
      60% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1.05);
      }
      70% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.02);
      }
      80% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
      }
      90% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.98);
      }
      100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.95);
      }
    }

    @keyframes glowBlueFadeOut {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
      }
    }

    /* More specific targeting for common footer button patterns */
    body.welcome-step-3-active #footer > * > button:last-child,
    body.welcome-step-3-active #footer > button:last-child,
    body.welcome-step-3-active #footer button[aria-label*="mode" i],
    body.welcome-step-3-active #footer button[aria-label*="Mode"],
    body.welcome-step-3-active #footer button:contains("Guided"),
    body.welcome-step-3-active #footer button:contains("Classic") {
      animation: glowBlue 2s ease-in-out infinite;
      box-shadow: 0 0 10px rgba(0, 114, 206, 0.5),
                  0 0 20px rgba(0, 114, 206, 0.3),
                  0 0 30px rgba(0, 114, 206, 0.2),
                  0 0 0 3px rgba(0, 114, 206, 0.4);
    }

    /* Target toggle switches specifically */
    body.welcome-step-3-active #footer input[type="checkbox"]:checked + label,
    body.welcome-step-3-active #footer input[type="checkbox"] + label,
    body.welcome-step-3-active #footer .toggle-switch,
    body.welcome-step-3-active #footer [class*="toggle"],
    body.welcome-step-3-active #footer [class*="switch"] {
      animation: glowBlue 2s ease-in-out infinite;
      box-shadow: 0 0 10px rgba(0, 114, 206, 0.5),
                  0 0 20px rgba(0, 114, 206, 0.3),
                  0 0 30px rgba(0, 114, 206, 0.2),
                  0 0 0 3px rgba(0, 114, 206, 0.4);
    }

    /* Target any element in footer that might be the mode switcher */
    body.welcome-step-3-active #footer *:last-child {
      position: relative;
    }

    body.welcome-step-3-active #footer *:last-child button,
    body.welcome-step-3-active #footer *:last-child [role="button"],
    body.welcome-step-3-active #footer *:last-child .toggle,
    body.welcome-step-3-active #footer *:last-child .switch {
      animation: glowBlue 2s ease-in-out infinite;
      box-shadow: 0 0 10px rgba(0, 114, 206, 0.5),
                  0 0 20px rgba(0, 114, 206, 0.3),
                  0 0 30px rgba(0, 114, 206, 0.2),
                  0 0 0 3px rgba(0, 114, 206, 0.4);
    }

    /* Direct highlight class for footer button */
    .welcome-highlight-mode-button,
    #footer .welcome-highlight-mode-button {
      animation: glowBlue 2s ease-in-out infinite !important;
      box-shadow: 0 0 10px rgba(0, 114, 206, 0.5),
                  0 0 20px rgba(0, 114, 206, 0.3),
                  0 0 30px rgba(0, 114, 206, 0.2),
                  0 0 0 3px rgba(0, 114, 206, 0.4) !important;
      outline: none !important;
      position: relative;
      z-index: 10;
    }

    /* Mode Dropdown Control Styles */
    .mode-dropdown-container {
      position: fixed;
      bottom: 14px;
      right: 16px;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .mode-dropdown-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: #000000;
      color: #CACACA;
      border: 1px solid #CACACA;
      border-radius: 4px;
      padding: 0 8px;
      width: 153px;
      height: 32px;
      font-family: SSTProRoman, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 150%;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      outline: none;
      white-space: nowrap;
      box-sizing: border-box;
    }

    .mode-dropdown-button:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .mode-dropdown-button[aria-expanded="true"] {
      background: #000000;
      color: #86BFFF;
      border-color: #86BFFF;
      border-top-color: transparent;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .mode-dropdown-button-text {
      flex: 1;
      padding-left: 0;
      text-align: left;
    }

    .mode-dropdown-button-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
      flex-shrink: 0;
      padding-right: 0;
    }

    .mode-dropdown-button-icon svg {
      display: block;
    }

    .mode-dropdown-button[aria-expanded="true"] .mode-dropdown-button-icon {
      transform: rotate(180deg);
    }

    .mode-dropdown-menu {
      position: absolute;
      bottom: calc(100% - 1px);
      right: 0;
      background: #000000;
      border: 1px solid #CACACA;
      border-bottom: none;
      border-radius: 4px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      width: calc(153px - 2px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .mode-dropdown-menu.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      border-color: #86BFFF;
    }

    .mode-dropdown-option {
      padding: 8px 8px 8px 8px;
      font-family: SSTProRoman, sans-serif;
      font-size: 16px;
      font-weight: 400;
      color: #CACACA;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
      white-space: nowrap;
    }

    .mode-dropdown-option:first-child {
      margin-top: 10px;
    }

    .mode-dropdown-option:last-child {
      margin-bottom: 12px;
    }

    .mode-dropdown-option:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .mode-dropdown-option.selected {
      background: rgba(255, 255, 255, 0.24);
      color: #86BFFF;
      border-left: 2px solid #86BFFF;
      padding-left: 6px;
    }

    .mode-dropdown-option.selected:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    /* Mode Dropdown Tooltip */
    .mode-dropdown-tooltip {
      position: fixed;
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s;
      pointer-events: none;
      display: flex;
      align-items: center;
      gap: 0;
    }

    .mode-dropdown-tooltip-content {
      background: #000000;
      border-radius: 4px;
      padding: 12px 16px;
      max-width: 300px;
      font-family: SSTProRoman, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      color: #CACACA;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    .mode-dropdown-tooltip-arrow {
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 6px solid #000000;
      margin-left: -1px;
    }

    .mode-dropdown-tooltip-arrow-bottom {
      align-self: flex-end;
      margin-bottom: 8px;
    }

    .mode-dropdown-tooltip.tooltip-above-footer {
      align-items: flex-end;
    }

    .mode-dropdown-tooltip.visible {
      opacity: 1;
      visibility: visible;
    }

    /* Glow effect for step 3 - using pseudo-element approach */
    body.welcome-step-3-active .mode-dropdown-button {
      position: relative;
    }

    body.welcome-step-3-active .mode-dropdown-button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% + 40px);
      height: calc(100% + 40px);
      background: radial-gradient(
        ellipse at center,
        rgba(134, 191, 255, 0.8) 0%,
        rgba(134, 191, 255, 0.6) 20%,
        rgba(134, 191, 255, 0.4) 40%,
        rgba(134, 191, 255, 0.2) 60%,
        rgba(134, 191, 255, 0.1) 80%,
        transparent 100%
      );
      border-radius: 8px;
      filter: blur(20px);
      z-index: -1;
      pointer-events: none;
      opacity: 0;
      animation: glowPulse 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
      animation-delay: 0.3s;
      animation-fill-mode: both;
    }

    .mode-dropdown-button.welcome-highlight-mode-button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% + 40px);
      height: calc(100% + 40px);
      background: radial-gradient(
        ellipse at center,
        rgba(134, 191, 255, 0.8) 0%,
        rgba(134, 191, 255, 0.6) 20%,
        rgba(134, 191, 255, 0.4) 40%,
        rgba(134, 191, 255, 0.2) 60%,
        rgba(134, 191, 255, 0.1) 80%,
        transparent 100%
      );
      border-radius: 8px;
      filter: blur(20px);
      z-index: -1;
      pointer-events: none;
      opacity: 0;
      animation: glowPulse 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite !important;
      animation-delay: 0.3s;
      animation-fill-mode: both !important;
    }

    /* Fade-out state for glow */
    .mode-dropdown-button.fade-out-glow::before {
      animation: glowBlueFadeOut 0.8s ease-out forwards !important;
    }

    @media (max-width: 768px) {
      .welcome-mode-cards {
        grid-template-columns: 1fr;
      }

      .welcome-modal-content {
        width: 95%;
      }

      .welcome-modal-header,
      .welcome-modal-body,
      .welcome-modal-footer {
        padding-left: 24px;
        padding-right: 24px;
      }
    }

    #contentContainer {
      display: grid;
      grid-template-columns: 0 1fr;
      width: 100%;
    }
    #contentContainer > div {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    #rightOverlay, #actionDockLeft, #actionDockRight {
      position: absolute;
    }
    #rightOverlay {
      right: 0;
      top: 60px;
      bottom: 120px;
      width: 0;
      z-index: 1;
      background-color: white;
      overflow: hidden;
      transition: all 0.2s ease;
    }
    #rightOverlay.open {
      border-left: 1px solid #d6d6d6;
      box-shadow: 0 22px 36px -16px #11224442;
      border-bottom: 10px solid #0070cc;
    }
    #actionDockLeft {
      left: 12px;
      bottom: 72px;
    }
    #actionDockRight {
      right: 12px;
      bottom: 72px;
      z-index: 1;
    }


@keyframes loading-animation {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(-90deg) scale(0.5);
    transform: rotateZ(-90deg) scale(0.5);
  }
  30%,
  70% {
    opacity: 1;
    -webkit-transform: rotateZ(0) scale(1);
    transform: rotateZ(0) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateZ(90deg) scale(0.5);
    transform: rotateZ(90deg) scale(0.5);
  }
}
.loading-indicator {
  background-color: white;
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.loading-indicator.fadeOut {
  transition: all 1s ease;
  opacity: 0;
}
.loading-indicator__triangle {
  -webkit-animation: 1s infinite loading-animation !important;
  animation: 1s infinite loading-animation !important;
  color: rgb(0, 160, 136);
}
.loading-indicator__circle {
  -webkit-animation: 1s 0.1s infinite loading-animation !important;
  animation: 1s 0.1s infinite loading-animation !important;
  color: rgb(233, 84, 111);
}
.loading-indicator__cross {
  -webkit-animation: 1s 0.2s infinite loading-animation !important;
  animation: 1s 0.2s infinite loading-animation !important;
  color: rgb(88, 128, 193);
}
.loading-indicator__square {
  -webkit-animation: 1s 0.3s infinite loading-animation !important;
  animation: 1s 0.3s infinite loading-animation !important;
  color: rgb(201, 127, 179);
}
.shape-size--regular {
  height: 24px;
  width: 24px;
  margin-bottom: 24px;
}



.modal-curtain {
  z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
}

.modal-text:last-child {
    padding-bottom: 32px;
}

.modal-close-button:before {
    content: '';
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="%235c6470" fill-rule="evenodd" clip-rule="evenodd" d="M16.0001 17.4141L22.043 23.457L23.457 22.043L17.4141 16.0001L23.4572 9.95697L22.0432 8.54297L16.0001 14.5861L9.95697 8.54297L8.54297 9.95697L14.5861 16.0001L8.54317 22.043L9.95717 23.457L16.0001 17.4141Z"></path></svg>');
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: contain;
    border-radius: 4px;
}

.modal-close-button {
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
    width: 32px;
    height: 32px;
}
.modal-close-button:hover:before {
    background-color: #f6f8fa;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="%23292929" fill-rule="evenodd" clip-rule="evenodd" d="M16.0001 17.4141L22.043 23.457L23.457 22.043L17.4141 16.0001L23.4572 9.95697L22.0432 8.54297L16.0001 14.5861L9.95697 8.54297L8.54297 9.95697L14.5861 16.0001L8.54317 22.043L9.95717 23.457L16.0001 17.4141Z"></path></svg>');
}

.modal-content.dynamic-size {
  max-width: 90%;
  min-width: 234px;
  width: auto;
}

.portal-tooltip {
  position: absolute;
  font-size: 12px;
  padding: 6px 8px;
  background-color: rgba(97, 97, 97, 0.92);
  color: white;
  border-radius: 6px;
  max-width: 300px;
  overflow-wrap: break-word;
  font-weight: 500;
}
.portal-tooltip::after {
  content: " ";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}
.portal-tooltip.below::after {
  left: 50%;
  bottom: 100%;
  margin-left: -5px;
  border-color: transparent transparent rgba(97, 97, 97, 0.92) transparent;
}
.portal-tooltip.above::after {
  left: 50%;
  top: 100%;
  margin-left: -5px;
  border-color: rgba(97, 97, 97, 0.92) transparent transparent transparent;
}
.portal-tooltip.right::after {
  right: 100%;
  top: 50%;
  margin-top: -5px;
  border-color: transparent rgba(97, 97, 97, 0.92) transparent transparent;
}
.portal-tooltip.below {
  transform: translateX(-50%) translateY(6px);
}
.portal-tooltip.above {
  transform: translateX(-50%) translateY(-100%);
}
.portal-tooltip.right {
  transform: translateY(-50%) translateX(6px);
}
.dock-button-container {
  margin: 6px;
  display: flex;
  gap: 6px;
}