@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/static/Roboto-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

header{
    margin-top: 46px;

}

.prev{

    text-align: right;
    font-family: "Roboto" !important;
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    color: #060606;
    margin-top: 4px;
    float: right;
}



.opaco {
    opacity: 0.5; /* Define la opacidad */
    pointer-events: none; /* Opcional: deshabilita clics en el botón */
}


.checkbox{
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)) !important;
    border: 1px solid #3072DD;
}


.next{

    text-align: left;
    font-family: "Roboto" !important;
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    color: #060606;
    margin-top: 4px;
    float: left;

}




.card-body-school2{
    right: 20px;
    bottom: 40px;
    left: 10px;
    position: fixed;
}

.footer{
    position: absolute;
    width: 100%;
    bottom: 0px;
    z-index: 10;
    background: #387dbc;
}


label {
    display: block;
}

.grade{
    display: block;
}

body {
    overflow-y: hidden;
    height: 100%;
    background-color: #f5f5f7 !important;

}

body.internal-site {
    overflow-y: auto;
}

.logo{
    width: 70px;
    height: 47.388px;
    overflow: visible;
}

.footer_children{
    margin-top: -21px;
    display: none;
}

.py-1 {
    padding: 16px !important;
    line-height: normal !important;
    font-family: "Roboto" !important;
    color: #000000 !important;
}

.div_menu{
    margin-right: 27px;
}

.footer_bbb{
    margin-right: 45px;
}

.container-main{
    background: #f5f5f7;
    position: absolute;
    width: 100%;
    height: -webkit-fill-available;
    overflow-y: scroll;
    padding-bottom: 174px;
}



.container-main-school{
    background: #f5f5f7;
    position: absolute;
    width: 100%;
    height: -webkit-fill-available;
    overflow-y: scroll;
    padding-bottom: 32px;
}


.input-search {
    width: 100%;
    max-width: 326px;
    margin: 0 auto;
}

.card {
    border-radius: 0 !important;
    background: #f5f5f7 !important;
}

.search{
    border-color: #f5f5f7 !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    border-radius: 28px !important;
    background: #ffffff;
    height: 55px;
}


input[type="search"] {
    background-image: url('../img/search.png'); /* Cambia esta ruta a tu imagen */
    background-repeat: no-repeat;
    background-position: calc(100% - 18px) center; /* Ajusta la posición a la derecha con margen de 18px */
    background-size: 30px; /* Ajusta el tamaño de la imagen */
}

input[type="search"]::placeholder {
    font-family: "Roboto";
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    color: #000000;
    text-align: left;
    
}

/* Ocultar la imagen cuando el input recibe el foco */
input[type="search"]:focus {
    background-image: none; /* Eliminar la imagen de fondo */
}


/* Ocultar el placeholder cuando el input recibe el foco */
input[type="search"]:focus::placeholder {
    opacity: 0; /* Hacer el placeholder invisible */
}



.text_menu{
    font-family: "Roboto";
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    color: #707070;
}


.bg-primary-zolut{
    height: 87px;
    background: #387dbc
}

.bg-primary-zolut-pre-footer{
    height: 87px;
    background: #ffffff
}

.text-pre-footer{
    font-family: "Roboto";
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    color: #221e20;
}

.bg-primary-zolut-footer{
    height: 87px;
    background: #387dbc;
}

.color_text_footer{
    color: #3072DC;
    font-style: italic;
    font-size: 18px;
}

.footer_text{
    padding-top: 16px;
    padding-bottom: 12px;
}

.img_footer{
    width: 233px;
    height: 59px;
}


.p-4 {
    padding: 1rem !important;
}


/* width */
::-webkit-scrollbar {
    width: 4px;
    height: 100px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #959595;
    border-radius: 28px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #959595;
}

.text-primary {
    --bs-text-opacity: 1;
    font-family: "Roboto";
    font-size: 13px !important;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    color: #3072dc;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

.img-fluid{
    cursor: pointer;
}

.card {
    border-radius: 0 !important;
    background: #f5f5f7 !important;
    cursor: pointer;
}



  /**
 * Theme Name:        Zolut
 * Theme URI:         https://www.zolut.com/
 * Description:       Zolut wordpress theme
 * Version:           0.1.0
 * Author:            Zolut
 * Author URI:        https://www.zolut.com/
 * Tags:              custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 * Text Domain:       zolut
 * Domain Path:       /languages
 * Tested up to:      6.7.1
 * Requires at least: 5.0
 * Requires PHP:      7.1
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

.carousel-control-prev-icon, .carousel-control-next-icon {
    background-size: 50% 50% !important;
}

.custom-border-md {
    border-color: black !important;
    border-width: 2px !important;
}

.custom-fs-7 {
    font-size: 13px !important;
}

.carousel-indicators {
    margin-right: 35% !important;
    margin-left: 35% !important;
    background: #80808040 !important;
}

.carousel-indicators [data-bs-target] {
    width: 7px !important;
    height: 7px !important;
    border-top: 7px solid rgba(0,0,0,0) !important;
    border-bottom: 7px solid rgba(0,0,0,0) !important;
    border-radius: 100% !important;
    margin-right: 14px !important;
    margin-left: 14px !important;
}



@media (max-width: 659px) {
    #carousel-of-schools .card {
        border-radius: 0 !important;
    }
    #carousel-of-schools .card .card-body {
        background-color: transparent !important;
        padding: 8px;
    }
    .custom-no-border-md {
        border-color: transparent !important;
        border-width: 0 !important;
    }
    .custom-border {
        width: 77px;
        height: 77px;
        border-radius: 6px;
        filter: drop-shadow(3px 3px 1.5px rgba(0, 0, 0, 0.16));
        background: #ffffff;
    }
    .container-fluid-main{
        padding-left: 0px;
        padding-right: 0px;
    }
    .carousel{
        padding-top: 14px;
    }
    .logo{
        margin-left: 5px;
    }
    .py-1 {
        padding: 8px !important;
        line-height: normal !important;
        font-family: "Roboto" !important;
        color: #000000 !important;
    }
    .prev{
        display:none;
    }

    .next{
        display:none;
    }
}

@media (min-width: 660px) and (max-width: 1023px) {
    .p-md-0 {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        height: 77px;
        border-radius: 6px;
        filter: drop-shadow(3px 3px 1.5px rgba(0,0,0,0.16 ));
        background: #ffffff
    }
    .p-1 {
        margin-left: 9px;
    }
    .div_menu_inicio {
        margin-right: 20px !important;
    }
    .container, .container-sm {
        width: 100%;
        max-width: 657px;
        margin: 0 auto;
    }
    .p-md-0 {
        padding: 0 !important;
    }
    .d-md-block {
        display: block !important;
    }
    .m-md-3 {
        margin: 25px !important;
    }
    .custom-border-md {
        border-color: transparent !important;
        border-width: 0px !important;
    }
    .logo{
        margin-left: 50px;
    }
    .div_menu {
        margin-right: 57px;
    }
    .col-4 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }
    #colophon .col-4{
        flex: 0 0 auto !important;
        width: 33.33333333% !important;
    }
    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .p-lg-5 {
        padding: 0px !important
    }
    .pb-4 {
        margin-top: -5px;
    }
    .prev{
        margin-right: 10px;
    }

    .next{
        margin-left: 10px;
    }
}



@media (min-width: 1024px){
    .p-md-0 {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        height: 77px;
        border-radius: 6px;
        filter: drop-shadow(3px 3px 1.5px rgba(0,0,0,0.16 ));
        background: #ffffff
    }
    .div_menu_inicio {
        margin-right: 40px !important;
    }
    .m-md-3 {
        margin: 25px !important;
    }
    .p-lg-5 {
        padding: 0px !important
    }
    .p-md-0 {
        padding: 0 !important;
    }
    .custom-border-md {
        border-color: transparent !important;
        border-width: 0px !important;
    }
    .logo{
        margin-left: 50px;
    }
    .div_menu {
        margin-right: 67px;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;
    }
    .pb-4 {
        margin-top: -5px;
    }

    .prev{
        margin-right: 67px;
    }

    .next{
        margin-left: 67px;
    }
}




@media (min-width: 1280px){
   
    .div_menu_inicio {
        margin-right: 40px !important;
    }
    .footer_children{
        display: block;
    }
    .col_footer_children{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%; /* Asegúrate de que el contenedor tenga una altura definida si es necesario */
    }
    
    .col_footer_children img {
        max-width: 100%; /* Asegúrate de que la imagen no exceda el ancho del contenedor */
        height: auto; /* Mantiene la proporción de la imagen */
    }
    .pb-4 {
        margin-top: -5px;
    }


    .prev{
        margin-right: 90px;
    }

    .next{
        margin-left: 90px;
    }
    
  
}


.input-school{

    border: 0px;

}







.bg-primary-zolut-footer-page{
    height: 28px;
    background: #387dbc;
}

.input-school{
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
}

.bg-primary-zolut-school{
    height: 103px;
    background: #387dbc;
}


.img-right{
    float: right;
}


.img-left{
    float: left;
}


.card-school{
    width: 100%;
    margin: 0 auto;
    height: 92px;
    border-radius: 6px;
    filter: drop-shadow(3px 3px 1.5px rgba(0, 0, 0, 0.16));
    background: #ffffff;
    margin-top: -10px;
}


.p-md-0-school{
    width: 258px;
    margin: 0 auto;
    background: #ffffff;
    margin-top: 14px;


}


.py-1-school {
    line-height: normal !important;
    font-family: "Roboto" !important;
    color: #000000 !important;
    padding-top: 7px;
    background-color: #fff;
}


.py-2-school {
    background-color: #fff;
}


.img-school{
    margin-top: -4px;
}


.bg-primary-zolut-school-select {
    height: 48px;
    background: #fff;
    color: #000;
}

.top_select{
    margin-top: -5px;
}


.p-md-0-school-list {
    border-radius: 6px;
    filter: drop-shadow(3px 3px 1.5px rgba(0, 0, 0, 0.16));
    background: #ffffff;
}

.p-md-0-school-class {
    border-radius: 6px;
    filter: drop-shadow(3px 3px 1.5px rgba(0, 0, 0, 0.16));
    background: #ffffff;
}

.p-md-0-school-genero {
    border-radius: 6px;
    filter: drop-shadow(3px 3px 1.5px rgba(0, 0, 0, 0.16));
    background: #ffffff;
}


.radio-school{
    width: 15px;
    height: 15px;
    border-color: #3072dc;
    border-width: 2px;
    border-style: solid;
    background: #ffffff;
    position: absolute;
    margin-top: 2px;
    left: 80px;
    appearance: none;
    border-radius: 10px;
}

.radio-school-class{
    width: 15px;
    height: 15px;
    border-color: #3072dc;
    border-width: 2px;
    border-style: solid;
    background: #ffffff;
    position: absolute;
    margin-top: 2px;
    left: 30px !important;
    appearance: none;
    border-radius: 10px;
}
input[type="radio"]:checked{
    appearance: auto;
}


.m-md-3-margin-items{
    margin: 15px !important;
}



@media (max-width: 659px) {
    .p-md-0-school-list2 {
        width: 100%;
        max-width: 130px;
        margin: 0 auto;
        height: 40px;
        border-radius: 6px;
        filter: drop-shadow(3px 3px 1.5px rgba(0, 0, 0, 0.16));
        background: #ffffff;
    }
    #grade .col-4 {
        flex: 0 0 auto;
        width: 50%;
    }
    #class .col-4 {
        flex: 0 0 auto;
        width: 100%;
    }
    .radio-school-class{
        left: 60px;
    }
    .col-6 {
        flex: 0 0 auto;
        width: 100%;
    }
    .custom-border-school {
        width: 77px;
        height: 77px;
        background: #ffffff;
    }
    #carousel-of-schools .card .card-body-school {
        background-color: #fff !important;
        padding: 11px;
    }
    .m-md-3-margin {
        margin: 15px !important;
    }
    .p-md-0-school-list {
        height: 40px;
    }
    .p-md-0-school-class {
        height: 40px;
        margin-left: auto;
        margin-right: auto;
        width: 300px;
    }
    .p-md-0-school-genero {
        height: 40px;
        margin-left: auto;
        margin-right: auto;
        width: 300px;
    }
    .radio-school{
        left: 17%;
    }
}


@media (min-width: 660px) and (max-width: 1023px) {
    .p-md-0-school-list{
        padding: 30px !important;
        max-width: 300px;
        height: 77px;
    }
    .p-md-0-school-class{
        padding: 30px !important;
        max-width: 300px;
        height: 77px;
    }
    .p-md-0-school-genero{
        padding: 30px !important;
        max-width: 300px;
        height: 77px;
    }
}


@media (min-width: 1024px){
    
    .p-md-0-school-list{
        padding: 30px !important;
        max-width: 300px;
        height: 77px;
    }
    .p-md-0-school-class{
        padding: 30px !important;
        max-width: 300px;
        height: 77px;
    }

    .p-md-0-school-genero{
        padding: 30px !important;
        max-width: 300px;
        height: 77px;
    }
    .content-end{
        position: absolute;
        right: 0px;
        width: 100%;
    }
}

@media (min-width: 1280px){
   
    .p-md-0-school-list{
        padding: 30px !important;
        max-width: 300px;
        height: 77px;
    }
    .p-md-0-school-class{
        padding: 30px !important;
        max-width: 300px;
        height: 77px;
    }
    .p-md-0-school-genero{
        padding: 30px !important;
        max-width: 300px;
        height: 77px;
    }
}








/*

ITEMS CSS

*/

.checkbox-school{
    width: 20px;
    height: 20px;
    border-color: #3072dc;
    border-width: 2px;
    border-style: solid;
    background: #ffffff;
    position: absolute;
    margin-top: 0px;
    left: 60px;
    appearance: none;
}
input[type="checkbox"]:checked{
    background-color: #FAE24C;
    border-width: 4px;
}



.p-md-0-school-items {
    border-radius: 6px;
    filter: drop-shadow(3px 3px 1.5px rgba(0, 0, 0, 0.16));
    background: #ffffff;
}

#espacio{
    display: none;
}


.button-next-display{
    display: grid;
    /*background: none !important;*/
}

.cinta_footer{
    background-color: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: -9px !important;
    filter: none !important;
    margin-bottom: -10px;
    height: 90px !important;
}


/* Rectangle 111 */

.button{

    width: 300px;
    height: 77px;
    border-radius: 39px;
    filter: drop-shadow(3px 3px 1.5px rgba(0,0,0,0.16 ));
    background: #fae24c;
    border: 0px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;

}




@media (max-width: 659px) {
    .p-md-0-school-items {
        height: 40px;
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .school-items .col-4 {
        flex: 0 0 auto;
        width: 100% !important;
    }
    .school-items .card .card-body-school {
        background-color: #fff !important;
        padding: 11px !important;
    }
    .school-items-all .col-4 {
        flex: 0 0 auto;
        width: 100% !important;
    }
    .school-items-all .card .card-body-school {
        background-color: #fff !important;
        padding: 11px !important;
    }
    .button {
        width: 300px;
        height: 40px;
    }
    .button-next-display{
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .cinta_footer{
        height: 52px !important;
    }
 
}


@media (min-width: 660px) and (max-width: 1023px) {
    .p-md-0-school-items{
        padding: 30px !important;
        max-width: 300px;
        width: 300px;
        height: 77px;
        margin-right: auto;
        margin-left: auto;
    }
    .school-items .col-4 {
        flex: 0 0 auto;
        width: 100% !important;
    }
    .school-items-all .col-4 {
        flex: 0 0 auto;
    }
    
}


@media (min-width: 1024px){
    .p-md-0-school-items{
        padding: 30px !important;
        max-width: 300px;
        width: 300px;
        height: 77px;
        margin-right: auto;
        margin-left: auto;
    }

    .checkbox-school-all{
        left: 250px;
    }

    .school-items .col-4 {
        flex: 0 0 auto;
        width: 50%;
    }
    .school-items-all .col-4 {
        flex: 0 0 auto;
        width: 50%;
    }
    #espacio{
        display:block;
    }

    #espacio_central{
        width: 660px  !important;
    }

    .p-md-0-school-items-all{
        max-width: 100% !important;
        width: 100% !important;
    }
}


@media (min-width: 1280px){
    .p-md-0-school-items{
        padding: 30px !important;
        max-width: 300px;
        width: 300px;
        height: 77px;
        margin-right: auto;
        margin-left: auto;
    }
    #espacio{
        display:block;
    }

    #espacio_central{
        width: 660px  !important;
    }
}



/* STUDENT’S SCHOOL */

.label-select-all {
    position: absolute;
    height: 13px;
    font-family: "Roboto";
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    color: #707070;
    top: -14px;
    left: 0px;
}


.margin-select-all{
    margin-top: 20px;
}


.change-select-all{
    /* CHANGE */
    position: absolute;
    width: 44px;
    height: 13px;
    font-family: "Roboto";
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    color: #3072dc;
    top: -14px;
    right: 0px;
    text-decoration: none;

}


.value-name-full{
    /* Paquita la del Barrio */
    position: absolute;
    width: 250px;
    height: 15px;
    font-family: "Roboto";
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    color: #000000;
}



.p-md-0-school-select-all {
    border-radius: 6px;
    filter: drop-shadow(3px 3px 1.5px rgba(0, 0, 0, 0.16));
    background: #ffffff;
}

@media (max-width: 659px) {
    .p-md-0-school-select-all {
        height: 92px;
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    } 
}

@media (min-width: 660px) and (max-width: 1023px) {
    .p-md-0-school-select-all {
        padding: 74px !important;
        max-width: 631px;
        width: 631px;
        height: 92px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 16px !important;
    }
}

@media (min-width: 1024px){
    .p-md-0-school-select-all {
        padding: 74px !important;
        max-width: 631px;
        width: 631px;
        height: 92px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 16px !important;
    }
}

@media (min-width: 1280px){
    .p-md-0-school-select-all {
        padding: 74px !important;
        max-width: 631px;
        width: 631px;
        height: 92px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 16px !important;
    }
}







/* CARRITO COMPRAS */

.row_carrito{
    margin-top: 20px;
}

.monto_carrito{
    /* Subtotal $120.00 */
    width: 137px;
    height: 21px;
    font-family: "Roboto";
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    color: #000000;
}


.title_carrito{
    font-size: 17px;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    color: #000000;
    line-height: normal;
}

.prince_carrito{
    /* $3.20 each */
    font-family: "Roboto";
    font-size: 17px;
    font-weight: 500;
    font-style: normal;
    text-align: left;
    color: #000000;
    margin-top: 10px;
}


.fondo_item_monto_carrito{
    /* Rectangle 182 */
    width: 370px;
    height: 91px;
    background: #f5f5f7;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 10px solid #fff;
    text-align: center;
}


.fondo_item_carrito{
    /* Rectangle 182 */
    width: 370px;
    height: 191px;
    background: #f5f5f7;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 10px solid #fff;
    text-align: center;
}


.boton_carrito{
    /* Rectangle 168 */
    width: 300px;
    height: 40px;
    border-radius: 39px;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.16 ));
    background: #ffde00;
    border: 0px;
    margin-top: 9px;
}



.cantidad_carrito{
    /* Rectangle 172 */
    width: 70px;
    height: 30px;
    border-color: #ffde00;
    border-width: 2px;
    border-style: solid;
    border-radius: 39px;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.16 ));
    background: #ffffff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 13px;
}


.col-4-carrito{
    flex: 0 0 auto !important;
    width: 33.33333333% !important;
}