:root {
    font-family: 'Inter', sans-serif, 'system-ui';
    font-synthesis: none;
    font-optical-sizing: none;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    --stockrank-logo-green: #00df88;
    --grey-60: #9a9a9a;
    --grey-20: #f5f5f5;
    --grey-70: #737780;
    --grey-80: #303033;
    --grey-90: #090c12;
    --highlight-blue: #2f80f5;
    --secondary-btn: #6c757d;

    /* Sidebar variables*/
    --sidebar-icon-right-margin: 15px;
    --sidebar-link-height: 38px;
}

svg {
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    image-rendering: high-quality;
}

a {
    text-decoration: none;
    color: inherit;
}

body {

    padding: 0;
    margin: 0;
    background-color: white;
    /*background-color:  #f7f7f8;*/

    --background: white;
    /*--background: #f7f7f8;*/
    /*--background: #f2f6fb;*/
    /*--text-1: black;*/
    --text-1: #0a0c11;
    /*--text-1: rgb(34, 34, 34);*/
    /*--text-1: rgb(49, 49, 49);*/
    --text-2: #515559;
    --text-3: #515559;
    --text-4: #747a80;
    --text-5: rgb(33, 33, 33);
    --text-6: rgb(0, 35, 88);

    --icon-1: #5e6266;

    --text-1-invert: white;

    --sidebar-background: #f7f7f8;
    --sidebar-text: #515559;
    --sidebar-text-hover: #090c12;

    --hover-background-sidebar: #f5f6f7;

    /*--sidebar-icon-fill: #303033;*/
    --sidebar-icon-fill: #3a3a40;
    --sidebar-icon-fill-2: rgb(130, 138, 156);
    --sidebar-icon-hover: #090c12;

    --border-1: #eaedf0;
    --border-2: #f0f0f0;

    --search-border: #d2d2d2;
    --search-background: #f0f0f0;
    --search-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

    --select-shadow: #e1e3e5;

    --active-background: #f0f2f4;
    --search-background-2: #f0f2f4;
    --search-result-background-2: white;

    --screener-new-green: #2eab45;
    --screener-new-green-border: #31b549;
    --screener-new-green-text: white;

    --fill-green: #dbf5ec;
    --border-green: #a6decc;
    --text-green: #0ea673;
    --hover-green: #cef0e5;

    --fill-btn-green: #00302d;
    --border-btn-green: #65b5ae;
    --text-btn-green: white;
    --hover-btn-green: #cef0e5;

    --fill-btn-grey: #f0f0f0;
    --border-btn-grey: #e0e0e0;
    --text-btn-grey: #707070;
    --hover-btn-grey: #e8e8e8;

    --fill-blue-1: #dbf0fa;
    --border-blue-1: #a6c8e5;
    --text-blue-1: #0e87d8;
    --hover-blue-1: #d0e7f5;

    --fill-blue: #e0f2fe;
    --border-blue: #90cdf4;
    --text-blue: #0369a1;
    --hover-blue: #bae6fd;

    --fill-btn-blue: #edf3ff;
    --border-btn-blue: #badbf1;
    --text-btn-blue: #156ea0;
    --hover-btn-blue: #e7f5fc;

    --blue-background: #f7faff;
    --blue-border: #f2f7ff;


    --btn-secondary-background: #white;
    --btn-secondary-border: #9a9a9a;
    --btn-secondary-text: #515559;
    --btn-secondary-hover: #f5f5f5;

    --screener-background: #fcfcfc;
    --screener-border: #ebeef1;
    --screener-input-focus: #4781ef;

    --screener-button-alt-background: white;

    --btn-bg: linear-gradient(to top, #f7f7f7, #ffffff); /* Subtle gradient for light mode */
    --btn-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    --btn-hover-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
    --btn-select: #f2f2f2;

    --overlay: rgba(255, 255, 255, 0.7);
    --overlay-2: rgba(0, 0, 0, 0.3);
    --overlay-3: rgba(10, 37, 51, 0.3);
    --overlay-4: rgba(17, 28, 33, 0.4);

    --modal-background: white;
    --modal-background-2: white;

    --rangeSliderGreen: #659b82;

    --sector-btn-selected-background: #e0f2fe;

    --modal-selection-area-background: #fcfcfc;
    --modal-selection-btn-active: #F8F8F8;
    --modal-selection-btn-border: #DDDFE0;

    --main-btn-background: #4781ef;
    --main-btn-border: #3a6fd1;
    --main-btn-text: white;
    --main-btn-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Tailwind CSS-like box shadow */

    --btn-modal-background: var(--modal-background);
    --btn-modal-border: #e1e3e5;
    --btn-modal-text: #0a0c11;
    --btn-modal-hover: #f0f2f4;

    --card-background: white;
    /*--card-border: white;*/
    /*--card-border: #dadee5;*/
    --card-border: #eaedf0;
    --card-shadow: 1px 2px 1px rgba(189, 191, 199, 0.19), -1px 0px 1px rgba(189, 191, 199, 0.19), 0px -1px 2px rgba(189, 191, 199, 0.03), 0px 4px 14px rgba(189, 191, 199, 0.25);
    /*--card-shadow: 0px 2px 2px rgba(81, 85, 89, 0.15);*/
    --search-shadow: 1px 2px 1px rgba(189, 191, 199, 0.19), -1px 0px 1px rgba(189, 191, 199, 0.19), 0px -1px 2px rgba(189, 191, 199, 0.03), 0px 4px 14px rgba(189, 191, 199, 0.25);


    --gainer-icon-back: #00d3a7;
    --gainer-icon-fill: #00826c;

    --loser-icon-back: #f94d6d;
    --loser-icon-fill: #b1033d;

    --sentiment-icon-back: #fbda7b;
    --sentiment-icon-fill: #e09e00;

    --dot-background: #e3e3e3;
    --dot-active: #5d8ee8;
    --highlight-button-background: #4164f2;

    --skelteon-1: #f0f0f0;
    --skelteon-2: #e0e0e0;
    --skelteon-3: #f0f0f0;

    --profit-green: #509B80;
    --profit-green-50-opacity: rgba(80, 155, 128, 0.1);

    --loss-red: #e35775;
    --loss-red-50-opacity: rgba(227, 87, 117, 0.1);

    --gauge-ring-background: #ebeef1;

    --rank-btn-background: #f4f6fc;
    --rank-btn-border: #dadee5;
    --rank-btn-text: #4164f2;
    --rank-btn-hover: #f0f2f4;
    --rank-btn-hover-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -1px rgba(0, 0, 0, 0.06);

    --scrollbar-color: #ccc transparent;
    --scrollbar-color-2: #ccc;


    --popup-modal-background: white;
    --popup-modal-border: #e1e3e5;
    /*--popup-modal-border: #d2d2d2;*/
    --popup-modal-text: #0a0c11;
    --popup-modal-hover: #f0f2f4;
    --popup-modal-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 3px -1px rgba(0, 0, 0, 0.06);

    --cmc-secondary-text: #616e85;
    --cmc-hyperlink-text: #3861fb;

    --mui-btn-border: #dae2ed;
    --mui-btn-box-shadow: inset 0 -1px 1px #E5EAF2, 0 1px 0.5px rgba(229, 234, 242, 0.6);
    --mui-btn-hover-background: #f0f2f4;

    --tooltip-background: #090c12;
    --tooltip-text: #f5f5f5;

    --table-border: #eaedf0;
    --table-hover: #f9fafc;
    --table-shadow: rgba(230, 230, 230, 0.7);

    --watchlist-inactive: #e2e2e2;
    --star-gold: #ebb985;

    --ticker-color: #8b9199;;

    --price-proximity-color: #ececec;
    --price-proximity-circle: #334057;
    --price-proximity-text: #989898;
    --price-proximity-pin: #d0d0d0;

    --stock-price-proximity-circle: white;

    --user-icon: #5e6266;

    --chart-btn-background: white;

    --fill-1: #ebeef1;
    --fill-2: white;
    --fill-3: #c8c9cc;
    --fill-4: #eff1f5;
    --fill-5: #f5f5f5;
    --fill-6: #090c12;
    --fill-7: #ebeef1;
    --fill-8: #303033;

    --compound-background: #FFFFFF;
    --compound-foreground-1: #F0F2F5;
    --compound-foreground-2: #F9FAFB;
    --compound-border: rgba(13, 19, 26, .15);
    --compound-border-2: rgba(13, 19, 26, .2);
    --compound-text-1: #17212B;
    --compound-text-2: #7A8A99;
    --compound-text-3: #A7B4C2;

    --new-btn-shadow: 1px 2px 1px rgba(189, 191, 199, 0.3),
    -1px 0px 1px rgba(189, 191, 199, 0.3), 0px -1px 2px rgba(189, 191, 199, 0.04),
    0px 4px 2px rgba(189, 191, 199, 0.3);

    --screener-btn-background: #509b80;
    --new-blue-text: #668CBE;

    --save-icon-back: #84CBB1;
    --save-icon-front: #2F5C4F;

    --card-background-2: rgba(252, 252, 252, 0.9);
    --grey-background: rgb(249 250 251);

}

body.dark {
    padding: 0;
    margin: 0;

    /*background-color: #0f1216;*/
    /*background-color: #090c12;*/
    /*background-color: #0D131A;*/
    background-color: #0B0E16;
    /*background-color: black;*/
    /*background-color: rgba(9, 9, 10, 1);*/


    /*--background: #0f1216;*/
    /*--background: #090c12;*/
    /*--background: #0D131A;*/
    --background: #0B0E16;
    /*--background: black;*/
    /*--background: rgba(9, 9, 10, 1);*/

    --text-1: white;
    --text-2: #b8bcc2;
    --text-3: white;
    --text-4: #9da2a6;
    --text-5: white;
    --text-6: white;


    --icon-1: #c7c7c7;

    --text-1-invert: #0a0c11;

    --sidebar-background: #1D2833;
    --sidebar-text: #b8bcc2;
    --sidebar-text-hover: white;

    --hover-background-sidebar: #161b22;

    /*--sidebar-icon-fill: #e5e5e5;*/
    --sidebar-icon-fill: #d9d9d9;
    --sidebar-icon-fill-2: #828a99;
    --sidebar-icon-hover: white;

    --border-1: #222533;
    --border-2: #222533;

    /*--search-border: #3a4a5a;*/
    --search-border: #2c3e50;

    --select-shadow: #30363e;

    --active-background: #161b22;
    --search-background-2: #17212B;
    --search-result-background-2: #17212B;

    --screener-new-green: #248536;
    --screener-new-green-border: #3f914b;
    --screener-new-green-text: #e6ebf2;

    --fill-green: #163027;
    --border-green: #255242;
    --text-green: #10b981;
    --hover-green: #1a3b2f;

    --fill-btn-green: #00302d;
    --border-btn-green: #65b5ae;
    --text-btn-green: white;
    --hover-btn-green: #cef0e5;

    --fill-btn-grey: #2a2f38;
    --border-btn-grey: #242933;
    --text-btn-grey: white; /* No change */
    --hover-btn-grey: #32373e;

    --fill-btn-blue-1: #002d50;
    --border-btn-blue-1: #6595b5;
    --text-btn-blue-1: white; /* No change */
    --hover-btn-blue-1: #d0e7f5;

    --fill-blue: #172a3a;
    --border-blue: #2b3d50;
    --text-blue: #4f97d1;
    --hover-blue: #1f364d;

    --fill-btn-blue: #152430;
    --border-btn-blue: #2f4256;
    --text-btn-blue: #5a94c3;
    --hover-btn-blue: #203141;

    --blue-background: #082530;
    --blue-border: #0f4559;

    --btn-secondary-background: #090c12;
    --btn-secondary-border: #303033;
    --btn-secondary-text: #b8bcc2;
    --btn-secondary-hover: rgba(48, 48, 51, 0.5);

    --screener-background: #131821;
    --screener-border: #222533;
    --screener-input-focus: #4781ef;

    --screener-button-alt-background: #11121a;

    --btn-bg: linear-gradient(to top, #181d24, #161a23); /* Subtle gradient with a slight blueish hue */
    --btn-shadow: 0 2px 2px rgba(255, 255, 255, 0.05), inset 0 1px 1px rgba(0, 0, 0, 0.5); /* Soft outer glow with a slight inset for depth */
    --btn-hover-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.1);
    --btn-select: #222533;

    --overlay: rgba(0, 0, 0, 0.3);
    --overlay-2: rgba(255, 255, 255, 0.7);
    --overlay-3: rgba(0, 0, 0, 0.4);
    --overlay-4: rgba(0, 0, 0, 0.5);

    --modal-background: #1e242f;
    --modal-background-2: #23272e;

    --rangeSliderGreen: #659b82;

    --sector-btn-selected-background: #172a3a;

    --modal-selection-area-background: #161a23;
    --modal-selection-btn-active: #203141;
    --modal-selection-btn-border: #2f4256;

    --main-btn-background: #5078FF;
    --main-btn-border: #476ed4;
    --main-btn-text: white;
    --main-btn-box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.05), 0 2px 3px -1px rgba(255, 255, 255, 0.1); /* Tailwind CSS-like box shadow for dark mode */


    --btn-modal-background: var(--modal-background);
    --btn-modal-border: #404953;
    --btn-modal-text: #cad0d8;
    --btn-modal-hover: rgba(42, 48, 60, 0.7);

    /*--card-background: #131821;*/
    /*--card-background: rgba(25, 27, 33);*/
    --card-background: #17212B;
    /*--card-background: rgba(19, 20, 24, 1);*/
    /*--card-border: #131821;*/
    /*--card-border: #222533;*/
    --card-border: #191b21;
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.01); /* Tailwind CSS-like box shadow */
    --search-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2);


    --gainer-icon-back: #00b791;
    --gainer-icon-fill: #007561;

    --loser-icon-back: #fb005e;
    --loser-icon-fill: #9a0034;

    --sentiment-icon-back: #e8ca72;
    --sentiment-icon-fill: #cd9100;

    --dot-background: #576275;
    --dot-active: #b3bfff;
    --highlight-button-background: #4164f2;


    /*--skelteon-1: #090c12;*/
    --skelteon-1: #191b21;
    /*--skelteon-2: #121824;*/
    --skelteon-2: rgb(34, 34, 38);
    /*--skelteon-3: #090c12;*/
    --skelteon-3: #191b21;

    --profit-green: #509B80;
    --profit-green-50-opacity: rgba(80, 155, 128, 0.1);

    --loss-red: #e35775;
    --loss-red-50-opacity: rgba(227, 87, 117, 0.1);


    --gauge-ring-background: #2b2f40;

    /*--rank-btn-background: #0f141f;*/
    --rank-btn-background: #1a2029;
    --rank-btn-border: #222533;
    --rank-btn-text: #b3bfff;
    --rank-btn-hover: #222533;

    --scrollbar-color: #30363e transparent;
    --scrollbar-color-2: #30363e;

    --popup-modal-background: #1e242f;
    --popup-modal-border: #2f4256;
    --popup-modal-text: #cad0d8;
    --popup-modal-hover: #1a2029;
    --popup-modal-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 3px -1px rgba(0, 0, 0, 0.06);

    --cmc-secondary-text: #616e85;
    --cmc-hyperlink-text: #3861fb;

    --mui-btn-border: #404953;
    --mui-btn-box-shadow: inset 0 -1px 1px #404953, 0 1px 0.5px rgba(64, 73, 83, 0.6);
    --mui-btn-hover-background: #1a2029;

    --tooltip-background: white;
    --tooltip-text: #0a0c11;

    --table-border: #222533;
    --table-hover: #131821;
    /*--table-shadow: rgba(5, 7, 10, 0.9);*/
    --table-shadow: #222533;

    --watchlist-inactive: #445675;
    --star-gold: #eba863;

    --ticker-color: #5c677e;

    --price-proximity-color: #1b222e;
    --price-proximity-circle: #d0d0d0;
    --price-proximity-text: #7a8498;
    --price-proximity-pin: #222533;

    --user-icon: #c7c7c7;

    --chart-btn-background: #222533;

    --fill-1: #121824;
    /*--fill-2: #070b0f;*/
    --fill-2: #0f1216;
    /*--fill-2: #090c12;*/
    --fill-3: #293652;
    --fill-4: #222834;
    --fill-5: #121824;
    --fill-6: white;
    --fill-7: #293652;
    /*--fill-8: #070b0f;*/
    --fill-8: #0f1216;
    /*--fill-8: #090c12;*/

    --compound-background: #0D131A;
    --compound-foreground-1: #1D2833;
    --compound-foreground-2: #17212B;
    --compound-border: rgba(249, 250, 251, .15);
    --compound-border-2: rgba(249, 250, 251, .4);
    --compound-text-1: #FFFFFF;
    --compound-text-2: #7A8A99;
    --compound-text-3: #516070;

    --new-btn-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.01); /* Tailwind CSS-like box shadow */

    --screener-btn-background: #509b80;

    --new-blue-text: #7AA0D2;

    --save-icon-back: #63B297;
    --save-icon-front: #2B5749;

    --card-background-2: rgb(16, 21, 28);;
    --grey-background: #121824;

}


.big-heading {
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.1px;
    /*font-feature-settings: "cv11";*/
}

.big-heading-2 {
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
    /*letter-spacing: -0.1px;*/
    /*font-feature-settings: "cv11";*/
}

.gradient-text {
    /* Define the gradient background */
    background: linear-gradient(to right, #4ea86b 0%, #63cd41 100%);

    /* Make sure the background is clipped to the text */
    -webkit-background-clip: text;
    background-clip: text;

    /* Make the text color transparent to show the gradient */
    -webkit-text-fill-color: transparent;

    /* Optional: Ensure the gradient covers the entire text for any length */
    display: inline-block;
}

.stockpage-title {
    font-family: 'Inter', 'sans-serif', 'system-ui';
    font-size: 21px;
    font-weight: 500;
    color: var(--compound-text-1);
    margin-bottom: 10px;
    /*margin-top: 20px;*/
}


.heading {
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.1px;
    /*letter-spacing: 0.2px;*/
    /*font-feature-settings: "cv11";*/
}


.heading-2 {
    margin: 0 0 8px 0;
    padding: 0;
    font-weight: 600;
    font-size: 20px;
    color: var(--text-1);
}

.p-1 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-2);
    padding: 0 20px;
    text-align: center;
    line-height: 1.6;
}

::-webkit-scrollbar {
    width: 6px;
}

/* Scrollbar track */
::-webkit-scrollbar-track {
    background: var(--compound-foreground-1);
    border-radius: 9999px;
    /*opacity: .2;*/
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: var(--compound-border);
    border-radius: 9999px;
}

/* Scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--compound-border);
}



/*::-webkit-scrollbar {*/
/*    height: 1rem; !* Vertical scrollbar height *!*/
/*    width: 6px; !* Horizontal scrollbar width *!*/
/*}*/

/*!* Adjusts the size for horizontal scrollbars specifically *!*/
/*::-webkit-scrollbar:horizontal {*/
/*    height: 0.5rem; !* Horizontal scrollbar height for horizontal containers *!*/
/*    width: 8px; !* Width is adjusted to maintain consistency *!*/
/*}*/

/*!* Styles the track of the scrollbar (the background) *!*/
/*::-webkit-scrollbar-track {*/
/*    !*background-color: transparent;*!*/
/*    background-color: transparent;*/
/*    border-radius: 9999px; !* Makes the track edges fully rounded *!*/
/*}*/

/*!* Styles the thumb of the scrollbar (the part that can be dragged) *!*/
/*::-webkit-scrollbar-thumb {*/
/*    background-color: grey; !* Light grey color with some transparency *!*/
/*    border: 0px solid rgba(255, 255, 255, 1); !* White border around the thumb, you can adjust opacity if needed *!*/
/*    border-radius: 9999px; !* Fully rounded edges for the thumb *!*/
/*}*/

/*!* Changes the thumb color on hover for better interactivity *!*/
/*::-webkit-scrollbar-thumb:hover {*/
/*    background-color: rgba(227, 227, 227, 1); !* Slightly darker shade of grey on hover *!*/
/*}*/

/*:global(.os-theme-dark) {*/
/*    --os-handle-bg: var(--scrollbar-color-2) !important;*/
/*    --os-handle-bg-hover: var(--scrollbar-color-2) !important;*/
/*    --os-handle-bg-active: var(--scrollbar-color-2) !important;*/
/*}*/

/*:global(.os-theme-light) {*/
/*    --os-handle-bg: var(--scrollbar-color-2) !important;*/
/*    --os-handle-bg-hover: var(--scrollbar-color-2) !important;*/
/*    --os-handle-bg-active: var(--scrollbar-color-2) !important;*/
/*}*/

/*:global(.os-scrollbar-handle) {*/
/*    background: var(--scrollbar-color-2) !important;*/
/*}*/

.spacer-top {
    margin-top: 15px;
}

@media screen and (min-width: 990px) {
    .spacer-top {
        margin-top: 20px;
    }
}


@media screen and (min-width: 1280px) {
    .spacer-top {
        margin-top: 25px;
    }
}


/* Mobile (up to 767px) */
@media (max-width: 990px) {
    /* Mobile styles */
    .big-heading {
        margin: 0 0 8px 0;
        padding: 0;
        font-size: 21px;
        font-weight: 700;
        color: var(--text-1);
        letter-spacing: -0.1px;
        /*font-feature-settings: "cv11";*/
    }

    .heading {
        margin: 0 0 8px 0;
        padding: 0;
        font-size: 21px;
        font-weight: 700;
        color: var(--text-1);
        letter-spacing: -0.1px;
        /*letter-spacing: 0.2px;*/
        /*font-feature-settings: "cv11";*/
    }

}