table.app-table {
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: auto;

    thead, tbody {
        display: table;
        width: 100%;
    }
    tr {
        border-bottom: 1px solid var(--border-color)
    }
    tr:last-child {
        border-bottom: none;
    }

    th {
        color: var(--primary-text-color);
        border-bottom: 1px solid var(--border-color);
        line-height: 20px;
        font-size: 16px;
        font-family: 'Fira Sans', sans-serif;
        font-weight: 700;
        &:last-child {
            text-align: right;
        }
        &:nth-child(even):not(:last-child) {
            text-align: center;
        }
    }
    td {
        &:nth-child(even):not(:last-child) {
            text-align: center;
        }
        &:last-child {
            text-align: right;
        }
    }

    th, td {
        padding: 0.625rem;
    }
}

/**
 * This defines a responsive table layout. It is applied when a table element has the "responsive_view" class.
 * The "responsive-table" (@see assets-reloaded/assets/custom-html-attributes/responsive-table.js) attribute listens to
 * resize events and adds the "responsive_view" class to the corresponding table element as soon as the table content
 * overflows its container.
 */
table[class~='responsive_view'].app-table {
    display: block;
    border: 0;

    /* Hide table headers (but not display: none; for accessibility) */
    thead, th, tr:first-child {
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        position: absolute;
    }

    tr {
        border-bottom: 1px solid var(--border-color);
        display: block;
        &:not(:last-child) {
            margin-bottom: .5em;
        }
    }
    tr:last-child {
        border-bottom: none;
    }

    td {
        width: 100%;
        display: block;
        text-align: right;
        &:nth-child(even):not(:last-child) {
            text-align: right;
        }
    }
    td::before {
        content: attr(column-header);
        color: var(--primary-text-color);
        line-height: 20px;
        height: 100%;
        font-size: 16px;
        font-family: 'Fira Sans', sans-serif;
        font-weight: 700;
        float: left;
        white-space: nowrap;
        padding-right: 10px;
    }
    td:last-child {
        border-bottom: 0;
    }
}