body {
    /* font-family: 'Calibri', sans-serif !important; */
    font-family: "Calibri", sans-serif;
    overflow-x: hidden;
}

.fallback-card {
    max-width: 100%;
    height: auto;          /* keep aspect ratio */
    display: block;
    margin: 0 auto;
    object-fit: contain;   /* safe if parent is tighter */
    border-radius: 12px;   /* optional: match your UI */
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
    background: #fff;
  }

input[type="text"],
input[type="date"] {
    border: 1px solid #ccc;        /* thin gray border */
    padding: 10px;
    border-radius: 4px;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
    background-color: #fff;        /* default white */
    box-sizing: border-box;
    width: 100%;                   /* full width optional */
}

/* On hover */
input[type="text"]:hover,
input[type="date"]:hover {
    border-color: #007bff;         /* blue border */
    background-color: #e6f2ff;     /* light blue background */
}

/* On focus (clicked/focused) */
input[type="text"]:focus,
input[type="date"]:focus {
    outline: none;
    border-color: #007bff;
    background-color: #e6f2ff;
    box-shadow: 0 0 5px rgba(0,123,255,0.2);  /* soft glow */
}

.top-bar {
    background-color: #1f2533;
    color: white;
    font-size: 15px;
    padding: 8px 0px;
}

.text-white {
    color: white;
}

.condition-Title {
    background-color: #6B6B6B;
    color: #fff;
    font-weight: 500px;
    padding: 10px;
    margin-bottom: 10px;
}

/* .nav-bar {
    background-color: white;
    padding: 0px 0px;
    border-bottom: 1px solid #f47d23 !important;
} */

.bg-light {
    background-color: #EBE5D1 !important;
}

.bg-light-gray {
    background-color: #f5efef;
    padding: 15px;
}

.price-Text-box {
    background-color: #dfe7e5;
    padding: 10px;
    font-weight: 500px;
}

.price-Text {
    background-color: #e0e0eb;
    padding: 10px;
    font-weight: 500px;
}

.price-Text-Second {
    background-color: #d9e0e8;
    padding: 10px;
    font-weight: 500px;
    margin: 5px;
}

.faq-box {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 0;
    font-size:16px;
    font-family: 'Calibri', sans-serif !important;
}

.faq-header {
    background-color: #dfe7e5;
    padding: 10px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-body {
    padding: 10px;
    display: none;
    background-color: #f9f9f9;
    border-top: 1px solid #ccc;
}

.faq-box.open .faq-body {
    display: block;
}

.arrow {
    transition: transform 0.3s ease;
    font-size: 14px;
}

.faq-box.open .arrow {
    transform: rotate(180deg);
}

/* .nav-btn {
    color: #b7332b !important;
    font-weight: bold;
}

.nav-btn:hover {
    color: #A0A0A0;
    font-weight: bold;
}

.nav-btn:active {
    color: #b7332b;
    font-weight: bold;
} 

.active {
    color: #b7332b !important;
    font-weight: bold;
}

/* .navbar-brand {
    color: #B7332b !important;
    font-weight: bold;
    font-size: 25px !important;

}

.navbar-brand2 {
    color: #b7332b;
} */

.banner {
    margin-top: 80px !important;
    width: 100% !important;
    height: 195px !important;
    border-radius: 0px !important;
    margin-bottom: 0px !important;
}

.banner-text {
    margin-top: 80px !important;
    position: absolute;
    margin-left: 7%;
    /* padding-top: 6%; */
    color: white;
    /* z-index: 100; */
    top: 18%;
}

.btn-banner {
    background-color: #15137b;
    color: white;
    font-weight: bold;
}

.aft-banner {
    background-color: #1f2533;
    color: white;
    padding: 50px 5%;
    margin: 0;
}

.signup {
    background-color: #1f2533;
    color: white;
    padding: 15px 0px;
    border-bottom: 1px solid #424141 !important;
}

.g-box {
    background-color: #15137b;
    padding: 20px;
    font-size: 22px;
    text-align: center;
    width: 160px;
    position: absolute;
    top: -15px;
}

.orange {
    color: #b7332b;
}

.domains {
    padding-bottom: 10px;
    border-bottom: 1px solid #b7332b;
    margin-bottom: 10px;
    text-align: center;
}

.btn-org {
    background-color: #b7332b;
    margin-left: 10px;
    border: 2px solid #b7332b;
    color: white;
}

.btn-donate {
    background-color: #FFC439;
    margin-left: 10px;
    border: 2px solid #FFC439;
    color: white;
}

.btn-brop {
    background: #272727;
    color: white;
    width: 60px;
}

#fairvalue {
    background-color: #9BBFCF;
    padding: 10px;
}

.heading {
    color: #b7332b !important;
    font-weight: bold !important;
    text-align: center !important;
}

.sub-heading {
    color: #15137b !important;
    font-weight: bold !important;
    border-left: 5px solid #15137b !important;
    padding-left: 10px !important;
}

.heading-line {
    border-bottom: 3px solid #B7332b !important;
    padding-bottom: 10px !important;
}

.smoke {
    background-color: #EBE5D1;
    padding: 20px 0px;
}

.price-box {
    background: #fbfbfb;
    text-align: left;
    border: 1px solid silver;
    padding: 25px 15px;
}

.text-org {
    color: #b7332b;
}

.gr-line {
    border-bottom: 1px solid #b7332b;
    margin-top: 10px;
    margin-bottom: 10px;
}

.price-box-dark {
    background: #1f2533;
    text-align: left;
    color: white;
    border: 1px solid silver;
    padding: 20px 15px;

}

.text-gr {
    color: #b7332b;
}

.white {
    background-color: #C8C8C8;
    padding: 10px 0px;
}

.bfont {
    font-size: 30px !important;
}

.features {
    color: #5c5c5c;
    font-size: 18px;
    padding: 10px 0px;
}

.bordery {
    /*border-right: 1px solid gainsboro;*/
    padding: 10px;
    position: relative;
}

.displayETF {
    padding: 20px;
    text-align: center;
    background-color: #C5DCED;
    font-size: 24px;
    color: #3F4E70
}


.bordery::after {
    bottom: -1px;
    right: -1px;
}

.bordery::before {
    top: -1px;
    left: -1px;
}

#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 20px;
}

#quote-carousel .carousel-control {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}

#quote-carousel .carousel-indicators {
    position: relative;
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-top: 20px;
}

#quote-carousel .carousel-indicators li {
    width: 100px;
    height: 100px;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    opacity: 0.4;
    overflow: hidden;
    transition: all .4s ease-in;
    vertical-align: middle;
}

#quote-carousel .carousel-indicators .active {
    width: 128px;
    height: 128px;
    opacity: 1;
    transition: all .2s;
}

.item blockquote {
    border-left: none;
    margin: 0;
}

.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
    color: #f47d23;
}

.item blockquote p:after {
    content: "\f10e";
    font-family: 'Fontawesome';
    float: right;
    margin-right: 10px;
    margin-bottom: 15px;
    color: #f47d23;
}

.testi {
    background-color: #1a2634;
    color: white;
    font-weight: 100;
    padding: 20px;
    margin-bottom: 0px;
}

.down-ar {
    font-size: 80px !important;
    color: #1a2634;
    line-height: 0 !important;
    margin-top: 8px;
    text-align: center;
}

.text-dark {
    color: #1a2634;
}

/* .navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 0px !important;
    border: 1px solid transparent;
} */

.dark {
    background-color: #3a3a3a;
    padding: 20px 0px;
}

.nsavbar-brand {
    color: #b7332b;
    font-weight: bold;
    font-size: 25px !important;
}

.darker {
    background-color: #1d1d1d;
    padding: 20px 0px;
}

.login {
    font-size: 14px;
    text-align: right;
}

.navi {
    position: absolute;
    right: 8%
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.2em !important;
    height: 1.2em !important;
}

.wordpress {
    position: absolute;
    z-index: -1;
}

.wordpress-bg {
    background-image: url(./asset/images/wordpress.jpg);
    padding-top: 9%;
    height: 250px;
}

.icons {
    font-size: 22px;
    color: white;
    font-weight: bold;

}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.input-group {
    margin-top: 4%;
}

input.dark-bg {
    background: #272727;
}

#fh5co-footer i.fa {
    color: #fff;
    font-size: 30px;
}

#fh5co-legal a {
    color: #fff;
}

#fh5co-legal a.text-gr {
    color: #15137b;
}

table {
    width: 100%;
}

.js .animate-box {
    opacity: 0;
}

.error {
    padding: 10px;
    background-color: #F7E2E2;
    color: #B52628;
    margin: 5px;
    align-content: center;
    font-weight: 700;
    text-align: center
}

/* Popup Container */
.popup-container {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Popup Content */
.popup-content {
    position: relative;
    z-index: 1001;
    /* Ensure it's above the popup container */
    background: white;
    padding: 20px;
    width: 400px;
    max-width: 90%;
    margin: 10% auto;
    border-radius: 8px;
}


/* Close Button */
.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: #000;
    text-decoration: none;
}

.mtext-sm {
    font-size: 12px;
}

* {
    box-sizing: border-box;
}

body {
    font: 16px Arial;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

input {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 16px;
}

input[type=text] {
    background-color: #f1f1f1;
    width: 100%;
}

input[type=submit] {
    background-color: #b7332b;
    color: #fff;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
    color: #000000 !important;

}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: #b7332b !important;
    color: #000000 !important;
}

.section {
    margin-bottom: 25px;
    padding: 20px;
    background: #ecf0f1;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.scaled {
    transform: scale(0.8, 0.8);
    transform-origin: left;
}

/* ul {
    padding-left: 20px;
    list-style-type: square;
}

li {
    margin-bottom: 10px;
    line-height: 1.6;
} */

.table-container {
    position: relative;
    max-height: 800px;
    /* Adjust height as needed */
    overflow-y: auto;
    /* Enable vertical scrolling */
    border: 1px solid #ddd;
    /* Optional border */
}

.table-row {
    display: grid;
    padding: 12px 16px;
    text-align: left;
}

.table-header {
    position: sticky;
    top: 0;
    background: #15137b;
    /* Header background */
    color: white;
    z-index: 10;
    /* Ensures it stays above other elements */
    display: grid;
    font-weight: bold;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    /* Adjust padding */
}

.table-row {
    border-bottom: 1px solid #ddd;
    background: #ffffff;
    transition: background 0.3s;
    font-size: 14px;
}

.table-row:nth-child(even) {
    background: #f4f4f4;
    font-size: 14px;
}

.table-row:hover {
    background: #f1e3e3;
    font-size: 14px;
}

/*.table-cell {
    padding: 8px 0;
}*/

.m-table-cell {
    padding: 8px 0;
    font-size: 14px;
    /* Reduce font size for better fit */
    text-align: left !important;
    /* Force left alignment */
    word-wrap: break-word;
    white-space: normal !important;
}

.table-cell {
    padding: 8px 0;
    font-size: 14px;
    /* Reduce font size for better fit */
    text-align: left !important;
    /* Force left alignment */
    word-wrap: break-word;
}


/*My Performance*/
.m-table-grid {
    grid-template-columns: 3fr 3fr 3fr;
}

/* Fair Value*/
.fv-table-grid {
    grid-template-columns: 5fr 5fr 5fr 5fr 5fr;
}

/*Pre Market*/
.pm-table-grid {
    grid-template-columns: 1fr 3fr 8fr 3fr 3fr 3fr;
}

/* Earning Calendar */
.e-table-grid {
    grid-template-columns: 2fr 5fr 5fr;
}

/*52 Week Low*/
.wl-table-grid {
    grid-template-columns: 1fr 3fr 8fr 3fr 3fr 3fr 3fr;
}

.beatSPY {
    background: #CEE8D3;
    color: #4B6A4C;
    font-size: 18px;
    width: 70px;
    padding: 5px;
}

.non-beatSPY {
    background: #F0E0E1;
    color: #BF3033;
    font-size: 18px;
    width: 70px;
    padding: 5px;
}

.beatSPY-dollar {
    background: #CEE8D3;
    color: #4B6A4C;
    font-size: 18px;
    width: 90px;
    padding: 5px;
}

.non-beatSPY-dollar {
    background: #F0E0E1;
    color: #BF3033;
    font-size: 18px;
    width: 90px;
    padding: 5px;
}

/* Navbar Styling */
.custom-navbar {
    background-color: #222;
    /* Dark navbar */
    padding: 15px;
}

.custom-navbar .navbar-brand {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.custom-navbar .nav-link {
    color: #fff !important;
    font-size: 16px;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.custom-navbar .nav-link:hover {
    background: #444;
    border-radius: 5px;
}

/* Dropdown Styling */
/* .dropdown-menu {
    background: #1F2533;
    border: none;
    border-radius: 10px;
    padding: 10px 0;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.dropdown-menu .dropdown-item {
    color: #fff;
    padding: 10px 20px;
    transition: background 0.3s ease;
}

.dropdown-menu .dropdown-item:hover {
    background: #555;
    color: #fff;
    border-radius: 5px;
}

.animated-dropdown {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
} */

td.Strong_buy {
    background: #b9c7b9;
    color: #124A23;
    font-size: 14px;
    text-align: center;
    padding: 4px;
    width: 120px;
}

td.Buy {
    background: #bccccc;
    color: #1e5757;
    font-size: 14px;
    text-align: center;
    padding: 4px;
    width: 120px;
}

td.Hold {
    background: #dbd0d6;
    color: #662146;
    font-size: 14px;
    text-align: center;
    padding: 4px;
    width: 120px;
}

td.Avoid {
    background: #dbd0d6;
    color: #662146;
    font-size: 14px;
    text-align: center;
    padding: 4px;
    width: 120px;
}

td.Void {
    background: #e0d3b6;
    color: #634d1c;
    font-size: 14px;
    text-align: center;
    padding: 4px;
    width: 120px;
}

td.Cancel {
    background: #c4bfc9;
    color: #3c2257;
    font-size: 14px;
    text-align: center;
    padding: 4px;
    width: 120px;
}

.fair_value {
    background: #fae9e3 !important;
    color: #7d331b;
    font-size: 14px;
    padding: 4px;
}

.table-dark {
    --bs-table-bg: #151376;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: #373b3e;
    position: sticky;
    top: 0
}

.table-light {
    --bs-table-bg: #fff;
    --bs-table-striped-bg: #ecedee;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfe0e1;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e5e6e7;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #dfe0e1
}

/*.table-responsive {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 700px;
    font-size:13px;
}*/

.table-responsive {
  max-height: 700px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #ddd;
  position: relative;
  background: #fff;

  /* ✅ Subtle shadow at bottom to hint scroll */
  box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.3);
}

/* ✅ Scroll hint text (only visible when content overflows) */
.table-responsive::after {
  content: '↓ Scroll for more';
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 12px;
  color: #ffcc00;
  background: rgba(0, 0, 0, 0.6);
  padding: 3px 6px;
  border-radius: 3px;
  pointer-events: none;
}

/* ✅ Hide hint on larger screens where scrollbar is visible */
@media (min-width: 992px) {
  .table-responsive::after {
    display: none;
  }
}

/* ✅ Desktop Custom Scrollbar */
.table-responsive::-webkit-scrollbar {
  width: 10px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background-color: #ffcc00;
  border-radius: 5px;
}
.table-responsive::-webkit-scrollbar-track {
  background: #1e1e2f;
}

/* ✅ Firefox Custom Scrollbar */
.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: #ffcc00 #1e1e2f;
}


.table-totalPremium {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
    font-size:13px;
    border: 1px solid #ddd;  /* Optional: visual border */
}

tbody tr td {
    color: #5c5c5c;    
    font-weight: 500;
    font-size:14px;
}

tbody tr a {
    font-size:13px;
    font-weight: 600;
    color: #006699
}

.btn-refresh {
    background-color: #B7332b;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 20px;
}

.btn-refresh:hover {
    background-color: #a12a25;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

@media (max-width: 991px) {

    input[type=submit] {
        background-color: #b7332b;
        color: #fff;
    }
    
    .custom-top-margin {
    margin-top: 0px;
}

    /* .navbar-nav .nav-item {
        flex: 1 1 25%;
        text-align: center;
    }

    .navbar-nav {
        flex-wrap: wrap;
    } */

    .condition-Title {
        background-color: #6B6B6B;
        color: #fff;
        font-weight: 500px;
        font-size:16px;
        padding: 10px;
        margin-bottom: 10px;
    }


    .bg-light {
        background-color: #EBE5D1 !important;
    }

    .bg-light-gray {
        background-color: #f5efef;
        padding: 15px;
    }

    .price-Text {
        background-color: #dfe7e5;
        padding: 10px;
        font-weight: 500px;
    }

    .price-Text-Second {
        background-color: #d9e0e8;
        padding: 10px;
        font-weight: 500px;
        margin: 5px;
    }

    .smoke {
        background-color: #EBE5D1;
        padding: 20px 0px;
    }

    .login {
        font-size: 14px;
        text-align: center;
    }

    .navbar-brand {
        color: #B7332b !important;
        font-weight: bold;
        font-size: 20px !important;
        padding-left: 10px;
    }

    .navi {
        position: inherit;
        right: 8%;
        margin-left: 5%;
    }

    .banner {
        width: 100% !important;
        height: 150px !important;
    }

    .aft-banner {
        background-color: #1f2533;
        color: white;
        padding: 15px 5%;
        margin: 0;
    }

    .bordery {
        border-right: 0px solid gainsboro;
        border-bottom: 0px solid gainsboro;
        padding: 20px;
        position: relative;
    }

    .wordpress {
        position: absolute;
        z-index: -1;
        width: 220%;
        margin-left: -50%;
    }

    body {
        font-family: 'Calibri', sans-serif !important;
        overflow-x: hidden;
    }

    .signup {
        background-color: #1f2533;
        color: white;
        padding: 15px 0;
        border-bottom: 1px solid #424141 !important;
    }


    .h2,
    h2 {
        font-size: 1.6rem !important;
    }

    .h3,
    h3 {
        font-size: 1.3rem !important;
    }

    .price-box {
        background: #fbfbfb;
        text-align: left;
        border: 1px solid silver;
        padding: 25px 15px;
        margin-bottom: 45px;
    }



    .price-box-dark {
        background: #1f2533;
        text-align: left;
        color: white;
        border: 1px solid silver;
        padding: 25px 15px;
        /* margin-top: -25px;*/
        margin-bottom: 45px;
    }

    .navbar-light .navbar-toggler {
        color: rgba(74, 74, 74, 0.5);
        border-color: rgba(0, 0, 0, .1);
        margin-right: 10px;
    }

    .mtext-center {
        text-align: center;
    }

    .mtext-sm {
        font-size: 12px;
    }

    .icons {
        font-size: 22px;
        color: white;
        font-weight: bold;
        margin-top: 30px;
        margin-bottom: -10px;
    }

    .donation-form {
        max-width: 400px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #f9f9f9;
    }

    .donation-form label {
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .donation-form select {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
    }

    .donation-form input[type="image"] {
        display: block;
        margin: 0 auto;
    }


    /* Popup Container */
    .popup-container {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

    /* Popup Content */
    .popup-content {
        position: relative;
        z-index: 1001;
        /* Ensure it's above the popup container */
        background: white;
        padding: 20px;
        width: 400px;
        max-width: 90%;
        margin: 10% auto;
        border-radius: 8px;
    }

    /* Close Button */
    .close-btn {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close-btn:hover,
    .close-btn:focus {
        color: #000;
        text-decoration: none;
    }

    * {
        box-sizing: border-box;
    }

    body {
        font: 16px Arial;
    }

    .autocomplete {
        /*the container must be positioned relative:*/
        position: relative;
        display: inline-block;
    }

   /* input {
        border: 1px solid transparent;
        background-color: #f1f1f1;
        padding: 10px;
        font-size: 16px;
    }

    input[type=text] {
        background-color: #f1f1f1;
        width: 100%;
    }

    input[type=submit] {
        background-color: #b7332b !important;
        color: #fff;
    } */
    
    input[type="text"],
    input[type="date"] {
        border: 1px solid #ccc;        /* thin gray border */
        padding: 10px;
        border-radius: 4px;
        font-size: 16px;
        transition: all 0.2s ease-in-out;
        background-color: #fff;        /* default white */
        box-sizing: border-box;
        width: 100%;                   /* full width optional */
    }

    /* On hover */
    input[type="text"]:hover,
    input[type="date"]:hover {
        border-color: #007bff;         /* blue border */
        background-color: #e6f2ff;     /* light blue background */
    }

    /* On focus (clicked/focused) */
    input[type="text"]:focus,
    input[type="date"]:focus {
        outline: none;
        border-color: #007bff;
        background-color: #e6f2ff;
        box-shadow: 0 0 5px rgba(0,123,255,0.2);  /* soft glow */
    }

    .autocomplete-items {
        position: absolute;
        border: 1px solid #d4d4d4;
        border-bottom: none;
        border-top: none;
        z-index: 99;
        /*position the autocomplete items to be the same width as the container:*/
        top: 100%;
        left: 0;
        right: 0;
    }

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
        color: #000000 !important;
    }

    .autocomplete-items div:hover {
        /*when hovering an item:*/
        background-color: #e9e9e9;
    }

    .autocomplete-active {
        /*when navigating through the items using the arrow keys:*/
        background-color: #b7332b !important;
        color: #000000 !important;
    }

    .section {
        margin-bottom: 25px;
        padding: 20px;
        background: #ecf0f1;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* ul {
        padding-left: 20px;
        list-style-type: square;
    }

    li {
        margin-bottom: 10px;
        line-height: 1.6;
    } */

    .table-container {
        overflow-x: auto;
        /* Enable horizontal scrolling */
        display: block;
        white-space: nowrap;
        max-width: 100%;
        position: relative;
        font-size:14px;
    }

    .table-header,
    .table-row {
        display: grid;
        min-width: 800px;
        /* Prevent extreme shrinking */
        align-items: center;
        font-size:14px;
        /* Align text vertically */
    }

    .table-cell {
        padding: 10px;
        font-size: 14px;
        /* Reduce font size for better fit */
        text-align: left !important;
        /* Force left alignment */
        word-wrap: break-word;
        white-space: normal !important;

    }

    /*My Performance*/
    .m-table-grid {
        grid-template-columns: 200px 200px 200px;
        font-size: 14px;
    }

    /* Fair Value*/
    .fv-table-grid {
        grid-template-columns: 70px 70px 70px 70px 70px;
        /* Fixed column widths */
        font-size: 14px;
    }

    /*Pre Market*/
    .pm-table-grid {
        grid-template-columns: 40px 80px 140px 120px 180px 100px 100px;
        /* Fixed column widths */
        font-size: 14px;
    }

    /*52 Week Low*/
    .wl-table-grid {
        grid-template-columns: 40px 80px 140px 120px 150px 50px 180px;
        /* Fixed column widths */
        font-size: 14px;
    }

    /* Fair Value: Sticky first column for both header and rows */
    .fv-table-grid .table-cell:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        /* Keep it above the rest */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        /* Optional shadow */
    }

    .table-header.fv-table-grid .table-cell:first-child {
        background: #15137b;
        color: #fff;
    }

    .table-row.fv-table-grid .table-cell:first-child {
        background: #f4f2f9;
    }

    /* Pre Market: Sticky first column for both header and rows */
    .pm-table-grid .table-cell:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 2;
        /* Keep it above the rest */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        /* Optional shadow */
    }

    .table-header.pm-table-grid .table-cell:nth-child(2) {
        background: #15137b;
        color: white;
    }

    .table-row.pm-table-grid .table-cell:nth-child(2) {
        background: #f4f2f9;
    }

    /* 52 Week Low: Sticky first column for both header and rows */
    .wl-table-grid .table-cell:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 2;
        /* Keep it above the rest */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        /* Optional shadow */
    }

    .table-header.wl-table-grid .table-cell:nth-child(2) {
        background: #15137b;
        color: white;
    }

    .table-row.wl-table-grid .table-cell:nth-child(2) {
        background: #f4f2f9;
    }

    .beatSPY {
        background: #CEE8D3;
        color: #4B6A4C;
        font-size: 15px;
        width: 70px;
        padding: 5px;
    }

    .non-beatSPY {
        background: #F0E0E1;
        color: #BF3033;
        font-size: 15px;
        width: 70px;
        padding: 5px;
    }

    .beatSPY-dollar {
        background: #CEE8D3;
        color: #4B6A4C;
        font-size: 15px;
        width: 90px;
        padding: 5px;
    }

    .non-beatSPY-dollar {
        background: #F0E0E1;
        color: #BF3033;
        font-size: 15px;
        width: 90px;
        padding: 5px;
    }

    .error {
        padding: 3px;
        background-color: #F7E2E2;
        color: #B52628;
        margin: 3px;
        align-content: center;
        font-weight: 700;
        text-align: center
    }

    /* Navbar Styling */
    .custom-navbar {
        background-color: #222;
        /* Dark navbar */
        padding: 15px;
    }

    .custom-navbar .navbar-brand {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
    }

    .custom-navbar .nav-link {
        color: #fff !important;
        font-size: 16px;
        padding: 10px 15px;
        transition: all 0.3s ease;
    }

    .custom-navbar .nav-link:hover {
        background: #444;
        border-radius: 5px;
    }

    /* Dropdown Styling */
    /* .dropdown-menu {
        background: #1F2533;
        border: none;
        border-radius: 10px;
        padding: 10px 0;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }

    .dropdown-menu .dropdown-item {
        color: #fff;
        padding: 10px 20px;
        transition: background 0.3s ease;
    }

    .dropdown-menu .dropdown-item:hover {
        background: #555;
        color: #fff;
        border-radius: 5px;
    }

    .hide-for-small {
        display: none;
    }

    .animated-dropdown {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
    } */

    td.Strong_buy {
        background: #B5D3B8;
        color: #124A23;
        font-size: 14px;
        text-align: center;
        padding: 4px;
        width: 120px;
    }

    td.Buy {
        background: #BBD8F7;
        color: #3E59B0;
        font-size: 14px;
        text-align: center;
        padding: 4px;
        width: 120px;
    }

    td.Hold {
        background: #F1E0E1;
        color: #D32225;
        font-size: 14px;
        text-align: center;
        padding: 4px;
        width: 120px;
    }

    td.Avoid {
        background: #F1E0E1;
        color: #D32225;
        font-size: 14px;
        padding: 4px;
        width: 120px;
    }

    .table-dark {
        --bs-table-bg: #151376;
        --bs-table-striped-bg: #2c3034;
        --bs-table-striped-color: #fff;
        --bs-table-active-bg: #373b3e;
        --bs-table-active-color: #fff;
        --bs-table-hover-bg: #323539;
        --bs-table-hover-color: #fff;
        color: #fff;
        border-color: #373b3e;
        position: sticky;
        top: 0
    }

    .table-responsive {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: 700px;
        font-size:14px;
    }

    tbody tr td {
        color: #5c5c5c;
        font-size: 14px;
        font-weight: 500
    }

    tbody tr a {
        font-size: 13px;
        font-weight: 500
    }

    .btn-refresh {
        background-color: #B7332b;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
        margin-top: 20px;
    }

    .btn-refresh:hover {
        background-color: #a12a25;
    }

    
}