.sortable thead th:not(.no-sort)
{
    cursor: pointer
}

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

.sortable thead th:not(.no-sort)::after
{
    margin-left: 3px;
    content:     "▸"
}

.sortable thead th:not(.no-sort):hover::after
{
    color: inherit
}

.sortable thead th:not(.no-sort)[aria-sort=descending]::after
{
    color:   inherit;
    content: "▾"
}

.sortable thead th:not(.no-sort)[aria-sort=ascending]::after
{
    color:   inherit;
    content: "▴"
}

.sortable thead th:not(.no-sort).indicator-left::after
{
    content: ""
}

.sortable thead th:not(.no-sort).indicator-left::before
{
    margin-right: 3px;
    content:      "▸"
}

.sortable thead th:not(.no-sort).indicator-left:hover::before
{
    color: inherit
}

.sortable thead th:not(.no-sort).indicator-left[aria-sort=descending]::before
{
    color:   inherit;
    content: "▾"
}

.sortable thead th:not(.no-sort).indicator-left[aria-sort=ascending]::before
{
    color:   inherit;
    content: "▴"
}

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

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

.sortable thead 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 */