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

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 thead>tr>th .dt-column-order{
    background-color: var(--gray-50);
    border-radius: 6px;
    padding: 4px;
    width: 24px;
    height: 24px;
}

table.dataTable .dt-empty{
    color: var(--gray-600);
    padding: 15px;
    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;
}