.sortable th:hover::after {
    color: inherit;
    font-size: 1.2em;
    content: '\00a0\025B8';
}

.sortable th {
    cursor: pointer;
}

    .sortable th::after {
        font-size: 1.2em;
        color: transparent;
        content: '\00a0\025B8';
    }

    .sortable th.dir-d::after {
        color: inherit;
        content: '\00a0\025BE';
    }

    .sortable th.dir-u::after {
        color: inherit;
        content: '\00a0\025B4';
    }

th.no-sort {
    pointer-events: auto;
    cursor: unset;
}

    th.no-sort::after {
        content: none;
    }

    th.no-sort:hover::after {
        content: '';
        font-size: unset;
    }
/*

@charset "UTF-8";

.sortable th {
    cursor: pointer;
}

    .sortable th.no-sort {
        pointer-events: none;
    }

    .sortable th::after, .sortable th::before {
        transition: color 0.1s ease-in-out;
        font-size: 1.2em;
        color: transparent;
    }

    .sortable th::after {
        margin-left: 3px;
        content: "▸";
    }

    .sortable th:hover::after {
        color: inherit;
    }

    .sortable th.dir-d::after {
        color: inherit;
        content: "▾";
    }

    .sortable th.dir-u::after {
        color: inherit;
        content: "▴";
    }

    .sortable th.indicator-left::after {
        content: "";
    }

    .sortable th.indicator-left::before {
        margin-right: 3px;
        content: "▸";
    }

    .sortable th.indicator-left:hover::before {
        color: inherit;
    }

    .sortable th.indicator-left.dir-d::before {
        color: inherit;
        content: "▾";
    }

    .sortable th.indicator-left.dir-u::before {
        color: inherit;
        content: "▴";
    }

.sortable {
    --stripe-color: #e4e4e4;
    --th-color: #fff;
    --th-bg: #808080;
    --td-color: #000;
    --td-on-stripe-color: #000;
    border-spacing: 0;
}

    .sortable tbody tr:nth-child(odd) {
        background-color: var(--stripe-color);
        color: var(--td-on-stripe-color);
    }

    .sortable th {
        background: var(--th-bg);
        color: var(--th-color);
        font-weight: normal;
        text-align: left;
        text-transform: capitalize;
        vertical-align: baseline;
        white-space: nowrap;
    }

    .sortable td {
        color: var(--td-color);
    }

    .sortable td,
    .sortable th {
        padding: 10px;
    }

        .sortable td:first-child,
        .sortable th:first-child {
            border-top-left-radius: 4px;
        }

        .sortable td:last-child,
        .sortable th:last-child {
            border-top-right-radius: 4px;
        }
*/