﻿/*estilos para tablas*/
/*tabla pura*/
.seleccionado {
    background-color: #D5E2F3 !important;
}

.tabla {
    box-sizing: content-box;
    color: black;
    font-size: 9px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-collapse: collapse;
    background-color: inherit;
    border: none;
    margin: 0 auto !important; /* or margin: 0 auto 0 auto */
}

.theadBlock {
    display: block;
    padding: 0px;
    width: 100%;
}

.tabla thead, .tabla thead th {
    background-color: inherit;
}

.tabla thead {
    border-bottom: solid 1.5px lightgrey;
    text-align: left;
    text-transform: uppercase;
    color: var(--tpmexBlueLight);
    font-size: 8.5px;
}

    /*encabezado de tabla*/
    .tabla thead th {
        padding: 3px;
    }

.tabla tbody {
    border-color: rgb(215,182,137);
    border-style: dotted;
    border-width: 0px;
}

.tbodyBlock {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

.tabla tfoot td,.tabla tfoot td input {
    font-weight:bolder;
}

.tfootBlock {
    display: block;
    margin: 0px;
    padding: 0px;
}

.tabla tfoot {
    border-top: double;
}

/*filas impares*/
.tabla tbody tr:nth-child(even) {
    background-color: #f6f5f5;
}
/*filas pares*/
.tabla tbody tr:nth-child(odd) {
    background-color: white;
}
/*todas las celdas*/
.tabla td {
    border: none;
    padding: 3px;
    word-wrap: break-word;
    word-break: break-word;
    vertical-align: middle;
    font-weight: normal;
}

    .tabla td input[type="text"]:read-only {
        border: none;
        background-color: transparent;
        cursor: inherit;
        padding: 0px;
        margin: 0 auto;
        width: 98%;
        text-overflow: ellipsis;
        text-align: inherit;
        outline: none;
        box-shadow: none;
        overflow: hidden;
    }


.tabla th {
    word-wrap: break-word;
    word-break: break-word;
    vertical-align: middle;
}


.textWrap {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*hover de las filas*/

.tabla tbody tr:hover {
    background-color: var(--tpmexGrey2);
    cursor: pointer;
}

/*fin tabla pura*/
.thRed th {
    border-bottom: solid 2px #842636 !important;
}






.lblTrans {
    background-color: inherit !important;
    border: none;
    margin: 0px !important;
    padding-left: 3px;
    text-align: inherit;
    font-size: inherit;
    font-family: inherit;
    font-style: inherit;
    word-wrap: inherit;
    word-break: inherit;
    width: 95% !important;
}

    .lblTrans:focus, .lblTrans:active, .lblTrans:hover, .lblTrans:read-only {
        border: none;
    }

/*contenedores tabla*/
.tablaContenedorH250 {
    width: inherit;
    margin: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 250px;
}

.tablaContenedorH350 {
    padding-left: 50px;
    padding-right: 50px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 350px;
    margin-bottom: 5px;
}

.contenedorSoloTabla350 {
    overflow-y: auto;
    overflow-x: hidden;
    height: 350px;
}

.tablaContenedorH300 {
    padding-left: 50px;
    padding-right: 50px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 300px;
    margin-bottom: 5px;
}

.tablaContenedorH400 {
    padding-left: 50px;
    padding-right: 50px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 400px;
    margin-bottom: 5px;
}

.tablaContenedorH450 {
    padding-left: 50px;
    padding-right: 50px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 450px;
    margin-bottom: 5px;
}
/*tablas html*/



.tP5 {
    padding-left: 5px;
}

.tP15 {
    padding-left: 15px;
}

.tM5 {
    margin-left: 5px;
}

.tMr5 {
    margin-right: 5px !important;
}

.tPr15 {
    padding-right: 5px !important;
}

.tDot {
    border: 0.1px dotted;
    border-color: lightgray;
    border-bottom: none;
    border-top: none;
    margin: 0px;
    padding: 0px;
}

.tDot5 {
    border: 0.5px dotted !important;
    border-color: lightgray !important;
    border-bottom: none !important;
    border-top: none !important;
    margin: 0px !important;
    padding: 5px !important;
}

.tDetNomn {
    width: 100%;
}


.tDetNomn {
    margin: auto;
    margin-right: 0;
}

.tDetNom {
    margin: auto;
    margin-left: 0;
}

.tDetNom, .tDetNomn, .tablaGridViewPop, .tablaGridViewHome {
    color: black;
    background-color: #f8f8f8;
    border-collapse: collapse;
    border: none;
}

.tablaGridViewHome {
    color: black;
    background-color: transparent !important;
}

    .tDetNom thead, .tDetNomn thead, .tablaGridViewPop thead, .tablaGridViewHome thead {
        display: block;
        color: #338bbc !important;
        background-color: #EFEFEF;
        width: 100% !important;
    }

    .tDetNom th, .tDetNomn th, .tablaGridViewPop th, .tablaGridViewHome th {
        padding: 1px;
        color: #338bbc !important;
        background-color: #f8f8f8;
        font-size: 10px;
        height: 50px;
        border: none;
        border-bottom: solid 2px #842636;
    }


    .tablaGridViewHome th {
        color: #151e49 !important;
        font-weight: bold;
        background-color: #fbf9f5 !important;
        font-size: 11px;
        height: 25px !important;
        border-bottom: solid 2px #E7E7E7;
    }

        .tablaGridViewHome th a li {
            color: #151e49 !important;
        }

.tablaGridViewPop th {
    border-bottom: solid 2px lightgray;
    color: #161F49 !important;
    height: 25px !important;
}

    .tablaGridViewPop th a li {
        color: #161F49 !important;
    }

.tDetNom th, .tDetNomn th {
    background-color: #EFEFEF !important;
}

    .tDetNom th a li, .tDetNomn th a li {
        color: #338bbc !important;
        width: 100%;
    }


.tH20, .tH20 a li, .tH20 p {
    width: 20px !important;
}

.tH80, .tH80 a li, .tH80 p {
    width: 80px !important;
}

.tH60, .tH60 a li, .tH60 p {
    width: 60px !important;
}

.tH56, .tH56 a li, .tH56 p {
    width: 56px !important;
}

.tH58, .tH58 a li, .tH58 p {
    width: 58px !important;
}

.tH76, .tH76 a li, .tH76 p {
    width: 76px !important;
}


.tH120, .tH120 a li, .tH120 p {
    width: 120px !important;
}


.tH130, .tH130 a li, .tH130 p {
    width: 130px !important;
}


.tH160, .tH160 a li, .tH160 p {
    width: 160px !important;
}


.tDetNom tbody, .tDetNomn tbody, .tablaGridViewPop tbody, .tablaGridViewHome tbody {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
}

@media screen and (max-width: 1366px) {
    .tDetNom tbody, .tDetNomn tbody {
        height: 60vh;
    }

    .tablaGridViewHome tbody {
        height: 319px;
    }
}

@media screen and (min-width: 1367px) {
    .tDetNom tbody, .tDetNomn tbody {
        height: 70vh;
    }

    .tablaGridViewHome tbody {
        height: 65vh;
    }
}

.tablaGridViewPop70 tbody {
    height: 70vh;
}

.tablaGridViewPop60 tbody {
    height: 60vh;
}

.tablaGridViewPop50 tbody {
    height: 50vh;
}

.tablaGridViewPop40 tbody {
    height: 40vh;
}

.tablaGridViewPop31vh tbody {
    height: 31vh;
}

.tablaGridViewPop30vh tbody {
    height: 30vh !important;
}

.tablaGridViewPop28vh tbody {
    height: 30vh !important;
}

.table32vh {
    height: 32vh;
}

.tDetNomn tbody {
    overflow: hidden;
}


.tBody300 tbody {
    height: 300px;
}


.tBody280 tbody {
    height: 280px;
}


.tBody260 tbody {
    height: 260px;
}



.tDetNom td, .tDetNomn td, .tablaGridViewPop td, .tablaGridViewHome td {
    font-size: 10px;
    padding: 1px;
    font-weight: normal;
    border-bottom: none;
    border-top: none;
    height: 30px !important;
    border: none;
    vertical-align: middle !important;
    /*border:1px dotted lightgray;*/
}


.tablaGridViewHome td {
    height: 25px !important;
}

/*filas impares*/
.tDetNom tr:nth-child(odd), .tDetNomn tr:nth-child(odd), .tablaGridViewPop tr:nth-child(even), .tablaGridViewHome tr:nth-child(even) {
    background-color: white;
}
/*filas pares*/
.tDetNom tr:nth-child(even), tDetNomn tr:nth-child(even), .tablaGridViewPop tr:nth-child(odd), .tablaGridViewHome tr:nth-child(odd) {
    background-color: #f6f5f5;
}

.deduccion, .infonavit, .percepcion, .neto, .imss, .neutro, .neto {
    background-color: transparent;
    width: 76px !important;
    height: 21px;
    border: none;
    font-size: x-small;
    text-align: right;
    border-radius: 4px;
    margin: 1px;
}

.deduccion, .imss, .infonavit {
    color: red;
}

.infonavit {
    border: solid 2px red !important;
}

.percepcion {
    color: green;
}

.neto, .dias {
    color: blue;
}

.neutro {
    color: black;
}

.neto {
    font-weight: bold;
}

.empleadosRHC {
    background-color: transparent;
    width: 55px;
    border: none;
    height: 21px;
    font-size: x-small;
    text-align: right;
}

.dias {
    background-color: transparent;
    width: 56px !important;
    height: 21px;
    border: none;
    font-size: x-small;
    text-align: right;
    border-radius: 4px;
    margin: 1px;
}


/*mvc*/


.tablaPop, .tablaHome {
    color: black;
    border-collapse: collapse;
    border: none;
    margin: 0 auto !important; /* or margin: 0 auto 0 auto */
}

    .tablaPop thead, .tablaHome thead {
        display: block;
        padding: 0px;
        width: 100% !important;
        border-bottom: solid 1.5px rgb(215,182,137);
        color: #126796 !important;
        margin: 0px;
        font-weight: bold;
    }

    .tablaPop th, .tablaHome th {
        border: none;
        height: 25px !important;
        background-color: #f8f8f8;
        font-size: 11px;
        text-transform: uppercase;
        padding: 3px !important;
    }

    .tablaHome th, .tablaHome thead {
        background-color: #fbf9f5;
    }

        .tablaHome th a li, .tablaPop th a li {
            color: #151e49 !important;
        }

    .tablaPop tbody, .tablaHome tbody {
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        /*background-color: #fbf9f5;*/
        border-color: rgb(215,182,137);
        border-style: dotted;
        border-width: 0px;
    }

    .tablaPop tfoot {
        display: block;
        margin: 0px;
        padding: 0px;
    }

        .tablaPop tfoot td {
            /*background-color:white;*/
            color: #161F49;
        }


.cHome {
    overflow-x: hidden;
    overflow-y: auto;
}

@media screen and (max-width: 1366px) {
    .tablaHome tbody {
        max-height: 52vh;
    }

    .cHome {
        max-height: 420px;
    }
}

@media screen and (min-width: 1367px) {
    .tablaHome tbody {
        max-height: 68vh;
    }

    .cHome {
        max-height: 720px;
    }
}

.tablaPop70 tbody {
    height: 70vh;
}

.tablaPop60 tbody {
    height: 60vh;
}

.tablaPop50 tbody {
    height: 50vh;
}

.tablaPop40 tbody {
    height: 40vh;
}

.tablaPop20 tbody {
    height: 20vh;
}

.tablaPop td, .tablaHome td {
    font-size: 10px;
    padding: 3px !important;
    font-weight: normal;
    border-bottom: none;
    border-top: none;
    height: 30px !important;
    border: none;
    vertical-align: middle !important;
    /*border:1px dotted lightgray;*/
}

.tableRound {
    border-radius: 5px !important;
    border-collapse: separate;
}

    .tableRound thead {
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }

/*filas impares*/
.tablaPop tr:nth-child(even), .tablaHome tr:nth-child(even) {
    background-color: white;
}
/*filas pares*/

.tablaPop tr:nth-child(odd), .tablaHome tr:nth-child(odd) {
    background-color: #f6f5f5;
}

.tablaPag {
    box-sizing: content-box;
    color: black;
    font-size: 9px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-collapse: collapse;
    background-color: inherit;
    border: none;
    margin: 0 auto !important;
}

.btnPag, .seleccPag {
    border-color: var(--tpmexBlue) !important;
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    border-bottom: 1.1px solid;
    width: 20px;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 0px !important;
    border-width: 2px !important;
    text-align: center;
    padding: 0px;
    margin-top: 2px;
    margin-bottom: 0px;
    margin-left: 2px;
    margin-right: 2px;
}

.btnPag {
    background-color: transparent;
    color: var(--tpmexBlue);
}

    .btnPag:hover {
        color: white;
        background-color: var(--tpmexBlue);
    }

.seleccPag {
    color: white;
    background-color: var(--tpmexBlue);
}

    .seleccPag:hover {
        color: var(--tpmexBlue);
        background-color: transparent;
    }

.Owx-auto {
    overflow-x: auto;
}
