.web-table-wrap {
    --web-table-head-bg: #2D6479;
    --web-table-head-text: #F2F2F2;
    --web-table-surface: #FFFFFF;
    --web-table-border: #D7E0E6;
    --web-table-grid: #E2E9ED;
    --web-table-row-odd: rgba(216, 216, 216, 0.3137);
    --web-table-row-even: rgba(143, 143, 143, 0.3137);
    --web-table-row-hover: rgba(45, 100, 121, 0.1);
    --web-table-grand-total: #CFE0E8;
    --web-table-shadow: 0 10px 22px rgba(15, 15, 15, 0.05);

    margin-top: 1rem;
    border: 1px solid var(--web-table-border);
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--web-table-surface);
    box-shadow: var(--web-table-shadow);
}

.web-table-wrap--sticky-y {
    max-height: 65vh;
    overflow-y: auto;
}

.web-table-wrap--sticky-y.is-fill-height {
    height: var(--web-table-fill-height, 65vh);
    max-height: var(--web-table-fill-height, 65vh);
}

.web-table {
    margin-bottom: 0;
    background: transparent;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.web-table thead th {
    background: var(--web-table-head-bg);
    color: var(--web-table-head-text);
    border-top: 0;
    border-bottom: 1px solid var(--web-table-head-bg);
    white-space: nowrap;
    font-weight: 700;
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
}

.web-table td,
.web-table th {
    vertical-align: middle;
    border-color: var(--web-table-grid);
}

.web-table--sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.web-table-wrap--sticky-y .web-table--sticky-head thead th {
    box-shadow: inset 0 -1px 0 var(--web-table-grid);
}

.web-table tbody tr:not(.web-table__grand-total):not([class*="table-"]):nth-of-type(odd) {
    background-color: var(--web-table-row-odd);
}

.web-table tbody tr:not(.web-table__grand-total):not([class*="table-"]):nth-of-type(even) {
    background-color: var(--web-table-row-even);
}

.table-hover.web-table tbody tr:not(.web-table__grand-total):not([class*="table-"]):hover {
    background-color: var(--web-table-row-hover);
}

.web-table tbody tr.web-table__grand-total,
.web-table tfoot tr.web-table__grand-total {
    font-weight: 700;
}

.web-table tbody tr.web-table__grand-total > td,
.web-table tbody tr.web-table__grand-total > th,
.web-table tfoot tr.web-table__grand-total > td,
.web-table tfoot tr.web-table__grand-total > th {
    background-color: var(--web-table-grand-total);
}

.web-table tbody tr.web-table__grand-total:hover,
.web-table tfoot tr.web-table__grand-total:hover {
    background-color: var(--web-table-grand-total);
}

.web-table tbody tr.web-table__grand-total:hover > td,
.web-table tbody tr.web-table__grand-total:hover > th,
.web-table tfoot tr.web-table__grand-total:hover > td,
.web-table tfoot tr.web-table__grand-total:hover > th {
    background-color: var(--web-table-grand-total);
}

.web-table__empty td {
    color: #6A7680;
    font-style: italic;
}