div.table {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 5px;
    margin-top: -10px;
}

div.thead.tr {
        color: var(--black-default);
        border-bottom: 1px solid var(--gray-soft);
    }

    div.tr {
        transition: 0.2s;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        text-align: center;
        width: 100%;
        margin: 2px 0;
        padding: 1px 0;
    }

  
    span.th input[type="checkbox"],
    span.td input[type="checkbox"] {
        cursor: pointer;
    }

    span.th {
        font-family: var(--title-font);
        font-size: 1.2rem;
        padding: 10px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    span.td {
        font-family: var(--text-font);
        font-size: 0.8rem;
        padding: 8px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    div.tbody {
        background-color: var(--white-default);
        width: 100%;
        height: 260px;

        display: flex;
        flex-direction: column;
        justify-content: unset;
        align-items: center;

        overflow-y: scroll;
        overflow-x: hidden;
    }

    div.body > div.tr {
        width: 98%;
    }

    div.tbody::-webkit-scrollbar {
        width: 0.3em;
        border-radius: 10px;
    }

    div.tbody::-webkit-scrollbar-track {
        border-radius: 20px;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    div.tbody::-webkit-scrollbar-thumb {
        background-color: var(--blue-default);
        outline: none;
    }