/* Global Styles */
/* * {
    outline: 1px solid red;
} */
@font-face {
    font-family: 'Lato'; /* Example font name */
    src: url('../fonts/Lato-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
    font-family: 'Lato';
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    --container-width: 100%;
    --container-padding: 20px;
    --margin-tiny: 6px;
    --margin-small: 12px;
    --margin-medium: 20px; 
    --margin-large: 30px;
    --margin-x-large: 60px; 
    --letter-spacing-13: -0.003em;
    --letter-spacing-14: -0.006em;
    --letter-spacing-15: -0.009em;
    --letter-spacing-16: -0.011em;
    --letter-spacing-17: -0.013em;
    --letter-spacing-18: -0.014em;
    --letter-spacing-19: -0.015em;
    --letter-spacing-20: -0.016em;
    --letter-spacing-24: -0.020em;
    --letter-spacing-button: 0.1em;
}
@media (max-width: 500px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden; /* Hide horizontal overflow */
        padding: 0 10px; /* Add padding to the edges */
    }

    /* Ensure containers fit within the viewport */
    .company-page-container,
    .sticky-search-container,
    .table-container,
    .comparison-container {
        width: 100%; /* Full width */
        max-width: 100%; /* Prevent larger widths */
        box-sizing: border-box; /* Include padding in width */
        padding: 0px; /* Add padding for mobile */
    }

    /* Make the submenu scrollable horizontally */
    .submenu {
        display:flex;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        position:sticky;
        z-index:999;
        top:0;
        overflow-x: auto; /* Allow horizontal scrolling */
        white-space: nowrap; /* Prevent text wrapping */
        /* padding-left:170px; */
        padding-bottom:0!important;
    }

    .submenu::-webkit-scrollbar{
        display:none;
    }

    .submenu-item {
        flex:0 0 auto;
        display: inline-block; /* Items stay inline */
        white-space: nowrap; /* Prevent word wrapping */
        text-align: center; /* Center-align the text */
        width: auto; /* Adjust width based on content */
    }

    /* Dropdowns */
    .dropdown-menu {
        width: 100%; /* Full width */
        left: 0; /* Align dropdown with the parent */
        transform: none; /* Remove translation for small screens */
    }

    /* Buttons and Inputs */
    .btn,
    #menu-search-input {
        /* width: 100%; Full width for inputs and buttons */
        font-size: 14px; /* Adjust font size */
    }

    /* Submenu Adjustments */
    .submenu-item {
        font-size: 12px; /* Adjust font size for small screens */
        padding: 10px; /* Add padding for better clickability */
    }

    #comparison-table::-webkit-scrollbar{
        display:none;
    }
.hidden-headline{
    display:none;
}
    /* Tables */
    #comparison-table,
    .custom-datatable {
        overflow-x: auto; /* Allow horizontal scrolling */
        display: block; /* Make tables scrollable */
        white-space: nowrap; /* Prevent text wrapping */
    }

    #comparison-table td,
    #comparison-table th {
        font-size: 12px; /* Reduce font size */
        padding: 6px; /* Reduce padding */
    }

    /* Reduce card padding for smaller screens */
    .table-card {
        padding: 8px;
    }

    /* Make cards stack vertically */
    #percentile-container {
        column-count: 1; /* Single column */
    }

    /* Chart */
    .chart-container {
        width: 100%; /* Full width */
        margin: 0 auto; /* Center the chart */
    }

    canvas.chart-comparison {
        width: 100% !important; /* Full width */
        height: auto !important; /* Adjust height */
    }
}
#percentile-container-i{
    min-height:200px;
    display:block;
}
.company-name-header-sticky {
    display: flex;
    align-items: center; /* Vertically center items */
    gap: 10px; /* Space between heading and logo */
    padding: 10px;
    justify-content: space-between;
}

#company-name-header {
    margin: 0; /* Remove default margin */
    font-size: 1.2rem; /* Adjust font size as needed */
    line-height: 1; /* Ensure vertical alignment */
}
.logo-search{
    display: inline-block;
    vertical-align: middle;
    max-height: 20px; /* Consistent with your inline style */
    width: auto; /* Maintain aspect ratio */
    padding-right:20px;
}

.logo-hamburger {
    display: inline-block;
    vertical-align: middle;
    max-height: 20px; /* Consistent with your inline style */
    width: auto; /* Maintain aspect ratio */
    /* padding-right:20px; */
}
.company-name-header-sticky{
    padding: 8px 5px; /* Add padding for better spacing */
    background-color: #F3F3F3; /* Keep background consistent */
    align-items: left;
}
.company-name-header-sticky h1{
    font-size: x-large;
    padding-left: 10px;
    font-weight: 600;
}
.submenu {
    position:sticky;
    z-index:999;
    top:0;
    padding-bottom:0!important;
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent text wrapping */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
    gap: 10px; /* Add spacing between tabs */
    padding: 4px 0; /* Add padding for better spacing */
    background-color: #F3F3F3; /* Keep background consistent */
    justify-content: flex-start; /* Align items to the left */
}

.mobile-menu-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-search, .logo-hamburger {
    cursor: pointer;
    height: 20px;
    width: 20px;
}

/* Search Bar Styles */
.search-container {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
}

.search-input-container {
    display: flex;
    align-items: center;
    padding: 10px;
}

.search-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.search-close-btn {
    margin-left: 10px;
    cursor: pointer;
}

.search-dropdown {
    background-color: white;
    border: 1px solid #ddd;
    max-height: 200px;
    overflow-y: auto;
}

.search-dropdown-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.nav-divider {
    height: 1px;
    background-color: #e5e5e5;
    margin: 8px 0;
    width: 100%;
}

/* Hamburger Menu Styles */
.hamburger-menu {
    display: none;
    position: absolute;
    top: 5%;
    right: 0;
    width: 300px;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 100000;
    padding: 15px;
}

.mobile-navigation-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    position: relative;
    background-color: #ffffff;
}

.mobile-branding-wrapper {
    display: flex;
    align-items: center;
}

.mobile-brand-logo {
    height: 30px;
    width: auto;
}

.mobile-navigation-icons-wrapper {
    display: flex;
    gap: 15px;
    align-items: center;
}
.mobilesideoptions{
    width:100%;
    color:#6d6969;
    font-size:14px;

}
.mobile-search-interface-container {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    /* top: 63.5%; */
    background: #ffffff;
    padding: 2px;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* width:85%; */
}

.mobile-search-input-wrapper {
    display: flex;
    align-items: center;
    /* border: 1px solid #e0e0e0; */
    border-radius: 6px;
    /* padding: 8px 12px; */
    background: #ffffff;
}

.mobile-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px;
    font-size: 14px;
    color: #333333;
}

.mobile-search-close-trigger {
    cursor: pointer;
    padding: 6px;
    color: #666666;
    font-size: 16px;
}

.mobile-search-results-list {
    position: absolute;
    /* top: 100%; */
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-top: none;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-top:0;
}

.mobile-search-result-item {
    display: flex;
    padding: 4px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-search-result-item:hover {
    background-color: #f8f8f8;
}

.mobile-search-result-ticker {
    font-weight: 600;
    width: 60px;
    color: #333333;
}

.mobile-search-result-company {
    flex: 1;
    color: #666666;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* gap: 10px; */
    align-items:start;
}

.menu-item {
    display: flex;
    align-items: center;
}

.menu-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.menu-icon {
    display: flex;
    align-items: center;
}

.popup-icons {
    height: 20px;
    width: auto;
}

.menu-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: start;
    border-radius: 8px;
    margin-bottom: 5px;
}

.submenu-item {
    display: inline-block; /* Keep items inline */
    white-space: nowrap; /* Prevent wrapping */
    text-align: center; /* Center align the text */
    padding: 10px 15px; /* Add padding for clickability */
    font-size: 14px; /* Adjust font size */
    color: #333!important; /* Default text color */
    cursor: pointer; /* Pointer cursor for tabs */
    transition: background-color 1s ease, color 1s ease; /* Smooth transition */
    margin-right:10px;
}

#percentile-container-i{
    min-height:100px;
}
/* Active tab styling */
.submenu-item.active {
    border-bottom: 3px solid var(--active-blue); /* Highlight active tab */
    color: var(--active-blue);
    font-weight: bold;
}
.mobileiconoptions:hover{
    background-color:#f2f8fa;
}
/* Hover effect for better UX */
.submenu-item:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Light gray hover effect */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .submenu {
        gap: 8px; /* Reduce gap for smaller screens */
        position:sticky;
        top:0;
        z-index:999;
        /* padding-left:75%; */
        padding-bottom:0!important;
    }

    .submenu-item {
        font-size: 12px; /* Adjust font size for mobile */
        padding: 8px 12px; /* Adjust padding */
    }
}

@media (min-width: 768px) {
    html {
        --margin-tiny: 8px;
        --margin-small: 16px;
        --margin-medium: 32px;
        --margin-large: 48px;
        --margin-x-large: 96px;
        --container-padding: 24px;
    }
}

@media (min-width: 992px) {
    html {
        --container-width: calc(100% );
    }
}

@media (min-width: 1200px) {
    html {
        --container-width: calc(100%);
    }
}

@media (min-width: 1400px) {
    html {
        --container-width: 100%;
    }
}

@supports (font-variation-settings: normal) {
    html {
        font-family: 'Lato'!important;
        text-rendering: optimizeLegibility;
    }
}
html {
    scroll-behavior: smooth;
  }
  
.flex-gap-32>* {
    margin-bottom: 15px;
}
.industry-title{
    width: 100% ;
    column-span: all; /* Ensures it spans across all columns */
    display: block;
    font-weight:400 ;
    /* font-size: 24px!important; */
}

.company-page-container{
    margin-bottom: 12px;
}

@media (min-width: 576px) {
    .flex-column-mobile {
        flex-direction: unset;
    }
}
@media(max-width:768px){
    #user-dropdown{
        display:none!important;
    }
    .toolkit-dropdown-container{
        display:none!important;
    }
}
@media(max-width: 900px){
.flex-column-mobile {
    display:flex;
    flex:wrap;
    flex-direction: column !important;
}
}
.flex {
    display: flex;
    flex:wrap;
    flex-direction: row;
}
.pros, .cons {
    padding: 8px 16px 0;
    border-radius: 8px;
    
}
.pros {
    border: 2px solid hsl(163, 70%, 70%);
    margin-right:15px;
}
@media(max-width:768px){
    .pros{
        margin-right:0!important;
    }
}
.title {
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
    font-weight: 600;
    letter-spacing: 0.13em;
}
p {
    margin: 0.5em 0 1em;
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
.cons{
    border: 2px  solid hsl(360, 73%, 83%);
}

body {
    overflow-x:hidden;
    font-size: 12px;
    letter-spacing: -0.011em;
    line-height: 1.56;
    font-weight: 400;
    color: var(--ink-900);
    background-color: var(--page-base);
    background-image: var(--page-base-gradient);
    min-height: 100vh;
    scroll-behavior: smooth;
    --top-nav-bg: var(--base);
    --top-nav-text: var(--ink-700);
    --sub-nav-bg: var(--stripes);
    --sub-nav-text: var(--ink-600);
    --golden-small-width: 38.19661%;
    --golden-large-width: 61.80339%;
    --base: var(--white);
    --page-base: hsl(218, 34%, 96%);
    --page-base-gradient: linear-gradient(177deg, hsla(218, 36%, 93%, 0.64) 29%, hsla(0, 0%, 100%, 0.64) 150%);
    --ink-900: hsl(240, 16%, 16%);
    --ink-700: hsl(207, 12%, 43%);
    --link: hsl(243, 93%, 67%);
    --link-hover: hsl(243, 96%, 67%);
    --border-color: hsla(216, 41%, 87%, 0.8);
}

body {
    font-family:'Lato';
    background-color: #fff;
    margin: 0;
    padding: 0;
}

/* General Styling */
.company-page-container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 10px;
    max-width: 1600px;
    margin: 0 auto;
    width:96%;
    margin-top: 20px;
    padding-right: 320px; /* Make room for the right pane */
    transition: margin-right 1s;
    -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.09);
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.09);
    font-family: 'Lato';
    padding: 10px;
    background-color:#fff;
    border-radius: 10px;
}



/* Profile Pane Enhancements */
.profile-pane-title {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
    padding: 15px;
    margin: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Close Icon Styling */
.close-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 20;
}

/* Body Blur Effect */
body.pane-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(3px);
    z-index: 5;
}
.pane-header {
    position: sticky;
    top: 10;
    background-color: white; /* Adjust as needed */
    z-index: 10;
    padding: 10px;
    padding-top: 20px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}
.pane-header {
    display: flex; /* Enable flexbox layout */
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Put the heading on the left and the button on the right */
    padding: 10px; /* Add some padding for spacing */
    border-bottom: 1px solid #ddd; /* Optional: Add a bottom border for separation */
}

.pane-header h1 {
    font-size: 20px; /* Adjust heading size */
    margin: 0; /* Remove default margin */
    flex-grow: 1; /* Allow the heading to take up available space */
}

.pane-header .btn {
    background-color: transparent; /* Optional: Make the button background transparent */
    border: none; /* Remove default button border */
    font-size: 18px; /* Adjust button font size */
    cursor: pointer; /* Change cursor to pointer for interactivity */
    padding: 5px; /* Add padding for better touch target */
}


/* .pane-scrollable-content {
    max-height: calc(100vh - 100px); /* Adjust height as needed */
    /* overflow-y: auto; */
    /* padding: 10px; */
/*} */

.fixed-header {
    margin: 0;
    font-size: 1.5em;
}

/* Stats Container Spacing */
.metrics-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Increased vertical spacing */
    padding: 15px;
}

.metrics-list-container li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.metrics-list-container li:last-child {
    border-bottom: none;
}

/* Container styling */
.add-ratio-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 600px;
    margin: 20px auto;
    padding: 10px 0;
    font-family: 'Lato';
}

/* Label styling */
.add-ratio-container label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-right: 10px;
}

/* Input box styling */
.add-ratio-container input[type="text"] {
    flex: 1;
    font-size: 14px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    transition: border-color 1s ease;
}

.add-ratio-container input[type="text"]:focus {
    border-color: #007bff;
}

/* Edit Ratios button/link styling */
.add-ratio-container a.edit-ratios {
    font-size: 14px;
    font-weight: 600;
    color: #6c63ff; /* Vibrant blue */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.add-ratio-container a.edit-ratios:hover {
    text-decoration: underline;
}

.add-ratio-container a.edit-ratios .icon {
    font-size: 14px;
}

/* Right Pane Styling */
.right-pane {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 30%;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    padding: 20px;
    overflow-y: auto;
}
.right-pane.open{
    right:0;
    z-index:10000;
}

.right-pane-content {
    font-family: 'Lato';
    font-size: 14px;
    color: #333;
}

#close-pane-btn {
    display: inline-block;
    padding-bottom: 25px ;
    padding-right:30px;
    /* background-color:#645DF9; */
    color: hsl(207deg 12% 43% / 80%);;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    max-width: 20px;
    max-height: 10px;
    box-shadow: none;
}

.ink-600 {
    color:hsl(207deg 12% 43% / 80%);
}

/* Blurred Background*/
.blurred {
    filter: blur(5px);
    pointer-events: none;
} 

/* Expand icon styling */
.expand-icon {
    cursor: pointer;
    font-size: 14px;
    color: #645dF9;
    margin-top: 10px;
}



/* Container Styling */
.custom-datatable-container {
    flex: 1;
    min-width: 200px;
    margin: 20px auto;
    padding: 20px;
    max-width: 800px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.metrics-grid-container {
    display: grid !important;
    max-width: 100%;
    width: auto;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 16px; /* Spacing between cells */
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgbs(0,0,0,0.1);
    border: 1px solid #e5e5e5;
    background-color: #fff;
    padding: 16px;
}

.metrics-grid-item {
    display: flex;
    justify-content: space-between; /* Align text to both edges */
    align-items: center; /* Center vertically */
    padding: 8px 12px; /* Spacing inside items */
    background-color: #f9f9f9; /* Light gray background */
    border-radius: 4px; /* Rounded corners for items */
    font-size: 14px;
    font-family: 'Lato';
    color: #333; /* Dark text */
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    text-align: center;
    overflow: hidden; /* Hides overflowing content */
    text-overflow: ellipsis; /* Adds ellipsis to overflowing text */
    white-space: nowrap; /* Prevents text wrapping */
}

.metrics-grid-item span.key {
    font-weight: bold;
    font-size: 14px;
}

.metrics-grid-item span.value {
    font-weight: bold;
    display: block;
    color: #555;
}

/* Table Styling */
.custom-datatable {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Lato';
    font-size: 15px;
    color: #333;
    background-color: white;
    overflow-x: auto;
}

/* Body Rows */
.custom-datatable tbody tr {
    border-bottom: 1px solid #ddd;
}

/* Default desktop view (every 3rd row colored) */
#top-ratios li:nth-child(6n + 4), 
#top-ratios li:nth-child(6n + 5), 
#top-ratios li:nth-child(6n) {
    background-color: #F8F8FC; /* Light gray background for rows 2, 4, 6, etc. */
}

/* Responsive alternate row coloring for mobile */
@media screen and (max-width: 768px) {
    #top-ratios li:nth-child(even) {
        background-color: #fff; /* Light gray background for every even row */
    }
    #top-ratios li:nth-child(odd){
        background-color: #fff;
    }
}

/* Optional: Add padding and borders to li for better appearance */
#top-ratios li {
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-bottom: 1px solid #eaeaea; /* Optional: Add a subtle border between rows */
    font-size: 14px;
    color: #333;
    border-radius: 4px;
}
@media (min-width: 992px) {
    #top-ratios {
        font-size: 1.5rem;
    }
}
@media (min-width: 768px) {
    #top-ratios {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 24px;
    }
}
#top-ratios {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    color: var(--ink-700);
    padding-top:10px;
}
@media (min-width: 1200px) {
    .company-profile .about {
        flex-basis: 72px;
    }
}


@media (min-width: 992px) {
    .company-profile .about {
        flex-basis: 90px;
    }
}
.company-profile .about {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}
.show-more-box, .always-show-more-box {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 220px;
    position: relative;
    overflow: hidden;
    max-width:500px;
}
.sub {
    color: hsl(207, 12%, 43%);
}

p {
    margin: 0.5em 0 1em;
}
user agent stylesheet
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}



.custom-datatable tbody td {
    padding: 12px;
    text-align: left;
}

/* Responsive Design */
@media (max-width: 768px) {
    .custom-datatable-container {
        padding: 10px;
    }

    .custom-datatable tbody td {
        font-size: 14px;
    }

    .custom-datatable thead th {
        font-size: 15px;
    }
}

/* Header Section */
.company-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
}

/* Style for company header */
.company-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
    gap: 20px; /* Add spacing between elements */
}
.company-profile .title {
    margin-top: 16px;
}

.company-title h1 {
    margin: 0;
    font-size: 34px;
    color: #333;
    font-weight: bold;
    
}

/* @media (max-width: 768px) {
    .bottom-pane {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background-color: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 20px;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 1s ease-in-out;
    }

    .bottom-pane.open {
        transform: translateY(0); 
    }

    #close-pane-btn {
        background-color: #645DF9;
        color: #fff;
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
} */
 /* General Pane Styling */
.pane {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 10000;
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    padding-top:0;
    overflow-y: auto;
    transition: all 1s ease-in-out;
}
.pane::-webkit-scrollbar {
    display: none; /* Hide default scrollbar for cleaner design */
  }
  
/* Right Pane Styling */
.right-pane {
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    position:fixed!important;
}

/* Bottom Pane Styling */
.bottom-pane {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 85%;
}

/* Pane Content Styling */
.pane-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pane-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.pane-content .btn {
    align-self: flex-end;
    /* background-color: #645dF9; */
    color: white;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 4px;
}

.pane-content .btn:hover {
    background-color: #0056b3;
}

/* Blurred Background
/* .blurred > *:not(.right-pane) {
    filter: blur(5px); /* Apply blur effect */
    /* pointer-events: none; /* Prevent interaction */
/* }   */

.blurred :not(.right-pane) {
    filter: blur(5px);
    pointer-events: none;
}
.blurred-header {
    filter: blur(5px);
  }

/* Responsive Behavior */
@media (max-width: 700px) {
    .right-pane {
        display: none !important; /* Disable right pane */
    }
    /* .bottom-pane {
        display: block;
    } */
}



.price-style {
    font-size: 14px;
    color: #747385; /* Blue hue for price */
    font-weight: 600;
    margin-left: 0px;
    margin-right: 30px;
    display: inline-block;
    padding: 5px 0px;
    border-radius: 5px;
}

.dropdown-section {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between input and button */
    margin-top: 20px;
}

.dropdown-typeahead {
    position: relative;
    max-width: 400px; /* Adjust width for better appearance */
    flex-grow: 1;
}


.dropdown-typeahead input {
    width: 93%;
    padding: 12px;
    border: 1px solid #007bff; /* Blue border */
    border-radius: 6px;
    outline: none;
    font-size: 14px;
    transition: all 1s ease;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2); /* Subtle shadow */
}

.dropdown-typeahead input:focus {
    border-color: #0056b3; /* Darker blue on focus */
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
}

.btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #645DF9;
    background-color: #fff;
    cursor: pointer;
    border-color: #fff;
    border-bottom: #fff;
    border-right: #fff;
    /* transition: background-color 1s ease, box-shadow 1s ease; */
}

.btn-primary:hover {
    background-color: #645DF9; /* Darker blue on hover */
}

.company-title h1 {
    margin: 0;
    font-size: 34px;
    color: #333;
    font-weight: bold; /* Make the company name bold */
}

.company-title a {
    display: block;
    color: #007BFF;
    text-decoration: none;
    margin-top: 5px;
}

/* #ticker-exchange {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
} */

.about-section {
    background-color: #fff;
    padding: 15px;
    position: relative;
    flex: 0 0 30%; /* Ensures it takes 30% width of the container */
    margin-right: 20px; /* Optional spacing between About Section and DataTable */
}

/* Component Styles */
ul {
    list-style: disc;
    padding-left: 16px;
}

#pros-list li {
    /* margin-bottom: 15px; */
    font-size: 14px;
    margin-bottom: 7px;
}
#cons-list li {
    font-size: 14px;
    margin-bottom: 7px;
}

#top-ratios {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    color: var(--ink-700);
}

@media (min-width: 768px) {
    #top-ratios {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 24px;
    }

    #top-ratios li {
        background: var(--stripes);
        /* border-radius: 6px; */
        border: none;
        padding: 8px;
    }

}
.dropdown-content-search{
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none; /* Initially hidden */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.toolkit-menu-item {
    margin-top: 5px;
    position: relative;
  }

  .toolkit-menu-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 8px;
    transition: background-color 0.2s;
    border-radius: 4px;
    font-size: 12px;
    color: #6d6969;
    position: relative;
  }

  .toolkit-menu-item a:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .toolkit-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }

  .toolkit-icon {
    height: 20px;
    width: 20px;
    object-fit: contain;
  }

  .toolkit-dropdown {
    display: none;
    position: fixed;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 4px;
    min-width: 200px;
    z-index: 1000;
    padding-left: 0!important;
    transition: opacity 0.3s;
    opacity: 1;
  }

  .toolkit-has-dropdown:hover + .toolkit-dropdown,
  .toolkit-dropdown:hover {
    display: block;
  }

  .toolkit-menu-item:hover .toolkit-dropdown {
    display: block;
  }

  .toolkit-dropdown-item {
    padding: 8px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #6d6969;
    font-size: 12px;
    white-space: nowrap;
    padding-left: 0;
  }

  .toolkit-dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .toolkit-has-dropdown {
    cursor: default;
  }

  .toolkit-has-dropdown::after {
    content: '›';
    margin-left: auto;
    font-size: 18px;
    color: #6d6969;
  }

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none; /* Initially hidden */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-content li {
    padding: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.dropdown-content li:hover {
    background-color: #f4f4f4;
}
/* find here*/

@media (min-width: 1200px) {
    #top-ratios li {
        padding: 4px;
    }
}

.card {
    background: var(--base);
    box-shadow: 0 16px 20px -24px hsla(219, 37%, 18%, 0.24);
    margin-bottom: var(--margin-medium);
    padding: var(--container-padding);
    border-radius: var(--card-radius);
}

@media (min-width: 992px) {
    .card.card-large {
        --card-radius: 16px;
        box-shadow: 0 23px 20px -24px hsla(219, 37%, 18%, 0.24);
    }
}

/* Utility Classes */
.flex {
    display: flex;
}

.flex-space-between {
    justify-content: space-between;
}
.gap-8{
    gap:8px;
}
.flex-align-center{
    align-items:center;
}
.flex-gap-8 {
    margin: -4px;
}
.line-height-1
{
    line-height:1;
}

#about-text {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 10px;
    overflow: hidden;
}

#more-text {
    color: #666;
}

.btn.read-more {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.btn.read-more:hover {
    background-color: #0056b3;
}

.tablecontainer{
    border: 1px solid #eaeaea;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */

}
/* Grid Layout for Metrics + About */
.table-and-about {
    display: flex;
    width: 100%;
    gap: 20px; /* Adds space between the sections */
    /* align-items: stretch; Ensures both sections are the same height */
}

.datatable-section {
    flex: 0 0 70%; /* Ensures DataTable takes 70% width */
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.datatable-card {
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.datatable-card h4 {
    font-size: 20px;
    color: #666;
    margin-bottom: 8px;
}

.datatable-card p {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.datatable-card .metric-unit {
    font-size: 14px;
    color: #888;
}

@media (max-width: 768px) {
    .datatable-section {
        flex: 0 0 100%; /* Stacks sections on smaller screens */
    }

    .datatable-card {
        text-align: left;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .table-and-about {
        flex-direction: column; /* Stack About and DataTable sections on small screens */
    }

    .follow-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .follow-buttons .btn {
        width: 100%;
        margin-top: 5px;
    }
}
@media (min-width: 700px) {
    .company-info {
        flex-direction: column-reverse;
    }
}
@media (min-width:1200px){
.company-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap:20px;
    flex-direction: row;
}
}
@media (min-width: 1200px) {
    .company-profile {
        width: 33%;
        max-width: 400px;
        padding: 24px 16px 16px 48px;
        font-size: 1.5rem;
    }
}
label, legend {
    display: block;
    margin-top: 10px;
    font-weight: 500;
}
.flex-wrap{
    flex:wrap;
}
.edit-columns-first-pane{
    background-color: transparent;
    /* background-color:#f8f8fc; */
    border:none;
    font-weight:600;
    border-radius:8px;
}
.search-bar{
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
@media (min-width: 992px) {
    .company-profile {
        width: 244px;
        max-width:450px;
        padding: 12px 0 16px 24px;
        box-sizing: border-box;
        font-size: 1.4rem;
    }
}
@media (min-width:768px){
    .company-profile{
        max-width: 500px;
    }
}
.company-profile {
    display: flex;
    flex:1;
    flex-direction: column;
}
.flex-column {
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    
}

.flex {
    display: -ms-flexbox;
    display: flex;
    align-items: stretch;
}
.company-ratios {
    flex:1;
    max-width:100%;
    margin-top: 24px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 24px 16px;
    font-size: 1.5rem;
    letter-spacing: var(--letter-spacing-15);
}

@media (min-width: 992px) {
    .company-ratios {
        flex-grow: 1;
        max-width: 100%;
    }
}

.about-section.title{
    margin-top: 16px;
}
.title{
    text-transform:uppercase;
    font-feature-settings: "cpsp" on;
    font-weight: 600;
    font-size:14px;
}
.about-section {
    background-color: #fff;
    padding: 0px; /* Add padding for consistency */
    padding-left: 10px;
    margin-top: 0px;
    position: relative;
    flex: 0 0 30%;
    margin-right: 20px;
}

.about-section, .key-points-section {
    margin-bottom: 20px;
}

h1 { font-size: 32px; } 
h2 { font-size: 24px; } 
h3 { font-size: 18.72px; font-weight:400} 
h4 { font-size: 16px; }
h5 { font-size: 13.28px; }
h6 { font-size: 10.72px; }
.tabs-section {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.tab-btn {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
    cursor: pointer;
}

.tab-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

body {
    font-family:'Lato' !important;
}

.profitability-rank-container {
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
}

.rank-score {
    background-color: #28a745;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
}

.profitability-table {
    width: 100%;
    border-collapse: collapse;
}

.profitability-table th, 
.profitability-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.profitability-table th {
    background-color: #f9f9f9;
    font-weight: bold;
}

.bar-container {
    position: relative;
    height: 10px;
    background-color: #e0e0e0;
    /* border-radius: 5px; */
    overflow: hidden;
    width: 100%;
}

.bar {
    height: 100%;
    /* border-radius: 5px; */
}

.bar.green {
    background-color: #28a745;
}

.bar.yellow {
    background-color: #ffc107;
}

.bar.red {
    background-color: #dc3545;
}

/* Tooltip styling */
.bar-container:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -30px;
    left: 0;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bar-container:hover::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

/* Main container styling */
#percentile-container {
    column-count: 2; /* Create a two-column masonry layout */
    column-gap: 20px; /* Space between columns */
    /* padding: 10px; */
    width: 100%;
}

/* Individual table card styling */
.table-card {
    break-inside: avoid; /* Prevent cards from splitting across columns */
    page-break-inside: avoid; /* Fallback for older browsers */
    margin-bottom: 20px; /* Space between cards vertically */
    display: inline-block; /* Allow cards to flow within columns */
    width: 100%; /* Full width within column */
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    border: 1px solid #ececec;
    padding: 8px;
    box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    #percentile-container {
        column-count: 1; /* Single column on smaller screens */
    }
}
.metric-details{
    font-size:14px;
}
.tooltip-header h3{
    font-size: 14px;
    font-weight:600;
}
/* Rest of the previous styling remains the same */
.table-header {
    display: flex;
    width:100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.table-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
    font-weight: 400;
}

.percentile-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Lato';
    font-size: 12px;
    color: #333;
}

.mobile-download-dropdown.show{
    display: block;
}
@media(max-width:768px){
    #Operating-metrics{
        height:650px;
    }
}

.dropdown-option-tickers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
}

.ticker-column {
    font-weight: bold;
    margin-right: 10px;
}

.company-column {
    flex-grow: 1;
    text-align: left;
    flex-wrap:wrap;
}
/* Other previous styles remain unchanged */
 
.percentile-table td {
    padding-top:5px;
    padding-left:5px;
    padding-bottom:5px;
    border-top: 1px solid  #e9e9e9;
}

.percentile-table .bar-container {
    position: relative;
    height: 10px;
    background-color: #e9ecef;
    /* border-radius: 5px; */
    overflow: hidden;
}

.percentile-table .bar {
    height: 100%;
    /* border-radius: 5px; */
}

.percentile-table .bar.green {
    background-color: #28a745;
}

.percentile-table .bar.yellow {
    background-color: #ffc107;
}

.percentile-table .bar.red {
    background-color: #dc3545;
}

.metric-name {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content:space-between;
}

.info-icon {
    margin-left: 5px;
    font-size: 0.8em;
}
@media (max-width: 500px) {
    .percentile-tooltip {
        display: none;
    position: fixed;
    top: 50%;
    left: 50%!important;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 90%;
    max-width: 400px!important;
    max-height: 80vh;
    overflow: auto;
    padding: 15px;
    }
}
.percentile-tooltip {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 10000;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: auto;
    padding: 15px;
}

.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.tooltip-close {
    cursor: pointer;
    font-size: 1.5em;
    color: #888;
}

.tooltip-content {
    margin-top:5px;
    display: flex;
    flex-direction: column;
}

.historical-chart {
    margin-top: 15px;
    /* height: 300px; */
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9990;
}
.overlays {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9990;
}
.sticky, .sticky-2 {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 1;
}
:root {
    --main-menu-bg: #002a45;
    --submenu-bg: #F3F3F3;
    --active-blue: #0066cc;
}
.header-page-sticky{
    position: sticky!important;
    z-index:999;
    width:100%;
}
body {
    margin: 0;
    font-family: 'Lato';
}
.header-main-menu{
width:100%!important;
position:sticky!important;
background-color: #f3f3f3;
}
.main-menu-mobile-view {
    background-color:#002a45 ;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    padding-left:0px;
    color: white;
    z-index:999;
}

.main-menu {
    background-color:#002a45 ;
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 5px 10px;
    color: white;
    z-index:999;
}
.chart-to-table{
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    background-color: #f0f0f0;
}
.bqlogo {
    width: auto;
    height: 26px !important;
}
.bqLogod{
    height:20px;
}
@media(max-width:400px){
    .bqLogod{
    height:15px;
    }
}

.search-container {
    display: none;
    align-items: center;
    border-radius:8px;
}


#ticker-search {
    padding: 8px;
    margin-right: 10px;
    border-radius: 4px;
}

#ticker-dropdown {
    padding: 8px;
    border-radius: 4px;
}

.auth-container .btn {
    margin-left: 10px;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 4px;
}

.btn-login {
    background-color: transparent;
    border: 1px solid white;
    color: white!important;
    border-radius:4px;
    margin-right:6px;
    text-decoration:none;
}

.btn-signup {
    width: max-content;
    background-color: #fff;
    color: #002a45;
    border: 1px solid #002a45;
    border-radius: 4px;
    display:flex;
    text-decoration:none;
}
/* Dropdown container */
.user-dropdown {
    position: relative; /* Changed to relative to better control child positioning */
    display: inline-block;
}
.main-menu-centralbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px; /* Adds some space between the two containers */
    width: max-content;
    /* padding: 10px; */
    padding-top:0px;
    padding-bottom:0px;
    /* background-color: #f8f9fa; Light background for visual separation */
}
/* Toolkit Dropdown Container */
.toolkit-dropdown-container {
    position: relative;
    display: inline-block;
}
    /* text-decoration: underline; */

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: none!important;
}

a.button {
    text-decoration: none!important;
}

a.button:hover {
    text-decoration: none!important;
}

/* Dropdown Button (Transparent Top Bar with White Text) */
.toolkit-dropdown-button {
    background-color: transparent;
    color: white;
    border: none;
    padding: 5px 5px;
    font-size: 15px;
    cursor: pointer;
    width:140px;
    /* text-transform: uppercase; */
}


/* Dropdown Menu */
.toolkit-dropdown-menu {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 220px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
    width:max-content;
    font-family:Lato;
}

/* Dropdown Menu Items (Links) */
.toolkit-dropdown-menu a {
    color: black;
    padding: 10px 15px;
    text-decoration: none;
    display: flex;
    font-size: 12px;
}

.toolkit-dropdown-menu a:hover {
    background-color: #f0f0f0;
}

/* Show Dropdown Menu on Hover */
.toolkit-dropdown-container:hover .toolkit-dropdown-menu {
    display: block;
}


/* Dropdown content */
.dropdown-content-main-menu {
    display: none;
    position: absolute;
    background-color: #ffffff; /* Clean white background */
    min-width: 200px; /* Slightly wider for better readability */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    left: 100%; /* Align to the left */
    transform: translateX(-100%); /* Ensure dropdown opens to the left */
    border-radius: 8px; /* Add rounded corners */
    overflow: hidden; /* Prevent content from overflowing */
    border: 1px solid #ddd; /* Add a subtle border */
    transition: opacity 1s ease-in-out, visibility 1s linear 1s;
}

/* Dropdown content visibility on click */
/* .user-dropdown:hover .dropdown-content-main-menu,
.user-dropdown:focus-within .dropdown-content-main-menu {
    display: block;
} */

/* Individual dropdown items */
.dropdown-content-main-menu a {
    color: black;
    padding: 10px 15px;
    text-decoration: none;
    display: flex;
    font-size: 12px;
}
#chartjs-tooltip {
    z-index: 1000;
    pointer-events: auto;
    transition: all .1s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
/* Hover effect for dropdown items */
.dropdown-content-main-menu a:hover {
    background-color: #f0f0f0;
}
@media (min-width: 769px) {
.company-name-header-sticky{
    display:none;
}
}
@media (min-width: 768px) {
    .main-menu{
        position:relative!important;
        align-items: center;
        justify-content: center;
    }
}

/* Dropdown content alignment fix for small screens */
@media (max-width: 768px) {
    .dropdown-content {
        display:none;
        left: auto; /* Let dropdown adjust naturally */
        right: 0; /* Align dropdown to the right for small screens */
        transform: none; /* Remove left-side offset */
    }
    .period-buttons button{
        padding: 8px 10px;
        border:#F3F3F3;
        background-color: #f9f9f9;
        margin-right:0px!important;
        width:100%!important;
    }
    .period-buttons-mobile button{
        padding: 8px 10px;
        border:#F3F3F3;
        background-color: #f9f9f9;
        margin-right:0px!important;
        width:100%!important;
    }
    .company-title h1{
        display: none;
    }
    .chart-layout .period-buttons-mobile{
        display: flex !important;;
    }
    .top-controls .period-buttons{
        display:none;
    }
    

}

.chart-layout .period-buttons-mobile{
    display:none;
}

.period-buttons{
    background-color: #F3F3F3;
    margin-bottom:4px;
    display: flex;
    align-items: center;
    border: none;
    /* border-radius: 5px; */
    background: #f9f9f9;
    flex-direction:row;
}
.period-buttons-mobile{
    background-color: #F3F3F3;
    margin-bottom:4px;
    display: flex;
    align-items: center;
    border: none;
    /* border-radius: 5px; */
    background: #f9f9f9;
    flex-direction:row;
}

.submenu {
    background-color: #F3F3F3;
    display: flex;
    justify-content: flex-start;
    top: 0;
    z-index: 999;
    position:sticky;
    /* padding-left:8%; */
    justify-content: center;
    -webkit-box-shadow: 0px 3px 3px -1px rgba(0,0,0,0.09);
    -moz-box-shadow: 0px 3px 3px -1px rgba(0,0,0,0.09);
    box-shadow: 0px 3px 3px -1px rgba(0,0,0,0.09);
}
@media(max-width:768px){
    .submenu{
    padding-left:0px !important;
    }
}

.submenu-item {
    padding: 5px;
    text-decoration: none;
    color: #333;
    position:relative;
    transition: all 1s ease;
    text-align:center;
    font-size:14px;
}

.submenu-item.active {
    border-bottom: 3px solid var(--active-blue);
    color: #0003cc;
}

.submenu-item:hover {
    background-color: rgba(0,0,0,0.05);
}
/* Existing styles... */
/* Styling for the user-dropdown container */
.user-dropdown {
    position: relative;
    display: inline-block;
}

/* Styling for the dropdown button */
.styled-dropdown {
    background-color: transparent; /* Transparent background */
    border: 2px solid white; /* White border */
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    color: white; /* White text */
    display: flex;
    align-items: center;
}

/* Add hover effect to the button */
.styled-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Slightly lighter on hover */
    border-color: #f5f5f5;
}

/* Styling for the dropdown content */
.dropdown-content-main-menu {
    display: none;
    position: absolute;
    /* background-color: rgba(0, 0, 0, 0.8); Semi-transparent black */
    min-width: 200px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    border: 1px solid white; /* White border */
    border-radius: 5px;
    margin-top: 5px; /* Add space between button and dropdown */
    left: 100%; /* Align with the button's left edge */
    top: 100%; /* Position directly below the button */
}

/* Show dropdown content when hovering over the button */
.user-dropdown:hover .dropdown-content-main-menu {
    display: block;
}

/* Styling for links inside the dropdown */
.dropdown-content-main-menu a {
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 12px;
    /* color: white; White text */
}
.dropdown-content-main-menu a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    display:block;
  }
/* Add hover effect for links */



/* User icon styles */
.user-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: white;
    font-weight: bold;
}

.button.button-secondary, button.button-secondary, input[type="submit"].button-secondary, input[type="button"].button-secondary {
    color:hsl(243, 93%, 67%);
    border-color: hsl(243, 93%, 67%);
    background-color:hsl(0, 0%, 100%);
}
body {
    font-family:'Lato';
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

.table-container {
    /* max-width: 1200px;
    margin: 20px auto; */
    padding: 5px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ececec;
}



/* .sector-info {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
} */

.table-wrapper {
    overflow-x: auto;
}

/* #peer-comparison {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    table-layout: fixed;
}

#peer-comparison th,
#peer-comparison td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: 14px;
    white-space: nowrap;
}

#peer-comparison th {
    background-color: #f4f4f4;
    font-weight: bold;
} */

.fixed-column {
    position: sticky;
    left: 0;
    background: #f4f4f4;
    z-index: 10;
}

#edit-columns {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}

#edit-columns:hover {
    background-color: #45a049;
}

@media (max-width: 768px) {

    #edit-columns {
        width: 100%;
        padding: 10px;
        text-align: center;
    }
}
@media (max-width: 928px) {
    .main-menu{
        display:none;
    }
}
.percentile-table-width{
    width:20%;
}
@media (max-width:768px){
    .percentile-table-width{
        width:15%;
    }
}
/* tr {
    transition: background-color 1s ease;
} */

tr:hover {
    background-color: #f2f7fa!important; /* Soft blue with transparency */
    cursor: pointer; /* Optional: changes cursor to indicate interactivity */
}
.fsp-table tr:hover .fsp-frozen-column {
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    background-color: #f2f7fa!important; /* Soft blue with transparency */
    cursor: pointer; /* Optional: changes cursor to indicate interactivity */
}

/* Optional: Add a subtle shadow on hover for more depth */
/* tr:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} */
/* #hover-percentile-table:hover{
    background-color: #f2f7fa;
} */

.logo-container-mobile{
    padding-left:10px;
}

.logo-container{
    width:max-content;
    /* padding-left:130px; */
}
.main-menu-desktop-sidebar{
    display:flex;
    flex-wrap:wrap;
}
/* Sticky Search Container */
.sticky-search-container {
    background-color:white;
    width:350px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height:41px;
    flex-wrap:wrap;
    /* width: 480px; /* Ensure it doesn't elongate */
    /* max-width: 600px; Set a reasonable maximum width for the search bar */
    /* margin: 0 auto; Center the search bar */ 
    border-radius:3px;
}
.expandable-search {
    width: 150px; /* Initial small width */
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    transition: width 0.3s ease; /* Smooth transition for width change */
}

.expandable-search:focus {
    width: 100%; /* Expands to full width of container */
}

/* Search Input Styling */
#menu-search-input {
    padding: 8px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    width:320px;
    height:100%;

}

@media (min-width:928px){
    .main-menu-mobile-view{
        display:none;
    }
}

.mobile-dropdown-menu li{
    display:flex!important;
    font-size: 14px;
    padding: 5px;
}
.mobile-dropdown-menu-drop-down li{
    display:flex!important;
    font-size: 14px;
    padding: 5px;
}
/* Dropdown Styling */
#menu-metrics-dropdown {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    display: none; /* Initially hidden */
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* width: 50%; Match the width of the input */
    position: absolute; /* Position relative to the input field */
    z-index: 1000;
    top:100%;
    left:0;
    width:350px;
}

/* Dropdown Option Styling */
#menu-metrics-dropdown .dropdown-option-tickers {
    padding: 5px;
    cursor: pointer;
    font-size: 14px;
    color: #333; /* Ensure text is visible */
    background-color: #fff; /* White background for contrast */
    margin-bottom:0px!important;
}

#menu-metrics-dropdown .dropdown-option-tickers:hover {
    background-color: #f0f0f0;
}

/* Prevent Elongation of Search Bar */
.sticky-search-container > * {
    /* width: 100%;
    max-width: 100%; */
    margin: 0;
}


/* chart comparison section*/
.chart-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Add spacing between elements */
}

.chart-layout {
    display: flex;
    flex-direction: column;
}

.period-buttons {
    display: flex;
    margin-left:2%;
}
.period-buttons-mobile {
    display: flex;
    margin-left:2%;
}

/* Media query for mobile view */
@media (max-width: 768px) {
    .table-header h3 {
        margin: 0;
        font-size: 16px !important;
        color: #333;
        font-weight: 400 !important;
    }
    h2 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
        font-weight: 400 !important;
        color: #333 !important;
      }
    
    .chart-box-1 h3, .chart-box-2 h3, .chart-box-3 h3 {
        font-weight:400 !important;
    }

    
    
    .chart-layout {
        flex-direction: column-reverse; /* Shift period buttons below the canvas */
    }

    .period-buttons {
        margin-top: 15px; /* Add spacing above the period buttons */
    }
    .period-buttons-mobile{
        margin-top:15px;
    }

    canvas.chart-comparison {
        width: 100%; /* Ensure canvas is responsive */
        font-size:10px!important;
    }
}

.comparison-chart{
    height: 300px;
}
@media (min-width: 769px) {
canvas.chart-comparison{
    /* width: 90%!important; */
    height: 500px!important;
    align-items:center;
    font-size:12px!important;
    /* margin-left: 60px; */

  }
}
  
body {
    font-family: 'Lato';
    background-color: #fff;
    padding: 0px;
  }
  
  .chart-container {
    margin: 0;
    justify-content: center;
  }
  
  .top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:2%;
    margin-left:0;
    margin-bottom:0;
  }
  @media (min-width: 769px) {
    .period-buttons button{
        border:#F3F3F3;
    padding: 8px 15px;
    cursor: pointer;
    /* border-radius: 4px; */
        background-color: #f9f9f9;
        font-size:14px;
    }
    .period-buttons-mobile button{
        border:#F3F3F3;
    padding: 8px 15px;
    cursor: pointer;
    /* border-radius: 4px; */
        background-color: #f9f9f9;
        font-size:14px;
    }

  }

  .right-options button {
    border:#F3F3F3;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
  }
  
  .period-buttons button.active,.period-buttons-mobile button.active .button-group-container-mobile.btn.active,
  .right-options button:hover {
    color: black;
    border-bottom:3px solid var(--active-blue);
  }
  .time-dropdown {
    display: none; /* Hidden by default */
  }
  
  .time-buttons {
    display: flex;
    gap: 8px;
  }
  
  @media (max-width: 768px) {
    .time-buttons {
      display: none; /* Hide buttons on smaller screens */
    }
  /* Style the dropdown container */
.time-dropdown {
    display: block; /* Ensure it displays as a block element */
    width: 30%; /* Adjusts to container width */
    max-width: 300px; /* Optional: set a max width */
    padding: 10px; /* Add some padding for better usability */
    font-size: 16px; /* Adjust font size for readability */
    color: #000; /* Text color */
    background-color: #f0f0f0; /* Grey background */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
    appearance: none; /* Remove default browser styling */
    outline: none; /* Remove focus outline */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 1s ease; /* Smooth hover effect */
  }
  
  /* Hover effect for the dropdown */
  .time-dropdown.option:hover {
    background-color: #6464f9; /* Change background to the hover color */
    color: #fff; /* White text for better contrast */
  }
  
  /* Optional: Style the dropdown arrow (for webkit-based browsers) */
  .time-dropdown::-webkit-scrollbar {
    display: none; /* Hide default scrollbar for cleaner design */
  }
  
  .time-dropdown:focus {
    box-shadow: 0 0 5px rgba(100, 100, 249, 0.8); /* Add a glow effect on focus */
  }
  
  }
  
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 1000;
  }
  
  .dropdown-menu button {
    display: block;
    width: 100%;
    padding: 8px 15px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
  }
  
  .dropdown-menu button:hover {
    background: #f1f1f1;
  }
  
  .dropdown:hover .dropdown-menu {
    display: block;
  }
  body {
    font-family: 'Lato';
    background-color: #fff;
    margin: 0;
    padding: 0px;
  }


  /* General Styles for the Table */
.comparison-container {
    font-family:'Lato';
    font-size: 14px;
    color: #333;
    margin: 0px;
    margin-top: 0;
  }
  .comparison-container .button-edit{
    display:none;
  }
  @media screen and (max-width: 768px) {
    .comparison-container .button-edit{
        display:block;
        margin-top: 2%;
        margin-bottom: 10%;
      }
      .comparison-container .desktop-button{
        display:none;
      }
  }

  h2 {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 400;
    color: #333;
  }
  
  .sector-industry span {
    font-size: 14px;
  }
  
  .sector-industry a {
    color: #6464f9;
    text-decoration: none;
  }
  
  .edit-columns {
    float: right;
    background-color: #f9f9f9;
    color: #6464f9;
    border: 1px solid #ddd;
    padding: 10px 10px;
    height:fit-content;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 1s ease;
  }
  .table-card td.numeric,.table-card th.numeric {
    text-align: right; /* Right align for numeric data */
}
  .edit-columns:hover {
    background-color: #ececec;
  }
  
  
  #comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }
  
  #comparison-table thead {
    background-color: #f9fafc;
  }
  .text-right{
    text-align:right;
    padding-right:20px;
  }
  .text-left{
    text-align:left;
  }
  #comparison-table th {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    color: #999; /* Light gray color for headings */
    font-weight: normal;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
  }
  
#comparison-table th:nth-child(2),
#comparison-table td:nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 2; /* Ensure they are above other cells */
  background-color: #f9fafc; /* Match the table's background */
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for visual separation */

  /* background-color: white; */
}
#comparison-table tbody tr:nth-child(even) td:nth-child(2) {
    background-color: #f9fafc; /* Light gray for odd rows in the second column */
}

#comparison-table tbody tr:nth-child(odd) td:nth-child(2) {
    background-color: #ffffff; /* White for even rows in the second column */
}
#comparison-table tbody tr:nth-child(even) td:nth-child(2):hover {
    background-color: #f2f7fa; /* Light gray for odd rows in the second column */
}

#comparison-table tbody tr:nth-child(odd) td:nth-child(2):hover {
    background-color: #f2f7fa; /* White for even rows in the second column */
}
#comparison-table tbody tr:hover td:nth-child(2) {
    background-color: #f2f7fa!important; /* Light gray for odd rows in the second column */
}
#comparison-table thead tr:hover td:nth-child(2) {
    background-color: #f2f7fa!important; /* Light gray for odd rows in the second column */
} 
  #comparison-table tbody tr {
    border-bottom: 1px solid #f1f1f1;
  }
  
  #comparison-table tbody tr:nth-child(even) {
    background-color: #f9fafc;
  }
  
  #comparison-table td {
    padding:6px;
    /* padding-top:8px;
    padding-bottom:8px;
    padding-left:10px; */
    font-size: 14px;
    color: #333;
  }
  
  #comparison-table td a {
    color: #6464f9; /* Company names */
    text-decoration: none;
  }
  
  #comparison-table tbody tr:hover {
    background-color: #f5f5f5;
  }

#chart-tooltip-footer{
    margin-top:10px;
    display:flex;
    justify-content: flex-end;
}
  
  /* Median and Average Row Styling */
  #comparison-table tbody tr td strong {
    color: #999; /* Light gray for median and average */
  }
  
  .median-row,
  .average-row {
    background-color: #fafafa;
    color: #999;
    font-weight: bold;
  }
  .right-options {
    display: flex;
    gap: 10px;
  }
  
  .normal-button {
    padding: 10px 20px;
    font-size: 14px;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 1s ease, color 1s ease;
  }
  
  .normal-button.active {
    color: black;

    border-bottom:3px solid var(--active-blue);
  }
  @media (max-width: 768px){
    .button-group-container{
        max-width:70%;
    }
    .button-group-container{
        display:none!important;
    }
    .button-group-container-mobile{
        display: flex!important;
    flex-wrap:wrap;
    justify-content:start;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
    max-width:230px;
    }
}
  .button-group-container{
    display: flex;
    flex-wrap:wrap;
    justify-content:start;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
}
@media(min-width:769px){
.button-group-container-mobile{
    display:none;
}}

@media (max-width: 768px) {
    button.active {
        color: black;
    border-bottom:3px solid var(--active-blue);
    }
    }
  
  /* Button Styles */
  .button-group-container .btn {
    padding: 8px 12px;
    border: none;
    background: none;
    color: #333;
    cursor: pointer;
    text-align: center;
    transition: background-color 1s ease, color 1s ease;
  }
  .button-group-container-mobile .btn {
    padding: 8px 12px;
    border: none;
    background: none;
    color: #333;
    cursor: pointer;
    text-align: center;
    transition: background-color 1s ease, color 1s ease;
  }
  
  .button-group-container .btn.active {
    background-color: #f0f4ff;
    color: #6464f9;
    font-weight: bold;
  }

  .button-group-container-mobile .btn.active {
    background-color: #f0f4ff;
    color: #6464f9;
    font-weight: bold;
  }
  
  .button-group-container .btn:hover {
    background-color: #f4f4f4;
  }
  .button-group-container-mobile .btn:hover {
    background-color: #f4f4f4;
  }
  
  /* Dropdown Styles */
  .dropdown-container {
    position: relative;
  }
  
  .dropdown-toggle {
    padding-right: 30px;
  }
  
  .dropdown-menu-container {
    width:120px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  
  .dropdown-menu-container li {
    padding-top:5px;
    padding-left:5px;
    /* padding-right: 5px; */
    margin-bottom:2px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    width: 115px;
    display: block;
  }
  
  .dropdown-menu-container li:hover {
    background-color: #f0f0f0;
    width:115px;
  }
  .header-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 8px; */
}

.sort-icon {
    margin-left: 8px;
}

/* Optional: Hover effect */
.header-cell:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
  
  /* Hidden Button for Selected Option */
  .hidden {
    display: none;
  }
  @media screen and (max-width: 768px) {
    .chart-container .top-controls {
      flex-direction: column; /* Stack groups vertically */
    }
    .second-pane {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
  
    
  }
  

  /* Ensure the dropdown button stays the same size */
/* .dropdown-toggle { */
    /* display: inline-block;
    width: 150px; /* Set a fixed width */
    /* text-align: center; /* Center align the text */
    /* white-space: nowrap; Prevent text wrapping */
    /* overflow: hidden; Hide overflow if the text is too long */
    /* text-overflow: ellipsis; Add ellipsis (...) if text overflows */
    /* padding: 10px; /* Add padding for better spacing */
    /* background-color: #6464f9; /* Button background color */
    /* color: white; /* Button text color */
    /* border: 1px solid #6464f9; /* Optional border */
    /* border-radius: 5px; Optional rounded corners */
    /* cursor: pointer; Pointer cursor for button */
    /* box-sizing: border-box; Include padding and border in the width */ 
  /* } */ 
  
  /* Dropdown button hover styles */
  /* .dropdown-toggle:hover {
    background-color: #4d4df4; /* Darker blue on hover */
  /* } */ 
  
  /* Ensure the dropdown menu appears correctly */
  /* .dropdown-menu { */
    /* position: absolute;
    display: none; /* Hidden by default */
    /* min-width: 150px; Ensure it matches the button width */
    /* background-color: white; Background color of the dropdown menu */
    /* border: 1px solid #ddd; Border around the dropdown menu */
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); Optional shadow */
    /* z-index: 1000; Ensure it appears on top */
  /* }  */
  
  /* Show the dropdown menu when the dropdown is active (or hovered) */
  .dropdown:hover .dropdown-menu-container {
    display: block; /* Make dropdown visible*/
    position:absolute;
  } 
  
  /* Dropdown items */
  /* .dropdown-menu button { */
    /* display: block; /* Make each button block-level for better alignment */
    /* width: 100%; Full width of the dropdown menu */
    /* padding: 10px; Padding for clickable area */
    /* text-align: left; Align text to the left */
    /* background-color: white; Default background */
    /* border: none; Remove default button borders */ */
    /* cursor: pointer; Pointer cursor for buttons */
  /* } */
  
  /* Hover effect for dropdown items */
  /* .dropdown-menu button:hover {
    background-color: #f1f1f1; /* Light gray on hover */
  /* } */ 
  
  /* Active item styling */
  /* .dropdown-menu button.active {
    background-color: #6464f9; /* Match dropdown toggle color */
    /* color: white; White text for active item */
  /* }  */
  body {
    font-family: 'Lato';
  }
  .mobile-search-interface {
    display: none;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1s ease, transform 1s ease;
}

.mobile-search-interface.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Blur overlay */
.blur-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 999; /* Below search but above content */
}

.blur-overlay.show {
    display: block;
    opacity: 1;
}

/* Ensure search dropdown stays clear */
.mobile-search-results {
    position: relative;
    z-index: 999;
    background: white;
}
  .chart-container-insights {
    display:block;
    grid-template-columns: 1fr;
    gap: 10px;
    /* margin: 10px; */
  }
  .second-pane{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin-top:2%;

  }
  #central-placed-canvas{
    align-items: center;
  }
  
  @media(max-width:768px){
  .chart-box-2,
  .chart-box-3 {
    width: 95%;
    margin-bottom: 20px;
  }}
  
  @media (min-width: 769px) {
    .second-pane {
      flex-direction: row;
      justify-content: space-between;
    }
  
    .chart-box-2,
    .chart-box-3 {
      width: 48%!important;
      margin-bottom: 0;
    }
  }
  @media (max-width:768px){
    .chart-box-2, .chart-box-3{
        margin-bottom:2%;
    }
  }
  .chart-box-1 {
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 10px;
    background-color: #ffffff;

    /* margin-right:2%; */
  }
  .chart-box-2{
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 10px;
    background-color: #ffffff;
    /* width: 100%; */

  }
  .chart-box-3{
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 10px;
    background-color: #ffffff;
    /* width: 100%; */
  }
  
  .chart-box-1 h3,.chart-box-2 h3,.chart-box-3 h3 {
    text-align: left;
    margin-bottom: 10px;
    font-size: 16px;
    color: #626568;
  }
  
  
  
  @media (min-width: 768px) {
    .chart-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* SEGMENT - REVENUE*/
  /*///////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////*/
  .custom-chart-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
  }
  /* Horizontal layout for the two main containers */
.custom-chart-layout-horizontal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  
    margin-top: 20px;
    /* flex-direction:column; */
  }
  
  /* Vertical layout for each chart pair */
  .custom-chart-container-vertical {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 48%;
    align-items:center;
  }
  .bx {
    font-family: boxicons !important;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    display: inline-block;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  /* Container styling for individual charts */
  .custom-chart-container {
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #ececec;
    border-radius: 8px; /* Optional: Adds rounded corners */
    background-color: #fff; /* Optional: Ensures a white background for the shadow to be visible */
    padding: 10px; /* Optional: Adds some padding inside the container */
}

@media (min-width: 1400px) {
    .custom-chart-container {
        width:700px;
    }
}
  .chart-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .flex-options {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mode-buttons{
    border:1 px solid #ddd;
    border-radius:4px;
    /* background-color:#f9f9f9; */
  }
  
  .dropdown {
    position: relative;
  }
  
  .dropdown-btn {
    background-color: #f0f0f0;
    /* color: white; */
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }
  
  .dropdown-content .dropdown-option {
    padding: 8px 16px;
    background-color: white;
    border: none;
    text-align: left;
    cursor: pointer;
    width: 100%;
  }
  
  .dropdown-content .dropdown-option:hover {
    background-color: #f1f1f1;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .chart-image {
    display: block;
    margin: 10px auto;
    width: 30px;
    height: 30px;
  }  
  
  .flex-options {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    width:100%;
  }
  
  .dropdown {
    position: relative;
  }
  
  .dropdown-btn {
    background-color: #f0f0f0;
    /* color: white; */
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    min-width: 150px;
  }
  
  .dropdown-content .dropdown-option {
    padding: 8px 16px;
    background-color: white;
    border: none;
    text-align: left;
    cursor: pointer;
    width: 100%;
  }
  
  .dropdown-content .dropdown-option:hover {
    background-color: #f1f1f1;
  }
  
  .dropdown-btn {
    background-color: #f0f0f0;
    /* color: white; */
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
  }
  
  .dropdown {
    position: relative;
  }
  
  .dropdown:hover .dropdown-content {
    display: none; /* Disable hover-based dropdown behavior */
  }
  
  
  .chart-image {
    display: block;
    margin: 10px auto;
    width: 30px;
    height: 30px;
  }
  
  .mode-selector {
    padding: 0.5rem 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f5f5f5;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
  }
  
  .mode-selector option {
    background-color: #fff;
  }
  
  .mode-selector option.selected {
    background-color: #007bff;
    color: #fff;
  }
  .mode-btn {
    padding: 8px 12px;
    border: none;
    /* border-radius: 4px; */
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-right:0!important;

}

.mode-btn:hover {
    background-color: #e0e0e0;
}

.mode-btn.active {
    color: black;
    border-bottom:3px solid var(--active-blue);
}

  
  @media (max-width: 1300px) {
    .custom-chart-layout-horizontal {
        flex-direction:column;
    }
    .custom-chart-container-vertical {
        max-width:100%!important;
    }
    .custom-chart-layout {
      grid-template-columns: 1fr; /* Single column for smaller screens */
      gap: 15px; /* Smaller gap between charts */
    }
  
    .custom-chart-container {
      padding: 10px; /* Reduce padding for smaller screens */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Softer shadow for smaller screens */
    }
    #bar-chart-2-title{
        font-size:22px;
        font-weight:300;
    }
    #bar-chart-1-title{
        font-size:22px;
        font-weight:300;
    }
    #pie-chart-1-title{
        font-size:22px;
        font-weight:300;
    }
    #pie-chart-2-title{
        font-size:22px;
        font-weight:300;
    }

  
  }  
  @media (max-width:768px){

    
    #bar-chart-2-title{
        font-size:14px;
        font-weight:400;
    }
    #bar-chart-1-title{
        font-size:14px;
        font-weight:400;
    }
    #pie-chart-1-title{
        font-size:14px;
        font-weight:400;
    }
    #pie-chart-2-title{
        font-size:14px;
        font-weight:400;
    }
  }
  /*//////////////////////
  \///////////////////////////////OPERATING METRICS /////////////////////////*/
/* Main container for the charting pane */
.charting-main-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* background-color: #f9f9f9; */
    border-radius: 8px;
    /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); */
  }
  
  /* Chart and controls container styling */
  .chart-and-controls-container {
    width: 67%!important;
    background: #ffffff;
    padding: 10px;
    border-radius: 8px;
    /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); */
    position: relative;
    border: 1px solid #ececec;
  }
  #chart-type-selection-dropdown-for-ticker{
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    background-color: #f0f0f0;
    width:fit-content;
  }
  
  /* Chart header container */
  .chart-controls-header-container {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom:10px;
  }
  
  /* Dropdown container for chart types and download options */
  .chart-controls-dropdown-container {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  /* Styling for download chart button */
.download-chart-button {
    /* background-color: #007bff; */
    color: black;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    position: relative; /* For positioning the dropdown menu */
  }
  
  /* Dropdown menu options styling */
  .dropdown-menu-options {
    display: none;
    position: absolute;
    background: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-top: 5px;
    z-index: 1000;
    width: 150px; /* Adjust as needed */
    padding: 8px 0;
  }
  
  /* Show dropdown menu */
  .dropdown-menu-options.active {
    display: block;
    width:160px;
  }

  .mainmenudivision{
    width: 100%;
    max-width: 1600px;
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  
  /* Individual dropdown button styles */
  .dropdown-menu-options button {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    cursor: pointer;
  }
  
  .dropdown-menu-options button:hover {
    background-color: #f0f0f0;
  }
  .radio-container {
    margin: 4px 0;
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    border-top:1px solid #eee;
  }
  
  .radio-container label {
    margin-left: 8px;
    cursor: pointer;
    font-size:12px;
  }

  .radio-container input[type="radio"] {
    cursor: pointer;
    margin-top:10px;
  }
  
  
  /* Styling for footer */
  .chart-footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
  }
  
  .businessquant-logo-image {
    height: 20px;
    float: right;
  }
  
  #footer-timestamp-display-2 {
    font-size: 12px;
    color: #555;
  }
  
  /* Metrics selection container */
  .metrics-selection-container {
    width: 28%;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); */
    border: 1px solid #ececec;
  }
  
  /* Metrics list styling */
  #metrics-list-container-for-aapl-breakdown {
    list-style: none;
    padding: 0;
  }
  
  #metrics-list-container-for-aapl-breakdown li {
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  
  #metrics-list-container-for-aapl-breakdown li:hover {
    background-color: #f1f1f1;
  }
  
  .lock-icon-for-download-data {
    margin-left: 5px;
  }
  @media (max-width: 768px) {
    .charting-main-container {
        position: relative;
        width: 100%;
    }

    .metrics-selection-container-mobile {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .mobile-metrics-dropdown {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        appearance: none;
        -webkit-appearance: none;
        background: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 10px center;
        background-size: 24px;
    }
    .datecurrent{
        font-size:14px;
        font-family: 'Lato';
    }
    .datenlogo{
        height:20px!important;
        width:auto;
    }

    .mobile-chart-controls {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .mobile-chart-type-container,
    .mobile-download-container {
        width: 48%;
    }

    .mobile-chart-type-dropdown,
    .mobile-download-button {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        appearance: none;
        -webkit-appearance: none;
        background: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right 10px center;
        background-size: 24px;
        background-color:#f8f8f8;
    }

    .mobile-download-dropdown {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom:100%;
        background: white;
        border: 1px solid #ddd;
        border-top: none;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .mobile-download-container:hover .mobile-download-dropdown {
        display: block;
    }

    .mobile-download-dropdown button {
        width: 100%;
        padding: 10px;
        text-align: left;
        border: none;
        border-bottom: 1px solid #eee;
        background: none;
    }

    .mobile-download-dropdown button:last-child {
        border-bottom: none;
    }

    #metrics-selection-container-desktop {
        display: none;
    }
}
.user-dropdown {
    position: relative;
    display: inline-block;
  }
  
  .user-btn.styled-dropdown {
    padding: 8px 12px;
    background: none;
    /* border: none; */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    height:41px;
    transition: opacity 1s ease-in-out, visibility 1s linear 1s;

  }
  .user-btn.styled-dropdown:hover .dropdown-content-main-menu{
    display:block;
  }
  
  /* .user-dropdown:hover .dropdown-content-main-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 0s;
  } */
  
  /* .dropdown-content-main-menu:hover {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 1s;
  } */
  
  .dropdown-content-main-menu a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
  }
  
  .dropdown-content-main-menu a:hover {
    background-color: #f5f5f5;
  }
  
 
@media (max-width: 768px) {
    .mobile-download-dropdown {
      position: relative;
      left: 0;
      right: 0;
      /* top: 100%; */
      background: white;
      border: 1px solid #ddd;
      z-index: 10;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
  }

@media (min-width: 769px) {
    .metrics-selection-container-mobile,
    .mobile-chart-controls {
        display: none;
    }
}
/* Metrics selector scrollable when height > 500px */
#metrics-list-container-for-aapl-breakdown {
    max-height: 550px;
    overflow-y: auto;
    scrollbar-width: thin;
    margin-top:5px;
    margin-bottom:5px;
  }
  
  /* Style for radio selector in desktop view */
  #metrics-list-container-for-aapl-breakdown li {
    list-style: none;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 1s ease;
  }
  
  #metrics-list-container-for-aapl-breakdown li:hover {
    background-color: #f0f0f0;
  }
  
  /* Style for selected item */
  #metrics-list-container-for-aapl-breakdown li.selected {
    background-color: #f9f9f9;
  }
  
  /* Mobile dropdown style */
  @media (max-width: 768px) {
    .metrics-selection-container {
      display: none; /* Hide list in mobile view */
    }
  
    #mobile-metrics-dropdown {
      display: block; /* Show dropdown in mobile view */
    }
  }
  /* Desktop styles (default) */
.metrics-selection-container-mobile {
    display: none;
  }
  
  #chart-controls-mobile {
    display: flex;
    flex-direction: column;
  }
  /* Default (Desktop) Layout */
#chart-controls-desktop {
    display: flex;
    width:100%;
    justify-content:space-between;
    /* height:50px; */
    /* background-color:white; */
  }
  
  .metrics-selection-container {
    display: block; /* Desktop metrics list visible */
  }
  
  .metrics-selection-container-mobile {
    display: none; /* Mobile metrics dropdown hidden */
  }
  
  /* Mobile Layout */
  @media (max-width: 768px) {
    #chart-controls-desktop {
      order: 2; /* Move chart controls below the chart */
      margin-top: 20px;
    }
  
    .metrics-selection-container {
      display: none; /* Hide desktop metrics list */
    }
  
    .metrics-selection-container-mobile {
      display: block; /* Show mobile metrics dropdown */
      margin-top: 20px;
    }
  }
  
  /* Mobile styles */
  @media (max-width: 768px) {
    .metrics-selection-container {
      display: none; /* Hide the desktop metrics list */
    }
  
    .metrics-selection-container-mobile {
      display: block; /* Show the mobile metrics dropdown */
      margin-top: 20px;
    }
  
    .chart-and-controls-container {
        width:95%!important;
      display: flex;
      flex-direction: column;
    }
  
    .chart-controls-dropdown-container {
      margin-top: 20px;
    }
  
  }
  /* Mobile Dropdown Styling */
.mobile-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.mobile-dropdown-button {
    width: 100%;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    font-size: 14px;
}

.dropdown-arrow {
    font-size: 10px;
    margin-left: 10px;
}

.mobile-dropdown-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid #ddd;
    border-top: none;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
}
.mobile-dropdown-menu-drop-down{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid #ddd;
    border-top: none;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
}

.mobile-dropdown-menu.show {
    display: block;
}
.mobile-dropdown-menu-drop-down.show{
    display:block;
}


.dropdown-option {
    width: 100%;
    text-align: left;
    padding: 10px 15px;
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover {
    background-color: #f1f1f1;
}
@media (max-width:768px){
    #chart-title-for-ticker-category{
        font-size:14px!important;
    }
}
#close-icon{
    background-color: transparent;
    border: none;
    cursor:pointer;
}

#metrics-dropdown-options li:hover{
    background-color: #f8f8f8;
}
/* Table Container Styles */
.overflow-x-auto {
    overflow-x: auto;
    /* margin: 20px 0; */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Base Table Styles */
  .min-w-full {
    min-width: 100%;
    border-collapse: collapse;
    background-color: white;
    font-size: 14px;
  }
  
  /* Header Styles */
  .min-w-full thead th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
    padding: 12px 3px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    /* position: sticky; */
    top: 0;
    /* z-index: 10; */
    white-space: nowrap;
  }
  
  /* Row Styles */
  .min-w-full tbody tr {
    transition: background-color 0.2s ease;
  }
  
  .min-w-full tbody tr:hover {
    background-color: #f8f9fa;
  }
  
  /* Cell Styles */
  .min-w-full tbody td {
    white-space: nowrap;
    padding: 6px 6px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
  }
  
  /* First Column (Period) Styles */
  .min-w-full tbody td:first-child {
    font-weight: 500;
    color: #2c3e50;
    background-color: #f8f9fa;
    position: sticky;
    left: 0;
    z-index: 1;
  }
  
  /* Numeric Cell Alignment */
  .min-w-full tbody td:not(:first-child) {
    text-align: right;
  }
  
  /* Checkbox Styles in Table Mode */
  #metrics-list-container-for-aapl-breakdown input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    cursor: pointer;
    border: 2px solid #4a90e2;
    border-radius: 3px;
  }
  
  #metrics-list-container-for-aapl-breakdown input[type="checkbox"]:checked {
    background-color: #4a90e2;
    border-color: #4a90e2;
  }
  
  /* Toggle Button Styles */
  #chart-to-table {
    padding: 8px 16px;
    background-color: #f0f0f0;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease;
  }
  
  /* #chart-to-table:hover {
    background-color: #;
  } */
  
  /* Responsive Styles */
  @media screen and (max-width: 768px) {
    .overflow-x-auto {
      /* margin: 10px 0; */
      border-radius: 6px;
    }
  
    .min-w-full thead th,
    .min-w-full tbody td {
      padding: 10px 12px;
      font-size: 13px;
    }
  
    #chart-to-table {
      padding: 6px 12px;
      font-size: 13px;
    }
  }
  
  /* Loading State Styles */
  .table-loading {
    position: relative;
    min-height: 200px;
  }
  
  .table-loading::after {
    content: "Loading...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #666;
  }
  
  /* Empty State Styles */
  .table-empty {
    text-align: center;
    padding: 40px;
    color: #666;
    font-style: italic;
  }
  
  /* Sort Icons */
  .min-w-full th.sortable {
    cursor: pointer;
    position: relative;
  }
  
  .min-w-full th.sortable::after {
    content: "↕";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
  }
  
  .min-w-full th.sorted-asc::after {
    content: "↑";
    opacity: 1;
  }
  
  .min-w-full th.sorted-desc::after {
    content: "↓";
    opacity: 1;
  }
  
  /* Selected Row Highlight */
  .min-w-full tbody tr.selected {
    background-color: #e8f0fe;
  }
  
  /* Zebra Striping */
  .min-w-full tbody tr:nth-child(even) {
    background-color: #f9fafb;
  }
  
  /* Print Styles */
  @media print {
    .overflow-x-auto {
      box-shadow: none;
      margin: 0;
    }
  
    .min-w-full thead th,
    .min-w-full tbody td {
      border: 1px solid #dee2e6;
    }
  
    #chart-to-table {
      display: none;
    }
  }


  /*/////////////////////////////////sec-filings//////////////////////////////*/
  .sec_container {
    padding: 4px;
    /* font-family: Arial, sans-serif; */
}

.sec_filters {
    margin-bottom: 20px;
}

.sec_dropdown {
    position: relative;
    display: inline-block;
    margin-right: 20px;
}

.sec_dropdown_btn {
    padding: 8px 12px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.sec_dropdown_content {
    display: none;
    right:0;
    position: absolute;
    background-color: white;
    min-width: 200px;
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.sec_dropdown_content.show {
    display: block;
}

.sec_checkbox_item {
    padding: 4px 4px;
    display: flex;
    align-items: center;
    font-size: 14px;
    width: max-content;
}

.sec_checkbox_item:hover {
    background-color: #f5f5f5;
}

.sec_checkbox_item input {
    margin-right: 8px;
}

.sec_table {
    width: 100%;
    border-collapse: collapse;
    table-layout:auto;
    min-width:max-content;
}
#secTableBody tr:nth-child(even) td:nth-child(2) {
    background-color: #f9fafc; /* Light gray for odd rows in the second column */
}

#secTableBody tr:nth-child(odd) td:nth-child(2) {
    background-color: #ffffff; /* White for even rows in the second column */
}
#secTableBody tr:nth-child(even) td:nth-child(2):hover {
    background-color: #f5f5f5!important; /* Light gray for odd rows in the second column */
}

#secTableBody tr:nth-child(odd) td:nth-child(2):hover {
    background-color: #f5f5f5!important; /* White for even rows in the second column */
}

.sec_table td:nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 2; /* Ensure they are above other cells */
  /* background-color: #f9fafc; Match the table's background */
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for visual separation */

  background-color: white;
}
.sec_table th:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 2; /* Ensure they are above other cells */
    /* background-color: #f9fafc; Match the table's background */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for visual separation */
  
    /* background-color: white; */
  }
.sec-table tbody tr:nth-child(even) {
    background-color: #f9fafc;
  }
  .sec-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
  }
.sec_table tbody tr:hover td:nth-child(2) {
    background-color:#f2f7fa!important;
}
.sec_table tbody tr:nth-child(even) {
    background-color: #f9fafc; /* Light gray for odd rows in the second column */
}

.sec_table tbody tr:nth-child(odd)  {
    background-color: #ffffff; /* White for even rows in the second column */
}
.sec_table tbody tr:nth-child(even):hover {
    background-color: #f2f7fa!important; /* Light gray for odd rows in the second column */
}

.sec_table tbody tr:nth-child(odd):hover {
    background-color: #f2f7fa!important; /* White for even rows in the second column */
}

.sec_header {
    padding: 4px;
    text-align: left;
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9;
    font-size: 14px;
    white-space:nowrap;
    width:fit-content;
    color:#999;
}
.table_container_sec{
    overflow-x:auto;
}

.sec_cell {
    padding: 3px;
    /* border-bottom: 1px solid #eee; */
    font-size: 12px;
}
/* .sec_table tbody tr:nth-child(even):hover {
    background-color: #f5f5f5; /* Light gray for odd rows in the second column */
/* } */ */

/* .sec_table tbody tr:nth-child(odd):hover {
    background-color: #f5f5f5; /* White for even rows in the second column */
/* } */ */

.sec_row:last-child,
.sec_row:nth-last-child(2) {
    text-align: center; /* Horizontally center-align */
    vertical-align: middle; /* Vertically center-align */
}

/* Optional: Ensure the images are centered */
.info-icon {
    display: inline-block; /* Ensure it stays inline within the cell */
    margin: 0 auto; /* Center align inside flex containers if needed */
}
.sec_pages {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

@media(min-width:768px){
    .sec_pages{
        margin-right:350px;
    }
}
#periodSelect{
    width:275px;
}
#fromDate{
    width:80px;
}
#toDate{
    width:80px;
}

.sec_page_btn {
    padding: 8px 16px;
    border: none;
    background: white;
    cursor: pointer;
    /* border-radius: 4px; */
}

.sec_page_btn.active {
    /* background: #f9f9f9; */
    color: black;
    border-bottom:3px solid var(--active-blue);
}

.sec_per_page {
    margin-top: 20px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.sec_filters{
    display:flex!important;
    justify-content:space-between;
    align-items:center;
}
.sec-filings-footer{
    justify-content:space-between;
    display:flex;
    align-items:center;
}
@media(min-width:769px){
.desktop{
    display:'flex';
}
}
@media(max-width:768px){
    .desktop{
        display:'none';
    }
}
.sec-table-side-pane{
    min-width:300px;
}
.container {
    max-width: 800px;
    
    padding: 0 10px;
}

.date-range-selector {
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    /* margin-bottom: 0.5rem; */
}

/* Select Styles */
.select-wrapper {
    position: relative;
}

select {
    width: 100px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    appearance: none;
    background-color: white;
    cursor: pointer;
}

.chevron-down {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #6b7280;
    pointer-events: none;
}

/* Date Inputs */
.date-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.date-input-wrapper {
    position: relative;
}

input[type="text"] {
    /* width: 100%; */
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: text;
}

.calendar-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>');
    pointer-events: none;
}

/* Calendar Popup */
.calendar-popup {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    font-size:14px;
}
.calendar-popup-mobile {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    font-size:14px;
}

.calendar-popup.active {
    display: block!important;
}
.calendar-popup-mobile.active {
    display: block!important;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;;
}

.calendar-header select {
    padding: 2px 4px 2px 4px;
}

.calendar {
    width: 100%;
    border-collapse: collapse;
}

.calendar th,
.calendar td {
    text-align: center;
    padding: 5px;
}

.calendar td {
    cursor: pointer;
}

.calendar td:hover {
    background-color: #e5e7eb;
}

/* Checklist Styles */
.checklist-wrapper {
    position: relative;
}

.checklist-header {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checklist-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    margin-top: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.checklist-items.active {
    display: block;
}

.checklist-item {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checklist-item:hover {
    background-color: #f3f4f6;
}

/* Clear Button */
.clear-button {
    background-color: #3b82f6;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.clear-button:hover {
    background-color: #2563eb;
}
.apply-button {
    background-color: #3b82f6;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.apply-button:hover {
    background-color: #2563eb;
}
.sec-checklist-group {
    margin: 15px 0;
}

.sec-checklist-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    /* border: 1px solid #e0e0e0; */
    border-radius: 4px;
}

.sec-checklist-item {
    display: flex;
    align-items: center;
    /* padding: 10px 15px; */
    /* border-bottom: 1px solid #e0e0e0; */
}

.sec-checklist-item:last-child {
    border-bottom: none;
}

.sec-checklist-item input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

.sec-checklist-label {
    font-size: 14px;
    color: #333;
    user-select: none;
    margin:3px;
}
@media(max-width:768px){
    .sec-table-side-pane{
        display:none;
    }
}
.mobile-filter-dropdown {
    display: none;
  }
  
  .mobile-filter-dropdown .mobile-dropdown-btn {
    background-color: #f0f0f0;
    color: black;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
  }
  
  .mobile-filter-dropdown .mobile-dropdown-content {
    display: none;
    position:absolute;
    right:0;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    /* padding: 15px; */
    border-radius: 5px;
    z-index: 100;
    width:100%;
  }
  
  .mobile-filter-dropdown .mobile-dropdown-content.active {
    display: block;
  }
  
  .mobile-filters {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .filter-buttons {
    display: flex;
    gap: 10px;
  }
  
  /* Responsive Styles */
  @media (max-width: 768px) {
    .sec-table-side-pane {
      display: none;
    }
  
    .mobile-filter-dropdown {
      display: block;
    }
  }
  .checklist-item-mobile{
    flex-wrap:wrap;
    display:flex;
  }
  /*//////////////////financials-statements-pane////////////////////*/
  .fsp-container {
    max-width: 100%;
    /* font-family: Arial, sans-serif; */
}
.fsp-income-statement-header{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
.fsp-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 20px; */
    padding: 10px;
    /* background-color: #f5f5f5; */
    border-radius: 5px;
}
@media(max-width:768px){
    .fsp-controls {
        width:100%;
    }
}

.fsp-period-selector,
.fsp-format-controls {
    position: relative;
    /* display: inline-block; */
    margin-right:5px;
}

.fsp-period-selector-bs,
.fsp-format-controls-bs {
    position: relative;
    display: inline-block;
    margin-right:5px;
}

.fsp-period-selector-cf,
.fsp-format-controls-cf {
    position: relative;
    display: inline-block;
    margin-right:5px;
}
.fsp-subtotal {
    font-weight: bold;
}

.fsp-grandtotal {
    font-weight: bold;
    border-top: 1px solid #c5c4c4;
    border-bottom: 1px solid #c5c4c4;
}

.fsp-section-header {
    font-weight: bold;
    background-color: #f5f5f5;
}

.fsp-lineitem {
    font-weight: normal;
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border: 1px solid #ccc;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.dropdown-arrow {
    position: absolute;
    right: 10px;
    top: 60%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: #555;
}

.fsp-format-controls select,
.fsp-period-selector select {
    /* padding-right: 20px; Adjust for the arrow spacing */
    border:1px solid #eee;
    padding:5px 5px;
    height:30px;
}
.fsp-format-controls-bs select,
.fsp-period-selector-bs select {
    /* padding-right: 20px; Adjust for the arrow spacing */
    border:1px solid #eee;
    padding:5px 5px;
    height:30px;
}
.fsp-format-controls-cf select,
.fsp-period-selector-cf select {
    /* padding-right: 20px; Adjust for the arrow spacing */
    border:1px solid #eee;
    padding:5px 5px;
    height:30px;
}


#fsp-export-btn {
    padding: 3px 16px;
    background-color: #f0f0f0;
    color:black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    height:30px;
    font-family:Lato;
}

#fsp-export-btn-bs {
    padding: 3px 16px;
    background-color: #f0f0f0;
    color:black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    height:30px;
    font-family:Lato;

}

#fsp-export-btn-cf {
    padding: 3px 16px;
    background-color: #f0f0f0;
    color:black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    height:30px;
    font-family:Lato;

}


.fsp-statement-section {
    margin-bottom: 30px;
}

.fsp-table-wrapper {
    overflow-x: auto;
    position: relative;
}

.fsp-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}
.fsp-table tbody tr:nth-child(even) td:nth-child(1) {
    background-color: #f9fafc; /* Light gray for odd rows in the second column */
}

.fsp-table tbody tr:nth-child(odd) td:nth-child(1) {
    background-color: #ffffff; /* White for even rows in the second column */
}
.income-statement-heading{
    width:1000px;
    margin-bottom:20px;
    font-weight:400;
}
.fsp-table th,
.fsp-table td {
    padding: 3px 6px;
    font-size:12px;
    /* border: 1px solid #ddd; */
    text-align: right;
    /* border-bottom: 1px solid #eee; */
}
.fsp-table tbody tr:nth-child(even) {
    background-color: #f9fafc;
}


.fsp-table th.fsp-frozen-column,
.fsp-table td.fsp-frozen-column {
    position: sticky;
    left: 0;
    font-size:12px;
    /* background-color: inherit; */
    z-index: 2;
    text-align: left;
    /* border-right: 2px solid #ddd; */
}
/* .fsp-frozen-column:nth-child(even) {
    background-color: #f9fafc;
}
.fsp-frozen-column:nth-child(odd) {
    background-color: #fff;
} */

.fsp-table.scrolling{
    background-color: rgba(255, 255, 255, 0.9);
    pointer-events: auto; /* Ensure hover effects work */
}

.fsp-table th {
    background-color: #f8f9fa;
    font-weight: bold;
    font-size:12px;
}
@media(max-width:768px){
    .fsp-table th{
        white-space:break-spaces;
        flex-wrap:wrap;
        width:40px;
    }
}

.fsp-row-subtotal {
    font-weight: bold;
}

.fsp-row-grandtotal {
    font-weight: bold;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

.fsp-nested-row td:first-child {
    padding-left: 20px;
}

.fsp-nested-row-2 td:first-child {
    padding-left: 40px;
}

.fsp-hidden {
    display: none;
}
#toggle-order-btn-bs{
    border: none;
    padding: 5px 5px;
    margin-right: 5px;
    border-radius: 4px;
}
#toggle-order-btn-is {
    border: none;
    padding: 5px 5px;
    margin-right: 5px;
    border-radius: 4px;
}
#toggle-order-btn-cf {
    border: none;
    padding: 5px 5px;
    margin-right: 5px;
    border-radius: 4px;
}
.chart-header {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    flex-wrap: wrap;
    display: flex
;
    justify-content: space-between;
}

.chart-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s;
}

.chart-modal.active {
    visibility: visible;
    opacity: 1;
}

#chart-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    position: relative;
}

#close-chart {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.blur {
    filter: blur(5px);
}
.not-found-content {
    height:1000px;
    /* max-width: 600px;
    width: 100%; */
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
}

/* Title styling */
.not-found-content h1 {
    font-size: 24px;
    font-weight: 700;
    color: #2d3748; /* Dark gray */
    margin-bottom: 10px;
}

/* Subtitle styling */
.not-found-content p {
    font-size: 16px;
    color: #4a5568; /* Medium gray */
    margin-bottom: 20px;
}

/* Suggested ticker links */
.suggested-tickers a {
    text-decoration: none;
    color: #3182ce; /* Blue for hyperlinks */
    font-weight: 500;
    margin: 0 5px;
}

.suggested-tickers a:hover {
    text-decoration: underline;
}

/* Search bar container */
.search-container-not-found {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 10px;
}

/* Search input styling */
#search-ticker {
    width: 100%;
    max-width: 300px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #cbd5e0; /* Light gray border */
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease;
}

#search-ticker:focus {
    border-color: #3182ce; /* Blue border on focus */
}

/* Search button styling */
#search-btn {
    padding: 10px 20px;
    background-color: #3182ce; /* Blue button */
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#search-btn:hover {
    background-color: #2b6cb0; /* Darker blue on hover */
}
.not-found-content {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    text-align: center;
    min-height: 100vh; /* Ensures the div takes full viewport height */
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.not-found-content img {
    max-width: 100%;
    height: 300px;
    margin-bottom: 20px;
}

.not-found-content h1 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.not-found-content p {
    font-size: 1rem;
    margin-bottom: 30px;
}

.not-found-content a {
    color: #0073e6;
    text-decoration: none;
    margin: 0 5px;
}

.not-found-content a:hover {
    text-decoration: underline;
}

.back-home-btn {
    background-color: #0073e6;
    color: #fff;
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.back-home-btn:hover {
    background-color: #005bb5;
}
/* Footer Styling */
.footer {
    background-color: #002a45; /* Dark Blue */
    color: white;
    margin-top: 70px;
    display:flex;
    justify-content:center;

    /* padding: 40px 0; */
    /* font-family: Arial, sans-serif; */
}

.footer-container {
    display: flex;
    justify-content: space-between;
    width: 1600px;
    /* margin: auto; */ 
    padding: 3% 3%;
}

/* Footer Column Layout */
.footer-column {
    flex: 1;
    /* min-width: 200px; */
    text-align: left;
}

/* Footer Links */
.footer-column ul {
    list-style: none;
    padding: 0;
}


.footer-column ul li a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease-in-out;
}

/* Wrapper to keep Resources & Company always side-by-side */
.footer-columns-wrapper {
    display: flex;
    justify-content: space-between;
    flex: 2; /* Gives more space to these sections */
    gap: 40px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-columns-wrapper {
        flex-direction: row; /* Always keep them side by side */
        justify-content: space-between;
        gap: 20px;
        width: 100%;
    }

    .footer-column {
        flex: 1;
    }
}

.datenlogo {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Aligns items vertically */
}

.powered-by {
    display: inline-flex;
    align-items: baseline; /* Aligns text and image on the same baseline */
    font-size: 14px;
}

.bqLogod {
    height: 14px; /* Adjust as needed */
    vertical-align: baseline; /* Ensures it aligns with text baseline */
    margin-left: 5px; /* Adds spacing between text and image */
}
.powered-by-tooltip {
    display: inline-flex;
    align-items: center; /* Ensures text and image align properly */
    font-size: 14px;
    gap: 8px; /* Adds spacing between "Powered by" and the logo */
}
.bqLogo-footer{
    height:26px;
    vertical-align:middle;
}