#chart-container {
    width: 70%;
    height: 500px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    display: flex;
    justify-content: center;  /* Centra il contenuto orizzontalmente */
    align-items: center;      /* Centra il contenuto verticalmente */
    margin: 0 auto;           /* Centra il contenitore */
    overflow: hidden;         /* Nasconde gli eventuali spazi indesiderati */
}

.chart-container-wrapper {
    display: flex; /* Posiziona gli elementi in riga */
    align-items: flex-start; /* Allinea verticalmente in alto */
    gap: 20px; /* Spazio tra il grafico e il pannello dei controlli */
    justify-content: center; /* Centra il contenuto */
}

#controls {
    width: 30%; /* Occupa il 30% della larghezza */
    background-color: #ffffff;
    padding: 10px; /* Ridotto per occupare meno spazio */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: auto; /* Adatta l'altezza ai contenuti */
    max-height: 500px; /* Limita l'altezza massima */
    overflow-y: auto; /* Permette lo scorrimento verticale se necessario */
    position: sticky;
    top: 0; /* Rimane visibile quando si scorre */
    box-sizing: border-box;
}

#controls h2 {
    text-align: center;
    color: #333;
}

label {
    font-size: 14px;
    color: #000000;
    display: block;
    margin: 5px 0;
}

select, input[type="checkbox"] {
    width: 100%;
    padding: 8px;
    margin: 5px 0 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.checkbox-container {
    margin-bottom: 10px;
}

.checkbox-container label {
    font-size: 14px;
}

.checkbox-container input[type="checkbox"] {
    margin-right: 10px;
}