* {
    margin: 0px;
    padding: 0px;
    outline: none;
}

@font-face{
    font-family: "amatic";
    src: url('fonts/AmaticSCRegular.woff2') format('woff2'),
        url('fonts/AmaticSCRegular.woff') format('woff'),
        url("fonts/AmaticSCRegular.ttf");
    font-weight:normal; 
    font-style:normal;
}

@font-face {
    font-family: "amatic";
    src: url('fonts/AmaticSCBold.woff2') format('woff2'),
        url('fonts/AmaticSCBold.woff') format('woff'),
        url("fonts/AmaticSCBold.ttf");
    font-weight:bold; 
}

body {
    font-size: 14px;
    font-family: sans-serif;
    background-color: #fbfbfb;
    background-image: url(img/fondo2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    /*background-attachment: fixed;*/
    text-align: center;
}


    /**** BARRA SCROLL **********/
    body::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: transparent;
    }

    body::-webkit-scrollbar
    {
        width: 9px;
        height: 9px;
        background-color: rgb(251, 251, 251);
        margin-right: 10px;
    }

    body::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #c2ecff;
    }

img {
    width: 100%;
}

p {
    text-align: center;
    display: inline-block;
    margin: 10px;
    font-size: 13px;
    line-height: 18px;
    color: #424242;
}

/*----------------------------*/
a {
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    margin: 0px;
    font-size: 13px;
    line-height: 16px;
    color: #FF9800;
}

a:hover {
    color: #fdb246;
}

.btn {
    background: #d27a18;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    padding: 8px 8px;
    margin: 8px;
    outline: none;
    cursor: pointer;
    min-width: 100px;
    margin-right: 0px;
    text-align: center;
}

.btn:hover {
    background: #d68326;
    color: white; 
}

.btn i {
    margin: 2px 7px;
    margin-left: 0px;
}

.btn2 {
    background: #888888;
}

.btn2:hover {
    background: #9a9a9a;
}

.btn3 {
    margin: 0px;
    width: 20px;
    min-width: auto;
    padding: 0px;
    border-radius: 5px;
    background: none;
    color: #0c7caf;
    text-align: center;
}

.btn3:hover {
    background: none;
    color: #d68326;
}

.btn4 {
    background: #F44336;
    padding: 6px;
    margin-left: 0px;
    min-width: 111px;
    border-radius: 6px;
}

.btn4:hover {
    background: #f55e53;
}

.btn5 {
    background: #009688;
    padding: 6px;
    margin-left: 0px;
    min-width: 111px;
    border-radius: 6px;
}

.btn5:hover {
    background: #04ad9d;
}

.btn3i{
    margin: 0px;
}

.btnCSV {
    background: #50bb50;
}

.btnPDF {
    background: #f77c7c;
}

.btnX {
    position: absolute;
    right: 4px;
    top: 4px;
    background: #5a5a5a;
    border: 3px solid #e8e8e8;
    color: white;
    font-weight: 600;
    /*font-family: cursive;*/
    padding: 4px 7px;
    border-radius: 50px;
    cursor: pointer;
}

div#verFotoUsuario  div.divFotoUsuario{
    background: #f0f0f0;
    width: 40%;
    min-width: 320px;
    max-width: 450px;
    height: auto;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    top: 20%;
    border-radius: 10px;
    border: 5px solid #f0f0f0;
}

div#verFotoUsuario  div.divFotoUsuario p{
    font-weight: bold;
}

div#verDocumentos {
    position: fixed;
    background: rgb(0 0 0 / 68%);
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

div#verDocumentos div.documentos {
    position: relative;
    top: 20%;
    padding: 20px;
    background: #f5f5f5;
    max-width: 220px;
    left: 0px;
    right: 0px;
    margin: auto;
    border-radius: 10px;
    text-align: left;
}

div#verDocumentos h4 {
    display: inline-block;
    margin-left: 0px;
    padding-left: 0px;
}

div#verDocumentos div#listaDocumentos {
    text-align: left;
}

div#verDocumentos div#listaDocumentos h5 {
    text-align: left;
    display: inline-block;
    color: black;
    margin-top: 15px;
}

div#verDocumentos div#listaDocumentos h6 {
    text-align: left;
    display: inline-block;
    width: 150px;
}

div#verDocumentos div#listaDocumentos div {
    text-align: left;
    margin-bottom: 5px;
}

/*********************************/

div#verPagos {
    position: fixed;
    background: rgb(0 0 0 / 68%);
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

div#verPagos div.pagos {
    position: relative;
    top: 20%;
    padding: 20px;
    background: #f5f5f5;
    max-width: 250px;
    left: 0px;
    right: 0px;
    margin: auto;
    border-radius: 10px;
    text-align: left;
}

div#verPagos h4 {
    display: inline-block;
    margin-left: 0px;
    padding-left: 0px;
}

div#verPagos div#listaPagos {
    text-align: left;
}

div#verPagos div#listaPagos div {
    text-align: left;
}

div#verPagos div#listaPagos section.filaAnio {
    text-align: left;
}

div#verPagos div#listaPagos section.filaAnio h5 {
    display: inline-block;
    color: #0f2839;
    margin: 15px 0px 4px 0px;
    font-size: 20px;
}

div#verPagos div#listaPagos section.filaAnio section.filaEvento {
    display: inline-block;
    margin-bottom: 5px;
    border-bottom: 1px dashed #949494;
}

div#verPagos div#listaPagos section.filaAnio section.filaEvento p.name {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0px;
}

div#verPagos div#listaPagos section.filaAnio section.filaEvento p {
    margin-bottom: 5px;
    margin-top: 1px;
    font-size: 12px;
    min-width: 53px;
    text-align: left;
}

div#verPagos div#listaPagos section.filaAnio section.filaEvento p.costo {
    color: #F44336;
}

div#verPagos div#listaPagos section.filaAnio section.filaEvento p.pago {
    color: green;
}

div#verPagos div#listaPagos section.filaAnio section.filaEvento p.falta {
    color: #2196F3;
}

div#verPagos div#listaPagos section.filaAnio section.filaEvento span{
    font-size: 10px;
    display: block;
    text-align: center;
}

/*-----Bloque de Botones----------*/

.botones {
    width: 100%;
    margin: 15px 0px;
    text-align: right;
}

/*-----INPUTS-----------------------*/

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="file"],
select {
    padding: 8px;
    border-radius: 5px;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    background: white;
    margin-bottom: 15px;
    border: 0.5px solid #c7c7c7;
    max-width: 250px;
    max-height: 33px;
    font-size: 12px;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin: 0px 0px 0px 10px;
    cursor: pointer;
}

:disabled {
    background: #ececec !important;
    cursor: not-allowed;
}

/******TITULOS ******************************************************/
@media(min-width: 0px){

    h1,h2,h3,h4,h5,h6 {
        color: #0386c3;
        font-family: 'amatic';
        font-weight: bold;
        letter-spacing: 0px;
        margin: auto;
        margin-bottom: 8px;
        display: block;
        width: fit-content;
        padding: 0px 10px;
        /*text-shadow: -1px 1px 2px #cacaca;*/
    }

    h1 {
        color: #0386c3;
        font-size: 35px;
        line-height: 36px;
        padding-bottom: 15px;
        border-bottom: 1px dashed;
    }

    h1 i.fa {
        color: #d07918;
        padding: 6px;
        font-size: 28px;
        display: inline-block;
        vertical-align: middle;
        margin: 1px 8px 1px 5px;
    }

    h2 {
        color: #d27a18;
        font-size: 30px;
        line-height: 33px;
    }

    h2 i.fa {
        padding: 6px;
        font-size: 23px;
        display: inline-block;
        vertical-align: middle;
        margin: 0px 8px 0px 0px;
    }

    h3 {
        color: #585858;
        font-size: 25px;
        line-height: 28px;
    }

    h4 {
        color: #0386c3;
        font-size: 20px;
        line-height: 22px;
    }

    h4 i.fa {
        color: #d07918;
        padding: 6px;
        font-size: 20px;
        display: inline-block;
        vertical-align: middle;
        margin: 1px 8px 1px 5px;
    }

    h4 p {
        color: #d07918;
        padding: 6px;
        font-size: 20px;
        display: inline-block;
        vertical-align: middle;
        margin: 1px 8px 1px 5px;
    }

    h5 {
        color: #949494;
        font-size: 18px;
        line-height: 20px;
    }

    h6{
        font-size: 15px;
        line-height: 14px;
    }
}

/****** CUERPO PRINCIPAL ****************/
main {
    padding: 15px;
    padding-top: 80px;
    max-width: 1200px;
    display: block;
    text-align: center;
    margin: auto;
}

/****** PIE DE PAGINA ******************/

footer {
    width: auto;
    padding: 15px;
    padding-top: 30px;
    display: block;
    text-align: center;
}

    footer p {
        max-width: 500px;
    }

    footer p span {
        color: #5f5f5f;
        display: inline-block;
    }

/***** CABECERA *******************/

header {
    width: 100%;
    position: absolute;
}
    
    /*------DATOS DEL USUARIO-----*/
    header section.usuario {
        position: fixed;
        right: 15px;
        top: 15px;
    }

    header section.usuario div.datos {
        display: inline-block;
        vertical-align: middle;
        background: #0c7caf;
        border-radius: 25px 0px 0px 25px;
        padding-right: 20px;
        box-shadow: 4px 4px 20px -8px black;
    }

    header section.usuario div.datos i {
        color: #FFFFFF;
        display: inline-block;
        vertical-align: middle;
        font-size: 30px;
        padding: 10px;
        padding-right: 0px;
    }

    header section.usuario div.datos img.fotoUsuario {
        width: 29px;
        height: 29px;
        vertical-align: middle;
        padding: 0px;
        border-radius: 1000px;
        border: 3px solid #f7f7f7;
        margin: 10px 0px 10px 10px;
    }

    header section.usuario div.datos p.nombre {
        display: inline-block;
        vertical-align: middle;
        color: #FFFFFF;
        text-align: left;
    }

    header section.usuario div.datos span {
        color: #FFC107;
    }

    /*----BOTON MENU ---------------*/
    header section.usuario a.btnMenu {
        display: inline-block;
        vertical-align: middle;
        background: #3a3a3a;
        padding: 15px 13px 15px 13px;
        border-radius: 100px;
        border: 4px solid #FFFFFF;
        box-shadow: 4px 4px 20px -8px black;
        margin-left: -25px;
    }

    header section.usuario  a.btnMenu img {
        width: 25px;
    }

    /*-----MENU PRINCIPAL--------------------*/
    header nav {
        width: 90px;
        height: auto;
        left: -93px;
        position: fixed;
        margin: 0;
        top: 18px;
        overflow: auto;
        overflow-x: hidden;
        background: #039ee5;
        z-index: 1000;
        box-shadow: 1px 1px 70px -30px black;
        /*box-shadow: 0px 0px 0px 0px black;*/
        border-radius: 0px 20px 20px 0px;
        border: 3px solid #FFFFFF;
        border-left: 0px;
    }

        /**** BARRA SCROLL **********/
        header nav::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 10px;
            background-color: transparent;
        }

        header nav::-webkit-scrollbar
        {
            width: 9px;
            height: 9px;
            background-color: rgb(251, 251, 251);
            margin-right: 10px;
        }

        header nav::-webkit-scrollbar-thumb
        {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #c2ecff;
        }

    header nav li {
        width: 100%;
        /*border-bottom: 1px solid #02adfb;*/
    }

    header nav li a {
        width: auto;
        color: #ffffff;
        display: block;
        padding: 9px;
        text-align: center;
        font-size: 10px;
    }

    header nav li a:hover {
        color: #FFC107;
        background: #0c7caf;
    }

    header nav li a i {
        display: block !important;
        margin-bottom: 5px;
        font-size: 18px !important;
    }

/***** MENSAJE ALERTA *************/

section#mensajeAlert {
    background: #000000;
    position: fixed;
    width: 100%;
    z-index: 100000;
    text-align: center;
    padding: 15px 0px;
}

    section#mensajeAlert p {
        color: white;
        max-width: 80%;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
    }

    section#mensajeAlert input {
        width: auto;
        max-width: initial;
        display: inline-block;
        padding: 8px 12px;
        min-width: auto;
    }

/***** PAGINA DE INICIO **********************/

section.inicio {
    text-align: center;
    max-width: 500px;
    display: inline-block;
}   
    
    section.inicio div.logo {
        display: block;
        margin-bottom: 40px;
    }

    section.inicio div.logo img.logo {
        display: inline-block;
        vertical-align: middle;
        width: 80%;
        max-width: 120px;
        margin: auto;
    }

    section.inicio div.logo div.nombre {
        display: inline-block;
        vertical-align: middle;
        margin: 25px 10px 11px 10px;
        width: 80%;
        max-width: 250px;
        text-align: center;
    }

    section.inicio div.logo div.nombre p {
        font-family: "amatic";
        font-weight: bold;
        text-shadow: 1px 1px 1px black;
        text-align: center;
        margin: 7px;
    }

    section.inicio div.logo div.nombre p.text1 {
        color: #000000;
        font-size: 30px;
        line-height: 32px;
    }

    section.inicio div.logo div.nombre p.text2 {
        color: #ffffff;
        font-size: 35px;
    }

    section.inicio div.logo div.nombre p.text3 {
        color: #ffb446;
        font-size: 30px;
        line-height: 32px;
    }

    @media(min-width: 516px){
        section.inicio div.logo div.nombre {
            text-align: left;
        }

        section.inicio div.logo div.nombre p {
            text-align: left;
        }
    }

    /*--------------------*/

    section.inicio div.datos {
        display: block;
        text-align: center;
    }

    section.inicio div.datos div.botones {
        text-align: center; 
        display: block;
    }

    section.inicio div.datos div.avance {
        display: block;
        max-width: 250px;
        margin: auto;
    }

    section.inicio div.datos div.login {
        display: block;
        max-width: 250px;
        margin: auto;
    }

    /*--------------------*/

    section.inicio div.datos div.usuario p.bienvenido {
        display: inline-block;
        width: 95%;
        font-size: 18px;
        line-height: 21px;
        margin: 0px;
    }

    section.inicio div.datos div.usuario p.bienvenido span {
        display: inline-block;
        margin-left: 5px;
        color: #d27a18;
    }

    section.inicio div.datos div.usuario p.bienvenido span.nombre {
        color: #0c7aac;
        margin-left: 0px;
    }


/**********************************/

div.bloque {
    display: inline-block;
    width: 80%;
    max-width: 500px;
    border: 1px solid #e4dede;
    border-radius: 8px;
    margin: 10px;
    padding: 15px;
    vertical-align: top;
    background: white;
}

div.bloque p {
    width: 90%;  
    margin: 6px 0px;
}

/****** AUTO COMPLETAR ****************/

.ui-helper-hidden-accessible {
    display: none;
}

ul.ui-autocomplete {
    z-index: 100;
    border-radius: 0px 0px 5px 5px;
    overflow: hidden;
    max-width: 250px;
    margin-left: 3px;
    border: 0.5px solid #c7c7c7;
    border-top: 0px;
    max-height: 180px;
}

ul.ui-autocomplete li.ui-menu-item {
    font-size: 13px;
    padding: 8px 10px;
    border-bottom: 0.5px dashed #e2e2e2;
}

ul.ui-autocomplete li.ui-menu-item div.ui-menu-item-wrapper {
    background: white;
    color: #8e8e8e;
    text-align: left;
    border: 1px solid white;
    margin: 0px;
    font-weight: 100;
}

/***** AVANCE ****************************/

section.avance {
    text-align: center;
    padding: 20px 0px;
    display: inline-block;
}

    /*--------------*/

    section.avance div.porcentaje {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        margin: 10px;
        max-width: 200px;
    }

    section.avance div.porcentaje div {
        display: inline-block !important;
        margin: 10px 0px;
    }

    section.avance div.porcentaje p {
        color: #929292;
    }

    /*--------------*/

    section.avance div.asistencia div.leyenda p {
        display: inline-block;
        width: auto;
        max-width: 158px;
        margin: 5px 8px;
        font-size: 12px;
        color: #0386c3;
        text-align: center;
    }

    section.avance div.asistencia span {
        margin-right: 10px;
    }

    section.avance div.asistencia div.historial {
        text-align: left;
    }

    section.avance div.asistencia div.historial div.mes {
        display: block;
        font-size: 14px;
        font-weight: bold;
        padding: 10px;
        text-align: left;
        border-bottom: 0.5px dashed #d0d0d0;
        margin: 10px 0px;
    }

    section.avance div.asistencia div.historial div.fecha {
        display: inline-block;
        vertical-align: middle;
        border: 0.5px solid #d6d6d6;
        margin: 7px -1px 7px 15px;
    }

    section.avance div.asistencia div.historial div.dia {
        display: inline-block;
        vertical-align: middle;
        padding: 4px 5px 6px 5px;
        line-height: 11px;
        font-size: 10px;
    }

    section.avance div.asistencia div.historial div.asis {
        display: inline-block;
        font-size: 15px;
        font-weight: bold;
        vertical-align: middle;
        padding: 3px 6px 7px 6px;
        line-height: 11px;
    }

    section.avance div.asistencia div.historial div.asis span {
        margin-right: 0px;
    }

    /*--------------*/

    section.avance div.pago {
        display: inline-block;
        vertical-align: top;
        max-width: 180px;
        margin: 10px;
        border: 1px dashed #e6e6e6;
        border-radius: 10px;
    }

    section.avance div.evento {
        display: inline-block;
        margin: 8px 0px;
    }

    section.avance div.evento h4{
        margin-bottom: 0px;
    }

    section.avance div.pago p.costo {
        color: #8BC34A;
        margin: 0px;
    }

    section.avance div.pago p.pago {
        font-size: 20px;
        margin: 10px;
        color: #5a5a5a;
    }

/**** PRE INSCRIPCION ***********************/
div.descripcionPreInscripcion {
    padding-bottom: 15px;
    border-bottom: 1px dashed;
}

div.descripcionPreInscripcion p {
    display: inline-block;
    width: 100%;
    margin: 1px 0px;
}

/**** INSCRIPCION ***********************/

section.inscripcion {
    text-align: center;
    max-width: 500px;
    display: inline-block;
}

    section.inscripcion form#formInscripcion {
        width: 250px;
        display: block;
        margin: auto;
        margin-top: 20px;
    }

    section.inscripcion form#formInscripcion div.dni input {
        max-width: 200px;
    }

    section.inscripcion form#formInscripcion div.dni button {
        width: 38px;
        min-width: auto;
        display: inline-block;
        vertical-align: top;
        margin: 0px;
        height: 33px;
        margin-left: 8px;
    }

/***** ACOGIDA ***************************/

section.acogida {
    text-align: center;
    max-width: 500px;
    display: inline-block;
}

    section.acogida form#formAcogida {
        width: 250px;
        display: block;
        margin: auto;
        margin-top: 20px;
    }

    section.acogida form#formAcogida div.checks {
        display: inline-block;
        width: 100%;
        text-align: right;
    }

    section.acogida form#formAcogida div.checks label {
        width: auto;
        display: inline-block;
        vertical-align: middle;
        margin: 10px 0px 0px 10px;
        color: #868686;
        font-size: 13px;
    }

    /*---------*/

    section.acogida table#tablaAcogida {
        display: inline-block;
        border: 1px solid #d2d2d2;
        width: 100%;
        text-align: center;
    }

    section.acogida table#tablaAcogida tbody {
        display: inline-block;
    }

    section.acogida table#tablaAcogida th {
        padding: 6px;
        /*border-bottom: 1px solid #d2d2d2;*/
        font-size: 11px;
        text-align: center;
    }

    section.acogida table#tablaAcogida td {
        padding: 6px;
        /*border-bottom: 1px solid #d2d2d2;*/
        font-size: 11px;
        text-align: center;
    }


/***** PUNTOS ***************************/

section.acogida div.puntos {
    width: 100%;
    display: inline-block;
    text-align: right;
    margin: 10px 0px;
}
    
    section.acogida div.puntos p {
        display: inline-block;
        vertical-align: middle;
        margin: 0px;
        margin-right: 7px;
        text-align: right;
        width: auto;
        color: #37a4fb;
    }

    section.acogida div.puntos input[type="number"] {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        margin: 0px;
        text-align: right;
    }

/****** SEGUIMIENTO **********************/

section.seguimiento {
    text-align: center;
    padding-top: 5px;
}

    section.seguimiento section.opciones {
        text-align: left;
        padding: 8px 0px 0px 0px;
        margin: 0px 0px 0px 6px;
        max-width: 98%;
    }

    section.seguimiento section.opciones section.opcionesMenu input[type="text"] {
        margin: 0px;
        max-width: 150px;
    }

    section.seguimiento section.opciones section.opcionesMenu a.opcionesDown {
        margin: 0px;
        min-width: auto;
        display: inline-block;
        width: 80px;
        color: #5d5d5d;
        border: 1px solid #c7c7c7;
        background: #ffffff;
        border-radius: 0px 5px 5px 0px;
        height: 14px;
        vertical-align: middle;
        margin-left: -8px;
        font-size: 12px;
    }

    section.seguimiento section.opciones section.opcionesMenu a.opcionesDown:hover {
        background: #ffffff;
    }

    section.seguimiento section.opciones section#checksBloque {
        display: inline-block;
        vertical-align: top;
        text-align: left;
        visibility: hidden;
        height: 0px;
    }

    section.seguimiento section.opciones section#checksBloque div.checks {
        display: inline-block;
        width: 98px;
        vertical-align: top;
        margin: 3px 0px 3px 1px;
        text-align: left;
        border: 1px solid gainsboro;
        padding: 5px;
        border-radius: 5px;
    }

    section.seguimiento section.opciones section#checksBloque div.checks label {
        display: inline-block;
        vertical-align: middle;
        color: #868686;
        font-size: 11px;
        text-align: left;
        width: 70px;
    }

    section.seguimiento section.opciones section#checksBloque div.checks input[type="checkbox"] {
        margin-left: 5px;
    }

/******* TABLAS ****************************/

section.tabla {
    overflow: scroll;
    display: inline-block;
    width: 98%;
    margin: 15px 0px;
    padding: 0px 6px 6px 0px;
    max-height: 620px;
    border: 0.5px solid #d4d4d4;
}
    section.tabla::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: transparent;
    }

    section.tabla::-webkit-scrollbar
    {
        width: 9px;
        height: 9px;
        background-color: rgb(251, 251, 251);
        margin-right: 10px;
    }

    section.tabla::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #c2ecff;
    }

    /*-----------*/

    section.tabla table.tablesorter {
        font-size: 11px;
        width: 100%;
        text-align: center;
    }

    section.tabla table.tablesorter thead tr th,
    section.tabla table.tablesorter tfoot tr th {
        cursor: pointer;
        background: #0c7caf;
        color: #f1f1f1;
        text-align: center;
        font-weight: 100;
        padding: 6px;
        padding-right: 19px;
    }

    section.tabla table.tablesorter tr:hover td {
        background-color: #e5f4ff !important;
    }

    section.tabla table.tablesorter thead tr th.header {
        background-image: url("img/bg.png");
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: center right;
        border-right: 0.5px solid #1c88b9;
    }

    section.tabla table.tablesorter thead tr th.headerSortUp {
        background-image: url(img/asc.png);
        background-color: #58a9d6;
    }

    section.tabla table.tablesorter thead tr th.headerSortDown {
        background-image: url(img/desc.png);
        background-color: #58a9d6;
    }

    section.tabla table.tablesorter tbody td {
        color: #3D3D3D;
        padding: 3px 6px;
        background-color: #FFF;
        vertical-align: middle;
        border: 0.5px solid #f9f9f9;
    }

    /*--------*/

    section.tabla table.tablesorter thead tr th.cabeceraDatos {
        cursor: auto;
        pointer-events: none;
        background: #383838;
        border-right: 0.5px solid #808080;
    }

    section.tabla table.tablesorter thead tr th.cabeceraFechas {
        cursor: auto;
        pointer-events: none;
        background: #656565;
        border-right: 0.5px solid #7d7b7b;
    }

    section.tabla table.tablesorter tbody td p {
        color: #0c7caf;
        text-align: left;
        font-size: 11px;
        line-height: 13px;
        margin: 0px;
        vertical-align: middle;
    }

    section.tabla table.tablesorter tbody td p span {
        color: #d07918;
        display: inline-block;
    }

    section.tabla table.tablesorter thead tr th.colnum,
    section.tabla table.tablesorter tbody tr td.colnum {
        width: 20px;
        min-width: 20px;
    }

    section.tabla table.tablesorter thead tr th.colname,
    section.tabla table.tablesorter tbody tr td.colname {
        text-align: left;
        max-width: 110px;
        min-width: 110px;
    }

    section.tabla table.tablesorter thead tr th.colcode,
    section.tabla table.tablesorter tbody tr td.colcode {
        width: 100px;
        min-width: 100px;
        text-align: right;
    }

    section.tabla table.tablesorter thead tr th.colcomun,
    section.tabla table.tablesorter tbody tr td.colcomun {
        width: 70px;
        min-width: 65px;
        max-width: 65px;
    }

    section.tabla table.tablesorter thead tr th.coldatos,
    section.tabla table.tablesorter tbody tr td.coldatos {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
    }

    section.tabla table.tablesorter tbody tr td.coldatos {
        font-weight: bolder;
        color: #2196F3;
    }

    section.tabla table.tablesorter tbody tr td.coldatos a {
        font-weight: 100;
        color: #252525;
        font-size: 11px;
    }

    section.tabla table.tablesorter tbody tr td.coldatos a:hover {
        color: #009688;
    }

    section.tabla table.tablesorter thead tr th.colpuntos,
    section.tabla table.tablesorter tbody tr td.colpuntos {
        width: 70px;
        min-width: 70px;
        max-width: 70px;
    }

    section.tabla table.tablesorter tbody tr td.colpuntos {
        background: #f3fffe;
    }

    section.tabla table.tablesorter thead tr th.colasist,
    section.tabla table.tablesorter tbody tr td.colasist {
        width: 70px;
        min-width: 70px;
        max-width: 70px;
    }

    section.tabla table.tablesorter tbody tr td.colasist {
        background: #fff8e4;
    }

    section.tabla table.tablesorter thead tr th.colnaci,
    section.tabla table.tablesorter tbody tr td.colnaci {
        width: 92px;
        min-width: 92px;
        max-width: 92px;
    }

    section.tabla table.tablesorter thead tr th.coldep,
    section.tabla table.tablesorter tbody tr td.coldep {
        width: 120px;
        min-width: 120px;
        max-width: 120px;
    }

    section.tabla table.tablesorter thead tr th.colcomunica,
    section.tabla table.tablesorter tbody tr td.colcomunica {
        width: 120px;
        min-width: 120px;
        max-width: 120px;
    }

    section.tabla table.tablesorter thead tr th.colemail,
    section.tabla table.tablesorter tbody tr td.colemail {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
        overflow: hidden;
        text-align: left;
    }

    section.tabla table.tablesorter thead tr th.coldirec,
    section.tabla table.tablesorter tbody tr td.coldirec {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
        overflow: hidden;
        text-align: left;
    }

    section.tabla table.tablesorter thead tr th.colsalon,
    section.tabla table.tablesorter tbody tr td.colsalon {
        width: 55px;
        min-width: 55px;
        max-width: 55px;
        text-align: center;
    }

    section.tabla table.tablesorter thead tr th.colnompad,
    section.tabla table.tablesorter tbody tr td.colnompad {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
        text-align: left;
    }

    section.tabla table.tablesorter thead tr th.colsacra,
    section.tabla table.tablesorter tbody tr td.colsacra {
        width: 125px;
        min-width: 125px;
        max-width: 125px;
    }

    section.tabla table.tablesorter thead tr th.colfecha,
    section.tabla table.tablesorter tbody tr td.colfecha {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
    }

    section.tabla table.tablesorter tbody tr th.colfecha {
        background: #989898;
    }

    section.tabla table.tablesorter tbody tr td.colfecha {
        background: #f1f1f1;
    }

    section.tabla table.tablesorter tbody tr td.colfecha span {
        width: auto;
        display: inline-block;
        margin-right: 6px;
        vertical-align: middle;
        font-size: 13px;
    }

    section.tabla table.tablesorter tbody tr td.colfecha p.horas {
        display: none;
    }

    section.tabla table.tablesorter tbody tr td.pagos {
        background: #ebf5e1;
    }

/********* PAGOS ****************************/

section.pago {
    text-align: center;
    max-width: 500px;
    display: inline-block;
}

    section.pago div.bloque {
        text-align: right;
        max-width: 225px;
    }

    section.pago div.bloque div.division {
        width: 100%;
        display: inline-block;
        text-align: right;
        margin: 10px 0px;
    }

    section.pago div.bloque div.division p {
        display: inline-block;
        vertical-align: middle;
        margin: 0px;
        width: 100%;
        text-align: right;
    }

    section.pago div.bloque div.division p.costo {
        color: #37a4fb;
    }

    section.pago div.bloque div.division p.pago {
        color: #8BC34A;
    }

    section.pago div.bloque div.division p.falta {
        color: #f18f88;
    }

    section.pago div.bloque div.division span {
        display: inline-block;
        vertical-align: middle;
        margin-left: 7px;
        margin-right: 4px;
    }

    section.pago div.bloque div.division span.simbolo {
        margin-left: 20px;
    }

    /*--------------*/

    section.pago div.bloque div.division.pago p {
        display: inline-block;
        vertical-align: middle;
        margin: 0px;
        text-align: right;
        width: auto;
    }

    section.pago div.bloque div.division.pago p.costo {
        color: #37a4fb;
    }

    section.pago div.bloque div.division.pago p.pago {
        color: #8BC34A;
    }

    section.pago div.bloque div.division.pago p.falta {
        color: #f18f88;
    }

    section.pago div.bloque div.division.pago span {
        display: inline-block;
        vertical-align: middle;
        margin-left: 7px;
        margin-right: 4px;
    }

    section.pago div.bloque div.division.pago span.simbolo {
        margin-left: 20px;
    }

    section.pago div.bloque div.division.pago input[type="number"] {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        margin: 0px;
        text-align: right;
    }

    section.pago div.bloque div.division span#eventCosto,
    section.pago div.bloque div.division span#eventPago,
    section.pago div.bloque div.division span#eventFalta {
        width: 45px;
    }

/****** DOCUMENTO ********************************/

section.documento {
    text-align: center;
    max-width: 250px;
    display: inline-block;
}

/****** REGISTRO *********************************/
div.fondoRegistro {
    position: fixed;
    background: rgb(0 0 0 / 68%);
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

section.registro {
    position: relative;
    top: 17%;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 95%;
    max-width: 860px;
    border-radius: 10px;
    border: 0.5px solid #e4dede;
    background: #FFF;
    box-shadow: 1px 1px 50px -20px #000;
    margin-bottom: 20px;
}

    section.registro form {
        padding: 15px;
        text-align: center;
    }

    section.registro form div.bloque {
        width: 220px;
        text-align: left;
    }

    section.registro form div.bloque h5 {
        padding-left: 0px;
        display: inline-block;
        width: 100%;
        font-weight: 600;
    }

    section.registro form div.seccion {
        display: inline-block;
        width: 100%;
        text-align: left;
    }

    section.registro form div.seccion.mitad {
        width: 108px;
    }

    section.registro form div.seccion.tres {
        width: 70px;
    }

    section.registro form label.subtitle {
        font-size: 12px;
        color: #0c7caf;
        display: block;
        margin-bottom: 5px;
    }

    section.registro form div.botones {
        display: block;
        padding-right: 10px;
        width: initial;
        margin-bottom: 0px;
    }

section.registro.small{
    max-width: fit-content;
}

form label.labelNoForm {
    width: 100%;
    text-align: left;
    display: inline-block;
    margin: 0px 0px 3px 5px;
    font-size: 12px;
    line-height: 18px;
    color: #424242;
}

/****** ACTUALIZACION *********************************/

section.actualizacion {
    display: inline-block;
    max-width: 860px;
}

    section.actualizacion form {
        padding: 15px;
        text-align: center;
    }

    section.actualizacion form div.bloque {
        width: 220px;
        text-align: left;
    }

    section.actualizacion form div.bloque h5 {
        padding-left: 0px;
        display: inline-block;
        width: 100%;
        font-weight: 600;
    }

    section.actualizacion form div.seccion {
        display: inline-block;
        width: 100%;
        text-align: left;
    }

    section.actualizacion form div.seccion.mitad {
        width: 108px;
    }

    section.actualizacion form label.subtitle {
        font-size: 12px;
        color: #0c7caf;
        display: block;
        margin-bottom: 5px;
    }

    section.actualizacion form div.botones {
        display: block;
        padding-right: 10px;
        width: initial;
        margin-bottom: 0px;
    }


/****** FINALIZAR *********************************/

section.terminarPeriodo {
    display: none;
    position: absolute;
    top: 90px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 300px;
    border-radius: 10px;
    border: 0.5px solid #e4dede;
    background: #FFF;
    box-shadow: 1px 1px 50px -20px #000;
}

    section.terminarPeriodo form {
        padding: 15px;
        text-align: center;
    }

    section.terminarPeriodo form div.bloque {
        width: 220px;
        text-align: left;
    }

    section.terminarPeriodo form div.bloque h5 {
        padding-left: 0px;
        display: inline-block;
        width: 100%;
        font-weight: 600;
    }

    section.terminarPeriodo form div.seccion {
        display: inline-block;
        width: 100%;
        text-align: left;
    }

    section.terminarPeriodo form div.seccion.mitad {
        width: 108px;
    }

    section.terminarPeriodo form label.subtitle {
        font-size: 12px;
        color: #0c7caf;
        display: block;
        margin-bottom: 5px;
    }

    section.terminarPeriodo form div.botones {
        display: block;
        padding-right: 10px;
        width: initial;
        margin-bottom: 0px;
    }