/* FinanceGPT shared layout runtime styles.
 * Extracted from resources/views/layouts/wrapper.blade.php so layout HTML remains style-free. */

.loader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    .loader-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #ccc;
        animation: loader-animation 1.5s infinite;
    }
    
    .loader-circle:nth-child(2) {
        animation-delay: 0.5s;
    }
    
    .loader-circle:nth-child(3) {
        animation-delay: 1s;
    }
    
    @keyframes loader-animation {
        0%, 80%, 100% {
            -webkit-animation: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-animation: scale(1);
            transform: scale(1);
        }
    }

.loader2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        
        .loader-icon {
            width: 60px;
            height: 60px;
            animation: loader-animation2 1.5s infinite;
        }
        
        .loader-icon:nth-child(2) {
            animation-delay: 0.5s;
        }
        
        .loader-icon:nth-child(3) {
            animation-delay: 1s;
        }
        
        @keyframes loader-animation2 {
            0%, 80%, 100% {
                -webkit-animation: translateY(0);
                transform: translateY(0);
            }
            40% {
                -webkit-animation: translateY(-10px);
                transform: translateY(-10px);
            }
        }

#myVideo {
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        z-index: 1;
    }
    #myVideo2 {
        position: relative;
        right: 0;
        bottom: 0;
        max-width: 100%;
        min-height: 100%;
        z-index: 1;
    }
    #assetPerformanceChartContainer {
        min-height: 360px;
    }
    #firmPerformanceChartContainer {
        min-height: 360px;
    }
    #portfolioPerformanceChartContainer {
        min-height: 720px;
    }
    #financialPlanPerformanceChartContainer {
            min-height: 360px;
    }
     #assessmentChartContainer {
        min-height: 360px;
    }
    #financialAnalysisChartContainer {
        min-height: 360px;
    }
    #financialForecastChartContainer {
        min-height: 360px;
    }
    #heroFinancialForecastChartContainer {
        min-height: 360px;
    }
    #scenarioOriginalChartContainer {
        min-height: 360px;
    }
    #scenarioResultChartContainer {
        min-height: 360px;
    }
    #assetAllocationChartContainer {
        min-height: 360px;
    }
    #userGrowthChartContainer {
        min-height: 360px;
    }
    #sequenceContainer {
        min-height: 100px;
    }
    #equityPerformanceChartContainer {
        min-height: 360px;
    }
    /* Add a media query for mobile devices */
    @media (max-width: 767px) {
      .scrollable-table {
        /* Add overflow-x:auto to make the table horizontally scrollable */
        overflow-x: auto;
        display: block;
      }
    }
    
    /* Add a media query for tablet devices */
    @media (max-width: 1366px) {
      .scrollable-table {
        /* Add overflow-x:auto to make the table horizontally scrollable */
        overflow-x: auto;
        display: block;
      }
    }
    .scrollable-table2 {
        /* Add overflow-x:auto to make the table horizontally scrollable */
        overflow-x: auto;
        display: block;
      }
      
    .bg-generator {
      background: none;
    }

.hero-lines img:last-of-type {
  right: 10%;

  z-index: 4;
  position: absolute;
}
.hero-lines img {
  
}

.typewriter {
  overflow: hidden;
  border-right: .15em solid orange; 
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}