.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{
	/*
    --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{
	text-align:left;
	/*
    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 th{
    padding:5px
}
/*
.sortable td,.sortable th{
    padding:2px
}
*/
/*
.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
}

*/