.elementor-1104 .elementor-element.elementor-element-b100c8a > .elementor-widget-container{margin:147px 147px 147px 147px;}/* Start custom CSS for html, class: .elementor-element-b100c8a */<style>
    /* Applica lo sfondo scuro e il colore del testo a tutta la pagina */
    body {
        background-color: #2c2c2c; /* Sfondo grigio scuro */
        color: #ffffff;            /* Testo bianco */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: sans-serif;
    }

    /* Stile per il contenitore principale del grafico */
    .chart-container {
        width: 400px;
        background-color: #1e1e1e; /* Sfondo del riquadro ancora più scuro */
        padding: 20px;
        border-radius: 10px;       /* Angoli arrotondati */
        box-shadow: 0 4px 8px rgba(0,0,0,0.4); /* Ombra discreta */
    }

    /* --- Stili per la Legenda HTML Personalizzata (generata via JS) --- */
    .custom-legend ul {
        list-style: none; /* Rimuove i pallini di default */
        padding: 0;
        display: flex;    /* Dispone gli elementi in linea orizzontale */
        justify-content: space-around; /* Spazia uniformemente gli elementi */
        margin-top: 20px;
    }

    .custom-legend li {
        display: flex;
        align-items: center; /* Allinea verticalmente il testo e il pallino */
        font-size: 14px;
        opacity: 0.8; /* Rende il testo leggermente meno visibile */
    }

    /* Stile per il marcatore colorato (il pallino) */
    .legend-marker {
        width: 10px;
        height: 10px;
        border-radius: 50%; /* Rende il marcatore un cerchio */
        margin-right: 8px;  /* Spazio tra il pallino e il testo */
    }
</style>/* End custom CSS */