table {
    width: 100%;
}

.table-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "filter"
        "table";
    max-height: 100%;
}

.table-box {
    grid-area: table;
    background-color: var(--background-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: auto;
}
.table-box table thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 10;
    background-color: var(--background-color);
}

.table {
    margin: 0px;
}
.table thead th {
    border-top-width: 0px;
    border-bottom-width: 0px;
    /* The border is handled by the pseudo selector. */
    padding: 1rem .75rem;
    font-weight: 600;
    color: var(--color-heading);
}
.table thead::after {
    /* 
    We use border-collapse: collapse for tables. 
    This makes borders of the table head scrollable with sticky headers.
    By using the after pseudo selector we fix this.
    */
    content: "";
    position: absolute;
    border-bottom: var(--border-width) solid var(--border-color);
    width: 100%;
}

.table td, .table th {
    border-top-width: 0;
    padding: .8rem .75rem;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--background-color-odd);
}

.table-linked tr:hover td:first-child a {
    text-decoration: underline;
    color: var(--color-link-hover);
}

.table-empty-text {
    margin: 0px;
    padding: .8rem .75rem;
    color: var(--color-soft);
    background-color: var(--background-color-odd);
}

.table-totals {
    border-top: var(--border-width) solid var(--border-color);
    padding-top: calc(.8rem - .55rem);
}
.table-totals .row {
    padding: .55rem .75rem;
}
.table-total-subject {
    font-weight: 600;
    text-align: right;
}
.table-total-subject label {
    margin-bottom: 0;
}
.table-total-value {
    font-weight: 600;
    text-align: right;
}

.table progress {
    accent-color: #c1e2be;
    width: 60px;
}