.hia-table > tbody > tr span.error {
    font-size: 1.3em;
    font-weight: bold;
    font-style: italic;
    white-space: pre-wrap;
}

.hia-table > tbody > tr span.error span.details {
    font-size: 1em;
}

.hia-table, table {
    border-collapse: collapse;
    font-family: var(--default-font), sans-serif;
}

table:where(.hia-table) td {
    padding: 8px;
}

.hia-table, .hia-table th {
    color: #000;
    line-height: inherit;
    font-size: var(--f14);
    padding: 8px;
    text-align: left;
}

.hia-table input, .hia-table button {
    font-size: var(--f14); /* all buttons should have the same font size */
}

.hia-table .sortable a {
    color: #000;
    font-family: var(--default-font), sans-serif;
    font-size: var(--f14);
}

.hia-table .column-header .sortable {
    cursor: pointer;
}

.hia-table th {
    padding: 8px;
}

.hia-table > thead > tr td {
    padding: 5px;
}

.hia-table > thead > tr.summary-row,
.hia-table tr.summary-row {
    background-color: var(--summary-row-color);
    color: #484848;
    font-weight: normal !important;
}

.hia-table .summary-row td {
    border: 0;
    padding: 3px 4px;
    vertical-align: middle;
}

.hia-table .paging td.currentPage {
    display: block;
    min-width: 70px;
}

table:where(.hia-table) tbody tr {
    background-color: #fff;
    font-size: var(--f14);
}

table:where(.hia-table) tr {
    background-color: #fff;
}

.hia-table > tbody > tr > td {
    padding: 4px;
    font-family: var(--default-font), sans-serif;
}

.hia-table > tbody > tr {
    font-size: var(--f14);
}

.hia-table > thead > tr {
    font-family: var(--default-font), sans-serif;
    font-weight: bold;
}

.hia-table-striped > :where(tbody > tr:nth-child(even)) {
    background-color: #f7f7f2;
}

.hia-table > tbody > tr:not(.internal-summary-row, .mfl-summary-row):hover {
    filter: brightness(0.9);
}

.hia-table .organizationPageHeaderRow {
    font-weight: bold;
}

.hierarchyViewer .hia-table .hover td {
    cursor: pointer;
}

.hierarchyViewer .hia-table .hover td, .tree-viewer .hia-table .focused td {
    background-color: rgba(0, 0, 0, .075);
}

.hia-table > thead > tr input[type="checkbox"] {
    width: 21px;
    min-width: 21px;
}

.hia-table .cacheGroupTitle {
    font-weight: bold;
}

.hia-table > tbody > tr .cacheGroupHidden {
    padding: 0;
    height: 0;
    overflow: hidden;
}

.hia-table > tbody > tr .cache-clear-button-wrapper {
    text-align: right;
    font-weight: bold;
    height: 100%;
    padding: 0;
}

.hia-table .cache-clear-button {
    height: 100%;
    width: 100%;
    margin: 0;
    border-radius: 0;
}

.hia-table .cacheGroup {
    border-bottom: none;
    height: 0;
}

.hia-table.cache-table {
    width: fit-content;
}

.hia-table .summary-row,
.hia table .summary-row td {
    background: var(--summary-row-color);
    padding: 4px;
}

:is(.hia-table, .settings-table, .settings-table-alternate, .email-settings-table) > :is(tr, :is(tbody, thead, tfoot) > tr) {
    border-bottom: 1px solid var(--default-border-color);
}

:is(.hia-table, .settings-table, .settings-table-alternate, .email-settings-table) {
    /* Would like to not draw bottom border to very last row. Seems nearly impossible to select it due to an arbitrary
    number of <thead>, <tbody>, <tfoot>, which break things like :last-child or :last-of-type. Instead we overwrite the
    last row border by the containing <table> having a border (assuming border-collapse).
     */
    border-bottom: 2px solid transparent; /* need 2px instead of 1 because of rendering quirks */
}

.hia-webpart-wrapper .hia-table,
.hia-webpart-wrapper .hia-table td,
.hia-webpart-wrapper .hia-table tr,
.hia-webpart-wrapper .hia-table th {
    border: none;
}

.hia-webpart-wrapper .hia-table .mfl-summary-row,
.hia-webpart-wrapper .hia-table .summary-row,
.hia-webpart-wrapper .hia-table .internal-summary-row,
.hia-webpart-wrapper .hia-table .summary-row-table {
    background-color: white;
}