.table .row {
    position: relative;
}

.table .row:nth-child(odd):after {
    content: '';
    background-color: var(--primary);
    z-index: -1;
    position: absolute;
    transition: all .3s ease;
}

@media screen and (min-width: 769px) {
    .table .row:nth-child(odd):after {
        background-color: var(--background);
        background-image: var(--lightgradient);
        background-attachment: fixed;
        /* height: 100%; */
        /* left: -100vw; */
        /* top: 0; */
        /* right: -100vw; */
        /* bottom: 0; */
    }
}

@media print {
    .table .row:after {
        content: '' !important;
        background: none !important;
        border-bottom: 1px solid var(--secondary);
        z-index: -1;
        height: 100%;
        left: -100vw;
        top: 0;
        right: -100vw;
        bottom: 0;
        position: absolute;
    }

}

@media screen and (max-width: 768px) {

    .table .row:nth-child(odd) {
        color: var(--white);
    }

    .table .row:nth-child(odd) a {
        color: var(--secondary);
    }
}

.table .row.table-head {
    position: sticky;
    top: 0
}

.table .row.table-head > * {
    padding-top: 1em;
    padding-bottom: 1em;
    color: var(--white);
    font-weight: 900;
    cursor: pointer;
    width: fit-content;
}

.table .row.table-head:after {
    background-color: var(--secondary);
}

.table .row.table-head > .selected {
    color: var(--primary);
}

.table .row.table-head > .selected:after {
    content: '';
    display: inline-block;
    width: 0; 
    height: 0; 
    border-left: .5em solid transparent;
    border-right: .5em solid transparent;
    border-top: .5em solid var(--primary);
    margin-left: 1em;
}

.table .row.table-head > .selected.forwards:after {
    border-top: none;
    border-bottom: .5em solid var(--primary);
}

@media screen and (min-width: 1081px) {
    .table_wrapper {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius);
    }

    .table_wrapper .row {
        position: static !important;
    }

    .table .row:nth-child(odd):after {
        transform: translateY(-50%);
        left: 0;
    }

    .table_wrapper {
        width: 100%;
        /* overflow: auto; */
    }
    
    .table_wrapper > .table {
        width: auto;
        min-width: 100%;
    }

    .table {
        display: table;
        border-spacing: var(--gap) 0;
        width: 100%;
        overflow: hidden;
        border: 2px solid var(--secondary);
        border-radius: var(--radius);
    }
    
    .table .row {
        display: table-row;
    }
    
    .table .row > * {
        display: table-cell;
        padding-top: .5em;
        padding-bottom: .5em;
    }
    .table .row {
        width: fit-content;
        max-width: 100%;
    }
}


@media screen and (max-width: 1080px) {
    .table .row {
        padding: var(--gap) 0;
    }

    .table .row:nth-child(odd):after {
        left: calc(0px - var(--padding));
        top: 0;
        bottom: 0;
        right: calc(0px - var(--padding));
    }

    [data-field]:empty {
        display: none;
    }

    [data-field] {
        display: flex;
        gap: var(--gap);
        align-items: baseline;
    }

    [data-field]:before {
        content: attr(data-field);
        font-weight: 600;
        min-width: 10rem;
    }

    .table .row.table-head {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
    }
}