.table-scroll {
    max-width: 100%;
    max-height: 65vh;
    overflow: auto;
    position: relative;
    isolation: isolate;
    -webkit-overflow-scrolling: touch;
}

.table-scroll:focus-visible {
    outline: 2px solid #ad8413;
    outline-offset: 2px;
}

.table-scroll > table.scrollable-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.table-scroll > .scrollable-table > thead > tr > :is(th, td) {
    position: sticky;
    top: var(--table-header-top, 0px);
    z-index: 3;
    background-color: #fff0d4;
    box-shadow: 0 1px 0 #cebf9f;
}

.scrollable-table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    box-sizing: border-box;
    min-width: 5rem;
}

.table-scroll > .scrollable-table > :is(thead, tbody, tfoot) > tr > .table-sticky-column {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 9rem;
    max-width: 12rem;
    overflow-wrap: anywhere;
    white-space: normal;
    background-color: #fff;
    box-shadow: 1px 0 0 #cebf9f;
}

.table-scroll > .scrollable-table > tbody > tr:nth-of-type(odd) > .table-sticky-column {
    background-color: #f3e4c8;
}

.table-scroll > .scrollable-table > tbody > tr.table-success > .table-sticky-column,
.table-scroll > .scrollable-table > tbody > tr > .table-sticky-column.table-success {
    background-color: #c3e6cb;
}

.table-scroll > .scrollable-table > tbody > tr.table-warning > .table-sticky-column,
.table-scroll > .scrollable-table > tbody > tr > .table-sticky-column.table-warning {
    background-color: #ffeeba;
}

.table-scroll > .scrollable-table > tbody > tr.table-danger > .table-sticky-column,
.table-scroll > .scrollable-table > tbody > tr > .table-sticky-column.table-danger {
    background-color: #f5c6cb;
}

.table-scroll > .scrollable-table > thead > tr > .table-sticky-column {
    z-index: 4;
    background-color: #fff0d4;
}

@media (max-width: 767px) {
    .table-scroll > table.scrollable-table {
        width: max-content;
        min-width: 100%;
    }

    .scrollable-table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
        max-width: 18rem;
        overflow-wrap: anywhere;
    }

    .table-scroll > .scrollable-table > :is(thead, tbody, tfoot) > tr > .table-sticky-column {
        width: 40vw;
        min-width: min(9rem, 40vw);
        max-width: min(12rem, 45vw);
    }
}

@media print {
    .table-scroll {
        max-height: none;
        overflow: visible;
    }

    .table-scroll > table.scrollable-table {
        width: 100%;
        min-width: 0;
    }

    .table-scroll > .scrollable-table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
        position: static;
        box-shadow: none;
    }
}