.watchlist-container thead {
    position: sticky; /* Keeps the header visible while scrolling */
    top: 0;
    z-index: 10; /* Ensures the header is above the table body */
}

.watchlist-container th, td {
    font-size: 12px !important;
    padding: 4px;
    border: 1px solid #343a40;
}

.watchlist-container td {
    text-align: right;
    font-weight: 500;
}

.watchlist-container tbody tr:hover {
    border: 1px solid #329aff !important;
    cursor: pointer;
}

.bg-dark .watchlist-container tbody tr:hover {
    background-color: #1a2238;
}

#watchlistTabs {
    background: #1a2238;
}

.watchlist-container .tab-pane {
    min-height: 100%;
}


.bg-light .up {
    color: blue;
    font-weight: bold;
}

.bg-light .down {
    color: red;
    font-weight: bold;
}

.bg-light .neutral {
    color: black;
}

.bg-dark .up {
    color: #00ffaf;
}

.bg-dark .down {
    color: #e91e63;
}

.bg-dark .neutral {
    color: white;
}
/* Add classes for forex majors and metals */
.bg-light .forex-major {
    background-color: #ffec408c; /* Golden yellow */
}

.bg-dark .forex-major {
    background-color: #19003b;
}

.bg-dark .metal {
    background-color: #066b574f;
}

.bg-light .metal {
    background-color: #c7ffd8a8; /* Light cyan */
}


/* Common scrollbar styles for WebKit Browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Scrollbar Track for Dark Background */
.bg-dark ::-webkit-scrollbar-track {
    background: #0c1125; /* Dark background color */
    border-radius: 4px;
}

/* Scrollbar Thumb for Dark Background */
.bg-dark ::-webkit-scrollbar-thumb {
    background-color: #1a2238; /* Lighter dark blue for contrast */
    border-radius: 4px;
    border: 1px solid #0c1125; /* Blend the thumb into the track */
}

    .bg-dark ::-webkit-scrollbar-thumb:hover {
        background-color: #3a3f5c; /* Lighter on hover for visibility */
    }

/* Scrollbar Track for Light Background */
.bg-light ::-webkit-scrollbar-track {
    background: #f8f9fa; /* Light background color */
    border-radius: 4px;
}

/* Scrollbar Thumb for Light Background */
.bg-light ::-webkit-scrollbar-thumb {
    background-color: #ced4da; /* Lighter gray for contrast */
    border-radius: 4px;
    border: 1px solid #f8f9fa; /* Blend the thumb into the track */
}

    .bg-light ::-webkit-scrollbar-thumb:hover {
        background-color: #adb5bd; /* Slightly darker on hover for visibility */
    }

/* Firefox Styles */
* {
    scrollbar-width: thin;
}

/* For Dark Background */
.bg-dark {
    scrollbar-color: #1a2238 #0c1125; /* Thumb color, Track color */
}

/* For Light Background */
.bg-light {
    scrollbar-color: #ced4da #f8f9fa; /* Thumb color, Track color */
}

.watchlist-container table {
    --bs-table-bg: unset !important
}
/* Add a grey background with a glass effect on row hover */
tr:hover {
    background: rgba(128, 128, 128, 0.3); /* Light grey transparent background */
    backdrop-filter: blur(8px);
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Style for the delete icon */
.remove-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: bold;
    color: #ff4d4d;
    cursor: pointer;
    display: none; /* Hide by default */
    z-index: 10; /* Ensure it appears above the row */
}

/* Show delete icon when hovering over the row */
tr:hover .remove-icon {
    display: inline;
}

/* Ensure the row has relative positioning so the delete icon can be positioned absolutely */
tr {
    position: relative;
    z-index: 1;
}

.remove-icon {
    z-index: 2;
}

.remove-icon:hover {
   background:#fff;
}
/* Change the background color of list group items */
.custom-list-item {
    border-bottom: 1px solid #ddd; /* Thin bottom border */
    transition: background-color 0.2s ease-in-out;
}

/* Modify the layout of symbol info to display horizontally */
.symbol-info {
    display: flex;
    flex-direction: column;
    align-items:center;
}

.symbol-description {
    font-size: 0.85rem; /* Adjust font size of description */
    color: #000; /* Make description text slightly lighter */

}

.custom-list-item:hover {
   /* background-color: #0d6efd !important;*/
    cursor: pointer !important;
    /*    box-shadow: 0px !important;*/
    transform: none;
    border-radius: 0px !important;
    border-bottom: 0;
}
    .custom-list-item:hover .add-icon {
        color: #fff !important;
    }
.custom-list-item .symbol-info {
    padding: 8px 0;
}

.modal-align-icon{
    display:contents !important;
}
/* For larger screens, display symbol info horizontally */
@media (min-width: 768px) {
    .symbol-info {
        flex-direction: row;
    }

    .symbol-description {
        margin-left: 10px; /* Add space between the name and description */
    }
}
[data-bs-target="#Specification"] {
    color: #0dfda4;
    font-size: 16px;
    cursor:pointer;
}

#searchSymbol {
    border: 1px solid;
    outline: none;
    box-shadow: none;
    border-left: none !important;
}

.seacrh-icon {
    border: 1px solid !important;
    border-right:none !important;
}

#searchSymbol:focus {
    outline: none;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.05); /* Light grey background on focus */
}
.add-icon {
    color: #0d6efd !important;
    margin-left: -28px !important;
    font-size: 22px !important;
}
.custom-list-item {
    border: 0px solid transparent; /* Prevents layout shift */
    border-radius: 8px; /* Adds slight rounded corners */
    transition: background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}

    .custom-list-item:hover {
       /* background-color: rgba(255, 255, 255, 0.1);*/ /* Light highlight */
        border-radius: 8px; /* Slightly increase border-radius on hover */
        transition: background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out;
    }