:root{
    --table-border-radius:        12px;
    --table-border-color:         var(--gray-200);

    --dt-loader-color-1:          var(--primary-700);
    --dt-loader-color-2:          var(--primary-500);
}

table{
    border: 0 !important;
}

table.dataTable th,
table.dataTable td{
    text-align: left !important;
}

table tr:hover td{
    background-color: var(--gray-50);
}

table.dataTable td .table-actions{
    display: flex;
    justify-content: end;
    pointer-events: none;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
table.dataTable td .table-actions svg{
    width: 15px;
    height: 15px;
}
table.dataTable tr:hover td .table-actions{
    opacity: 1;
    pointer-events: auto;
}


table.dataTable thead>tr>th div.dt-column-header{
    flex-direction: row !important;
    justify-content: normal;
    gap: 16px;
}

table.dataTable thead>tr>th div.dt-column-header .dt-column-title{
    flex-grow: unset;
    color: var(--gray-500);
}



table.dataTable>thead>tr>th{
    border-bottom-color: var(--table-border-color);;
    padding: 12px 16px;
    font: var(--text-font-l1);
    font-weight: var(--font-weight-medium);
}
table.dataTable>thead>tr>th:hover{
    outline: 0 !important;
}

table.dataTable>tbody>tr>td{
    border-bottom-color: var(--gray-100);
    font: var(--text-font-p2);
    font-weight: var(--font-weight-regular);
}

table.dataTable,
div.dt-layout-table div.dt-layout-cell{
    border: 1px solid var(--table-border-color);
    border-radius: var(--table-border-radius);
}

table.dataTable .dt-empty{
    color: var(--gray-600);
    padding: 40px;
    font-weight: var(--font-weight-bold);
    text-align: center !important;
}

div.dt-container div.dt-layout-row{
    margin: 0;
}


.dataTable-wrapper div.dt-layout-table div.dt-layout-cell{
    border-top-left-radius: 0;
    border-top-right-radius: 0 ;
}

.dataTable-wrapper .dataTable-head{
    display: flex;
    align-items: center;
    border-style: solid;
    border-color: var(--table-border-color);
    border-width: 1px 1px 0 1px;

    border-top-left-radius: var(--table-border-radius);
    border-top-right-radius: var(--table-border-radius);

    justify-content: space-between;
    padding: 12px 16px;
}

div.dt-container.dt-empty-footer tbody > tr:last-child > *{
    border: 0;
}






table.dataTable thead > tr > th .dt-column-order,
table.dataTable thead > tr > td .dt-column-order {
    position: relative;

    color: var(--gray-500);
    background-color: var(--gray-50);
    border-radius: 6px;

    padding: 4px;
    width: 24px !important;
    height: 24px !important;

    display: block;

    --sort-icon: none;
}


table.dataTable thead > tr > th .dt-column-order::before,
table.dataTable thead > tr > td .dt-column-order::before {
    display: none !important;
}


table.dataTable thead > tr > th .dt-column-order::after,
table.dataTable thead > tr > td .dt-column-order::after {
    content: "" !important;

    position: absolute;
    left: 50% !important;
    top: 50%;

    opacity: 1 !important;

    transform: translate(-50%, -50%);

    background-color: currentColor;

    mask-image: var(--sort-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-image: var(--sort-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order::after,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order::after {
    width: 10px;
    height: 14px;
}

table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order::after,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order::after,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order::after,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order::after {
    width: 10px;
    height: 6px;
}


table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order {
    --sort-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M0.5 7L3 9.5L5.5 7M0.5 3L3 0.5L5.5 3' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order {
    --sort-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 9'%3E%3Cpath d='M0.75 8.25L8.25 0.75L15.75 8.25' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order {
    --sort-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 9'%3E%3Cpath d='M15.75 0.75L8.25 8.25L0.75 0.75' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


table.dataTable thead>tr>th.dt-ordering-asc div.dt-column-header .dt-column-title,
table.dataTable thead>tr>th.dt-ordering-desc div.dt-column-header .dt-column-title,
table.dataTable thead>tr>th.dt-orderable-asc:hover .dt-column-title,
table.dataTable thead>tr>th.dt-orderable-desc:hover .dt-column-title{
    color: var(--gray-900);
}

table.dataTable thead>tr>th.dt-ordering-asc .dt-column-order,
table.dataTable thead>tr>th.dt-ordering-desc .dt-column-order,
table.dataTable thead>tr>th.dt-orderable-asc:hover .dt-column-order,
table.dataTable thead>tr>th.dt-orderable-desc:hover .dt-column-order{
    color: var(--gray-900);
    background-color: var(--gray-100);
}



div.dt-processing{
    font: var(--text-font-l1);
    margin-top: 0;
}

div.dt-processing > div:last-child > div:nth-child(odd)  {
    background: var(--dt-loader-color-1);
}

div.dt-processing > div:last-child > div:nth-child(even) {
    background: var(--dt-loader-color-2);
}