/* Responsive tables */

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

    table.responsive {
        overflow-wrap: break-word;
    }

    table.responsive thead {
        display: none;
    }

    table.responsive tr {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
    }

    table.responsive td {
        border: collapse;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
        align-content: space-between;
        flex: 0 0 100%;
        width: 100%;
        align-items: center;
        max-width: 100%;
    }

    table.responsive td span {
        display: block;
        overflow-wrap: break-word;
        flex: 2 1 100%;
        text-align: right;
        padding: 0.5rem;
    }

    table.responsive td::before {
        content: attr(data-label);
        display: inline-block;
        padding: 0.5rem;
        font-weight: bolder;
        flex: 1 2 100%;
        color: var(--color-bg-accent);
        margin-right: 0.1rem;
        padding: 0.5rem;
        overflow-wrap: break-word;
    }
}