/* Table */
.container-bottom {
    --width-min-col: 30px !important;
    --padding-rl: 30px !important;
    --width-col-users: 10px !important;
    --width-col-name: 200px !important;
    --width-col-role: 130px !important;
    --width-col-phone: 160px !important;
    --width-col-market: 132px !important;
    --width-col-market2: 90px !important;
    --width-col-state: 40px !important;
    --width-col-rank: var(--width-min-col) !important;
    --width-col-thumbnail: var(--width-min-col) !important;
    --width-col-update: 100px !important;
    --width-col-range: 150px !important;
    --width-btn-published: 100px !important;
}

table.dataTable, .table-import {
    border: 1px solid var(--navbar-bg-color) !important;
}

.table-import {
    max-height: 225px !important;
    min-height: 225px !important;
}

.page-item.active .page-link {
    z-index: 3;
    color: #C41230 !important;
    background-color: #ffffff;
    border-color: #C41230;
}

.page-link {
    margin: 0 4px;
    border-radius: 4px !important;
}

li#table-range_next {
    min-width: 70px;
    text-align: center;
}

li.page-item {
    text-align: center;
    min-width: 35px;
}

select.form-select {
    min-width: 75px;
    margin: 0 4px;
}

#root .table-import {
    max-height: none !important;
    min-height: 0 !important;
    font-size: var(--font-size-14px) !important;
}

#root .table-import tr,
#root .table-import th {
    text-align: center;
    font-size: var(--font-size-14px) !important;
}

#root .table-import.total tr:last-child td,
#root .table-import.total td:last-child,
#root .table-import.total th:last-child {
    font-weight: bold;
}

.table-market {
    max-height: 500px !important;
}

.table-market table.dataTable {
    margin: 0 !important;
}

table.dataTable thead tr th:not(.sorting_disabled), 
table.dataTable thead tr th.sorting_disabled,
.table-import thead tr th {
    background-color: var(--navbar-bg-color);
}

table.dataTable thead tr th:not(.sorting_disabled), 
table.dataTable thead tr th.sorting_disabled {
    background-color: var(--navbar-bg-color);
}

table.dataTable tbody tr td:not(.sorting_disabled), 
table.dataTable tbody tr td.sorting_disabled,
.table-import tbody tr td  {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--navbar-bg-color);
}

table.dataTable thead tr th:not(.sorting_disabled), 
table.dataTable thead tr th.sorting_disabled,
table.dataTable tbody tr td:not(.sorting_disabled), 
table.dataTable tbody tr td.sorting_disabled {
    text-align: left;
    padding: 14px var(--padding-rl) 14px var(--padding-rl) !important;
    /* padding: 14px 0 14px 0 !important; */
    
}

table.dataTable thead tr th,
table.dataTable tbody tr td,
table.dataTable tbody tr td a {
    font-size: var(--font-size-14px) !important;
    font-weight: 500 !important;
    
}

table.dataTable>thead .sorting:before, 
table.dataTable>thead .sorting_asc:before, 
table.dataTable>thead .sorting_desc:before, 
table.dataTable>thead .sorting_asc_disabled:before, 
table.dataTable>thead .sorting_desc_disabled:before,
table.dataTable>thead .sorting:after, 
table.dataTable>thead .sorting_asc:after, 
table.dataTable>thead .sorting_desc:after, 
table.dataTable>thead .sorting_asc_disabled:after, 
table.dataTable>thead .sorting_desc_disabled:after {
    height: 5px;
    width: 9px;
    left: 12px;
}

table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting:before {
    background-color: var(--text-color) !important;
}

table.dataTable>thead .sorting_asc:before, 
table.dataTable>thead .sorting_desc:after {
    background-color: var(--text-color-btn) !important;
}

table.dataTable>thead .sorting:before, 
table.dataTable>thead .sorting_asc:before, 
table.dataTable>thead .sorting_desc:before, 
table.dataTable>thead .sorting_asc_disabled:before, 
table.dataTable>thead .sorting_desc_disabled:before {
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    bottom: 52%;
}

table.dataTable>thead .sorting:after, 
table.dataTable>thead .sorting_asc:after, 
table.dataTable>thead .sorting_desc:after, 
table.dataTable>thead .sorting_asc_disabled:after, 
table.dataTable>thead .sorting_desc_disabled:after {
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    top: 52%;
}

/* col name */
table.dataTable thead tr th.col-users,
table.dataTable tbody tr td.col-users{
    text-align: left;
    width: auto !important;
    min-width: var(--width-col-users) !important;
    max-width: var(--width-col-users) !important;
}

/* col name */
table.dataTable thead tr th.col-name,
table.dataTable tbody tr td.col-name,
table.dataTable thead tr th.col-lastname,
table.dataTable tbody tr td.col-lastname,
table.dataTable tbody tr th.col-firstname,
table.dataTable tbody tr td.col-firstname {
    text-align: left;
    padding: 14px 0 14px var(--padding-rl) !important;
}

table.dataTable thead tr th.col-name,
table.dataTable tbody tr td.col-name {
    width: 100% !important;
    min-width: var(--width-col-name) !important;
}

table.dataTable tbody tr td a:hover
{
    color: var(--text-color-btn) !important;
}

/* col name */
table.dataTable thead tr th.col-lastname,
table.dataTable tbody tr td.col-lastname,
table.dataTable tbody tr th.col-firstname,
table.dataTable tbody tr td.col-firstname {
    width: auto !important;
    min-width: 100px !important;
    max-width: var(--width-col-name) !important;
}

/* col market */
table.dataTable thead tr th.col-state,
table.dataTable tbody tr td.col-state{
    width: var(--width-col-state) !important;
    min-width: var(--width-col-state) !important;
    max-width: var(--width-col-state) !important;
    text-align: center;
}

/* col market */
table.dataTable thead tr th.col-market,
table.dataTable tbody tr td.col-market{
    width: var(--width-col-market) !important;
    min-width: var(--width-col-market) !important;
    max-width: var(--width-col-market) !important;
    text-align: center;
}
table.dataTable thead tr th.col-market2,
table.dataTable tbody tr td.col-market2{
    padding-left: 10px!important;
    padding-right: 10px!important;
    width: var(--width-col-market2) !important;
    min-width: var(--width-col-market2) !important;
    max-width: var(--width-col-market2) !important;
    text-align: center;
}
table.dataTable tbody tr td.col-market2 div {
    display: flex;
    justify-content: center;
}
table.dataTable tbody tr td.col-market div {
    display: flex;
    justify-content: center;
}

/* col rank */
table.dataTable thead tr th.col-rank,
table.dataTable tbody tr td.col-rank{
    width: var(--width-col-rank);
    min-width: var(--width-col-rank);
    max-width: var(--width-col-rank);
    /* text-align: center; */
}

/* col thumbnail */
table.dataTable thead tr th.col-thumbnail,
table.dataTable tbody tr td.col-thumbnail, 
table.dataTable thead tr th.col-file,
table.dataTable tbody tr td.col-file {
    width: var(--width-col-thumbnail)!important;
    min-width: var(--width-col-thumbnail)!important;
    max-width: var(--width-col-thumbnail) !important;
    padding: 14px 6px 14px 6px !important;
    text-align: center;
}

table.dataTable tbody tr td.col-thumbnail .thumbnail,
table.dataTable tbody tr td.col-file .extension{
    padding: 0;
    margin: 0;
}

/* col phone */
table.dataTable thead tr th.col-phone,
table.dataTable tbody tr td.col-phone {
    padding: 14px 0 14px var(--padding-rl) !important;
    width: var(--width-col-phone) !important;
    min-width: var(--width-col-phone) !important;
    max-width: var(--width-col-phone) !important;
}

/* col role */
table.dataTable thead tr th.col-role,
table.dataTable tbody tr td.col-role {
    padding: 14px 0 14px var(--padding-rl) !important;
    width: var(--width-col-role) !important;
    min-width: var(--width-col-role) !important;
    max-width: var(--width-col-role) !important;
}

table.dataTable thead tr th.col-mail,
table.dataTable tbody tr td.col-mail  {
    --width-col-role : 130px ;
    padding: 14px 0 14px var(--padding-rl) !important;
    width: 100% !important;
    min-width: var(--width-col-role) !important;
}

/* col update */
table.dataTable thead tr th.col-update,
table.dataTable tbody tr td.col-update {
    padding: 14px 0 14px var(--padding-rl) !important;
    width: var(--width-col-update) !important;
    min-width: var(--width-col-update) !important;
    max-width: var(--width-col-update) !important;
}

/* col range, col model, col category */
table.dataTable thead tr th.col-range,
table.dataTable tbody tr td.col-range, 
table.dataTable thead tr th.col-model,
table.dataTable tbody tr td.col-model,
table.dataTable thead tr th.col-category,
table.dataTable tbody tr td.col-category {
    padding: 14px 0 14px var(--padding-rl) !important;
    width: var(--width-col-range) !important;
    min-width: var(--width-col-range) !important;
    max-width: var(--width-col-range) !important;
}

.col-row {
    width: 70px !important;
    min-width: 70px !important;
    padding: 14px 0 14px var(--padding-rl) !important;
}

/* btn market */
.btn-published, 
.btn-unpublished, 
.btn-archive {
    width: var(--width-btn-published) !important;
    min-width: var(--width-btn-published) !important;
    max-width: var(--width-btn-published) !important;
    font-weight: 400 !important;
    font-size: var(--font-size-12px) !important;
    padding: 3px !important;
}


.btn-published {
    /* width: var(--width-btn-published) !important;
    min-width: var(--width-btn-published) !important; */
    border: var(--border) solid var(--color-published) !important;
    background-color: #E6F8D4;
    color: var(--color-published) !important;
}

.btn-unpublished {
    border: var(--border) solid var(--color-unpublished);
    background-color: #FFCD95;
    color: var(--color-unpublished) !important;
}

.btn-archive {
    border: var(--border) solid var(--text-color-discard) !important;
    background-color: var(--background-color) !important;
    color: var(--text-color-discard) !important;
}

a.btn-markets.btn-archive:hover {
    background-color: var(--text-color-discard) !important;
}

a.btn-markets.btn-unpublished:hover, 
a.btn-markets.btn-published:hover,
a.btn-markets.btn-archive:hover {
    color:#FFFFFF !important;
}

a.btn-markets.btn-unpublished:hover {
    background-color: var(--color-unpublished);
}

a.btn-markets.btn-published:hover {
    background-color: var(--color-published);
}

tr.odd td.dataTables_empty {
    text-align: center !important;
}

/* Table import */

.table-import thead tr th,
.table-import tbody tr td  {
    text-align: left;
    padding: 8px !important;
    /* padding: 14px 0 14px 0 !important; */
    
}