table {
    --table-border-radius: 4px;
    --table-cell-text-base: var(--dx-g-text-sm);
    --table-cell-line-height: var(--dx-g-text-lg);

    display: block;
    overflow-x: auto;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: var(--dx-g-spacing-lg);
    margin-bottom: var(--dx-g-spacing-sm);
}

table tr {
    height: 50px;
}

th,
td {
    padding: var(--dx-g-spacing-md);
    font-size: var(--table-cell-text-base);
    line-height: var(--table-cell-line-height);
}

th {
    background-color: var(--dx-g-indigo-vibrant-95);
    font-weight: var(--dx-g-font-bold);
    border-bottom: 3px solid var(--dx-g-indigo-vibrant-30);
}

tr th,
tr td {
    text-align: left;
    vertical-align: top;
}

table tbody tr td {
    border-bottom: 1px solid var(--dx-g-gray-90);
}

tr th:first-of-type,
td:first-of-type {
    min-width: 110px;
}

tr td:first-of-type {
    border-left: 1px solid var(--dx-g-gray-90);
}

tr td:last-of-type {
    border-right: 1px solid var(--dx-g-gray-90);
}

tr:first-of-type th:first-of-type {
    border-top-left-radius: var(--table-border-radius);
}

tr:first-of-type th:last-of-type {
    border-top-right-radius: var(--table-border-radius);
}

table :not(thead + tbody) tr:first-of-type td {
    border-top: 1px solid var(--dx-g-gray-90);
}

tr:last-of-type td:first-of-type {
    border-bottom-left-radius: var(--table-border-radius);
    border-bottom: 1px solid var(--dx-g-gray-90);
    border-left: 1px solid var(--dx-g-gray-90);
}

tr:last-of-type td:last-of-type {
    border-bottom-right-radius: var(--table-border-radius);
    border-bottom: 1px solid var(--dx-g-gray-90);
    border-right: 1px solid var(--dx-g-gray-90);
}

tr td[colspan]:not([colspan="1"]) {
    text-align: center;
}

/**
 * Inside of a <td>, we want font size not to increase as it otherwise would
 * for standard inline/"prose-level" elements (e.g., <p>, <li>). But we *do*
 * want to leave font size increases in place for *other* elements inside <td>,
 * like callouts, headings (<h1>, <h2>, etc.), and so on. In order not to
 * "stomp" on too much -- and because we don't control the markup, so can't
 * easily add new CSS classes, etc. -- we try to pick out the specific
 * structures only here. (See https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE0000081MGTYA2/view)
 */
td :is(.li, p, .p, dd) {
    font-size: var(--table-cell-text-base);
}

td doc-content-callout :is(.li, p, .p, dd) {
    /* Override/reset for callouts -- see https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE0000081MGTYA2/view */
    font-size: var(--dx-g-text-base);
}

table :not(thead + tbody) tr:first-of-type td:first-of-type {
    border-top-left-radius: var(--table-border-radius);
}

table :not(thead + tbody) tr:first-of-type td:last-of-type {
    border-top-right-radius: var(--table-border-radius);
}