:root {
    /*--clr_odd-row: #d6eadf;*/
    /*--clr_even-row: #caddd3;*/
    /*--clr_row-hover: #eafbf3;*/
    --clr_odd-row: #ebe6ff;
    --clr_even-row: #dcdbff;
    --clr_row-hover: #1f1b53;
    --clr_row-selected: #7c8be1;

    --bg_row-hover: #b7b4e2d6;
    --clr_thead: #fbfffd;
    --clr_table-main: #95b8d1;
    --clr_scrollbar: #4b5e6b8f;
    /* --badge_paddingY: .5rem; */
    /* --badge_paddingX: .75rem; */
    /* --height_table_header: 64px; */
    /* --height_column_header: 60px; */
}

table {
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
    user-select: none;
    font-size: var(--clr_font-size);
    color: #000000ab;
    /* overflow: auto; */
}

/* .table {
    width: 100%;
    height: 100%;
    background-color: var(--clr_table-main);
    backdrop-filter: blur(7px);
    box-shadow: 0 .4rem .8rem #0005;
    border-radius: .8rem;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: space-between;
} */

/* .table_header {
    width: 100%;
    height: 64px;
    background-color: var(--clr_table-main);
    padding: 1rem;
    color: #fff;
    font-size: 1.25rem;
    border-bottom: 1px solid #00000052;
    display: grid;
    grid-template-columns: 2fr 4fr;
    align-items: center;
    justify-content: space-between;
} */

/* .table_body {
    background-color: #fffb;
    width: 100%;
    height: 100%;
    overflow: auto;
} */

/* add custom scrollbar style */
/* .table_body::-webkit-scrollbar {
    width: 0.45rem;
    height: 0.45rem;
} */

/* .table_body:hover::-webkit-scrollbar {
    width: 0.45rem;
    height: 0.45rem;
} */

.table_body::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background-color: var(--clr_scrollbar);
    /*display: none;*/
    visibility:hidden;
}

.table_body:hover::-webkit-scrollbar-thumb {
    /*display: block;*/
    visibility:visible;
}

.table_body::-webkit-scrollbar-corner {
    background-color: red;
}

.table_body::-webkit-scrollbar-button {
    background-color: green;
}

.table_body::-webkit-scrollbar-track {
    background-color: blue;
}

.table_body::-webkit-scrollbar-track-piece {
    background-color: cyan;
}

/* td img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    vertical-align: middle;
} */

thead td {
    padding: 1.2rem;
    font-size: 1.1rem;
    font-weight: 500;
    /* border-top: 1px solid #00000047; */
    /* border-bottom: 1px solid #00000026; */
    text-wrap: nowrap;
    background-color: #0014ff24;
    color: #1e1c40;
}

    tbody td {
        padding: 1rem;
        font-size: 1rem;
        color: #1d1d1e;
        font-weight: 400;
        text-wrap: nowrap;
    }

    /* thead th {
        position: sticky;
        top: 0;
        background-color: #bed7e9;
        font-size: .95rem;
        font-weight: bold;
        text-align: left;
        color: #0e0c0c80;
        border: none;
    } */

    /* thead {
        position: relative;
        isolation: isolate;
        z-index: 1;
    } */

    /* eliminates the lines showing on the column header when scrolling */
    /* thead::before {
        content: '';
        width: 100vw;
        height: var(--height_column_header);
        z-index: -1;
        position: fixed;
        top: var(--height_table_header);
        background-color: #bed7e9;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgb(0 0 0 / 0%) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgb(0 0 0 / 0%) 0px 16px 16px;
    } */

    /* tbody td {
        padding: .75rem 1rem;
        font-size: .88rem;
    } */

    /* add style for alternating rows */
    tbody tr:nth-child(odd) {
        /* background-color: var(--clr_odd-row); */
        /* background-color: #e2e2ff; */
        background-color: #e1e1e1;
    }

    tbody tr:nth-child(even) {
        /* background-color: var(--clr_even-row); */
        background-color: hsl(233 11% 82% / 1);
    }

    /* tbody tr {
        color: #574d4d;
        transform-origin: right;
        overflow: hidden; 
        isolation: isolate;
        z-index: 1;
    } */

    /* add style on row hover */
    /*tbody tr:hover {
        background-color: var(--bg_row-hover);
        color: var(--clr_row-hover);
    }*/

    tbody tr:hover {
        background-color: #7c8be1;
        /*cursor: pointer;*/
    }

    /*tbody tr:hover td {
        color: #6755be;
    }*/

    /*tbody tr:hover td {
        color: #3c229fde;
    }*/

    tbody tr:hover td {
        color: #fff;
    }

tr[data-hidden="false"] {
    --transition_delay: 0.1s;
    transform: scaleX(1);
    opacity: 1;
    display: table-row;
    pointer-events: auto;
    animation: showRow 0.2s ease-in-out var(--transition_delay);
}

tr[data-hidden="true"] {
    --transition_delay: 0.1s;
    transform: scaleX(0);
    opacity: 0;
    display: none;
    pointer-events: none;
    animation: hideRow 0.2s ease-in-out var(--transition_delay);
}

@keyframes hideRow {
    from {
        transform: scale(1);
        opacity: 1;
        display: table-row;
    }

    to {
        transform: scale(0);
        opacity: 0;
        display: none;
    }
}

@keyframes showRow {
    from {
        transform: scale(0);
        opacity: 0;
        display: none;
    }

    to {
        transform: scale(1);
        opacity: 1;
        display: table-row;
    }
}

.table_footer {
    padding: .5rem 1rem;
    background-color: var(--clr_table-main);
    width: 100%;
}