@media (max-height: 900px) {
    .hide-on-small-height {
        display: none !important;
    }
}

body {
    font-family: 'Roboto' !important;
}

@media (max-width: 1280px) and (max-height: 768px) {
    .chart-container {
        max-width: 600px !important; /* Ajusta el tamaño máximo en estas resoluciones */
        max-height: 90% !important; /* Usa un porcentaje más pequeño para caber en 720px */
    }
}

@media (max-width: 900px) {
    .chart-container {
        width: 70% !important; /* Tamaño reducido en pantallas más pequeñas */
    }
}

@media (max-width: 768px) {
    .chart-container {
        width: 90% !important; /* Tamaño ajustado para tabletas */
    }
}

@media (max-width: 480px) {
    .chart-container {
        width: 100% !important; /* Ancho completo en móviles */
        max-height: 80% !important; /* Ajusta la altura para pantallas más pequeñas */
    }
}