#datatable th {
    position: relative;
    text-align: left;
    color: #ffffff;
    cursor: pointer;
}

#datatable th::before, th::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 35px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    opacity: 1; 
    transition: opacity 0.3s ease, border-color 0.3s ease;
    margin-top: 22px;
}

#datatable th::before {
    border-bottom: 7px solid white; 
    top: 10px; 
}

#datatable th::after {
    border-top: 7px solid white; 
    top: 20px; 
}

#datatable th.active::before,
#datatable th.active::after {
    opacity: 1; 
}

#datatable th.active.asc::before {
    border-bottom-color: #ea2330; 
}

#datatable th.active.desc::after {
    border-top-color: #ea2330; 
}
#datatable th.no-sorting {
    pointer-events: none; 
}

#datatable th.no-sorting::before,
#datatable th.no-sorting::after {
    content: ''; 
    display: none; 
}
#datatable th.sorting {
    pointer-events: auto; 
}

#datatable th.sorting::before,
#datatable th.sorting::after {
    content: ''; 
    display: inline; 
}