@font-face {
    font-family: 'Exo-2';
    src: url(../Fonts/Exo2/Exo2-VariableFont_wght.ttf);
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Exo-2, Arial;
    font-size: 14px;
    font-weight: normal;
    background-color: #fff;
}

@media screen and (min-width: 1024px) {
    body {
    }
}

a {
    transition: all 0.5s linear;
}

.header {
    /*background: #3A0A5E;*/
    background: #fff;
    z-index: 100;
    height: 52px;
    padding: 10px;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .header {
        height: 62px;
    }
}

.title-header, .title-header-login {
    color: #3A0A5E;
    width: 280px;
    font-family: Exo-2, Arial;
    font-size: 22pt;
}

.title-header {
    padding-left: 35px;
    display: none;
}

@media screen and (min-width: 768px) {
    .title-header, .title-header-login {
        font-size: 28pt;
        width: 300px;
        padding-left: 0;
        display: block;
    }
}

.header_bottom {
    background: #6f02c1;
    height: 0px;
}

.header-logo2 {
}

    .header-logo2 a {
        float: left;
    }

    .header-logo2 h2 {
        color: #fff;
        font-size: 15px;
        margin: 6px 0 0 10px;
        display: inline-block;
    }

@media screen and (min-width: 768px) {
    .header-logo2 h2 {
        font-size: 22px;
    }
}

.header-logo3 {
    position: absolute;
    right: 130px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex:inherit;
    -webkit-flex: inherit;
    flex: inherit;
    color: #3A0A5E;
    top: 18px;
}

@media screen and (min-width: 768px) {
    .header-logo3 {
        top: 24px;
    }
}

.header-logo4 {
    position: absolute;
    right: 3px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex:inherit;
    -webkit-flex: inherit;
    flex: inherit;
    top: 12px;
}

@media screen and (min-width: 768px) {
    .header-logo4 {
        top: 17px;
    }
}

.header-close {
    /*background: #e21f19;*/
    color: #000;
    background: #fff;
    border: none;
    text-decoration: none;
    font-size: 14px;
    border-radius: 5px;
    margin: 0 3px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (min-width: 768px) {
    .header-close {
    }
}

.header-close span {
    padding: 7px;
}

.header-close:hover {
    background: #444;
    color: #fff;
    transition: all 0.4s linear;
}

.header-glos {
    background: #fff;
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    border-radius: 5px;
    padding: 6px 6px 3px 6px;
}

    .header-glos:hover {
        background: #aaa;
    }

.mv-background {
    background: url(../img/fondos/CTFondo.jpg) left top/auto auto repeat-y;
    background-color: #fff;
    border: 1px solid;
    min-height: 768px;
}

@media screen and (min-width: 768px) {
    .mv-background {
        background: url(../img/fondos/CTFondo.jpg) left top/auto auto repeat-y;
        background-color: #fff;
    }
}

@media screen and (min-width: 1025px) {
    .mv-background {
        background: url(../img/fondos/CTFondo.jpg) center top/100% auto repeat-y;
        background-color: #fff;
    }
}
/*LOGIN*********************/

.l-contents {
    margin: auto;
}


@media screen and (min-width: 768px) {
    .l-contents {
        max-width: 100%;
        padding: 0 5px;
    }
}

@media screen and (min-width: 1025px) {
    .l-contents {
        max-width: 99%;
        padding: 0 5px;
    }
}

@media screen and (min-width: 768px) {
    .flex-index {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-height: calc(100vh - 100px);
    }
}

.login-title {
    color: #fff;
    margin-top: 30px;
}

.login-title-h1 {
    font-family: Exo-2,Arial;
    text-align: center;
    font-size: 18px;
    padding: 0 15px;
}

@media screen and (min-width: 768px) {
    .login-title-h1 {
        font-size: 30px;
    }
}

.login-index {
    position: relative;
    /*z-index: 200;*/
    padding: 30px 0 50px 0;
}

@media screen and (min-width: 768px) {
    .login-index {
        margin: auto;
        width: 600px;
        padding: 30px 0;
    }
}

.login-content {
    background: #fff;
    color: #fff;
    font-family: Exo-2,Arial;
    font-weight: 100;
    border-radius: 10px;
    margin: 20px;
    padding: 20px;
}

@media screen and (min-width: 1025px) {
    .login-content {
        width: 460px !important;
    }
}

.login-h1 {
    font-weight: bold;
    font-size: 23px;
    text-align: center;
    margin: 5px;
    color: #000;
}

.login-p {
    margin: 15px 0;
    text-align: center;
}

.login-input {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 10px auto;
}

@media screen and (min-width: 768px) {
    .login-input {
        width: 380px;
    }
}

@media screen and (min-width: 1025px) {
    .login-input {
        width: 400px;
    }
}

.login-input label {
    background: #ddd;
    color: #000;
    display: block;
    padding: 6px;
    width: 40px;
    text-align: center;
}

    .login-input label i {
        font-size: 22px !important;
    }

.login-input input, .login-input select, .login-input textarea {
    width: 360px;
    padding: 10px;
    font-family: Exo-2, Arial;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
}

.input-submit {
    font-family: Exo-2,Arial;
    font-size: 18px;
    background: #6A1B9A;
    color: #fff;
    border: none;
    display: block;
    width: 100%;
    margin: 15px auto;
    padding: 8px 4px 8px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s linear;
}

    .input-submit label {
        width: 100% !important;
        display: inline-block;
        border: 1px solid #aaa;
        padding-top: 5px;
        padding-bottom: 6px;
        cursor: pointer;
    }

@media screen and (min-width: 480px) {
    .input-submit {
        width: 260px;
    }
}

.input-submit:hover {
    background: #420f60;
}

.login-link {
    display: block;
    color: #000000;
    text-align: center;
    font-size: 16px !important;
    margin: 10px auto;
    font-weight: normal;
}

    .login-link:hover {
        color: #000000;
    }

.reveal-modal-bg,
.reveal-modal-bg2,
.reveal-modal-bg3,
.reveal-modal-bg4,
.reveal-modal-bg5 {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-bg2 {
    z-index: 401;
}

.reveal-modal-bg3 {
    z-index: 501;
}

.reveal-modal-bg4 {
    z-index: 601;
}

.reveal-modal-ActualizarClave {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-ActualizarClave {
    z-index: 601;
}

.modal-contrasena {
    width: 360px;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    position: absolute;
    top: 10px;
    left: calc(50% - 180px);
    z-index: 500;
    text-align: center;
}

    .modal-contrasena h2 {
        font-weight: 200;
        margin: 10px 0 30px 0;
    }

    .modal-contrasena p {
        margin: 0 0 30px 0;
    }

    .modal-contrasena .cont-box-input {
        width: 90%;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        font-size: 15px;
    }

        .modal-contrasena .cont-box-input::-webkit-input-placeholder {
            font-weight: 100;
        }

        .modal-contrasena .cont-box-input::-moz-placeholder {
            font-weight: 100;
        }

        .modal-contrasena .cont-box-input::-ms-input-placeholder {
            font-weight: 100;
        }

    .modal-contrasena .cont-box-submit {
        width: 260px;
        margin: 20px 0 10px;
    }

    .modal-contrasena .cont-box-cancel {
        width: 260px;
        margin: 0px 0 10px;
    }

    .modal-contrasena a {
        color: #000;
        font-size: 15px;
    }

        .modal-contrasena a:hover {
            color: #e21f19;
        }

@media screen and (min-width: 768px) {
    .modal-contrasena {
        width: 500px;
        padding: 25px;
        top: calc(50% - 180px);
        left: calc(50% - 250px);
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.95);
    }
}

.cont-box-cancel {
    background: #000;
    color: #fff !important;
    padding: 4px;
    border: none;
    width: 260px;
    border-radius: 6px;
    font-size: 18px !important;
    cursor: pointer;
    font-family: Exo-2,Arial;
    transition: all 0.4s linear;
    margin: 0px auto;
}

    .cont-box-cancel:hover {
        background: #333;
    }

    .cont-box-cancel label {
        width: 100% !important;
        display: inline-block;
        border: 1px solid #aaa;
        padding-top: 5px;
        padding-bottom: 6px;
        cursor: pointer;
    }

.cont-box {
    margin: 8px 0 0 0;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .cont-box {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
/*FIN LOGIN*****************/

/*FORMULARIO***************/
.cont-header {
    height: auto;
    margin: 10px 0 5px 10px;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .cont-header {
        margin: 20px 0 5px 10px;
    }
}

.cont-header-h1 {
    font-size: 18px;
    color: #fff;
}

@media screen and (min-width: 768px) {
    .cont-header-h1 {
        font-size: 20px;
    }
}

.cont-header-h2 {
    font-size: 14px;
    /*    border-bottom: 1px solid #000;*/

    margin-bottom: 10px;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .cont-header-h2 {
        font-size: 18px;
    }
}

.cont-header-h3 {
    font-size: 12px;
    border-bottom: 1px solid #aaa;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
    .cont-header-h3 {
        font-size: 16px;
    }
}

.cont-header-popup {
    font-size: 18px;
    text-align: center;
    padding: 20px 0 20px 0;
}

@media screen and (min-width: 768px) {
    .cont-header-popup {
        font-size: 24px;
    }
}

.section1 {
    background: #fff !important;
    padding: 15px 15px 15px 15px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    /*    border-bottom: 1px solid rgba(0, 0, 0, 0.15);*/
    margin: 5px 0 10px 0;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .section1 {
        padding: 30px 40px 30px 40px !important;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 20px;
    }
}

.section2 {
    background: #fff;
    padding: 20px;
    text-align: left;
    border: 1px solid #000;
    border-radius: 16px;
    margin: 10px auto 30px auto;
    width: 100%;
}


@media screen and (min-width:1424px) {
    .section2 {
        width: 70%;
    }
}

.icon, .icon2 {
    display: inline-block;
    margin: 0 0 0 0px;
    border-radius: 4px;
    cursor: pointer;
    height: 30px;
    width: 30px;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
}

.icon2 {
    height: 30px !important;
    width: 30px !important;
    padding: 3px !important;
    margin-left: 3px;
    margin-right: 3px;
    border: 1px solid #888;
    background-color: #eee;
    border-radius: 3px;
}

    .icon2:hover {
        background-color: #ccc;
    }

.icon {
    background-color: #69309a;
}

    .icon div, .icon2 div {
        background-size: 100%;
        width: 100%;
        height: 100%;
    }

        .icon2 div:hover {
            background-size: 100%;
            width: 100%;
            height: 100%;
        }

    .icon:hover {
        /*background-color: #328697;*/
        background-color: #391a5e;
    }

.iconBuscar {
    background: url(../img/Iconos/buscar.svg) top left;
}

.iconRptDeclaracion {
    background: url(../img/Iconos/iconRptDeclaracion.svg) top left;
}

.iconRptPadronAsoc {
    background: url(../img/Iconos/iconRptPadronAsoc.svg) top left;
}

.iconDetalle {
    background: url(../img/Iconos/Detalle.svg) top left;
}

.iconGuardar {
    background: url(../img/Iconos/guardar.png) top left;
}

.iconAgregar {
    background: url(../img/Iconos/add.svg) top left;
}

    .iconAgregar:hover {
        background: url(../img/Iconos/add2.svg) top left;
    }

.iconEditar {
    background: url(../img/Iconos/editar.svg) top left;
}

    .iconEditar:hover {
        background: url(../img/Iconos/editar.svg) top left;
    }

.iconEditar1 {
    background: url(../img/Iconos/MostrarMorado.svg) top left;
}

    .iconEditar1:hover {
        background: url(../img/Iconos/MostrarMorado.svg) top left;
    }

.iconEditar2 {
    background: url(../img/Iconos/MostrarLila.svg) top left;
}

    .iconEditar2:hover {
        background: url(../img/Iconos/MostrarLila.svg) top left;
    }

.iconCerrar {
    background: url(../img/Iconos/cerrar.svg) top left;
}

.iconEntrega {
    background: url(../img/Iconos/Entrega.svg) top left;
}

.iconAgregarUsuario {
    background: url(../img/Iconos/agregarUsuario.png) top left;
}

.iconVerDetalle {
    background: url(../img/Iconos/MostrarMorado.svg) top left;
}

.iconCronograma {
    background: url(../img/Iconos/Cronograma.svg) top left;
}

.iconEditar4 {
    background: url(../img/Iconos/editar3.svg) top left;
}
.iconEditar5 {
    background: url(../img/Iconos/edit_note.svg) top left;
}

.iconSorteo {
    background: url(../img/Iconos/draw.svg) top left;
}

    .iconSorteo:hover {
        background: url(../img/Iconos/draw.svg) top left;
    }

.iconSorteo1 {
    background: url(../img/Iconos/SorteoLila.svg) top left;
}

    .iconSorteo1:hover {
        background: url(../img/Iconos/SorteoLila.svg) top left;
    }

.iconSorteo2 {
    background: url(../img/Iconos/SorteoMorado.svg) top left;
}

    .iconSorteo2:hover {
        background: url(../img/Iconos/SorteoMorado.svg) top left;
    }

.iconPago {
    background: url(../img/Iconos/pay.svg) top left;
}

    .iconPago:hover {
        background: url(../img/Iconos/pay.svg) top left;
    }

.iconPago1 {
    background: url(../img/Iconos/PagarJuntaLila.svg) top left;
}

    .iconPago1:hover {
        background: url(../img/Iconos/PagarJuntaLila.svg) top left;
    }

.iconPago2 {
    background: url(../img/Iconos/PagarJuntaMorado.svg) top left;
}

    .iconPago2:hover {
        background: url(../img/Iconos/PagarJuntaMorado.svg) top left;
    }

.iconAprobarPago {
    background: url(../img/Iconos/AprobarPagosLila.svg) top left;
}

    .iconAprobarPago:hover {
        background: url(../img/Iconos/AprobarPagosLila.svg) top left;
    }

.iconAprobarPago1 {
    background: url(../img/Iconos/approvepayment1.svg) top left;
}

    .iconAprobarPago1:hover {
        background: url(../img/Iconos/approvepayment1.svg) top left;
    }

.iconAprobarPago2 {
    background: url(../img/Iconos/AprobarPagosMorado.svg) top left;
}

    .iconAprobarPago2:hover {
        background: url(../img/Iconos/AprobarPagosMorado.svg) top left;
    }

.iconEntregar {
    background: url(../img/Iconos/deliver.svg) top left;
}

    .iconEntregar:hover {
        background: url(../img/Iconos/deliver.svg) top left;
    }

.iconEntregar1 {
    background: url(../img/Iconos/EntregarJuntaMorado.svg) top left;
}

    .iconEntregar1:hover {
        background: url(../img/Iconos/EntregarJuntaMorado.svg) top left;
    }

.iconEntregar2 {
    background: url(../img/Iconos/EntregarJuntaLila.svg) top left;
}

    .iconEntregar2:hover {
        background: url(../img/Iconos/EntregarJuntaLila.svg) top left;
    }

.iconValidar {
    background: url(../img/Iconos/validate.svg) top left;
}

    .iconValidar:hover {
        background: url(../img/Iconos/validate.svg) top left;
    }

.iconValidar1 {
    background: url(../img/Iconos/ValidarPagosLila.svg) top left;
}

    .iconValidar1:hover {
        background: url(../img/Iconos/ValidarPagosLila.svg) top left;
    }

.iconValidar2 {
    background: url(../img/Iconos/ValidarPagosMorado.svg) top left;
}

    .iconValidar2:hover {
        background: url(../img/Iconos/ValidarPagosMorado.svg) top left;
    }

.iconCheck {
    background: url(../img/Iconos/check.svg) top left;
}

    .iconCheck:hover {
        background: url(../img/Iconos/check.svg) top left;
    }

.iconEliminar {
    background: url(../img/Iconos/EliminarMorado.svg) top left;
}

    .iconEliminar:hover {
        background: url(../img/Iconos/EliminarMorado.svg) top left;
    }

.iconLista {
    background: url(../img/Iconos/list.svg) top left;
}


.iconDetalle {
    background: url(../img/Iconos/detail.svg) top left;
}

.iconMail {
    background: url(../img/Iconos/mail-send.svg) top left;
}

.iconPaseInvitado {
    background: url(../img/Iconos/pase_invitado.svg) top left;
}

.iconVideo {
    background: url(../img/Iconos/video-player.svg) top left;
}

.iconDetalleVista {
    background: url(../img/Iconos/see.svg) top left;
}

.iconRptInscritosPeriodo {
    background: url(../img/Iconos/survey.svg) top left;
}

.iconMostrarPassword {
    background: url(../img/Iconos/MostrarMorado.svg) top left;
}

.iconOcultarPassword {
    background: url(../img/Iconos/MostrarLila.svg) top left;
}

.iconMostrarPassword {
    background: url(../img/Iconos/MostrarMorado.svg) top left;
}

.label {
    display: inline-block;
    text-align: left;
    padding: 6px;
}

@media screen and (min-width: 640px) {
    .label {
        text-align: right;
    }
}

.label2 {
    display: inline-block;
    text-align: right;
    padding: 6px;
}



.input-text {
    display: inline-block;
    width: 100%;
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 4px;
    font-family: Exo-2,Arial;
    font-weight: normal;
    font-size: 14px;
}

    .input-text:disabled {
        background: #e9e9e9;
        border: 1px solid #e9e9e9;
        color: #000;
    }

.input-button, .input-button-cancel, .input-button-regresar {
    font-family: Exo-2, Arial;
    font-size: 16px;
    border: none;
    display: block;
    width: 100%;
    margin: 5px auto;
    padding: 4px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s linear;
}

.input-button {
    background: #6A1B9A;
    color: #fff;
}

    .input-button:disabled {
        background: #ccc;
    }

        .input-button:disabled:hover {
            background: #ccc;
        }

.input-button-cancel {
    background: #303E48;
    color: #fff;
}

.input-button-regresar {
    background: #D23E1E;
    color: #fff;
}

    .input-button-regresar:hover {
        background: #000;
    }

.input-button:hover {
    background: #3b1056;
}

.input-button-cancel:hover {
    background: #000;
}

.input-button label, .input-button div, .input-button-cancel label, .input-button div, .input-button-regresar label {
    width: 100% !important;
    display: inline-block;
    border: 1px solid #fff;
    padding-top: 5px;
    padding-bottom: 6px;
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    .input-button, .input-button-cancel, .input-button-regresar {
        width: 260px;
        margin: 15px auto;
    }
}


.input-button-toolbar {
    font-family: Exo-2, Arial;
    font-size: 14px;
    background: #6A1B9A;
    color: #fff;
    border: none;
    display: block;
    width: 100px;
    padding: 8px 4px 8px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s linear;
}

    .input-button-toolbar:hover {
        background: #40125c;
    }

.input-checkbox, .input-checkbox2 {
    display: none;
}

    .input-checkbox + .input-checkbox-lab, .input-checkbox2 + .input-checkbox-lab {
        cursor: pointer;
        font-weight: 200 !important;
    }

.input-checkbox-lab:before {
    /*content: '✗';*/
    content: '';
    font-size: 24px;
    line-height: 0.95;
    font-weight: bold !important;
    font-family: "Arial";
    background: #fff;
    border: 1px solid #9E9E9E;
    border-radius: 6px;
    display: inline-block;
    height: 24px;
    width: 24px;
    margin: 0 7px 0 0;
    text-align: center;
    vertical-align: middle;
    color: red;
}



.input-checkbox:checked + .input-checkbox-lab:before {
    content: "✓";
    font-size: 25px;
    color: #69309a;
    font-weight: bold !important;
}

.input-checkbox:disabled + .input-checkbox-lab:before {
    background-color: #e5e7e9;
}

.input-checkbox2:checked + .input-checkbox-lab:before {
    content: "✗";
    font-size: 25px;
    color: red;
    font-weight: bold !important;
}

.text-color1 {
    background-color: #faf5b9;
}

.modal-registrar {
    width: 96%;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    position: absolute;
    top: calc(2%);
    left: calc(2%);
    max-height: 96vh;
    z-index: 500;
    overflow: auto;
    text-align: center;
}



@media screen and (min-width: 768px) {
    .modal-registrar {
        left: calc(50% - 350px);
        width: 700px;
        padding: 25px;
        top: 5%;
        height: auto;
        max-height: 90vh;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.95);
        position: absolute;
    }
}

.label-cliente {
    color: black;
    display: table-cell;
    width: 40px;
    height: 40px;
    margin: 20px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
}

.checkbox-cliente[type=checkbox] {
    display: none;
}

    .checkbox-cliente[type=checkbox]:checked + .checkbox-cliente {
        background-color: green;
    }

/*FIN FORMULARIO***********/

/*OVERLAY POPUP***********/
.overlayPrincipal {
    position: fixed;
    top: 0;
    left: 0; /*background: rgb(200, 200, 200);*/
    /*background-image: url(../img/fondos/transparente.png);*/
    background-color: #000;
    opacity: 0.4;
    filter: alpha(opacity=40);
    display: block; /*-moz-opacity: 0.3;     opacity: 0.3;*/
}

.overlayPopup {
    position: fixed;
    top: 0;
    left: 0; /*background: rgb(200, 200, 200);*/
    background-image: url(../img/fondos/transparente.png);
    display: none; /*-moz-opacity: 0.3;     opacity: 0.3;*/
}
/*FIN*********************/

.foto {
    width: 200px;
    height: 200px;
    background-color: #eee;
    margin: 0 auto;
    border: 1px solid #444;
}

.select-busqueda {
    position: absolute;
    display: none;
    margin-left: 0;
    margin-top: 35px;
    height: 100px;
}

    .select-busqueda option {
        background-color: #fff;
    }

@media screen and (min-width: 768px) {
    .select-busqueda {
        position: absolute;
        display: none;
        margin-left: 0px;
    }
}

.div-busqueda {
    position: absolute;
    display: none;
    margin-left: 0;
    margin-top: 35px;
    height: auto;
    background-color: #fff !important;
}

    .div-busqueda div {
        cursor: pointer;
        padding: 3px;
    }

        .div-busqueda div:hover {
            background-color: #ccc;
        }

@media screen and (min-width: 768px) {
    .div-busqueda {
        position: absolute;
        display: none;
        margin-left: 0px;
    }
}
/*TABLE***********************************/
.container-table {
    overflow-x: auto;
    padding: 0;
    margin: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

    table th {
        border: solid 1px #d8d9dd;
        padding: 5px 10px;
        background: rgba(0, 0, 0, 0.08);
        text-align: center;
    }

    table tr[class="filter"] th {
        padding: 1px;
        background: #fff;
    }

    table th input {
        display: block;
        width: 100%;
        border: 2px solid #aaa;
        padding: 6px;
        border-radius: 4px;
        font-family: Exo-2, Arial;
    }

    table td {
        border: solid 1px #d8d9dd;
        padding: 5px 10px;
        font-weight: normal;
        cursor: pointer;
        font-size: 14px;
    }


tbody {
    text-align: left;
}

tfoot td {
    padding: 0;
    border: none;
}

.cont-nav {
    margin: 10px 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

    .cont-nav a {
        text-decoration: none;
        background: #3A0A5E;
        color: white !important;
        display: block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 28px;
        border-radius: 50%;
        font-size: 18px;
        margin: 0 2px;
    }

        .cont-nav a:hover {
            /*background: #31b0c8;*/
            background: #69309a;
        }

    .cont-nav p {
        font-size: 11px;
        line-height: 34px;
    }

@media screen and (min-width: 768px) {
    .cont-nav p {
        font-size: 15px;
    }
}

.cont-nav-n {
    font-weight: bold;
    text-align: center;
    padding: 5px;
    border: 1px solid #bbb;
    border-radius: 4px;
    width: 40px;
    margin: 0 5px;
}

/*FIN TABLE*******************************/

/*TABLE RESPONSIBLE*/
@media (max-width: 768px) {
    .tableResponsive table,
    .tableResponsive thead,
    .tableResponsive tbody,
    .tableResponsive th,
    .tableResponsive td,
    .tableResponsive tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .tableResponsive thead tr:not([class="filter"]) {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .tableResponsive th input {
            width: 180px;
        }

        .tableResponsive tr[class="filter"] th {
            padding-left: 40%;
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .tableResponsive tr {
        border: 1px solid #ccc;
    }

    .tableResponsive thead tr th {
        color: #fff;
    }

    .tableResponsive tbody tr td, .tableResponsive thead tr th {
        border: none;
        padding-top: 4px;
        padding-bottom: 4px;
        position: relative;
        padding-left: 40%;
        white-space: normal;
        text-align: left;
        min-width: 100% !important;
    }

        .tableResponsive tbody tr td:before, .tableResponsive thead tr th:before {
            position: absolute;
            top: 6px;
            left: 6px;
            width: 37%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }

        .tableResponsive tbody tr td:before, .tableResponsive thead tr th:before {
            content: attr(data-title);
        }

    .tableResponsive tfoot tr td {
        border: none;
    }
}
/*FIN TABLE RESPONSIVE*/

#divReporte, iframe {
    width: 100% !important;
    min-height: 500px !important;
}

.input-text2 {
    display: inline-block;
    width: 360px;
    padding: 10px;
    font-family: Exo-2, Arial;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
}