﻿.markeable, 
.markeablefnd{
    border-collapse: collapse;
}

.markeable tbody tr:hover,
.markeable tbody tr:nth-child(2n):hover {   
    /*border: solid 2px #2c8bdb;*/
    background: #c2e3ff!Important;
    /*font-weight: bold;*/
}

.markeablefnd tbody tr:hover,
.markeablefnd tbody tr:nth-child(2n):hover {
    /*border: solid 2px #2c8bdb;*/
    /*font-weight: bold;*/
    filter: invert(100%);
}

.markeablefnd tbody tr img :hover ,
.markeablefnd tbody tr img :nth-child(2n):hover {
    /*border: solid 2px #2c8bdb;*/
    /*font-weight: bold;*/
    filter: invert(0%);
}
tablarp tbody tr:nth-child(2n) {
    background: white;
}

.tablita * {
    box-sizing: border-box;
}

/*SCROLABLE TABLE*/
.scrolabla{
    overflow-x:hidden;
    overflow-y:scroll;

}
.size65{
    max-height:65vh;
}

/*CONTENEDOR DE LA TABLA*/
.tablita {
    overflow-x: scroll;
    overflow-y: scroll;
    max-width: 95%;
    max-height: 750px;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    margin: 0 auto;
    border-collapse: separate;
}

.tablita2 * {
    box-sizing: border-box;
}

/*CONTENEDOR DE LA TABLA*/
.tablita2 {
    overflow-x: scroll;
    overflow-y: scroll;
    max-width: 95%;
    max-height: 450px;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    margin: 0 auto;
    border-collapse: separate;
}

/*TABLA*/
.tablarp {
    border-spacing: 0;
    font-family: verdana,tahoma,helvetica;
    font-size: 10pt;
    /*
    font-family:Times New Roman;
    font-size:12pt;
    color:#333333;*/
    border-collapse: separate;
    

    
}

/*COLUMNAS ESTÁTICAS*/
.tablarp .estaticac1 {
    position: sticky;
    left: 0;
}

.tablarp .estaticac2 {
    position: sticky;
    left: 100px;
}

.tablarp .estaticac3 {
    position: sticky;
    left: 200px;
}

.tablarp .estaticac4 {
    position: sticky;
    left: 300px;
}

.tablarp .estaticac5 {
    position: sticky;
    left: 411px;
}

.tablarp .estaticac6 {
    position: sticky;
    left: 511px;
}

.tablarp .estaticac7 {
    position: sticky;
    left: 611px;
}

/*RENGLONES*/
.tablarp tbody tr .estaticac1,
.tablarp tbody tr .estaticac2,
.tablarp tbody tr .estaticac3,
.tablarp tbody tr .estaticac4,
.tablarp tbody tr .estaticac5,
.tablarp tbody tr .estaticac5s,
.tablarp tbody tr .estaticac5z,
.tablarp tbody tr .estaticac5y,
.tablarp tbody tr .estaticac6,
.tablarp tbody tr .estaticac7,
.tablarp tbody tr .estaticac8 {
    background: white;
}

/*CADA SEGUNDO RENGLON*/
.tablarp tbody tr:nth-child(2n) .estaticac1,
.tablarp tbody tr:nth-child(2n) .estaticac2,
.tablarp tbody tr:nth-child(2n) .estaticac3,
.tablarp tbody tr:nth-child(2n) .estaticac4,
.tablarp tbody tr:nth-child(2n) .estaticac5,
.tablarp tbody tr:nth-child(2n) .estaticac5s,
.tablarp tbody tr:nth-child(2n) .estaticac5y,
.tablarp tbody tr:nth-child(2n) .estaticac5z,
.tablarp tbody tr:nth-child(2n) .estaticac6,
.tablarp tbody tr:nth-child(2n) .estaticac7,
.tablarp tbody tr:nth-child(2n) .estaticac8 {
    background: #f2f2f2;
}

/*CABECERA DE LA TABLA*/
.tablarp caption {
    background: #5D7B9D;
    color: White;
    font-family: verdana,tahoma,helvetica;
    font-size: 20px;
    padding: 5px 0px;
    /*font-weight: bold;*/
}
.tablarp thead{
    position:sticky;
    top: -0px; /*Verificar que no se mueva o superponga a un elemento, estaba en -1*/
    z-index: 1;
}

.tablarp thead th {
    background: #5D7B9D;
    color: White;
    text-transform: uppercase;
}

.tablarp tfoot{
    position:sticky;
    top: -1px;
    z-index: 0;
    bottom: 0px;
}

.tablarp tfoot th {
    background: #5D7B9D;
    color: White;
    text-transform: uppercase;
}
/*Color on hover*/
.tablarp .msiover:hover{
    cursor: pointer;
    background:#051c46!Important;
}

.borderX thead th,
.borderX tfoot th {
    border:1px white solid;
}

.borderC tbody td {
    border:1px white solid;
}

/*Columas*/
.tablarp th,
.tablarp td {
    border-bottom: 1px solid #ccc;
    padding: 0.4rem;
    text-align: center;
}

/*Última columa
.tablarp th:last-child,
.tablarp td:last-child {
    /*border-right:0;
}*/

.tablarp tbody tr {
    background:#F7F6F3;
}

.tablarp tbody tr:nth-child(2n) {
    background: white;
}

/*PIE DE LA TABLA*/
.tablarp tfoot th {
    background: #5D7B9D;
    color: White;
}

/*TABLA*/
.tablarp2 {
    border-top: solid 1px #ccc;
    border-spacing: 0;
}

.tablarp2 thead{
    position:sticky;
    top:0px;
    z-index:1;
}
/*RENGLONES*/
.tablarp2 tbody tr .estaticac1,
.tablarp2 tbody tr .estaticac2,
.tablarp2 tbody tr .estaticac3,
.tablarp2 tbody tr .estaticac4,
.tablarp2 tbody tr .estaticac5,
.tablarp2 tbody tr .estaticac5s,
.tablarp2 tbody tr .estaticac6,
.tablarp2 tbody tr .estaticac7,
.tablarp2 tbody tr .estaticac8 {
    background: white;
}

/*CADA SEGUNDO RENGLON*/
.tablarp2 tbody tr:nth-child(2n) .estaticac1,
.tablarp2 tbody tr:nth-child(2n) .estaticac2,
.tablarp2 tbody tr:nth-child(2n) .estaticac3,
.tablarp2 tbody tr:nth-child(2n) .estaticac4,
.tablarp2 tbody tr:nth-child(2n) .estaticac5,
.tablarp2 tbody tr:nth-child(2n) .estaticac5s,
.tablarp2 tbody tr:nth-child(2n) .estaticac6,
.tablarp2 tbody tr:nth-child(2n) .estaticac7,
.tablarp2 tbody tr:nth-child(2n) .estaticac8 {
    background: #f2f2f2;
}

/*CABECERA DE LA TABLA*/
.tablarp2 thead th {
    background: #000084;
    color: White;
}

/*Columas*/
.tablarp2 th,
.tablarp2 td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

/*Última columa
.tablarp2 th:last-child,
.tablarp2 td:last-child {
}*/

.tablarp2 tbody tr {
    background: white;
}

.tablarp2 tbody tr:nth-child(2n) {
    background: #f2f2f2;
}

/*PIE DE LA TABLA*/
.tablarp2 tfoot th {
    background: #2a2ab1;
    color: White;
}

/*Microvariaciones*/
.hSBL th {
    border-right: 1px None;
}

.bSBL td {
    border-right: 1px None;
}

.nMinW th,
.nMinW td {
    min-width: initial;
}

/*VARIACIONES*/

/*TABLA MORADA SIN PADDING*/
.tablarpmorada thead th {
    background: #4A3C8C;
}

.tablarpmorada .msiover:hover{
    cursor: pointer;
    background: #cfc0ff!Important;
    color: black;
}

.tablarpmorada td {
    padding: 0.1rem !important;
}

.tablarpmorada tbody tr {
    background: #E7E7FF;
}

.tablarpmorada tbody tr:nth-child(2n) {
    background: #F7F7F7
}


/* TABLA AZUL*/
.azulclaro thead th,
.azulclaro caption,
.azulclaro tfoot th  {
    background: #507CD1;
}

.azulclaro td {
    padding: 0.1rem !important;
}

.azulclaro .msiover:hover{
    cursor: pointer;
    background: #1553cb!Important;
    color: black;
}

.azulclaro tbody tr {
    background: #EFF3FB;
}

.azulclaro tbody tr:nth-child(2n) {
    background: White;
}

/* TABLA AZUL*/
.azulOscuro thead th,
.azulOscuro caption,
.azulOscuro tfoot th   {
    background: #000084;
}

.azulOscuro td {
    padding: 0.1rem !important;
}

.azulOscuro  .msiover:hover{
    cursor: pointer;
    background: #82a0d9!Important;
    color: black;
}

.azulOscuro tbody tr {
    background: #EFF3FB;
}

.azulOscuro tbody tr:nth-child(2n) {
    background: White;
}

/* TABLA ROJA*/
.roja thead th,
.roja caption,
.roja tfoot th   {
    background: #990000;
}

.roja td {
    padding: 0.1rem !important;
}

.roja .msiover:hover{
    cursor: pointer;
    background: #540303!Important;
    color: #fdfdfd;
}
.roja tbody tr {
    background: #FFFBD6;
}

.roja tbody tr:nth-child(2n) {
    background: White;
}

.rojaspc th, .rojaspc td {
    border-right: none !Important;
    border-bottom: none !Important;
    padding: 0.3rem 0px !Important;
}


/*TABLA FLEXIBLE */
.tablaflx {
    border-top: solid 1px #000000;
    border-spacing: 0;
    border-left: solid 1px #000000;
}

/*RENGLON IMPAR*/
.tablaflx tbody tr,
.tablaflx tbody tr,
.tablaflx tbody tr,
.tablaflx tbody tr,
.tablaflx tbody tr,
.tablaflx tbody tr,
.tablaflx tbody tr,
.tablaflx tbody tr,
.tablaflx tbody tr {
    background: white;
}

/*RENGLON PAR*/
.tablaflx tbody tr:nth-child(2n),
.tablaflx tbody tr:nth-child(2n),
.tablaflx tbody tr:nth-child(2n),
.tablaflx tbody tr:nth-child(2n),
.tablaflx tbody tr:nth-child(2n),
.tablaflx tbody tr:nth-child(2n),
.tablaflx tbody tr:nth-child(2n),
.tablaflx tbody tr:nth-child(2n),
.tablaflx tbody tr:nth-child(2n) {
    background: #B7DEE8;
}

.tablaflx .estaticac1 {
    position: sticky;
    left: 1px;
}

.tablaflx .estaticac2 {
    position: sticky;
    left: 91px;
}

.tablaflx .estaticac3 {
    position: sticky;
    left: 441px;
}

/*RENGLONES*/
.tablaflx tbody tr .estaticac1,
.tablaflx tbody tr .estaticac2,
.tablaflx tbody tr .estaticac3 {
    background: white;
}

/*CADA SEGUNDO RENGLON*/
.tablaflx tbody tr:nth-child(2n) .estaticac1,
.tablaflx tbody tr:nth-child(2n) .estaticac2,
.tablaflx tbody tr:nth-child(2n) .estaticac3 {
    background: #B7DEE8;
}


/*Sin Bordes*/
.Noborder th,
.Noborder td {
    border-right: 0px solid #ccc !Important;
}

/*Especial para PEDI*/
.pedi th,
.pedi td {
    border-right: none !Important;
    border-bottom: none !Important;
    padding: 0.4rem 0px !Important;
}

.ChkD {
    min-width: 29px !Important;
    width: 29px !Important;
    max-height: 25px;
}

/*POP UP*/
.msipop {
    position: relative;
    width: fit-content;
}

.msipop:hover {
    background: rgba(246, 246, 246, 0.3);
}

.msipop:hover>.msitxt {
    opacity: 1;
    z-index: 2;
}

.msitxt {
    opacity: 0;
    width: 500px;
    min-height: 75px;
    max-height: 250px;
    height: auto;
    background-color: cornsilk;
    border: solid black;
    border-radius: 27px;
    z-index: -1;
    margin: auto;
    padding: 0px 15px;
    position: absolute;
    left: 300px;
    top: -34px;
}

.arrow {
    border: solid black;
    border-width: 0px 3px 3px 0;
    display: inline-block;
    padding: 10px;
    background: cornsilk;
    position: absolute;
    left: -14px;
    top: 24px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}


/*COLORES DE TITULO DE TABLA*/
/*D*/
.ccyellow,
.cyellow thead th {
    background: #F1C40F;
    color: #000000;
}

/*S*/
.ccorange,
.corange thead th {
    background: #E67E22;
    color: #000000;
}

/*M*/
.ccgreen,
.cgreen thead th {
    background: #229954;
    color: #000000;
}

/*B*/
.ccgreen2,
.cgreen2 thead th {
    background: #16A085;
    color: #000000;
}

/*T*/
.ccblue1,
.cblue1 thead th {
    background: #2980B9;
    color: #000000;
}

/*SM*/
.ccgray,
.cgray thead th {
    background: #7F8C8D;
    color: #000000;
}

/*A*/
.ccred,
.cred thead th {
    background: #A93226;
    color: #000000;
}

/*O*/
.ccpurple,
.cpurple thead th {
    background: #8E44AD;
    color: #000000;
}


.redRowSelect{
    background: pink!important;
    border: 5px red;
    border-collapse: collapse;
    color:Red;
}

.redRowSelect::after{
    content: "◀️";
    left: -13px;
    position: relative;
    width: 0px;
    display: inline-block;
    color: red;
    top: -1px;
    zoom: 2;
}

.redRowSelect::before{
    content: "▶️"!Important;
    left: -4px;
    position: relative;
    width: 0px;
    display: inline-block;
    color: red;
    top: -1px;
    zoom: 2;
}
/*
esta clase es para que se muestre correctamente el rowselect before 
junto con rowselect after, si no se usa se crea una caja en blanco
*/
.nrow::before{
    content: "";
}