@media (max-width: 992px) {
}

@media (max-width: 768px) {
}

@media (max-width: 480px) {
}
/*------------------------------------------------------------------
    [variables]
------------------------------------------------------------------*/
:root {
    --Fuente1: 'Titillium Web', sans-serif;
    --Color1: rgb(0,66,116); /*azul*/
    --Color1-1: rgb(1,79,154); /*azul corporativo*/
    --Color2: rgb(53,143,202); /*celeste*/
    --Color2-b: rgb(39,123,178); /*celeste b*/
    --Color3: rgb(255,169,74); /*naranjo*/
    --Color3-b: rgb(255,147,28); /*naranjo b*/
    --Color4: rgb(243,250,255); /* celeste c*/
    --Color5: #F9F9F9; /*gris- background */
    --Color6: #8F8F8F; /*gris claro- */
    --Color7: #676767; /*gris oscuro- */
}

/*------------------------------------------------------------------
    [Colores principales de la pagina]
------------------------------------------------------------------*/

/*---color---*/

.co-a { /*blanco*/
    color: rgb(255, 255, 255);
}

.co-b { /*negro*/
    color: rgb(12, 12, 12);
}

.co-c { /* azul*/
    color: var(--Color1);
}
.co-c-1 { /* azul corporativo*/
    color: var(--Color1-1);
}

.co-d { /* celeste*/
    color: var(--Color2);
}
.co-e { /* naranjo*/
    color: var(--Color3);
}
.co-f { /* celeste b*/
    color: var(--Color2-b);
}
.co-g { /* celeste c*/
    color: var(--Color4);
}
.co-h { /* gris- background*/
    color: var(--Color5);
}
.co-i { /* gris- claro*/
    color: var(--Color6);
}
.co-j { /* gris-oscuro*/
    color: var(--Color7);
}



/*---background color---*/

.ba-a { /*blanco*/
    background-color: rgb(255, 255, 255);
}

.ba-b { /*negro*/
    background-color: rgb(12, 12, 12);
}

.ba-c { /* azul*/
    background-color: var(--Color1);
}
.ba-c-1 { /* azul corporativo*/
    background-color: var(--Color1-1);
}
.ba-d { /* celeste*/
    background-color: var(--Color2);
}
.ba-e { /* naranjo*/
    background-color: var(--Color3);
}
.ba-f { /* celeste b*/
    background-color: var(--Color2-b);
}
.ba-g { /* celeste c*/
    background-color: var(--Color4);
}

.ba-h { /* gris- background*/
    background-color: var(--Color5);
}

.ba-i { /* gris- claro*/
    background-color: var(--Color6);
}

.ba-j { /* gris-oscuro*/
    background-color: var(--Color7);
}


/*---border color---*/

.bo-a { /*blanco*/
    border-color: rgb(255, 255, 255);
}

.bo-b { /*negro*/
    border-color: rgb(12, 12, 12);
}

.bo-c { /* azul*/
    border-color: var(--Color1);
}
.bo-c-1 { /* azul-corporativo*/
    border-color: var(--Color1-1);
}
.bo-d { /* celeste*/
    border-color: var(--Color2) !important;
}
.bo-e { /* naranjo*/
    border-color: var(--Color3);
}
.bo-f { /* celeste b*/
    border-color: var(--Color2-b);
}
.bo-g { /* gris- background*/
    border-color: var(--Color5);
}

.bo-h { /* gris- claro*/
    border-color: var(--Color6);
}

.bo-i { /* gris-oscuro*/
    border-color: var(--Color7);
}





/*-------*/
.ba-wasap { /*verde wasap*/
    background-color: rgb(12, 190, 59);
}
.ba-pie-firma {
    background-color: #000000;
}
.ba-degra-azul {
    background: rgba(50,139,198,1);
    background: -moz-linear-gradient(left, rgba(50,139,198,1) 0%, rgba(7,75,127,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(50,139,198,1)), color-stop(100%, rgba(7,75,127,1)));
    background: -webkit-linear-gradient(left, rgba(50,139,198,1) 0%, rgba(7,75,127,1) 100%);
    background: -o-linear-gradient(left, rgba(50,139,198,1) 0%, rgba(7,75,127,1) 100%);
    background: -ms-linear-gradient(left, rgba(50,139,198,1) 0%, rgba(7,75,127,1) 100%);
    background: linear-gradient(to right, rgba(50,139,198,1) 0%, rgba(7,75,127,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#328bc6', endColorstr='#074b7f', GradientType=1 );
}

/*------------------------------------------------------------------
    [Principal]
------------------------------------------------------------------*/
html {
    overflow-x: hidden;
}

    html, html a, body {
        -webkit-font-smoothing: antialiased;
    }
/*------------------------------------------------------------------
    [Body]
------------------------------------------------------------------*/
body {
    position: relative;
    max-width: 1366px;
    margin: auto;    
    font-family: var(--Fuente1);
}

@media (max-width: 992px) {
    body {
        font-size: 0.9em;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 0.8em;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 0.7em;
    }
}

.cambiapad {
    padding-top: 200px;
}

@media (min-width: 768px) and (max-width: 990px) {
    .cambiapad {
        padding-top: 120px;
    }
}

@media (max-width: 767px) {
    .cambiapad {
        padding-top: 80px;
    }
}

@media (max-width: 480px) {
    .cambiapad {
        padding-top: 90px;
    }
}
/*------------------------------------------------------------------
    [parrafos]
------------------------------------------------------------------*/
h1, h2, h3, h4, h5, p {
    margin-bottom: 0;
    line-height: 1;
}

h1, .h1 {
    font-size: 2.5em;
}

h2, .h2 {
    font-size: 2em;
}

h3, .h3 {
    font-size: 1.75em;
}

h4, .h4 {
    font-size: 1.5em;
}

h5, .h5 {
    font-size: 1.25em;
}

h6, .h6 {
    font-size: 1em;
}

p {
    font-size: 0.95em;
    line-height: 140%; /*interlineado de frases*/
}

ul > li {
    font-size: 0.95em;
}
/*------------------------------------------------------------------
    [Marcas]
------------------------------------------------------------------*/
.marca-agua {
    position: fixed;
    background-color: red;
    z-index: 10;
    width: 30px;
    height: 10px;
    top: 220px;
    visibility: hidden;
}

.marca-loading {
    /*display: none;*/
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    z-index: 1050;
    background-color: #fff;
    /*background-color: rgb(255,255,255,0.9);*/
    text-align: center;
}
.marca-loding-text {
    padding-top: 20%;
}

@media (max-width: 767px) {
    .marca-loading {
        /*display: none;*/
        top: -50px;
        height: 120%;
    }

    .marca-loding-text {
        padding-top: 50%;
    }
}

@media (max-width: 480px) {
    .marca-loading {
        /*display: none;*/
        top: -50px;
        height: 120%;
    }

    .marca-loding-text {
        padding-top: 50%;
    }
}
/*------------------------------------------------------------------
    [form generales]
------------------------------------------------------------------*/
.form-sombra {
    /*sombra*/
    -webkit-box-shadow: 3px 4px 6px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 3px 4px 6px 0px rgba(0,0,0,0.3);
    box-shadow: 3px 4px 6px 0px rgba(0,0,0,0.3);
}
/*------------------------------------------------------------------
    [login]
------------------------------------------------------------------*/
.login-largo {
    height: 100vh;
}
.login-img {
    background: url(../img/login/Fondo.jpg);
    background-repeat: no-repeat; /* Indicamos que no se repetira */
    background-size: cover; /* Encajamos la imagen al 100% del ancho */
    /*background-attachment: fixed;  Establecemos una posicion fija para la imagen */
    position: relative;
}
/*------------------------------------------------------------------
    [ingresa token]
------------------------------------------------------------------*/
.token-input{
    width:50px;
    margin-right:10px;
}
@media (max-width: 480px) {
    .token-input {        
        margin-right: 3px;
    }
}
/*------------------------------------------------------------------
    [navbar]
------------------------------------------------------------------*/
.nav-logo {
    width: 180px;
}
.nav-div-usuario {
    width: 45%;
}
@media (max-width: 1200px) {
    .nav-div-usuario {
        width: 60%;
    }
}
.nav-ico-usuario {
    width: 40px;
}
.nav-link {
    color: #ffffff !important;
    transition: 300ms;
}

    .nav-link:hover {
        color: var(--Color2) !important;
    }
.nav-link2 {
    display: block;
    padding: 0.5rem;
    color: #808080;
}
.nav-ico-carrito {
    vertical-align:top;
}
.nav-dropdown-menu {
    background-color: var(--Color1-1);    
}

@media (max-width: 992px) {
    .nav-dropdown-menu {
        background-color: rgba(0,0,0,0.0);
        border: 0;
    }
    .dropdown-divider{
        display:none;
    }
}
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu a::after {
        transform: rotate(-90deg);
        position: absolute;
        right: 6px;
        top: .8em;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .1rem;
        margin-right: .1rem;
    }


.nav-dropdown-item {
    color: #ffffff;
    font-size: 0.95em;
}
.nav-dropdown-item2 {    
    font-size: 0.95em;
}
    .nav-dropdown-item:hover, .nav-dropdown-item:focus {
        color: #ffffff;
        text-decoration: none;
        background-color: var(--Color1);
    }

    .nav-dropdown-item.active, .nav-dropdown-item:active {
        color: #ffffff;
        text-decoration: none;
        background-color: var(--Color1);
    }
    .nav-dropdown-item2:hover, .nav-dropdown-item2:focus {
        color: #ffffff;
        text-decoration: none;
        background-color: var(--Color1);
    }

    .nav-dropdown-item2.active, .nav-dropdown-item2:active {
        color: #ffffff;
        text-decoration: none;
        background-color: var(--Color1);
    }
@media (max-width: 768px) {
    .nav-dropdown-item {
        font-size: 0.7em;
    }

    .nav-dropdown-item2 {
        font-size: 0.7em;
    }
}
.nav-img {
    background: url(../img/master/cabezal.jpg);
    background-repeat: no-repeat; /* Indicamos que no se repetira */
    background-size: cover; /* Encajamos la imagen al 100% del ancho */
    /*background-attachment: fixed;  Establecemos una posicion fija para la imagen */
    /*position: relative;*/
}


.navbar-toggler:hover, .navbar-toggler:focus {
    text-decoration: none;
    border: 0;
}
@media (max-width: 767px) {
    .nav-logo {
        width: 120px;
       
    }   
}

@media (max-width: 480px) {
    .nav-logo {
        width: 120px;
       
    }      
}


/*------------------------------------------------------------------
    [barras horizontales]
------------------------------------------------------------------*/
.barra1 {
    height: 100px;
}

.barra2 {
    height: 25px;
}

.barra3 {
    height: 3px;
}

.barra-info {
    background-color: var(--Color1);
    z-index: 20;
    height: 50px;
    width: 100%;    
    position: fixed;
    bottom: 0px;
    right: 0px;
    -webkit-transition: width 300ms;
    -moz-transition: width 300ms;
    transition: width 300ms;
}

.barra-info-xs {
    bottom: 50px;
    width: 50px;
    height: 50px;
    border: 0px solid #000000;
    border-radius: 0 0 0 0;
}


.barra-none-x {
    display: none;
}

.barra-icono {
    cursor: pointer;
}


/*------------------------------------------------------------------
    [colapsable]
------------------------------------------------------------------*/
    .colla-btn-link {
    font-size: 1em !important;
}

        .colla-btn-link:hover {
            color: #ffffff;
            text-decoration: none;
        }

    .colla-btn-link:focus, .colla-btn-link.focus {
        text-decoration: none;
    }

/*------------------------------------------------------------------
    [mapas]
------------------------------------------------------------------*/
.mapa {
    width: 100%;
    height: 400px;
}
/*------------------------------------------------------------------
    [categorias]
-----------------------------------------------------------------*/

.cat {
    position: relative;
    transition: all ease;
    text-decoration: none;
    height: 110px;
}

    .cat:hover {
        
        text-decoration: none;
    }

.leftcat {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    padding-top: 1%;
    
}
.rightcat {
    position: absolute;
    left: 0px;
    right: 0px;
    margin-top: 50px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
}
@media (max-width: 992px) {
    .colsinmargen2 {
        padding-right: 1px;
        padding-left: 1px;
        padding-top: 1px;
        padding-bottom: 1px;
    }
}
/*------------------------------------------------------------------
    [flotantes]
------------------------------------------------------------------*/
.flo-wasap {
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 140px;
    right: 10px;
}

    .flo-wasap:hover {
        box-shadow: 0 4px 16px rgba(49, 138, 172, 1);
        transition: all 0.2s ease;
    }

.notifica {
    /*display: none;*/
    cursor: pointer;    
    position: fixed;
    bottom: 20px;
    right: 5px;
}
.notifica-text{
    width:500px;
}
@media (max-width: 480px) {
    .notifica-text {
        width: 300px;
    }
}
/*------------------------------------------------------------------
    [link]
------------------------------------------------------------------*/
.link-text-none {
    text-decoration: none;
}

    .link-text-none:hover {
        text-decoration: none;
        
    }

    .link-text-none:focus {
        text-decoration: none;
    }

/*------------------------------------------------------------------
    [botones]
------------------------------------------------------------------*/
.btn-nar{
    background-color: var(--Color3-b);
    color:rgb(255, 255, 255);
}
    .btn-nar:hover {
        background-color: var(--Color3);
    }

.btn-azu {
    background-color: var(--Color2);
    color: rgb(255, 255, 255);
}

    .btn-azu:hover {
        background-color: var(--Color2-b);
    }
/*------------------------------------------------------------------
    [modal]
------------------------------------------------------------------*/
.modal-cambia {
    background-color: rgba(0, 0, 0, 1);
    border: solid 1px #FAEE9E;
    border-radius: 0px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

/*------------------------------------------------------------------
    [multiple select checkbox]
------------------------------------------------------------------*/

.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#checkboxes {
    display: none;
    border: 1px #dadada solid;
    width: 100%;
    padding: 5px;
}

    #checkboxes label {
        display: block;
    }

        #checkboxes label:hover {
            background-color: #1e90ff;
        }

/*------------------------------------------------------------------
    [pie]
------------------------------------------------------------------*/
.pie-logo {
    width: 200px;
}

.pie-right-l {
    text-align: right;
}

.pie-left-r {
    text-align: left;
}

.pie-link {
    color: black !important;
    transition: 300ms;
}

    .pie-link:hover {
        color: var(--Color1) !important;
    }
@media (max-width: 768px) {
    .pie-logo {
        width: 120px;       
    }
    .pie-right-l {
        text-align: left !important;
    }

    .pie-left-r {
        text-align: right !important;
    }
}
@media (max-width: 480px) {
    .pie-logo {
        width: 120px;       
    }
}
/*------------------------------------------------------------------
    [titulos]
------------------------------------------------------------------*/
/*titulo con lineas*/
.titulo-line {
    display: inline-block;
    position: relative;
    color: #000000;
}

    .titulo-line::after, .titulo-line::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #FAEE9E;
        top: 0.6em;
    }

    .titulo-line::before {
        left: -105%;
    }

    .titulo-line::after {
        right: -105%;
    }

.titulo-line2 {
    display: inline-block;
    position: relative;
    color: #ffffff;
}

    .titulo-line2::after, .titulo-line2::before {
        content: "";
        position: absolute;
        width: 120%;
        height: 3px;
        background-color: #FAEE9E;
        top: 0.6em;
    }

    .titulo-line2::before {
        left: -140%;
    }

    .titulo-line2::after {
        right: -140%;
    }
.mi-hr-b {
    height: 1px;
    margin-left: 40%;
    margin-right: 40%;
}


/*------------------------------------------------------------------
    [checkbox]
------------------------------------------------------------------*/

.checkbox {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* hide the browser's default checkbox */
    .checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
/* create custom checkbox */
.check {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #ccc;
}

/* on mouse-over, add border color */
.checkbox:hover input ~ .check {
    border: 2px solid var(--Color1);
}

/* add background color when the checkbox is checked */
.checkbox input:checked ~ .check {
    background-color: var(--Color1);
    border: none;
}

/* create the checkmark and hide when not checked */
.check:after {
    content: "";
    position: absolute;
    display: none;
}

/* show the checkmark when checked */
.checkbox input:checked ~ .check:after {
    display: block;
}

/* checkmark style */
.checkbox .check:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*------------------------------------------------------------------
    [display none]
------------------------------------------------------------------*/
.off {
    display: none;
}

@media (max-width: 992px) {
    .off-992{
        display:none;
    }
    .on-992 {
        display: block;
    }
}

@media (max-width: 768px) {
    .off-768 {
        display: none;
    }
    .on-768 {
        display: block;
    }
}

@media (max-width: 480px) {
    .off-480 {
        display: none;
    }
    .on-768 {
        display: block;
    }
}
/*------------------------------------------------------------------
    [loading progreso]
------------------------------------------------------------------*/
.mi-progress{
    height:10px;
}
/*------------------------------------------------------------------
    [imagenes]
------------------------------------------------------------------*/
.img-redondo {
    border-radius: 10px 10px 10px 10px;
}
.img-sombra {
    /*sombra*/
    -webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
}
.img-sombra-doc {
    /*sombra*/
    -webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
}
img-sombra-doc:hover {
    background-color: transparent darkseagreen;
}

.img-center {
    /*centra imagen vertical y horizontal*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.img-usuario {
    width:150px;
    height:150px;
}
.img-usu{
    position:relative;

}
.img-usu-div {
    position: absolute;
    margin-left: 15px;
    margin-right: 15px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    padding-top:40px;
    text-align: center;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    transition: all 300ms;
}
.img-usu:hover > .img-usu-div {
    opacity: 1;
    color:black;
    text-shadow: 1px 1px 1px #fff;
}

.div-seguimiento-padre {
    position:relative;
}
.img-seguimiento {
    max-width: 100px;
    
}

.div-seguimiento-left {
    position: absolute;
    height: 5px;
    left: 0;
    right: 50%;
    bottom: 70px;
    z-index: -1;
}
.div-seguimiento-right {
    position: absolute;
    height: 5px;
    left: 50%;
    right: 0;
    bottom: 70px;
    z-index: -1;
}
@media (max-width: 768px) {
    .img-seguimiento {
        max-width: 80px;
    }
    .div-seguimiento-left {
        bottom: 60px;
    }
    .div-seguimiento-right {
        bottom: 60px;
    }
}

@media (max-width: 480px) {
    .img-seguimiento {
        max-width: 50px;
    }
    .div-seguimiento-left {
        bottom: 50px;
    }

    .div-seguimiento-right {
        bottom: 50px;
    }
}
/*------------------------------------------------------------------
    [pills]
------------------------------------------------------------------*/
.pil-li{
    border-bottom: 2px solid var(--Color3-b);
}
.pil-a {
    color: rgba(0,0,0,0.3);    
}
    .pil-a:hover {
        color: rgba(0,0,0,0.3);
        text-decoration:none;
    }
    .pil-a.active {
        color: #000000;        
    }
/*------------------------------------------------------------------
    [popovers]
------------------------------------------------------------------*/
.popover {
    z-index: 1029;
}
.popover .popover-body {
    background-color: var(--Color1-1);
    color: #fff;
}

.popover .popover-header {
    background-color: var(--Color1-1);
}

.popover .arrow {
}

.popover.popover .arrow::after {
    border-right-color: var(--Color1-1);
}
/*------------------------------------------------------------------
    [badge]
------------------------------------------------------------------*/
.badge{
    border-radius:1rem;
}
/*------------------------------------------------------------------
    [iconos]
------------------------------------------------------------------*/
.ico-16 {
    font-size: 16px;
}
.ico-18 {
    font-size: 18px;
}

.ico-20 {
    font-size: 20px;
}

.ico-22 {
    font-size: 22px;
}

.ico-24 {
    font-size: 24px;
}
.ico-26 {
    font-size: 26px;
}
.ico-28 {
    font-size: 28px;
}

/*------------------------------------------------------------------
    [personalizados]
------------------------------------------------------------------*/
.table thead th {
    border-bottom: 2px #dee2e6;
}

.table td, .table th {
    border-top: 1px #dee2e6;
}




.div-80 {
    width: 200px;
    font-weight: bold;
    word-wrap: break-word;
    display: inline;
}
.div-fecha {
    width: 80px;
    font-weight: bold;
    color: orange;
}
.icono-grande {
    font-size: 50px;
    float: left;
    margin-left:-70px;
    margin-top:-30px;
   
}
.bold {
    font-weight: bold;
}
.tr-cuotas {
    background-color: var(--Color1-1) !important;
    color: #fff;
    
}
.normal-text {
    font-weight: normal;
}
.modal-pagos {
    border-radius: 20px 20px 20px 20px !important;
    border: 4px solid #dee2e6;
}
.modal-table {
    border-radius: 10px 10px 10px 10px !important;
}
.text-right {
    text-align: right;

}
.text-center {
    text-align: center;
}

.div-right {
    padding-right:180px;
}

.btn-large {
    width: 200px;
    
}
.small-img {
    
    width: 10%;
    height: auto;
    margin-top: -30px;
}
.border-div {
    border: 1px solid #dee2e6;
}
.no-space {
    margin-bottom: 0px;
}

.div-bg {
    background: #dee2e6;
}
.div-bg-2 {
    background-color: #dee2e6;
}
.no-padding {
    padding: 0px 0px 0px 0px;
}
.padding-left {
    padding-left:0px;
}
.div-50 {
    padding-left: 50px;
}

.no-decoration {
    text-decoration:none;
}

/*----------------------------
   [estilos de ReturnPagos]  
-----------------------------*/

@media (max-width: 992px) {
    .divcentral {
        width: 60%;
    }
}

@media (max-width: 767px) {
    .divcentral {
        width: 70%;
    }
}

@media (max-width: 480px) {
    .divcentral {
        width: 90%;
    }
}

.divcentral {
    text-align: left;
    position: center;
    top: 10%;
    width: 50%;
    left: 0;
    right: 0;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    justify-self:auto;
}

.divhead {
    background-color: #38b047;
    padding: 10px;
    text-align: center;
}

.divbody {
    background-color: #38b047;
    padding: 20px;
    color: #ffffff;
    text-align: center;
}

.divfooter {
    background-color: #DFDFDF;
    text-align: center;
    color: #5D5D5D;
}


.divcentral {
    text-align: left;
    position: absolute;
    top: 10%;
    width: 50%;
    left: 0;
    right: 0;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
}

.divhead {
    background-color: #DC3545;
    padding: 10px;
    text-align: center;
}

.divbody {
    background-color: #DC3545;
    padding: 20px;
    color: #ffffff;
    text-align: center;
}

.divfooter {
    background-color: #DFDFDF;
    padding: 20px;
    text-align: center;
    color: #5D5D5D;
}



/*  [estilos de ReturnPagos]  */

.masterTooltip {
    display: block;
    text-decoration: none;
    color: white;
    background-color: #0084FF;
    text-align: center;
    line-height: 30px;
    width: 100px;
    height: 30px;
    transition: background-color .5s;
}

.masterTooltip:hover {
    background-color: #0059FF;
}

.tooltip {
    display: none;
    position: absolute;
    border: 1px solid #333;
    background-color: #161616;
    border-radius: 5px;
    padding: 10px;
    color: #fff;
    font-size: 12px;
}
/*  checkbox un poco mas grande */
.checkbox-grande {
    width: 20px; /* Ancho del checkbox */
    height: 20px; /* Alto del checkbox */
}

@media (max-width: 992px) {
    .checkbox-grande {
        width: 20px; /* Ancho del checkbox */
        height: 20px; /* Alto del checkbox */
    }
}

@media (max-width: 767px) {
    .checkbox-grande {
        width: 17px; /* Ancho del checkbox */
        height: 17px; /* Alto del checkbox */
    }
}


@media screen and (max-width: 767px) {
    .checkbox-grande {
        width: 15px; /* Ancho del checkbox */
        height: 15px; /* Alto del checkbox */
    }
}
@media (max-width: 480px) {
    .checkbox-grande {
        width: 16px; /* Ancho del checkbox */
        height: 16px; /* Alto del checkbox */
    }
}

@media screen and (max-width: 500px) {
    .checkbox-grande {
        width: 14px; /* Ancho del checkbox */
        height: 14px; /* Alto del checkbox */
    }
}


    @media (max-width: 992px) {
        .divcentral {
            width: 60%;
        }
    }

    @media (max-width: 767px) {
        .divcentral {
            width: 70%;
        }
    }

    @media (max-width: 480px) {
        .divcentral {
            width: 90%;
        }
    }

    @media screen and (max-width: 767px) {
        .seleccion-responsive {
            display: none;
        }
    }

    @media screen and (max-width: 500px) {
        .seleccion-responsive {
            display: none;
        }
    }
/*------------------------------------------------------------------
    [margenes grandes]
------------------------------------------------------------------*/
.supermt-1 {
    margin-top: 4rem !important;
}
.supermt-2 {
    margin-top: 5rem !important;
}
.supermt-3 {
    margin-top: 6rem !important;
}
.supermb-1 {
    margin-bottom: 4rem !important;
}

.supermb-2 {
    margin-bottom: 5rem !important;
}

.supermb-3 {
    margin-bottom: 6rem !important;
}
/*------------------------------------------------------------------
    [data table]
------------------------------------------------------------------*/
.dataTables_info {
    font-size: 0.8rem;
}
.dataTables_paginate{
    margin-top:30px;
}

.datatable_td > tr > td{
    text-align:center;
}
table.dataTable.dataTable_width_auto {
    width: auto;
}
/*------------------------------------------------------------------
    [cartola cabecera]
------------------------------------------------------------------*/
@media (max-width: 768px) {
    .text-center768 {
        text-align: center !important
    }
}

/*------------------------------------------------------------------
    compocision de la tabla de pagos, cuando la pantalla es menor a 576px
------------------------------------------------------------------*/
@media (max-width: 576px) {
    .table-res-xs {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-around !important;
    }
}



/* CSS personalizado para el contenido del table, para pantallas menores a 576px */
@media (max-width: 576px) {
    /* Aplica un ancho del 90% a los <th> y <td> de la tabla con la clase "table-modal-sm" */
    .table-modal-sm th,
    .table-modal-sm td {
        width: 85% !important; 
        font-size: 0.7rem;
    }
}



/* CSS personalizado para el contenido del modal, para pantallas menores a 576px */
@media (max-width: 576px) {

    .table-modal-sm td {
        width: 60% !important;
        font-size: 0.5rem;
    }

    .table-modal-sm th {
        max-width: 12px;
    }
}

/* hover  */
#seleccionaOtro{
   color: var(--Color1-1)
}
    #seleccionaOtro:hover {
        filter: brightness(120%);
    }