/* Estilos para .custom-class en diferentes tamaños de pantalla */
/* Aplicar una fuente única a todos los elementos dentro de .custom-class */
.custom-class * {

    /* Especifica la fuente deseada */
    /* font-family: "Arial", sans-serif !important;  */
    font-family: "Roboto", "Arial", sans-serif !important;
}

/* Teléfonos en modo vertical (pantallas pequeñas) */
@media (max-width: 575.98px) {
    .custom-class * {
        font-size: 14px !important; /* Tamaño de fuente reducido para móviles en modo vertical */
        max-width: 100% !important;
        height: 90% !important;
    }
}

/* Teléfonos en modo horizontal (pantallas pequeñas) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .custom-class * {
        font-size: 16px !important; /* Tamaño de fuente ligeramente mayor para horizontal */
        max-width: 100% !important;
        height: 90% !important;
    }
}

/* Tablets pequeñas (modo vertical y horizontal) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .custom-class * {
        font-size: 18px !important; /* Ajuste adecuado para tablets */
        max-width: 100% !important;
        height: 90% !important;
    }
}

/* Laptops pequeñas y medianas */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .custom-class * {
        font-size: 16px !important;
        max-width: 100% !important;
        height: 90% !important;
    }
}

/* Laptops grandes y desktops */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .custom-class * {
        font-size: 16px !important;
        max-width: 100% !important;
        height: 90% !important;
    }
}

/* Monitores muy grandes (>= 1400px) */
@media (min-width: 1400px) {
    .custom-class * {
        font-size: 18px !important; 
        /* Aumento de tamaño de fuente para monitores grandes */
        max-width: 100% !important;
        height: 90% !important;
    }
}