/* =========================================================
WRAPPERS Y CONTENEDORES
========================================================= */
.wrapTable {
    width: 100%;
    top: 0;
    overflow: hidden;
    position: relative;
    background: #eee;
    bottom: 30px !important;
    margin: 0 auto !important;
}
body.iframed .wrapTable { bottom: 0 !important; }

.wrapTableInner { /* scroll interno horizontal oculto */
    height: 100%;
    overflow: auto hidden;
}

.isAbsolute > .table-container-fade { /* degradado lateral al final de tabla */
    z-index: 10;
    position: absolute;
    right: -3px;
    display: none;
    width: 17px;
    opacity: .7;
    height: 100%;
    background: linear-gradient(to right, rgba(255,0,0,0) 0, rgba(255,255,255,0) 36%, rgba(0,0,0,.4) 100%);
}

/* =========================================================
IMÁGENES EN CELDAS
========================================================= */
.wrapTable td img {
    margin-bottom: 0;
    display: inline;
    width: 40px;
    height: 40px;
}
.wrapTable td img.imgbg { /* imagen vía background */
    margin-bottom: 0;
    display: inline;
    width: 51px;
    height: 51px;
    background: #fff;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* icono institución dentro de wrapTable */
.wrapTable .fa-institution {
    top: -2px;
    font-size: 11px;
}

/* =========================================================
BADGES / WRAP TEXT COLOR
========================================================= */
.wrapTextColor, .wTC {
    border-radius: 3px;
    overflow-wrap: initial;
    padding: 2px 5px;
    margin: 4px 2px 0 auto;
    display: inline-block;
    font-size: 12px;
    text-overflow: ellipsis;
    font-weight: bold;
    opacity: .7;
}
a > .wrapTextColor, a > .wTC { cursor: pointer !important; }
.wrapTextColor:hover, .wTC:hover { opacity: 1; }

.wrapTextColor2, .wTC2 {
    border-radius: 3px;
    overflow-wrap: break-word;
    font-size: 11px;
    padding: 3px 5px;
    display: block;
    font-weight: bold;
}
.wrapTextColor2 d, .wTC2 d, .wrapTextColor d, .wTC d { display: inline !important; }

.wTC.block {white-space: nowrap;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.wTC.inline-block {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wrapTable .wTC.inline-block {
    font-size: 11px;
    user-select: none;
}

/* =========================================================
TABLA PRINCIPAL .table2 (estructura, cabeceras, estados)
========================================================= */
.table2 {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 100% !important;
}
.wrapTable .table2 .label {
    display: inline-block;
    font-size: 12px;
    white-space: pre-line;
    position: relative;
    margin: 0 auto;
    left: auto;
    right: auto;
}

/* filas abiertas */
.table2 tr[opened="1"] td { background-color: rgba(0,0,0,.04); }

/* cabecera */
.wrapTable thead {
    background: #ededed;
    border-bottom: 1px solid #dfdfdf;
    color: #333;
    font-size: 12px;
    padding: 4px 6px;
    text-align: left;
    text-shadow: #fff 0 1px 0;
}
.wrapTable thead th, .wrapTable thead td {
    vertical-align: middle !important;
    padding: 4px 0 3px !important;
    font-size: 10px !important;
}
.wrapTable .table2 thead th {
    width: 75px;
    text-align: center;
    padding: 0 !important;
}
.wrapTable .table2 thead .cell { position: relative; }

/* primera columna cabecera */
.wrapTable .table2 thead th:first-child,
.wrapTable.rowType .table2 th:first-child {
    width: 55px;
    border-left: 1px solid rgb(237 237 237);
}
.wrapTable .table2 thead th.td_type_gallery { width: 72px; }

/* tipos de th/td comunes */
.wrapTable .table2 td, .wrapTable .table2 th { box-sizing: border-box !important; }
.wrapTable .table2 th, .wrapTable .table2 td {
    text-align: left;
    padding: 0 !important;
}
.wrapTable .table2 th.td_type_bool { text-align: center; }
.wrapTable .table2 th {
    font-weight: bold;
    border-left: 1px solid rgb(88,76,76);
    border-right: 1px solid #ccc;
}
.wrapTable .table2 tr td {
    border-width: 1px;
    border-style: solid;
    border-color: transparent transparent #f0f0f0;
    font-size: 14px;
    padding: 0;
    margin: 0;
    color: rgb(109,109,109);
    border-right-width: 0 !important;
    border-left-width: 0 !important;
}
.wrapTable .table2 tr td:last-child .wW { padding-right: 6px; }
.wrapTable .table2 tr td:nth-last-child(2) { padding-right: 5px; }
.wrapTable .table2 tr td.unix_created input { font-size: 10px; }

/* zebra + hover */
.wrapTable .table2 .odd { background-color: #f8f8f8; }
.wrapTable .table2 .even { background-color: #fff !important; }
.wrapTable .table2 tbody tr:hover td { background: rgba(0,0,0,.03); }

/* =========================================================
RESIZE COLUMNAS (asas invisibles)
========================================================= */
.wrapTable .table2 thead th.JSresizing { cursor: col-resize; user-select: none; }
.wrapTable .table2 thead th .JSresizable {
    width: 3px;
    height: 100%;
    position: absolute;
    cursor: col-resize;
    box-sizing: content-box;
    right: -6px;
    top: -1px;
    border-left: 5px solid #ededed;
    border-right: 5px solid #ededed;
    opacity: 0;
    background: transparent;
    z-index: 999999998;
}
.wrapTable .table2 thead th.JSresizing .JSresizable,
.wrapTable .table2 thead th .JSresizable:hover {
    background: #9e9e9e;
    cursor: col-resize;
    opacity: 1;
}
.wrapTable .table2 thead th.JSresizing .JShideColumn,
.wrapTable .table2 thead th.JSresizing .JSsort { display: none !important; }



/* =========================================================
TIPOS DE CELDA / LAYOUTS
========================================================= */
.wrapTable .table2 .td_type_imgmodal img {
    /* border: 2px solid #f0f0f0; */
    cursor: pointer;
    width: 100%;
    object-fit: contain;
    background: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100% !important;
}


.wrapTable .table2 .td_type_imgmodal img:hover { border: 2px solid rgb(56,170,232); }
.wrapTable .table2 .td_type_imgmodal,
.wrapTable .table2 .td_type_bool,
.wrapTable .table2 .td_type_img { width: 73px; text-align: center;}

.wrapTable .table2 .td_type_bools { text-align: center; }
.wrapTable .table2 .td_type_bools .switch2 { width: 100%; display: inline-block; }

.wrapTable .table2 .td_type_datetime,
.wrapTable .table2 .td_type_price { text-align: right; width: 80px; }

.wrapTable .table2 .td_type_price_format th { width: 100px; }
.wrapTable .table2 td.td_type_price_format { text-align: right !important; }

.wrapTable .table2 .td_type_infowindow .wW { overflow: visible; text-align: center; }
.wrapTable .table2 .td_type_siNo { text-align: center; }

.wrapTable .table2 .td_type_images .wW { height: auto !important; max-height: none !important; }
.wrapTable .table2 .td_type_img .wW { text-overflow: inherit; }
.wrapTable .table2 .td_type_html .wW,
.wrapTable .table2 .td_type_img .wW,
.wrapTable .table2 .td_type_gallery .wW,
.wrapTable .table2 .td_type_imgmodal .wW {
    text-overflow: inherit;
    max-height: none !important;
    height: inherit !important;
    padding-bottom: 3px !important;
    padding-top: 3px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;    
}
.wrapTable .table2 .td_type_html .wHtml {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* celda botones de acción */
.wrapTable .table2 .td_type_buttons {
    text-align: center;
    position: relative;
    width: 17px !important;
    padding: 0 !important;
}
.wrapTable .table2 .td_type_buttons .wW {
    overflow: visible;
    height: 100%;
    top: 0;
    position: absolute;
    padding: 0 !important;
}
.wrapTable .table2 .td_type_buttons .JSresizable { display: none; }
.wrapTable .table2 .td_type_buttons .wWI { display: block; height: 100%; overflow: visible; padding: 0 !important; }
.wrapTable .table2 .td_type_buttons .btn-group { 
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrapTable .table2 tr:hover .td_type_buttons .btn-group { opacity: 1; }
.wrapTable .table2 .td_type_buttons button {
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
    border: 0;
    font-weight: bold;
    display: block;
    position: relative;
    background: 0 center;
}
.wrapTable .table2 .td_type_buttons .th-inner { display: none; }
.wrapTable .table2 .td_type_buttons button:hover,
.wrapTable .table2 .td_type_buttons button:focus {
    color: #1b1b1b;
    text-decoration: none;
    text-shadow: none;
    background-color: #b1b1b1;
}
.wrapTable .table2 .td_type_buttons i {
    margin-right: 10px !important;
    top: 1px !important;
}
.wrapTable .table2 .td_type_buttons .dropdown-toggle {
    box-shadow: none;
    background-color: rgb(228 228 228);
    border-radius: 0 !important;
    opacity: 0;
}
.wrapTable .table2 tr:hover .td_type_buttons .dropdown-toggle { opacity: 1; }
.wrapTable .table2 .td_type_buttons .dropdown-toggle > i {
    font-size: 18px;
    margin: 0 !important;
    color: #777 !important;
}
.wrapTable .table2 .td_type_buttons .dropdown-menu {
    top: 50%;
    margin-top: 16px;
    padding: 0;
    border-radius: 0;
}

/* batería */
.wrapTable .table2 th.td_type_battery { width: 54px; }
.wrapTable .table2 td.td_type_battery .battery {
    margin-top: 50%;
    top: -7px;
    position: relative;
}

/* alineaciones helper */
.wrapTable .table2 td.text-center { text-align: center !important; }
.wrapTable .table2 td.text-right  { text-align: right !important; }
.wrapTable .table2 td.text-left   { text-align: left !important; }

/* ancho columnas especiales */
.table2.ft_agroupated_repeated th:last-child { width: 100px !important; }
.form-group .wrapTable th { width: auto; }
.wrapTable .table2 th.sortable,
.wrapTable .table2 td.sortable {
    width: 22px !important;
    border-right: 1px solid rgb(237 237 237);
}
.wrapTable .table2 th.jsThCheckboxes,
.wrapTable .table2 td.jsTdCheckbox { width: 32px !important; text-align: center !important; }
.wrapTable .table2 th.jsThCheckboxes span {
    min-height: 17px;
    display: block;
    text-align: center !important;
    padding: 0 3px !important;
}

/* =========================================================
CONTENIDO EDITABLE / ENVOLTORIOS
========================================================= */
.wrapTable .table2 td .wW { /* wrapper de celda */
    position: relative;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 15px;
    min-height: 21px;
    width: 100% !important;
    padding: 6px 9px 7px !important;
}
.wrapTable .table2 td .wWI { /* contenido interior */
    display: inline-block;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    line-height: 14px;
    position: relative;
    width: 100%;
}
.wrapTable .table2 td.td_type_trilean .wWI,
.wrapTable .table2 td.td_type_html .wWI2 { display: block !important; }
.wrapTable .table2 td.td_type_simplemodal .wWI d { display: inline-block; }

.wrapTable .table2 td .wWI a {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    display: inline-block;
    width: 100%;
}
.wrapTable .table2 td .wWI a.wrapImg { 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
}
.wrapTable .table2 td .wWI a:hover {
    text-decoration: underline; 
}

.wrapTable .table2 td .wWI a.pencil{
    position: absolute;
    right: 2px;
    top: -4px;
}
.wrapTable .table2 td .wWI a.btncircle{
    width: auto;
}


.wrapTable .table2 td .JS_text {
    display: block;
    min-height: 14px;
    position: relative;
    padding: 3px 4px;
    border: 1px solid transparent;
}
.wrapTable .table2 td .JS_wrap:hover {
    background: rgb(216,253,213);
    border: 1px solid rgb(141,219,124);
    cursor: text;
}
.wrapTable .table2 td .wW .JS_text:focus {
    background: #fff;
    border: 1px solid rgba(81,161,211,.7);
    box-shadow: rgba(0,0,0,.4) 0 0 3px inset;
    color: #000;
}
.wrapTable .table2 td .JS_wrap i { /* icono editar inline */
    display: none;
    font-size: 11px;
    position: absolute !important;
    right: -7px !important;
    top: -2px !important;
    background: #fff !important;
    width: 18px !important;
    height: 18px !important;
    text-align: center !important;
    line-height: 18px !important;
    border: 1px solid #bbb !important;
}
.wrapTable .table2 td.text-center .JS_wrap i,
.wrapTable .table2 td.text-right .JS_wrap i { left: -5px; right: auto; }
.wrapTable .table2 td .JS_wrap:hover i { display: block; }
.wrapTable .table2 td .wW .JS_text:focus i { display: none; }
.wrapTable .table2 td .wW .JS_input { padding: 3px 7px 2px; width: 100%; }

/* progreso */
.wrapTable .table2 td.td_type_progressBar .wWI { display: block; }
.wrapTable .table2 td.td_type_progressBar .progress {
    top: 11px;
    position: relative;
    text-shadow: #000 1px 1px 0;
    font-size: 12px;
}

/* filas clicables */
.wrapTable .table2 tr[data-href] { cursor: pointer; }

/* =========================================================
MENÚS DENTRO DE LA TABLA
========================================================= */
.wrapTable .table2 .dropdown-menu li { border-bottom: 1px dashed #e1e1e1; }
.wrapTable .table2 .dropdown-menu a {
    padding: 7px 0 7px 11px;
    margin-right: 0;
    color: #333 !important;
    display: block !important;
}
.wrapTable .table2 .dropdown-menu a:hover,
.wrapTable .table2 .dropdown-menu a:focus {
    background: #edf7ff;
    text-decoration: none !important;
}
.wrapTable .table2 .dropdown-menu a.jsListDeleteBtn:hover,
.wrapTable .table2 .dropdown-menu a.jsListDeleteBtn:focus {
    background: #f00;
    color: #fff !important;
}
.wrapTable .table2 .dropdown-menu a.jsListDeleteBtn:hover i,
.wrapTable .table2 .dropdown-menu a.jsListDeleteBtn:focus i { color: #fff !important; }
.wrapTable .table2 .dropdown-menu a i { top: 0 !important; color: rgba(0,0,0,.7) !important; }

/* =========================================================
SORT / ICONOS ORDEN
========================================================= */
.wrapTable .sortCol { left: 0; opacity: .2 !important; right: auto !important; }
.wrapTable .sortCol.fa-sort-desc,
.wrapTable .sortCol.fa-sort-asc,
.wrapTable .sortCol:hover { opacity: 1 !important; }
.wrapTable thead i.fa-sort-desc,
.wrapTable thead i.fa-sort-asc,
.wrapTable thead i.fa-sort {
    margin: 0 3px;
    opacity: .4;
    font-size: 13px;
    position: absolute !important;
    float: none !important;
    top: 3px !important;
    left: 0 !important;
}
.wrapTable thead i.fa-sort { display: none; }
.wrapTable thead th:hover i.fa-sort { display: block; }
.wrapTable .table2 .fa.fa-info {
    width: 23px;
    line-height: 23px;
    border: 1px solid #ddd;
    height: 23px;
    border-radius: 20px;
    position: relative;
    float: none !important;
    background: #ababab !important;
    top: 0 !important;
    color: #545454 !important;
}
.wrapTable thead i.fa-sort-desc,
.wrapTable thead i.fa-sort-asc { opacity: 1; color: red !important; }

/* botón ocultar columna en th */
.wrapTable thead .JShideColumn {
    border-radius: 16px;
    width: 12px;
    top: 0;
    line-height: 11px;
    font-size: 14px;
    text-align: center;
    height: 12px;
    text-shadow: none;
    overflow: hidden;
    z-index: 999999999;
    visibility: hidden;
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    color: #ababab !important;
}
.wrapTable thead th:hover .JShideColumn { visibility: visible; }
.wrapTable thead .JShideColumn:hover { color: #222 !important; }

/* =========================================================
CELDAS ESPECIALES / TEXTO
========================================================= */
.wrapTable td.paragrahp { color: #888 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.wrapTable td.paragrahp strong { color: #333; font-size: 14px; }
.wrapTable td b, .wrapTable td i, .wrapTable td strong, .wrapTable td span { cursor: default; }
.wrapTable .oneline { text-overflow: ellipsis; white-space: nowrap; height: 17px; overflow: hidden; }
.wrapTable .wLabelT { text-align: center; cursor: default; }
.wrapTable .cursiveGrey { font-weight: bold; font-style: italic; color: #555; }
.wrapTable span.highlight { background: rgb(145,145,114); color: #000; }

/* =========================================================
CABECERA FIJA / STRUCTURAS ENVOLTURA
========================================================= */
.wrapTbody {
    margin-top: 0;
    overflow-x: hidden;
    height: 100%;
    z-index: 1;
    position: relative;
    padding-top: 45px;
}
.wrapTbody table { margin-top: -48px; position: relative; }
.wrapTbody thead, .wrapTbody thead tr { height: 1px; overflow: hidden; }
.wrapTbody thead { font-size: 0; padding: 0 !important; }
.wrapTable .wrapTbody thead th { height: 1px; font-size: 0 !important; padding: 0 !important; }
.wrapTable .wrapTbody thead th input,
.wrapTable .wrapTbody thead th i { display: none; }
.wrapTable .wrapTbody thead th span { line-height: 0 !important; padding: 0 !important; min-height: 0 !important; }

.wrapThead { z-index: 2; position: relative; }
.wrapThead tbody, .wrapThead thead { pointer-events: auto; }
.wrapThead thead th { height: 40px; position: relative; }
.wrapThead thead .th-inner {
    overflow: hidden;
    line-height: 14px;
    border-left: 1px solid #e4e4e4;
    margin-right: -1px;
    font-size: 11px;
    vertical-align: middle;
    display: block;
    font-weight: bold;
    color: #6a6e6f;
}
.wrapTable thead .th-inner2 {
    margin: 0;
    border-bottom: none;
    line-height: 11px;
    display: table;
    width: 100%;
    height: 100%;
    position: relative !important;
    float: none !important;
    top: 0 !important;
}
.wrapTable thead span {
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    padding: 0 4px;
    line-height: 11px;
    width: 100%;
    display: block;
}

/* checkbox en th (ajuste visual) */
.wrapThead thead .th-inner input[type="checkbox"]::after { top: -3px; }
.wrapThead thead .th-inner input[type="checkbox"] {
    left: -1px;
    position: relative;
}

.buttonsActionsList { margin-right: 4px; line-height: 28px; }
.buttonsActionsList > a {
    font-weight: bold;
    padding: 0 6px;
    margin: 0;
    border-right: 1px solid #a2a2a2;
}
.buttonsActionsList > a:last-child { border: 0; }

.squareBtn {
    float: right;
    width: 26px;
    text-align: center;
    border: 1px solid #c4c4c4 !important;
    background: -webkit-linear-gradient(top, #fff 1%, #f3f3f3 100%) !important;
    border-radius: 2px !important;
    color: #333 !important;
    display: inline-block !important;
    font-weight: bold !important;
    line-height: 24px !important;
    margin: 0 4px !important;
    min-height: 26px !important;
    text-decoration: none !important;
}
.squareBtn > i.fa {
    background: transparent;
    color: #000;
    margin: 0;
    display: inline-block;
    font-size: 14px;
}
.squareBtn:hover {
    border: 1px solid #a3a3a3 !important;
    background: #e8e6e6 !important;
}
.squareBtn.undo { margin: 0 !important; }
.table_options.head .squareBtn { margin: 0 !important; }

.tableHtmlBottom { font-size: 12px; font-weight: normal; float: left; }
.tableHtmlBottom a { font-weight: bold; }
.tableHtmlBottom a:hover { text-decoration: underline; }

/* botón sort número dentro de celda */
.wrapTable .JS_sort_cell,
.wrapTable .JS_sort_cell.JS_text {
    width: 25px;
    height: 25px;
    line-height: 25px;
    background: #e9e9e9;
    color: #000;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    border-radius: 34px;
    border: 0 !important;
    margin: 0 auto;
    padding: 0 !important;
}

/* =========================================================
PAGINACIÓN
========================================================= */
.pagination { float: right; padding: 0; margin: 0 0 0 2px !important; }
.pagination li { float: left; }
.pagination a {
    width: 26px;
    text-align: center;
    border: 1px solid #cecece !important;
    background: #ececec !important;
    color: #afafaf !important;
    display: inline-block !important;
    float: left !important;
    font-weight: bold !important;
    line-height: 24px !important;
    overflow: hidden;
    margin-right: 4px !important;
    height: 26px !important;
    text-decoration: none !important;
}
.pagination a:hover {
    border: 1px solid #a3a3a3 !important;
    background: #cecece !important;
    color: #8a8a8a !important;
}
.pagination .active a,
.pagination .active a:hover {
    color: #f2f2f2 !important;
    box-shadow: #eaeaea 0 1px 0, #67c3da 0 1px 0 inset !important;
    border-color: #5098aa !important;
    background: #88bbc8 !important;
}
.pagination li.totalPages { font-weight: bold; font-size: 15px; }
.pagination ul {
    margin-bottom: 0;
    display: inline-block;
    margin-left: 5px;
    float: left;
}
.pagination .dropdownPerPage { position: relative; float: right; }
.pagination .totalsPages {
    display: inline-block;
    position: relative;
    float: left;
    margin-left: 2px;
    line-height: 28px;
}
.pagination li.active a input {
    color: #000;
    padding: 0 0 4px;
    text-align: center;
    background: transparent;
    border: none;
    width: 100%;
    font-size: 13px;
    max-height: 100%;
}
.pagination li.active a input:hover,
.pagination li.active a input:focus { background: #fff; }

/* =========================================================
TABLAS FIJAS / SCROLLER
========================================================= */
.table-fixed thead { width: 97%; }
.table-fixed tbody {
    height: 365px;
    overflow-y: auto;
    width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr,
.table-fixed td, .table-fixed th { display: block; }
.table-fixed tbody td, .table-fixed thead > tr > th {
    float: left;
    border-bottom-width: 0;
}

/* =========================================================
ICONOS / ESTADOS / VARIOS
========================================================= */
.JS_handle {
    position: relative;
    margin-top: 17px;
    margin-left: 13px;
    cursor: move;
    background: none !important;
    color: #aaa !important;
}
.JS_handle:hover { color: #222 !important; }

.wrapTable i.fa {
    color: #000;
    padding: 0;
    cursor: pointer;
    margin-right: 3px;
    position: relative;
    background: transparent;
}
.wrapTable ul.dropdown-menu i.fa { 
    background: transparent !important; 
    position: relative !important; 
}

.wrapTable a.disabled i.fa {
    font-size: 14px;
    cursor: default !important;
    opacity: .3 !important;
    color: #000 !important;
}

.wrapTable a.disabled i.fa:hover { 
    background: rgb(42,76,117) !important; 
}

.wrapTable i.fa-external-link {
    font-size: 7px;
    margin-right: 3px;
    top: -2px !important;
    left: -4px !important;
    background: transparent;
    color: #000;
    position: absolute !important;
    position: relative !important;
}


/* icono editar simple modal */
.wrapTable i.JSsimpleModalEditVal {
    position: absolute;
    right: 1px;
    border-radius: 20px;
    background: #dedede;
    text-align: center;
    height: 20px;
    width: 20px;
    text-indent: 2px;
    top: 1px;
    line-height: 20px;
    color: #999;
    display: none;
    position: absolute;
    top: -2px;
    right: -9px;
    display: none;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: #f1f1f1;
    color: #777;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.wrapTable td:hover i.JSsimpleModalEditVal { display: block; }
.wrapTable i.JSsimpleModalEditVal:hover { 
    background: #ababab;
    color: #666;
    background-color: #e6e6e6;
    color: #333;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);    
}
.wrapTable .td_type_simplemodal:hover i.JSsimpleModalEditVal,
.wrapTable .td_type_external:hover i.JSsimpleModalEditVal { display: inline; }

/* tiendas / badges */
.wrapTable .shopCircle {
    width: 23px;
    height: 23px;
    line-height: 23px;
    font-size: 12px;
    display: inline-block;
    font-weight: bold;
    border-radius: 50%;
}
.wrapTable .table2 td.shop_name {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 9px;
    text-align: center;
}

/* =========================================================
ELEMENTOS VISUALES EXTRA (barras, números, scroll ghost)
========================================================= */
.wrapTable td span.bar {
    width: 120px;
    position: relative;
    height: 6px;
    display: block;
}
.wrapTable td span.bar > span {
    background: rgb(21,199,21);
    position: absolute;
    height: 100%;
    border-radius: 7px;
    border: 1px solid rgb(9,176,8);
}
.wrapTable span.numRight {
    position: absolute;
    right: 3px;
    top: 50%;
    margin-top: -6px;
}
.wrapTable .JSverticalGhostScroll {
    position: absolute;
    right: 0;
    top: 50px;
    bottom: 0;
    width: 10px;
    z-index: 1;
    overflow-y: auto;
}
.wrapTable .JSverticalGhostScroll .inner {}

/* =========================================================
BLOQUES ESPECÍFICOS (productos/imágenes/galerías)
========================================================= */
.wrapTable .orderProducts .wrapProducts {
    margin-left: 52px;
    font-size: 11px;
    display: block;
    float: none;
    width: 100%;
}
.wrapTable .orderProducts .wrapImg { float: left; margin-right: 6px; }
.wrapTable .orderProducts img { width: 44px; height: 44px; border-radius: 0; }

.wrapTable .JSimageModal {
    width: 50px !important;
    height: 50px;
    max-height: 62px;
    position: relative;
    object-fit: unset;
    text-align: center;
    display: inline-block;
    background: #fff;
    vertical-align: middle;
    overflow: hidden;
    border: 2px solid transparent;
}
.wrapTable .complexCell .JSimageModal { float: left; }
.wrapTable .JSimageModal:hover { border-color: rgba(0,0,0,.1); }
.wrapTable .JSimageModal img {
    display: block;
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* buscador complejo */
.JSfilterComplexCell {
    position: relative;
    padding-right: 28px;
    min-width: 237px;
    height: 28px;
    margin-right: 5px;
}
.JSfilterComplexCell > input[type="text"] {
    width: 100%;
    display: block;
    height: 28px !important;
}
.JSfilterComplexCell > .JSsubmit {
    position: absolute;
    right: 0;
    display: block;
    top: 0;
    height: 100%;
    text-align: center;
    width: 29px;
    border: none;
    background: rgb(13,31,63);
    line-height: 27px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.JSfilterComplexCell > .JSsubmit > i { background: none !important; color: #fff; }

/* etiquetas búsqueda / tamaños fuente */
.wrapTable .JS_search_filters {
    margin: 0 6px 0 12px;
    display: block;
    font-size: 13px;
    font-weight: bold;
}
.wrapTable .miniFontSize { font-size: 10px; line-height: 10px; display: block; }
.wrapTable .miniFontSize strong { font-size: 10px !important; }
.wrapTable .middleFontSize { font-size: 12px; line-height: 12px; display: block; }
.wrapTable .middleFontSize strong { font-size: 12px !important; }

/* grid de carritos */
.wrapTable .imgCarts { margin-top: 7px; }
.wrapTable .imgCarts a {
    display: inline-block;
    margin-right: 6px;
    position: relative;
    border: 2px solid transparent;
    width: 40px;
    height: 40px;
    background: #cdcdcd;
}
.wrapTable .imgCarts a:hover { border-color: rgb(13,31,63); }
.wrapTable .imgCarts img {
    display: block;
    background: #fff;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100%;
}
.wrapTable .imgCarts span {
    background: rgb(16,187,0);
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    bottom: 0;
    right: -5px;
    font-weight: bold;
    color: #fff;
    font-size: 9px;
    text-align: center;
    line-height: 16px;
    border-radius: 50px;
}
.wrapTable .imgCarts span.status0 { background: red; }

/* =========================================================
DROPDOWNS / CHECKS / POPUPS
========================================================= */
.wrapTable tr.JSrowPopupSelect td { cursor: pointer; }
.wrapTable tr.JSrowPopupSelect:hover td { background: rgb(215,244,255) !important; }

/* ebay botón circular */
.wrapTable a.btncircle {
    display: inline-block !important;
    width: auto !important;    
}
.wrapTable a.btncircle > i {
    background: url("ebay-icon.png") center center / 19px no-repeat #fff;
    text-align: center;
    content: " ";
    position: relative;
    display: inline-block;
    color: #666;
    padding-top: 2px;
    line-height: 24px;
    padding-left: 0;
    box-shadow: rgba(0,0,0,.4) 0 0 5px;
    width: 28px;
    border-radius: 20px;
    height: 28px;
    margin-top: 4px;
    text-indent: 1px;
    margin-bottom: 3px;
    font-size: 14px !important;
}
.wrapTable .btncircle > i { margin: 0; display: inline; color: #666; }
.wrapTable a.btncircle i:hover { box-shadow: rgb(0,112,192) 0 0 7px; color: rgb(0,112,192); }

/* =========================================================
COLUMNAS ELIMINABLES
========================================================= */
.wrapTable .table2 .JS_deleteColumn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 11px;
    height: 10px;
    line-height: 6px;
    cursor: pointer;
    color: #aaa;
    border: 1px solid #bbb;
    border-radius: 53px;
    text-shadow: none;
    background: #ddd;
    font-size: 10px;
    opacity: 1;
    text-align: center;
    font-weight: bold;
    display: inline-block;
}
.wrapTable .table2 .JS_deleteColumn:hover {
    text-decoration: none;
    border: 1px solid #fff;
    background: #999;
    color: #fff;
}

/* =========================================================
ESTRUCTURAS FIJAS / CONTAINERS AUX
========================================================= */
.fixed-table-container-inner {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #fff;
    min-width: 100%;
}
.fixed-table-container-inner .table2 { width: 100% !important; }
.fixed-table-container-inner .table2 .first .th-inner { border-left: none; padding-left: 6px; }
.fixed-table-container-inner .table2 .extrawrap th { text-align: center; }
.fixed-table-container-inner .table2 .extra-wrap { width: 100%; }
.fixed-table-container-inner .table2 .zupa div.zupa1 { margin: 0 auto !important; width: 0 !important; }
.fixed-table-container-inner .table2 .zupa div.th-inner {
    width: 100%;
    margin-left: -50%;
    text-align: center;
    border: 0;
}
.fixed-table-container-inner .table2 .hidden-head { min-width: 530px; }
.fixed-table-container-inner .table2 .hidden-header .th-inner {
    position: static;
    overflow-y: hidden;
    height: 0;
    white-space: nowrap;
    padding-right: 5px;
}
.fixed-table-container-inner .table2 table.table3 .control-group {
    border: 0;
    padding: 3px 8px;
    min-height: 0;
}

/* drag & sort cabecera */
.fixed-table-container-inner .dragtable-sortable {
    position: absolute;
    z-index: 9999999;
    height: 55px;
    top: -3px;
    background: transparent;
}
.fixed-table-container-inner .dragtable-sortable li {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* lista sortable de columnas */
ul#sortableColumn { z-index: 99999999; top: 0; }
ul#sortableColumn li {
    float: left;
    background: #ededed !important;
    opacity: 1 !important;
}
ul#sortableColumn .table2 { margin-bottom: 0 !important; }
ul#sortableColumn .table2 thead { background: #ededed; }
ul#sortableColumn .table2 .th-inner {
    height: 49px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #eee;
    display: table;
}
ul#sortableColumn .table2 .th-inner2 {
    width: 39px;
    display: table-cell;
    vertical-align: middle;
}

/* =========================================================
TABLE 3 / FORM TABLES / AGRUPADAS
========================================================= */
.table3 { width: 100%; }
.table3 th {
    background: #dedede;
    padding: 5px 5px;
    height: 44px;
    font-size: 11px;
    text-align: center;
    line-height: 12px;
    vertical-align: middle;
    text-transform: uppercase;
}
.table3 th.sortable { width: 40px !important; }
.table3 .td_type_buttons { width: 70px !important; }

table.ft_agroupated_repeated .control-group {
    min-height: 20px;
    height: inherit;
    border: 0;
    padding: 1px;
}
table.ft_agroupated_repeated input[type="text"] {
    height: 34px;
    padding: 2px 5px;
}
table.ft_agroupated_repeated input[type="text"].text-right {}
table.ft_agroupated_repeated input.jsFieldMultilang { padding-right: 32px; }
table.ft_agroupated_repeated .JS_handle { margin-top: 6px; }
table.ft_agroupated_repeated .control-label,
table.ft_agroupated_repeated .label_comment { display: none; }
table.ft_agroupated_repeated .control_group_checkbox { text-align: center; }
table.ft_agroupated_repeated .control_group_checkbox input[type="checkbox"] { display: inline-block; }

/* =========================================================
ESTADOS / ANIMACIONES
========================================================= */
@-webkit-keyframes flashRowUpdate {
    0% { background-color: rgb(246,255,154); }
    100% { background-color: transparent; }
}
li.flashRowUpdate, tr.flashRowUpdate {
    animation-name: flashRowUpdate;
    animation-duration: 1s;
    animation-iteration-count: 8;
    animation-timing-function: ease-in-out;
}

/* =========================================================
EDITABLE MODE (tabla editable)
========================================================= */
.wrapTable table.editable {}
.wrapTable table.editable td {}
.wrapTable table.editable td .wW { padding: 0 !important; }
.wrapTable table.editable td input {
    height: 23px;
    max-width: 100%;
    padding: 0 5px !important;
    border: none;
    background: transparent;
    height: 1px;
    width: 1px;
}
.wrapTable table.editable td input:after { left: -9px; top: -13px; }
.wrapTable table.editable td .wWI { display: block; }
.wrapTable table.editable td .wWI2 { padding: 5px 3px 3px; }

/* =========================================================
VARIOS
========================================================= */
.wrapTable .JS_wrap {
    display: block;
    width: 100%;
    min-width: 47px;
    max-width: 100%;
    border: 1px solid transparent;
    position: relative;
}
.wrapTable .JS_search_filters {}
.wrapTable .JSheadTableList > .scroller {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
    width: 100%;
    min-width: 100%;
    position: absolute;
    height: -webkit-fill-available;
    left: 0;
}
.JSheadTableList > .scroller::-webkit-scrollbar { display: none; }
.JSheadTableList .scrollerInner {
    width: 2000px;
    height: 100%;
    padding: 3px 5px 5px 5px;
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100%;
}
.JSheadTableList .pagination .JS_per_page { top: -2px; position: relative; }

/* filas repetibles ocultas por defecto */
tr.JSrowRepeatable { display: none; }

/* =========================================================
ICONOS DE PLATAFORMA (sprites/imagenes)
========================================================= */
.wrapTable .icon-chrome,
.wrapTable .icon-firefox,
.wrapTable .icon-safari,
.wrapTable .icon-windows,
.wrapTable .icon-opera,
.wrapTable .icon-android,
.wrapTable .icon-linux,
.wrapTable .icon-chromeos,
.wrapTable .icon-apple {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 7px;
}
.wrapTable .icon-chrome        { background-image: url("../img/icons/chrome-icon.png"); }
.wrapTable .icon-firefox       { background-image: url("../img/icons/firefox-icon.png"); }
.wrapTable .icon-safari        { background-image: url("../img/icons/safari-icon.png"); }
.wrapTable .icon-apple         { background-image: url("../img/icons/apple-icon.png"); }
.wrapTable .icon-opera         { background-image: url("../img/icons/opera-icon.png"); }
.wrapTable .icon-android       { background-image: url("../img/icons/android-icon.png"); }
.wrapTable .icon-linux         { background-image: url("../img/icons/linux-icon.png"); }
.wrapTable .icon-androidbrowser{ background-image: url("../img/icons/androidbrowser-icon.png"); }
.wrapTable .icon-windows       { background-image: url("../img/icons/windows-icon.png"); }
.wrapTable .icon-msie          { background-image: url("../img/icons/msie-icon.png"); }
.wrapTable .icon-chromeos      { background-image: url("../img/icons/chromeos-icon.png"); }
.wrapTable .icon-version {
    margin-top: 0;
    min-height: 20px;
    position: relative;
    line-height: 20px;
    display: inline-block;
    color: #999;
    top: -6px;
    font-size: 11px;
}

/* =========================================================
UTILIDADES / AJUSTES VARIOS
========================================================= */
.table2-responsive { width: 100%; overflow-y: hidden; }
.form-group .wrapTable .table2 td:first-child { width: auto; }
.wrapTable .table2 .td_type_tooltip { text-align: center; }
.wrapTable .table2 .td_type_tooltip .wWI { display: block; text-align: center; }
.wrapTable .table2 th.td_type_price_format { width: 100px; }

.wrapTable .table2 tr:hover .td_type_buttons,
.wrapTable .table2 .td_type_buttons {} /* placeholder para overrides */

.wrapTable thead .th-inner2 input[type="checkbox"] {} /* placeholder */

.wrapTable .JSheadTableList {} /* placeholder */
.wrapThead table {} /* placeholder */

.table-striped > tbody > tr:nth-of-type(2n+1) { background: #fff; }

.wrapTable a.btncircle i:hover {} /* duplicado intencional (override permitido) */

/* =========================================================
MEDIA QUERIES
========================================================= */
@media screen and (max-width: 900px) {
    .table2-responsive > .table2 > thead > tr > th,
    .table2-responsive > .table2 > tbody > tr > th,
    .table2-responsive > .table2 > tfoot > tr > th,
    .table2-responsive > .table2 > thead > tr > td,
    .table2-responsive > .table2 > tbody > tr > td,
    .table2-responsive > .table2 > tfoot > tr > td {
        white-space: nowrap;
    }
}

/* =========================================================
MODO IFRAME
========================================================= */
body.iframed .table_options.bottom { display: none; }




/* === Modernización de tabla principal === */

/* Fondo general más claro */
.wrapTable {
    background: #f9fafb; /* gris claro moderno */
}

/* Cabecera */
.wrapTable thead {
    background: #f3f4f6; /* gris suave */
    border-bottom: 1px solid #e5e7eb;
    color: #374151; /* gris oscuro neutro */
    font-size: 12px;
    text-shadow: none; /* fuera efecto glossy */
}

.wrapTable thead th, 
.wrapTable thead td {
    padding: 10px 8px !important;
    font-size: 11px !important;
    font-weight: 600;
    text-transform: uppercase;
    border: none; /* fuera bordes internos gruesos */
}

/* Filas */
.wrapTable .table2 tr td {
    border: none;
    border-bottom: 1px solid #f1f1f1; /* divider sutil */
    font-size: 13px;
    color: #374151;
    padding: 5px 8px !important;
}

/* Alternancia de filas */
.wrapTable .table2 tr:nth-child(even) {
    background-color: #fff;
}
.wrapTable .table2 tr:nth-child(odd) {
    background-color: #fafafa;
}

/* Hover */
.wrapTable .table2 tbody tr:hover {
    background-color: #eef2ff; /* azul clarito */
}



/* Badges */
.wrapTextColor, .wTC {
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    opacity: 1;
    padding: 2px 6px;
}
.wrapTable td .colorcircle{
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 6px;
    border: none;
}


/* Botones de acción */
.wrapTable .table2 .td_type_buttons .dropdown-toggle {
    border-radius: 6px !important;
    background-color: #e5e7eb;
    transition: background 0.2s;
}
.wrapTable .table2 .td_type_buttons .dropdown-toggle:hover {
    background-color: #d1d5db;
}

/* Paginación */
.pagination a {
    border: 1px solid #d1d5db !important;
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    border-radius: 6px;
}
.pagination a:hover {
    background: #e5e7eb !important;
    color: #111827 !important;
}
.pagination .active a {
    background: #40a2cc !important;
    border-color: #40a2cc !important;
    color: #fff !important;
}

/* Sticky header */
.wrapTable .table2 thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f3f4f6;
}




/* =========================================================
FILTROS (fila de filtros)
========================================================= */
.wrapTable .table2 tr.filters,
.wrapTable .table2 tr.filters:hover { background-color: rgb(241,249,255) !important; }
.wrapTable .table2 tr.filters.existFilter,
.wrapTable .table2 tr.filters.existFilter:hover { background-color: rgb(137,255,141) !important; }
.wrapTable .table2 tr.filters .controls { margin: 0 1px; }


.wrapTbody thead {
    opacity: 0;
}

/* =========================================================
ADMIN TABLES - MODERN BASELINE
========================================================= */
:root {
    --admin-table-bg: #f8fafc;
    --admin-table-panel: #ffffff;
    --admin-table-line: #e6ebf2;
    --admin-table-line-strong: #d8e0ea;
    --admin-table-text: #172033;
    --admin-table-muted: #66758a;
    --admin-table-blue: #2374ee;
    --admin-table-blue-dark: #175bd5;
    --admin-table-blue-soft: #eef5ff;
    --admin-table-green: #2fbf75;
    --admin-table-orange: #f4a23a;
    --admin-table-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

#contentInner .table_options.head {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    background: var(--admin-table-bg);
    border: 0;
    border-bottom: 1px solid var(--admin-table-line);
    box-shadow: none;
    overflow: visible;
    position: relative;
    z-index: 50;
}

#contentInner .JSheadTableList .scrollerInner {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 100%;
    width: auto;
    height: 34px;
    max-height: 34px;
    padding: 0 6px;
    box-sizing: border-box;
    overflow: visible;
}

#contentInner .JSheadTableList > .scroller,
#contentInner .JSheadTableList .dropdown1,
#contentInner .JSheadTableList .btn-group {
    overflow: visible;
}

#contentInner .JSheadTableList .dropdown-menu,
#contentInner .JSheadTableList .columntoggle-container {
    z-index: 99999;
}

#contentInner .buttonsActionsList {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 40;
    float: none !important;
    margin-left: auto;
    margin-right: 12px;
    line-height: 1;
}

#contentInner .JSheadTableList .scrollerInner > * {
    float: none !important;
}

#contentInner .JSheadTableList .scrollerInner > a.btn1[href*="sqlmanager"] {
    order: 5;
    margin-right: 8px !important;
}

#contentInner .JSheadTableList .scrollerInner > .actionsBatch {
    order: 20;
    margin-right: 6px;
}

#contentInner .JSheadTableList .scrollerInner > .actionsBatch + .actionsBatch {
    order: 30;
}

#contentInner .JSheadTableList .scrollerInner > .pagination {
    order: 50;
}

#contentInner .JSheadTableList .scrollerInner > #JS_dropdownColumnsToggle {
    order: 60;
}

#contentInner .JSheadTableList .scrollerInner > #JS_buttonReloadList {
    order: 70;
}

#contentInner .JSheadTableList .scrollerInner > .squareBtn.undo {
    order: 80;
}

#contentInner .JSheadTableList .scrollerInner > .squareBtn {
    order: 90;
}

#contentInner .buttonsActionsList > a,
#contentInner .table_options.head .btn,
#contentInner .table_options.head .btn1,
#contentInner .table_options.head .btn2,
#contentInner .table_options.head button.btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    height: 26px;
    max-height: 26px;
    padding: 0 11px !important;
    border: 1px solid var(--admin-table-line-strong) !important;
    border-radius: 6px !important;
    background: var(--admin-table-panel) !important;
    color: #33435c !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04) !important;
}

#contentInner .JSheadTableList .actionsBatch > .btn,
#contentInner .JSheadTableList #JS_dropdownColumnsToggle .toggleColumns > .btn {
    min-height: 26px;
    height: 26px;
    max-height: 26px;
    padding: 0 14px !important;
    border: 0 !important;
    border-left: 4px solid #9fa4ad !important;
    border-radius: 0 !important;
    background: #e8e8e8 !important;
    color: #111 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

#contentInner .JSheadTableList .actionsBatch > .btn .caret,
#contentInner .JSheadTableList #JS_dropdownColumnsToggle .toggleColumns > .btn .caret {
    margin-left: 8px;
    border-top-color: #111;
}

#contentInner .JSheadTableList #JS_dropdownColumnsToggle {
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 6px;
    border-left: 4px solid #8f9298;
}

#contentInner .JSheadTableList #JS_dropdownColumnsToggle .toggleColumns > .btn {
    border-left: 0 !important;
    min-width: 124px;
}

#contentInner .buttonsActionsList > a:first-child {
    min-width: 118px;
    border-color: #3b9bb7 !important;
    border-radius: 8px !important;
    background: #3b9bb7 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(59, 155, 183, .24) !important;
}

#contentInner .buttonsActionsList > a:first-child:hover {
    border-color: #2f89a3 !important;
    background: #2f89a3 !important;
    color: #fff !important;
}

#contentInner .buttonsActionsList > a:hover,
#contentInner .table_options.head .btn:hover,
#contentInner .table_options.head .btn1:hover,
#contentInner .table_options.head .btn2:hover,
#contentInner .table_options.head button.btn:hover {
    border-color: rgba(35, 116, 238, .42) !important;
    color: var(--admin-table-blue) !important;
    background: #f9fbff !important;
    text-decoration: none !important;
}

#contentInner .buttonsActionsList > a.green,
#contentInner .table_options.head .btn.green,
#contentInner .table_options.head .btn-primary,
#contentInner .table_options.head button.btn-primary {
    border-color: var(--admin-table-blue) !important;
    background: var(--admin-table-blue) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(35, 116, 238, .22) !important;
}

#contentInner .buttonsActionsList > a.green:hover,
#contentInner .table_options.head .btn.green:hover,
#contentInner .table_options.head .btn-primary:hover,
#contentInner .table_options.head button.btn-primary:hover {
    border-color: var(--admin-table-blue-dark) !important;
    background: var(--admin-table-blue-dark) !important;
    color: #fff !important;
}

#contentInner .JSheadTableList .actionsBatch > .btn,
#contentInner .JSheadTableList .actionsBatch > .btn-primary,
#contentInner .JSheadTableList #JS_dropdownColumnsToggle .toggleColumns > .btn,
#contentInner .JSheadTableList #JS_dropdownColumnsToggle .toggleColumns > .btn-primary {
    border: 0 !important;
    border-left: 4px solid #9fa4ad !important;
    border-radius: 0 !important;
    background: #e8e8e8 !important;
    color: #111 !important;
    box-shadow: none !important;
}

#contentInner .JSheadTableList #JS_dropdownColumnsToggle .toggleColumns > .btn,
#contentInner .JSheadTableList #JS_dropdownColumnsToggle .toggleColumns > .btn-primary {
    border-left: 0 !important;
}

#contentInner .JSheadTableList .actionsBatch > .btn:hover,
#contentInner .JSheadTableList #JS_dropdownColumnsToggle .toggleColumns > .btn:hover {
    background: #dedede !important;
    color: #000 !important;
}

#contentInner .buttonsActionsList > a:first-child,
#contentInner .buttonsActionsList > a:first-child:hover {
    border-color: #3b9bb7 !important;
    background: #3b9bb7 !important;
    color: #fff !important;
}

#contentInner .buttonsActionsList > a:first-child:hover {
    border-color: #2f89a3 !important;
    background: #2f89a3 !important;
}

#contentInner .squareBtn,
#contentInner .pagination a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    min-width: 26px;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 4px 0 0 !important;
    border: 1px solid var(--admin-table-line) !important;
    border-radius: 8px !important;
    background: var(--admin-table-panel) !important;
    color: #52647d !important;
    line-height: 1 !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .04) !important;
}

#contentInner .squareBtn {
    float: none !important;
}

#contentInner .squareBtn > i.fa,
#contentInner .squareBtn i,
#contentInner .pagination a i {
    color: #52647d !important;
    font-size: 15px;
    margin: 0 !important;
}

#contentInner .squareBtn:hover,
#contentInner .pagination a:hover {
    border-color: rgba(35, 116, 238, .38) !important;
    background: var(--admin-table-blue-soft) !important;
    color: var(--admin-table-blue) !important;
}

#contentInner .pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#contentInner .pagination ul {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

#contentInner .pagination li {
    display: inline-flex;
}

#contentInner .pagination .dropdownPerPage {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 4px solid #8f9298;
}

#contentInner .pagination .dropdownPerPage select.JS_per_page {
    width: 58px;
    padding: 0 22px 0 8px !important;
    border: 1px solid var(--admin-table-line-strong) !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    color: #111 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

#contentInner .table_options.head select,
#contentInner .table_options.head input,
#contentInner .table_options.head .dropdown-toggle {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
}

#contentInner .pagination .active a,
#contentInner .pagination .active a:hover {
    border-color: var(--admin-table-blue) !important;
    background: var(--admin-table-blue) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(35, 116, 238, .2) !important;
}

#contentInner .pagination .totalsPages,
#contentInner .pagination li.totalPages {
    color: #222;
    font-size: 13px;
    font-weight: 750;
    line-height: 26px;
    white-space: nowrap;
}

#contentInner .pagination .totalsPages strong,
#contentInner .pagination li.totalPages strong {
    color: #222;
    font-weight: 850;
    margin: 0 3px;
}

#contentInner .wrapTable {
    overflow: hidden;
    background: var(--admin-table-bg);
    border: 1px solid var(--admin-table-line);
    border-radius: 8px;
    box-shadow: var(--admin-table-shadow);
}

#contentInner .wrapTableInner,
#contentInner .fixed-table-container-inner {
    background: var(--admin-table-panel);
}

#contentInner .wrapThead {
    border-bottom: 1px solid var(--admin-table-line);
    background: #f0f1f3;
}

#contentInner .wrapTable thead,
#contentInner .wrapTable .table2 thead th,
#contentInner .wrapTable .table2 thead td {
    height: 40px !important;
    background: #f0f1f3 !important;
    color: #6c7178;
    text-shadow: none !important;
}

#contentInner .wrapTable .table2 th {
    border-left: 0 !important;
    border-right: 1px solid #d1d4d8 !important;
    font-weight: 800;
}

#contentInner .wrapThead thead th {
    height: 40px !important;
}

#contentInner .wrapThead thead .th-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    height: 40px;
    margin: 0;
    padding: 0 10px !important;
    border-left: 0;
    color: #6c7178;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
}

#contentInner .wrapTable thead .th-inner2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#contentInner .wrapTable thead span {
    display: block;
    padding: 0;
    color: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
}

#contentInner .wrapTable .wrapTbody thead,
#contentInner .wrapTable .wrapTbody thead tr,
#contentInner .wrapTable .wrapTbody thead th {
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
}

#contentInner .wrapTable .wrapTbody thead .th-inner,
#contentInner .wrapTable .wrapTbody thead .th-inner2,
#contentInner .wrapTable .wrapTbody thead span,
#contentInner .wrapTable .wrapTbody thead input,
#contentInner .wrapTable .wrapTbody thead i {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

#contentInner .wrapTable .table2 tr td {
    border: 0 !important;
    border-bottom: 1px solid var(--admin-table-line) !important;
    background: var(--admin-table-panel);
    color: var(--admin-table-muted);
    font-size: 13px;
    font-weight: 650;
}

#contentInner .wrapTable .table2 tbody tr:nth-child(odd) td,
#contentInner .wrapTable .table2 tbody tr:nth-child(even) td,
#contentInner .table-striped > tbody > tr:nth-of-type(2n+1) td {
    background: var(--admin-table-panel) !important;
}

#contentInner .wrapTable .table2 tbody tr:hover td {
    background: #f7fbff !important;
}

#contentInner .wrapTable .table2 tbody tr:has(> td.JStdCheckbox input[type="checkbox"]:checked) td,
#contentInner .wrapTable .table2 tbody tr:has(> td.jsTdCheckbox input[type="checkbox"]:checked) td {
    background: var(--admin-table-blue-soft) !important;
    border-bottom-color: rgba(35, 116, 238, .18) !important;
    color: #344b68;
}

#contentInner .wrapTable .table2 tbody tr:has(> td.JStdCheckbox input[type="checkbox"]:checked) td:first-child,
#contentInner .wrapTable .table2 tbody tr:has(> td.jsTdCheckbox input[type="checkbox"]:checked) td:first-child {
    box-shadow: inset 3px 0 0 var(--admin-table-blue);
}

#contentInner .wrapTable .table2 tbody tr:has(> td.JStdCheckbox input[type="checkbox"]:checked):hover td,
#contentInner .wrapTable .table2 tbody tr:has(> td.jsTdCheckbox input[type="checkbox"]:checked):hover td {
    background: #eaf3ff !important;
}

#contentInner .wrapTable .table2 td .wW {
    min-height: 62px;
    padding: 12px 12px !important;
    line-height: 1.35;
}

#contentInner .wrapTable .table2 td .wWI {
    display: block;
    min-height: 38px;
    color: inherit;
    line-height: 1.35;
}

#contentInner .wrapTable .table2 td.text-center .wWI {
    display: flex;
    align-items: center;
    justify-content: center;
}

#contentInner .wrapTable .table2 td.text-right .wWI {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#contentInner .wrapTable .table2 td.cellSimple {
    padding: 12px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

#contentInner .wrapTable .table2 td.cellSimple .cellText {
    display: flex;
    align-items: center;
    min-height: 38px;
    overflow: hidden;
    color: inherit;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#contentInner .wrapTable .table2 td.cellSimple.text-center .cellText {
    justify-content: center;
    text-align: center;
}

#contentInner .wrapTable .table2 td.cellSimple.text-right .cellText {
    justify-content: flex-end;
    text-align: right;
}

#contentInner .wrapTable .table2 td strong,
#contentInner .wrapTable .table2 td b {
    color: var(--admin-table-text);
    font-weight: 850;
}

#contentInner .wrapTable .table2 td a {
    color: var(--admin-table-blue) !important;
    font-weight: 800;
}

#contentInner .wrapTable .table2 td a:hover {
    color: var(--admin-table-blue-dark) !important;
}

#contentInner .wrapTable .table2 td.td_type_imgmodal .wW,
#contentInner .wrapTable .table2 td.td_type_img .wW,
#contentInner .wrapTable .table2 td.td_type_html .wW {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#contentInner .wrapTable .table2 .td_type_imgmodal img,
#contentInner .wrapTable .table2 .td_type_img img,
#contentInner .wrapTable td img.imgbg {
    width: 54px !important;
    height: 54px !important;
    border: 1px solid var(--admin-table-line);
    border-radius: 5px;
    background-color: #f1f4f8;
    object-fit: contain;
    box-shadow: none;
}

#contentInner .wrapTable .table2 .td_type_imgmodal img:hover,
#contentInner .wrapTable .JSimageModal:hover {
    border-color: rgba(35, 116, 238, .45);
}

#contentInner .wrapTable a.btncircle > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 4px !important;
    padding: 0;
    border: 1px solid var(--admin-table-line);
    border-radius: 50%;
    background: #fff !important;
    color: #49627f !important;
    font-size: 14px !important;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

#contentInner .wrapTable a.btncircle i:hover {
    border-color: rgba(35, 116, 238, .45);
    color: var(--admin-table-blue) !important;
    box-shadow: 0 8px 18px rgba(35, 116, 238, .16);
}

#contentInner .wrapTable .table2 .td_type_buttons {
    width: 36px !important;
}

#contentInner .wrapTable .table2 .td_type_buttons .dropdown-toggle {
    /* width: 17px; */
    /* height: 34px; */
    /* margin: 0 auto 0; */
    /* border: 1px solid transparent; */
    /* border-radius: 8px !important; */
    /* background: transparent !important; */
    /* color: #52647d; */
    opacity: 1;
    /* top: 50%; */
    /* margin-top: -125%; */
    position: relative;
    width: 17px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #52647d;
}

#contentInner .wrapTable .table2 .td_type_buttons .dropdown-toggle:hover,
#contentInner .wrapTable .table2 .td_type_buttons .dropdown-toggle:focus {
    border-color: var(--admin-table-line);
    background: #f2f6fb !important;
}

#contentInner .wrapTable .table2 .td_type_buttons .dropdown-toggle > i {
    color: #52647d !important;
    font-size: 18px;
}

#contentInner .wrapTable .table2 .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--admin-table-line);
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .15);
}

#contentInner .wrapTable .table2 .dropdown-menu li {
    border-bottom: 0;
}

#contentInner .wrapTable .table2 .dropdown-menu a {
    border-radius: 6px;
    color: #27364d !important;
    font-size: 13px;
    font-weight: 750;
}

#contentInner .wrapTextColor,
#contentInner .wTC {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 800;
    opacity: 1;
}

#contentInner .wrapTable .table2 tr.filters,
#contentInner .wrapTable .table2 tr.filters.existFilter,
#contentInner .wrapTable .table2 tr.filters:hover {
    height: 41px !important;
    background: #f3faff !important;
}

#contentInner .wrapTable .table2 tr.filters:focus-within,
#contentInner .wrapTable .table2 tr.filters.existFilter:focus-within,
#contentInner .wrapTable .table2 tr.filters:focus-within:hover {
    background: #a8f79b !important;
}

#contentInner .wrapTable .table2 tr.filters td,
#contentInner .wrapTable .table2 tr.filters th {
    height: 41px !important;
    padding: 5px 12px !important;
    border-bottom: 1px solid var(--admin-table-line) !important;
    background: #f3faff !important;
    vertical-align: middle !important;
}

#contentInner .wrapTable .table2 tr.filters:focus-within td,
#contentInner .wrapTable .table2 tr.filters:focus-within th {
    background: #a8f79b !important;
}

#contentInner .wrapTable .table2 tr.filters .controls {
    height: 30px;
    margin: 0;
}

#contentInner .wrapTable .table2 tr.filters input,
#contentInner .wrapTable .table2 tr.filters select,
#contentInner .JSfilterComplexCell > input[type="text"] {
    height: 30px !important;
    min-height: 30px;
    max-height: 30px;
    margin: 0;
    padding: 0 10px !important;
    border: 1px solid var(--admin-table-line);
    border-radius: 0 !important;
    background: #fff;
    color: var(--admin-table-text);
    font-size: 13px;
    line-height: 30px !important;
    box-shadow: none;
    box-sizing: border-box;
}

#contentInner .wrapTable .table2 tr.filters input:focus,
#contentInner .wrapTable .table2 tr.filters select:focus,
#contentInner .JSfilterComplexCell > input[type="text"]:focus {
    border-color: var(--admin-table-blue) !important;
    outline: 0;
    background: #fff95a !important;
    box-shadow: inset 0 0 0 1px var(--admin-table-blue);
}

#contentInner .JSfilterComplexCell {
    height: 30px;
}

#contentInner .wrapTable .JS_wrap:hover {
    border-color: rgba(35, 116, 238, .22);
    background: var(--admin-table-blue-soft);
}

#contentInner .wrapTable .table2 td .wW .JS_text:focus {
    border-color: rgba(35, 116, 238, .55);
    box-shadow: 0 0 0 3px rgba(35, 116, 238, .1);
}

#contentInner .table_options.bottom {
    min-height: 36px;
    padding: 8px 12px;
    background: var(--admin-table-bg);
    border-top: 1px solid var(--admin-table-line);
}

#contentInner .tableHtmlBottom {
    color: var(--admin-table-muted);
    font-size: 13px;
    font-weight: 750;
}

#contentInner .JSmessageSelectAll {
    display: none;
    align-items: center;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 12px;
    width: calc(100% - 24px);
    min-height: 42px;
    margin: 8px 12px;
    padding: 6px 12px;
    border: 1px solid rgba(35, 116, 238, .24);
    border-radius: 8px;
    background: #f7fbff;
    box-sizing: border-box;
    color: #40516a;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

#contentInner .jsEdList:has(.jsThCheckboxes input[type="checkbox"]:checked) > .JSmessageSelectAll {
    display: grid;
}

#contentInner .JSmessageSelectAll .selectAllNoticeIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--admin-table-blue);
    color: #fff;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(35, 116, 238, .18);
}

#contentInner .JSmessageSelectAll .selectAllNoticeIcon i {
    color: #fff !important;
    font-size: 13px;
    line-height: 1;
}

#contentInner .JSmessageSelectAll .selectAllNoticeContent {
    display: block;
    min-width: 0;
}

#contentInner .JSmessageSelectAll .step1,
#contentInner .JSmessageSelectAll .step2 {
    display: none !important;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

#contentInner .JSmessageSelectAll .step1.show,
#contentInner .JSmessageSelectAll .step2.show {
    display: grid !important;
}

#contentInner .JSmessageSelectAll .step1 > span,
#contentInner .JSmessageSelectAll .step2 > span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
}

#contentInner .JSmessageSelectAll .step1 > span:first-child,
#contentInner .JSmessageSelectAll .step2 > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#contentInner .JSmessageSelectAll b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #e9f2ff;
    color: var(--admin-table-blue);
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
}

#contentInner .JSmessageSelectAll .JSselect {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(35, 116, 238, .22);
    border-radius: 7px;
    background: #fff;
    color: var(--admin-table-blue);
    cursor: pointer;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

#contentInner .JSmessageSelectAll .JSselect:hover {
    border-color: rgba(35, 116, 238, .46);
    background: var(--admin-table-blue);
    color: #fff;
    box-shadow: 0 8px 18px rgba(35, 116, 238, .16);
}

#contentInner .colRight {
    background: #fbfcfe;
    border-left: 1px solid var(--admin-table-line) !important;
}

#contentInner .colRight .totalize {
    margin: 10px 12px;
}

#contentInner .colRight .totalize .panel {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--admin-table-line);
    border-radius: 8px;
    background: var(--admin-table-panel);
    box-shadow: 0 7px 20px rgba(15, 23, 42, .04);
}

#contentInner .colRight .totalize .panel-body {
    min-height: 96px;
    padding: 18px 18px 16px 68px;
    background: #fff !important;
    color: var(--admin-table-text) !important;
    position: relative;
}

#contentInner .colRight .totalize .panel-body:before {
    content: "\f1fe";
    position: absolute;
    left: 18px;
    top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--admin-table-blue-soft);
    color: var(--admin-table-blue);
    font-family: FontAwesome;
    font-size: 17px;
}

#contentInner .colRight .totalize .text-sm {
    color: #53647c;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

#contentInner .colRight .totalize h1 {
    margin: 10px 0 0;
    color: var(--admin-table-text);
    font-size: 28px;
    font-weight: 850;
    line-height: 1;
}

#contentInner .colRight .totalize .exactTotal {
    margin-top: 6px !important;
    color: #7c8a9d;
    font-size: 13px;
    font-weight: 750;
}

@media screen and (max-width: 900px) {
    #contentInner .JSheadTableList .scrollerInner {
        align-items: flex-start;
        overflow-x: auto;
    }

    #contentInner .wrapTable {
        border-radius: 6px;
    }

    #contentInner .wrapTable .table2 td .wW {
        min-height: 54px;
        padding: 10px 9px !important;
    }
}