.address_list .filter {
 flex-wrap: wrap;
 margin-bottom: 1em;
}

.address_list .filter select {
    width: fit-content;
    max-width: 100%;
}

.table .row {
    position: relative;
}

.table .row:nth-child(odd):after {
    content: '';
    background-color: var(--primary);
    z-index: -1;
    height: 100%;
    left: -100vw;
    top: 0;
    right: -100vw;
    bottom: 0;
    position: absolute;
}

@media (min-width: 769px) {
    .table .row:nth-child(odd):after {
        background-color: var(--background);
        background-image: var(--lightgradient);
        background-attachment: fixed;
    }
}

.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 > .more > * {
    display: inline-block;
}

.table .row > .more > *:not(:last-child) {
    margin-right: .25em;
}

.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 (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 (max-width: 1080px) {
    .table .row {
        padding: var(--gap) 0;
    }

    [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);
    }
}

@media (max-width: 768px) {

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

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

    .table .row.table-head[title]:before {
        content: attr(title);
        font-size: 2rem;
        display: block;
    }

    .table .row.table-head[title] {
        flex-direction: column;
        align-items: stretch;
        margin: 1em 0;
        padding: 1em 0;
    }

    .table .row.table-head[title] > * {
        padding-top: 0;
        padding-bottom: 0;
        padding: .25em 1em;
        background-color: var(--primary);
        border-radius: var(--radius);
        width: 100%;
        font-weight: 400;
    }
    
    .table .row.table-head[title] > .selected {
        color: var(--secondary);
    }

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

    .address_list .row > div:not([data-field]) > div {
        display: flex;
        gap: var(--gap);
        align-items: baseline;
    }

    .address_list .row > div:not([data-field]) > div > span:first-child {
        /* content: attr(data-field); */
        font-weight: 600;
        min-width: 10rem;
        display: block;
    }
}