.sortable th {
    cursor: pointer
}

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

    .sortable th::after, .sortable th::before {
        transition: color .1s ease-in-out;
        font-size: 1.2em;
        color: rgba(0,0,0,0)
    }

    .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 {
 
    --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
        }
/*# sourceMappingURL=sortable.min.css.map */