div.dataTables_wrapper{
    overflow: hidden;
}

div.dataTables_wrapper div.fg-toolbar{
    color: var(--font-color);
    background: var(--bg-color);
}

div.dataTables_wrapper .dataTables_filter input,
div.dataTables_wrapper select{
    color: var(--input-font-color) !important;
    border: 1px solid var(--border-color) !important;
    background-color: var(--input-bg-color);
    box-shadow: none;
}

.dataTables_wrapper .dataTables_filter input{
    background: transparent;
}
.dataTables_wrapper .dataTables_filter label{
    position: relative;
}
.dataTables_wrapper .dataTables_filter label:before{
    position: absolute;
    font-family: 'FontAwesome';
    top: 1px;
    right: 5px;
    content: "\f002";
}

div.dataTables_wrapper .dataTables_paginate{
    width: auto !important;
    margin-right: 0;
    padding-right: 0;
}
div.dataTables_wrapper .dataTables_paginate a.last{
    margin-right: 0 !important;
}
div.dataTables_wrapper .dataTables_paginate .ui-button{
    background: var(--secondary-color) !important;
}
div.dataTables_wrapper .dataTables_paginate span .ui-button.ui-state-disabled{
    background: var(--acer-green) !important;
    border: solid 1px var(--border-color) !important;
    color: var(--font-color-on-acer-green) !important;
}
div.dataTables_wrapper .paging_full_numbers .ui-button{
    color: var(--font-color) !important;
}


div.dataTables_wrapper .dataTables_processing{
    height: calc(100% - 90px) !important;
    border: none !important;
}

div.dataTables_wrapper div.dt_actions div.dt-buttons{
    margin-right: 0;
}

div.dataTables_wrapper div.dt_main{
    overflow-x: auto !important;
}

div.dataTables_wrapper div.dataTables_scrollHead,
div.dataTables_wrapper div.dataTables_scrollBody{
    background: inherit !important;
}


.datatable_col_seq_icon img.datatable_seq_icon_24 {
    width: 24px;
}


table.dataTable{
    min-width: 800px;
}

table.dataTable.min-width-auto{
    min-width: auto;
}

table.dataTable td.word_break{
    word-break: break-all;
}

table.dataTable.no-top-border thead th{
    border-top: none !important;
}

table.dataTable thead tr th{
    padding: 12px 0;

    color: var(--datatable-font-color-head) !important;
    font-size: 11px;
    font-weight: bold !important;
    text-align: center;
    text-transform: uppercase;

    background: var(--secondary-color) !important;
    background: linear-gradient(0deg, var(--secondary-color) 0%, var(--bg-color) 100%) !important;

    border: 1px solid var(--datatable-border-color) !important;
}


table.dataTable thead tr th .ui-icon-caret-2-n-s{
    background-position: -128px 0;
}
table.dataTable thead tr th span.ui-icon-caret-2-n-s{
    background-position: -128px 0;
}

table.dataTable thead tr th.sorting_disabled{
    cursor: default;
}
table.dataTable thead tr th.sorting_disabled > div{
    padding-right: 0;
}



table.dataTable tbody,
table.dataTable tbody tr{
    color: var(--datatable-font-color-body) !important;
}

table.dataTable tbody tr{
    border-bottom: solid 1px var(--datatable-border-color) !important;
}

table.dataTable tbody tr.isCrossClientSeq{
    border-top: 2px solid var(--datatable-row-iscrossclient) !important;
    border-bottom: 2px solid var(--datatable-row-iscrossclient) !important;
    cursor: default !important;
}

table.dataTable.selectable tbody tr{
    cursor: pointer;
}


table.dataTable tbody tr td{
    border: solid 1px var(--datatable-border-color) !important;
}

table.dataTable thead tr th:last-child,
table.dataTable tbody tr td:last-child{
    border-right: none !important;
}

table.dataTable thead tr th:first-child,
table.dataTable tbody tr td:first-child{
    border-left: none !important;
}


/*ACTION COL*/
table.dataTable tbody tr td span.data_actions{
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}
table.dataTable tbody tr td span.data_actions a{
    float: none;
    margin: 0;
    padding: 0;
    color: var(--font-color);
    user-select: none;
    font-size: 15px;
    cursor: pointer;
}


table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd{
    background-color: var(--datatable-row-color-odd);
}
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd > .sorting_2,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_2,
table.dataTable.display tbody tr.odd > .sorting_3,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_3{
    background-color: var(--datatable-row-color-odd-sorting);
}


table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even{
    background-color: var(--datatable-row-color-even);
}
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_2,
table.dataTable.order-column.stripe tbody tr.even > .sorting_2,
table.dataTable.display tbody tr.even > .sorting_3,
table.dataTable.order-column.stripe tbody tr.even > .sorting_3{
    background-color: var(--datatable-row-color-even-sorting);
}

/*SELECTED/ACTIVE ROW*/
table.dataTable.stripe tbody > tr.selected,
table.dataTable.stripe tbody > tr > .selected,
table.dataTable.display tbody > tr.selected,
table.dataTable.display tbody > tr > .selected,
table.dataTable.stripe tbody > tr.active,
table.dataTable.stripe tbody > tr > .active,
table.dataTable.display tbody > tr.active,
table.dataTable.display tbody > tr > .active,
table.display tr.even.row_selected td,
table.display tr.odd.row_selected td{
    color: var(--datatable-font-color-selected) !important;
    background-color: var(--datatable-row-color-selected) !important;
}


table.dataTable.display tbody tr.row_selected > .sorting_1,
table.dataTable.display tbody tr.odd.selected > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1,
table.dataTable.display tbody tr.even.selected > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1,
table.dataTable.display tbody tr.row_selected > .sorting_2,
table.dataTable.display tbody tr.odd.selected > .sorting_2,
table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2,
table.dataTable.display tbody tr.even.selected > .sorting_2,
table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2,
table.dataTable.display tbody tr.row_selected > .sorting_3,
table.dataTable.display tbody tr.odd.selected > .sorting_3,
table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3,
table.dataTable.display tbody tr.even.selected > .sorting_3,
table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3{
    background-color: var(--datatable-row-color-selected-sorting) !important;
}

table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.order-column.stripe tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.order-column.stripe tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3,
table.dataTable.order-column.stripe tbody tr.selected > .sorting_3{
    color: var(--datatable-font-color-selected) !important;
    background-color: var(--datatable-row-color-selected) !important;
}


table.dataTable.no-footer{
    border: none;
}


@media only screen and (max-width: 767px) {
    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate{
        width: 100%;
    }
}

@media only screen and (max-width: 640px) {
    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter{
        width: 100%;
    }
}