/* give dimension content left padding */
.table.footable>thead>tr>th.footable-sortable > span{
    padding-left: 12px;
}

/* set wrapper to pos relative */
.footable > thead > tr > th > span.footable-sort-indicator{
    position: absolute;
    left: 8px;
    height: 100%;
    top: 0;
    width: 15px;
}


/*

carets

*/



/* initial status */
/*.footable > thead > tr > th.footable-sorted-desc > span.footable-sort-indicator:before,
.footable > thead > tr > th.footable-sorted-desc > span.footable-sort-indicator:after,
.footable > thead > tr > th.footable-sorted > span.footable-sort-indicator:after,
.footable > thead > tr > th.footable-sorted > span.footable-sort-indicator:before,
.footable > thead > tr > th > span.footable-sort-indicator:before,
.footable > thead > tr > th > span.footable-sort-indicator:after{
    content: "";
    position: absolute;
    left: 0;
    width: 10px;
    height: 10px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;

}


.footable > thead > tr > th > span.footable-sort-indicator:before{
    top: 8px;
    background-image: url("../img/icons/caret-up.svg");
}

.footable > thead > tr > th > span.footable-sort-indicator:after{
    left: 0;
    top: 16px;
    background-image: url("../img/icons/caret-down.svg");
}*/


/* ASCENDING */
/*.footable > thead > tr > th.footable-sorted > span.footable-sort-indicator:before {
    top: 8px;
    background-image: url("../img/icons/caret-up_active.svg");
}

.footable > thead > tr > th.footable-sorted > span.footable-sort-indicator:after{
    top: 16px;
    background-image: url("../img/icons/caret-down.svg");
}*/

/* DESCENDING */

/*.footable > thead > tr > th.footable-sorted-desc > span.footable-sort-indicator:before {
    top: 8px;
    background-image: url("../img/icons/caret-up.svg");
}

.footable > thead > tr > th.footable-sorted-desc > span.footable-sort-indicator:after {
    top: 16px;
    background-image: url("../img/icons/caret-down_active.svg");
}*/

/*

    long arrows

*/


/* initial status */
.footable > thead > tr > th.footable-sorted-desc > span.footable-sort-indicator:before,
.footable > thead > tr > th.footable-sorted-desc > span.footable-sort-indicator:after,
.footable > thead > tr > th.footable-sorted > span.footable-sort-indicator:after,
.footable > thead > tr > th.footable-sorted > span.footable-sort-indicator:before,
.footable > thead > tr > th > span.footable-sort-indicator:before,
.footable > thead > tr > th > span.footable-sort-indicator:after{
    content: "";
    position: absolute;
    left: 0;
    width: 10px;
    height: 10px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;

}


.footable > thead > tr > th > span.footable-sort-indicator:before{
    top: 8px;
    background-image: url("../img/icons/arrow-up.svg");
}

.footable > thead > tr > th > span.footable-sort-indicator:after{
    left: 0;
    top: 16px;
    background-image: url("../img/icons/arrow-down.svg");
}


/* ASCENDING */
.footable > thead > tr > th.footable-sorted > span.footable-sort-indicator:before {
    top: 8px;
    background-image: url("../img/icons/arrow-up_active.svg");
}

.footable > thead > tr > th.footable-sorted > span.footable-sort-indicator:after{
    top: 16px;
    background-image: url("../img/icons/arrow-down.svg");
}

/* DESCENDING */

.footable > thead > tr > th.footable-sorted-desc > span.footable-sort-indicator:before {
    top: 8px;
    background-image: url("../img/icons/arrow-up.svg");
}

.footable > thead > tr > th.footable-sorted-desc > span.footable-sort-indicator:after {
    top: 16px;
    background-image: url("../img/icons/arrow-down_active.svg");
}