/*
 * Table styles
 */
table.dataTable {
    margin-bottom: 8px;
    td, th {
        //padding: 11px 20px !important;
        padding: 16px !important;
    }
    th {
        border-bottom: none !important;
        color: #5d6a83;
    }
    td {
        color: #191b23 !important;
    }
    thead {
        background: #e2e8f0;
        color: #334155;
        .sorting,
        .sorting_asc,
        .sorting_desc,
        .sorting_asc_disabled,
        .sorting_desc_disabled {
            background-repeat: no-repeat;
            background-position: center right;
            cursor: pointer;
            padding-right: 19px;
        }
        .sorting {
            //background-image: url(dataTables/images/sort_both.svg);
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg enable-background='new 0 0 19 19' height='19' viewBox='0 0 19 19' width='19' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%235d6a83'%3e%3cpath d='m9.501 14.691-3.804-4.125-1.246 1.242 4.728 5.072h.646l4.726-5.072-1.243-1.197z' opacity='.15'/%3e%3cpath d='m9.499 4.308 3.804 4.126 1.247-1.243-4.728-5.072h-.646l-4.726 5.072 1.244 1.199z'/%3e%3c/g%3e%3c/svg%3e");
        }
        .sorting_asc {
            //background-image: url(dataTables/images/sort_asc.svg);
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg enable-background='new 0 0 19 19' height='19' viewBox='0 0 19 19' width='19' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%235d6a83'%3e%3cpath d='m9.501 14.691-3.804-4.125-1.246 1.242 4.728 5.072h.646l4.726-5.072-1.243-1.197z' opacity='.15'/%3e%3cpath d='m9.499 4.308 3.804 4.126 1.247-1.243-4.728-5.072h-.646l-4.726 5.072 1.244 1.199z'/%3e%3c/g%3e%3c/svg%3e");
        }
        .sorting_desc {
            //background-image: url(dataTables/images/sort_desc.svg);
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg enable-background='new 0 0 19 19' height='19' viewBox='0 0 19 19' width='19' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%235d6a83'%3e%3cpath d='m9.501 14.691-3.804-4.125-1.246 1.242 4.728 5.072h.646l4.726-5.072-1.243-1.197z'/%3e%3cpath d='m9.499 4.308 3.804 4.126 1.247-1.243-4.728-5.072h-.646l-4.726 5.072 1.244 1.199z' opacity='.15'/%3e%3c/g%3e%3c/svg%3e");
        }
        .sorting_asc,
        .sorting_desc {
            background-color: #d8dde5;
        }
        .sorting_asc_disabled {
            //background-image: url(dataTables/images/sort_asc_disabled.svg);
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg enable-background='new 0 0 19 19' height='19' viewBox='0 0 19 19' width='19' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m9.633 5.548 5.917 6.349-1.561 1.557-4.76-5.166-4.762 5.107-1.557-1.5 5.914-6.348z' fill='%235d6a83' opacity='.15'/%3e%3c/svg%3e");
        }
        .sorting_desc_disabled {
            //background-image: url(dataTables/images/sort_desc_disabled.svg);
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg enable-background='new 0 0 19 19' height='19' viewBox='0 0 19 19' width='19' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m9.11 13.445-5.906-6.337 1.557-1.553 4.752 5.154 4.755-5.096 1.554 1.495-5.904 6.337z' fill='%235d6a83' opacity='.15'/%3e%3c/svg%3e");
        }
        .th_id,
        .th_userid,
        .th_courseid {
            background-image: none;
            padding-right: 8px;
        }
    }
    tbody {
        .sorting_1 {
            font-weight: 500;
        }
    }
}
/*
 * Control feature layout
 */
.dataTables_wrapper {
    position: relative;
    clear: both;
    *zoom: 1;
    zoom: 1;
    .group-controls {
        display: flex;
        .dataTables_length {
            margin-right: 20px;
            width: 100%;
            label {
                white-space: nowrap;
            }
        }
    }
    .dataTables_length {
        //float: left;
        select:not([size]):not([multiple]) {
            height: calc(2.125rem + 12px);
        }
    }
    .dataTables_filter {
        text-align: left;
        //padding-left: 50px;
        input {
            //margin-left: 0.5em;
        }
    }
    .dataTables_info {
        clear: both;
        float: left;
        padding-top: 8px;
        margin-right: 12px;
    }
    .dataTables_paginate {
        float: right;
        text-align: right;
        padding-top: 0.25em;
        .paginate_button {
            box-sizing: border-box;
            display: inline-block;
            min-width: 1.5em;
            padding: 0.5em 1em;
            text-align: center;
            text-decoration: none !important;
            cursor: pointer;
            color: #333 !important;
            border-radius: 2px;
            cursor: pointer;
            &.current,
            &.current:hover {
                color: #194bfb !important;
                background: #eff7ff;
                border: none;
            }
            &.disabled,
            &.disabled:hover,
            &.disabled:active {
                cursor: default;
                color: #5d6a83 !important;
                box-shadow: none;
                display: none;
                //background: #edeff1;
                //border: 1px solid #dee2e6;
            }
            &:hover,
            &:active {
                color: #194bfb !important;
                background: #e5ecf4;
                border: 1px solid #eff7ff;
            }
        }
        .ellipsis {
            padding: 0 1em;
        }
    }
    .dataTables_processing {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 40px;
        margin-left: -50%;
        margin-top: -25px;
        padding-top: 20px;
        text-align: center;
        font-size: 1.2em;
        background-color: white;
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
        background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
        background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
        background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    }
    .dataTables_length,
    .dataTables_filter {
        margin-bottom: 6px;
    }
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_processing,
    .dataTables_paginate {
        color: #333;
    }
    .dataTables_scroll {
        clear: both;
        div.dataTables_scrollBody {
            *margin-top: -1px;
            -webkit-overflow-scrolling: touch;
            > table {
                > thead > tr > th,
                > thead > tr > td,
                > tbody > tr > th,
                > tbody > tr > td {
                    vertical-align: middle;
                }
                > thead > tr > th > div.dataTables_sizing,
                > thead > tr > td > div.dataTables_sizing,
                > tbody > tr > th > div.dataTables_sizing,
                > tbody > tr > td > div.dataTables_sizing {
                    height: 0;
                    overflow: hidden;
                    margin: 0 !important;
                    padding: 0 !important;
                }
            }
        }
    }
    &.no-footer {
        .dataTables_scrollBody {
            border-bottom: 1px solid #111;
        }
        div.dataTables_scrollHead > table,
        div.dataTables_scrollBody > table {
            border-bottom: none;
        }
    }
    &:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }
    @media screen and (max-width: 767px) {
        .dataTables_info,
        .dataTables_paginate {
            float: none;
            text-align: center;
        }
        .dataTables_paginate {
            margin-top: 0.5em;
        }
    }
    @media screen and (max-width: 640px) {
        .dataTables_length,
        .dataTables_filter {
            float: none;
        }
        .dataTables_filter {
            margin-top: 0.5em;
            padding-left: 0;
        }
    }
}
.col-4 {
    .dataTables_wrapper {
        .dataTables_length {
            span {
                display: none;
            }
        }
    }
}
@import "buttons.dataTables";
@import "responsive.dataTables";
@import "scroller.dataTables";
@import "select.dataTables";
