:root {
    interpolate-size: allow-keywords;
    --bh-primary-color: #153d77;
    --bh-primary-bg-color: #153d77;
    --bh-secondary-bg-color: #0d284f;
    --bh-tritiary-bg-color: #2ecc71;
    --bh-primary-lite-color: #9edbfb;
    --bh-secondary-lite-color: #0176d3;
    --bh-tritiary-lite-color: #0d9dda;
    --bh-button-bg-color: #0d274e;
    --bh-button-hover-bg-color: #3b7ddd;
    --bh-primary-font-color: #fff;
}



#spectab #search {
    padding: 8px;
    width: 400px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#spectab label {
    margin-left: 20px;
    /* font-size: 18px; */
}

*/

#spectab #rowsPerPage {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Unique CSS for the table container with scrolling */
#spectab .table-container {
    width: 100%;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: auto; /* Enable vertical scrolling */
    max-height: 800px; /* Adjust height as needed */
    border: 1px solid #ddd; /* Optional: Add border for better visibility */
    margin-top: 20px;
    cursor: pointer;
}

    /* Webkit Scrollbar Customization */
    #spectab .table-container::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    #spectab .table-container::-webkit-scrollbar-thumb {
        background-color: var(--bh-button-bg-color);
        border-radius: 4px;
    }
    /* 
#spectab .table-container::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
} */

    #spectab .table-container::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

/* Unique CSS for the table */
#spectab table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

#spectab th, #spectab td {
    padding: 13.8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd; /* Vertical line between columns */
    white-space: nowrap; /* Prevent text wrapping */
}

#spectab td {
    background-color: white;
}

#spectab th {
    background-color: #F5F4F4;
    color: rgb(10, 9, 93);
    cursor: pointer;
    position: sticky;
    top: 0;
}

#spectab td {
    color: rgb(13, 13, 13);
}

#spectab th {
    font-size: 15px; /* Adjust the size as needed */
}

    #spectab th:last-child, #spectab td:last-child {
        border-right: none; /* Remove vertical line for the last column */
    }


    /* Ensure the first column is sticky and properly aligned */
    #spectab th:first-child {
        position: sticky;
        left: 0;
        top: 0;
        z-index: 1;
    }


/* Ensure the first column is sticky and properly aligned */
/* #spectab td:first-child
 {
    position: sticky;
    left: 0;

} */

#table-header {
    position: sticky;
    top: 0%
}

/* Style for both popup headings */
.manage-columns-popup-content h3,
.manage-rows-popup-content h3 {
    color: #3e4676; /* Your desired color */
    margin: 0 0 15px 0; /* Adjust spacing as needed */
    /* Adjust size as needed */
    font-weight: 600; /* Makes text semi-bold */
}

#spectab .controls {
    display: flex;
    align-items: center;
    /* gap: 35px; */
    flex-wrap: wrap;
}

/* Common Button Styles */
#spectab .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px; /* Ensures uniform padding */
    min-width: 150px; /* Set a minimum width for consistency */
    height: 40px; /* Ensures all buttons have the same height */
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

    /* Manage Columns Button */
    #spectab .btn.manage-columns, #spectab .btn.filter-columns {
        border: 1px solid var(--bh-button-bg-color);
        background-color: #213E71;
        color: white;
    }

        #spectab .btn.manage-columns:hover {
            background-color: #335ca1;
        }
        /* #spectab .btn.manage-columns:hover {
    background-color: #f0f8ff;
} */
        #spectab .btn.filter-columns:hover {
            background-color: #335ca1;
        }


    #spectab .btn.filter:hover {
        background-color: #e6f4ea;
    }

    /* Export Button */
    #spectab .btn.export {
        border: none;
        background-color: #213E71;
        color: white;
    }

        #spectab .btn.export:hover {
            background-color: #335ca1;
        }

    #spectab .btn.filter-columns i {
        font-size: 20px; /* Adjust size as needed */
    }

/* Popup styles */
.manage-columns-popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.manage-columns-popup-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 55%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.manage-columns-popup-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

    .manage-columns-popup-close:hover,
    .manage-columns-popup-close:focus {
        color: black;
        text-decoration: none;
    }

/* Scrollable columns list */
.manage-columns-list {
    max-height: 400px; /* Set a fixed height for the scrollable box */
    overflow-y: auto; /* Enable vertical scrolling */
    margin-top: 20px;
    border: 1px solid #ddd; /* Optional: Add a border for better visibility */
    border-radius: 4px;
    padding: 10px;
}

    /* Webkit Scrollbar Customization */
    .manage-columns-list::-webkit-scrollbar {
        width: 6px;
    }

    .manage-columns-list::-webkit-scrollbar-thumb {
        background-color: var(--bh-button-bg-color);
        border-radius: 4px;
    }


    .manage-columns-list::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

#applyColumns {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: var(--bh-button-bg-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 89%;
}

    #applyColumns:hover {
        background-color: #335ca1;
    }





/* Popup styles */
.manage-rows-popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.manage-rows-popup-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    border-radius: 8px;
}

.manage-rows-popup-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

    .manage-rows-popup-close:hover,
    .manage-rows-popup-close:focus {
        color: black;
        text-decoration: none;
    }

/* Scrollable rows list */
.manage-rows-list {
    max-height: 400px; /* Set a fixed height for the scrollable box */
    overflow-y: auto; /* Enable vertical scrolling */
    margin-top: 20px;
    border: 1px solid #ddd; /* Optional: Add a border for better visibility */
    border-radius: 4px;
    padding: 10px;
}

    /* Webkit Scrollbar Customization */
    .manage-rows-list::-webkit-scrollbar {
        width: 8px; /* Increased width for better visibility */
    }

    .manage-rows-list::-webkit-scrollbar-thumb {
        background-color: var(--bh-button-bg-color);
        border-radius: 4px;
        border: 2px solid #f1f1f1; /* Adds spacing effect */
    }

        .manage-rows-list::-webkit-scrollbar-thumb:hover {
            background-color: var(--bh-button-hover-bg-color);
        }

    .manage-rows-list::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        border-radius: 4px;
    }

/* Button styles */
#applyRows {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: var(--bh-button-bg-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 89%;
}

    #applyRows:hover {
        background-color: #335ca1;
    }


.filter-options-container {
    margin-top: 10px;
    padding: 10px;
    /* background-color: #f4f4f4; */
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.tabb-btn {
    padding: 5px 10px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: #000;
}

    .tabb-btn.active {
        border-bottom: 2px solid #007bff;
        /* color: #000; */
    }

.filter-tab-content {
    display: none;
    flex-direction: column;
    gap: 10px;
}

    .filter-tab-content.active {
        display: flex;
    }

.filter-row {
    display: flex;
    align-items: center;
    gap: 180px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .filter-option label {
        font-weight: bold;
    }

.filter-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-left: 70%;
}






#searchInput {
    padding: 8px;
    width: 215px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#spectab .controls > * {
    margin-right: 20px; /* Adjust spacing between elements */
}


/* Add this CSS to your stylesheet */
.manage-columns-list input[type="checkbox"],
.manage-rows-list input[type="checkbox"] {
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
    accent-color: #213E71;
    transform: scale(1.3);
    margin-right: 8px;
    cursor: pointer;
}

.manage-columns-list label,
.manage-rows-list label {
    cursor: pointer;
    user-select: none;
}

.manage-columns-list div,
.manage-rows-list div {
    display: flex;
    align-items: center;
    margin: 8px 0;
}