table {
    width: 100%;
    caption-side: unset;
    border-collapse: collapse;
    background-color: var(--white);
    color: var(--main-text-color);
    vertical-align: top;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    margin: 1rem 0 0;
}

thead {
    background-color: #dcedf8;
    text-align: center;
}

tr:nth-of-type(2n) { background-color: var(--sitewide-dim); }

th, td { padding: 1rem; }

thead tr th,
tbody tr td { text-align: center; }

thead tr th,
tbody tr th,
tbody tr td i { color: var(--secondary); }

tbody tr td {
    color: var(--form-text-color);
    text-align: left;
    font-size: 0.85rem;
    vertical-align: top;
}

tbody tr td.td-centered { text-align: center; }

tbody>tr:hover { background-color: #e8f1f7; }

@media only screen and (max-width: 650px) {
    thead { display: none; }

    tbody tr th {
        display: block;
        font-size: 1rem;
        padding-top: 1rem;
        padding-bottom: 0.15rem;
    }

    tbody tr td {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 15ch auto;
        font-size: 0.8rem;
        padding: 0.75rem 1rem;
    }

    tbody tr td:first-child { padding-top: 1.15rem; }
    tbody tr td:last-child { padding-bottom: 1.15rem; }

    tbody tr td::before {
        content: attr(data-label);
        font-size: 1rem;
        font-weight: 400;
        text-align: left;
        color: var(--secondary);
    }

    tbody tr td.td-centered { text-align: left; }
}