@import url(var.css);



.table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.table-scroll .tables {
    width: 100%;
}


table.dataTable>thead>tr>th:nth-child(1){
    overflow: hidden;
    border-top-left-radius: 3px;
}

table.dataTable>thead>tr>th:last-child{
    border-top-right-radius: 3px;
}


table.dataTable>thead>tr>th, table.dataTable>thead>tr>td{
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    background-color: var(--pri-col);
    color: var(--text-light);
    font-family: var(--h-fam);
    font-size: 14px;
}



table.dataTable{
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 3px;
}
table.dataTable thead>tr>th.sorting_asc::before, table.dataTable thead>tr>th.sorting_asc::after, table.dataTable thead>tr>th.sorting_asc::after, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_desc::after, table.dataTable thead>tr>th.sorting::before{
    height: 100%;
    bottom: 0%;
    top: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 13px;
    font-size: 15px;
}

table.dataTable thead>tr>th.sorting::before{
    content: '↓↑' !important;
}

table.dataTable thead>tr>th.sorting_asc::before{
    content: '↑' !important;
    opacity: 1;
}
table.dataTable thead>tr>th.sorting_desc::before{
    content: '↓' !important;
    opacity: 1;
}

table.dataTable thead>tr>th.sorting_asc::after, table.dataTable thead>tr>th.sorting_desc::after, table.dataTable thead>tr>th.sorting::after{
    content: '';
}





/*TABLE TOOL BAR*/

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    font-family: var(--n-fam);
}

.table-toolbar-left,
.table-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-control label {
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
}

.table-control select {
    width: auto;
    min-width: 70px;
    border-radius: 5px;
    cursor: pointer;
}

.table-search {
    position: relative;
}

.table-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(0,0,0,0.2);
}

.table-search input {
    width: 240px;
    padding: 13px 35px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 5px;
}


/*Pagination*/

.dataTables_wrapper .dataTables_paginate .paginate_button{
    background-color: var(--pri-col) !important;
    border-radius: 3px;
    border: none !important;
    transition: all .3s ease-in-out;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
    opacity: .7;
    cursor: not-allowed;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a{
    cursor: not-allowed;
}


.dataTables_wrapper .dataTables_paginate .paginate_button a{
    text-decoration: none;
    color: var(--text-light);
    font-size: 13px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.active:hover{
    background: var(--sec-col) !important;
}



.dataTables_wrapper .dataTables_info{
    font-family: var(--n-fam);
    font-size: 14px;
}


/*Table Body*/

table.dataTable tbody tr>td{
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    font-family: var(--n-fam);
    font-size: 13px;
}


.status-card{
    display: flex;
    align-items: center;
    justify-content: center;
}


table.dataTable tbody tr>.cell-with-ellipsis{
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*table statuses*/


.statuses-reps span{
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    border-radius: 15px;
    font-size: 12px;
}

.statuses-reps span.active{
    border: 1px solid var(--success);
    background-color: #34a85388;
}

.statuses-reps span.planning{
    border: 1px solid var(--warning);
    background-color: #f088007e;
}

/*Table Actions*/
.action-btns{
    height: 100%;
}

.action-btns .actions{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.tbl-actions{
    padding: 14px;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(241, 241, 241, 0.5);
}

.tbl-actions.delete, .tbl-actions.reject{
    background-color: var(--error);
}

.tbl-actions.add, .tbl-actions.download, .tbl-actions.approve, .tbl-actions.credit{
    background-color: var(--success);
}

.action-btns .view-btn, .tbl-actions.view-btn, .tbl-actions.edit {
    background-color: var(--accent);
}

.tbl-actions.view-btn, .tbl-actions.update{
    background-color: var(--sec-col);
}

.tbl-actions.retry{
    background-color: #0a7dff;
}

.tbl-actions{
    position: relative;
}



 

@media screen and (max-width: 640px) {
    .dataTables_wrapper .dataTables_filter {
        margin-top: 0 !important;
    }
    table.dataTable>tbody>tr>td, table.dataTable>thead>tr>td{
        min-width: 90px;
    }
}