body {
            background-color: rgb(17, 18, 23);
            font-family: Inter, Helvetica, Arial, sans-serif;
            color: #D8D8D8;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        header {
            background-color: rgb(24, 27, 31);
            width: 100%;
            text-align: center;
            padding: 10px 0;
            margin-bottom: 25px; /* Aggiungi margine inferiore all'header */
        }
      .header-content i {
           font-size: 48px; /* Dimensione dell'icona */
           color: #D8D8D8;
        }
       footer {
            background-color: rgb(24, 27, 31);
            width: 100%;
            text-align: center;
            padding: 10px 0;
            margin-top: 20px; /* Aggiunto per creare spazio tra i grafici e il footer */
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            width: 100%;
            padding: 20px 0;
        }

        .container {
            width: 600px;
            border: 1px solid #666;
            border-radius: 4px;
            overflow: hidden;
        }

        canvas {
            width: 100% !important;
            height: auto !important;
        }
        
       .titolo-pannello {
            font-family: Inter, Helvetica, Arial, sans-serif;
            margin-bottom: 0px;
            padding: 5px 5px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 1rem;
            font-weight: 500;
            background-color: rgb(24, 27, 31, 0.2);
       }
       
       h1 {
            color: #D8D8D8;
            margin: 0;
            font-size: 1.5rem;
            margin: 0; /* Rimuove i margini di default */
            padding: 0; /* Rimuove i padding di default */
        }
        
       h6, .h6 {
           margin: 0px 0px 0.45em;
           font-size: 1rem;
           line-height: 1.57143;
           font-weight: 500;
           letter-spacing: 0.01071em;
           font-family: Inter, Helvetica, Arial, sans-serif;
      } 
      
      .colored-line-blue {
          width: 14px;
          height: 4px;
          border-radius: 9999px;
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle; /* Allineamento verticale */
          background-color: blue; /* Cambia il colore a tuo piacimento */
      }
      
      .colored-line-red {
          width: 14px;
          height: 4px;
          border-radius: 9999px;
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle; /* Allineamento verticale */
          background-color: red; /* Cambia il colore a tuo piacimento */
      }
      
      .colored-line-orange {
          width: 14px;
          height: 4px;
          border-radius: 9999px;
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle; /* Allineamento verticale */
          background-color: orange; /* Cambia il colore a tuo piacimento */
      }
      
      .colored-line-green {
          width: 14px;
          height: 4px;
          border-radius: 9999px;
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle; /* Allineamento verticale */
          background-color: green; /* Cambia il colore a tuo piacimento */
      }
      
      .colored-line-purple {
          width: 14px;
          height: 4px;
          border-radius: 9999px;
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle; /* Allineamento verticale */
          background-color: purple; /* Cambia il colore a tuo piacimento */
      }
      
      .colored-line-lightslategray {
          width: 14px;
          height: 4px;
          border-radius: 9999px;
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle; /* Allineamento verticale */
          background-color: lightslategray; /* Cambia il colore a tuo piacimento */
      }
      
      .colored-line-gray {
          width: 14px;
          height: 4px;
          border-radius: 9999px;
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle; /* Allineamento verticale */
          background-color: gray; /* Cambia il colore a tuo piacimento */
      }
      
      .colored-line-brown {
          width: 14px;
          height: 4px;
          border-radius: 9999px;
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle; /* Allineamento verticale */
          background-color: brown; /* Cambia il colore a tuo piacimento */
      }
      
      .colored-line-darkblue {
          width: 14px;
          height: 4px;
          border-radius: 9999px;
          display: inline-block;
          margin-right: 8px;
          vertical-align: middle; /* Allineamento verticale */
          background-color: darkblue; /* Cambia il colore a tuo piacimento */
      }
      
      #buttonContainer {
         float: left;
         border-radius: 5px; /* Bordi arrotondati di 5px */
         background-color: #4A4A4A;
         padding: 4px; /* Aggiunge un po' di padding per migliorare l'aspetto */
         box-sizing: border-box; /* Assicura che la larghezza includa il padding e il bordo */
         background: #000000;
         background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
         background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
         background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
         border: 1px solid #666; /* Bordo di 1px di spessore, lightslategray */
         color: #FFFFFF !important; /* Assicura che il colore del testo sia bianco */
         margin-left: 35px; /* Sposta il bottone verso destra di 20px */
         cursor: pointer; /* Aggiunge un cursore pointer quando si passa sopra il bottone */
         font-weight: bold;
         font-family: Inter, Helvetica, Arial, sans-serif;
         font-size: 12px;
         text-align: center; /* Centra il testo del pulsante */
     }
      
      .custom-button {
         background-color: #4A4A4A;
         background: #000000;
         background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
         background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
         background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
         border: 1px solid #666; /* Bordo di 1px di spessore, lightslategray */
         color: #FFFFFF !important; /* Assicura che il colore del testo sia bianco */
         border-radius: 5px; /* Bordi arrotondati di 5px */
         font-weight: bold;
         font-family: Inter, Helvetica, Arial, sans-serif;
         font-size: 12px;
         float: left;
         margin-left: 5px; /* Sposta il bottone verso destra di 20px */
         padding: 4px; /* Aggiunge un po' di padding per migliorare l'aspetto */
         box-sizing: border-box; /* Assicura che la larghezza includa il padding e il bordo */
         cursor: pointer; /* Aggiunge il puntatore del mouse per il pulsante */
         text-align: center; /* Centra il testo del pulsante */
    }

       #showLastThreeCharts { 
         background-color: #4A4A4A;
         background: #000000;
         background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
         background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
         background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
         border: 1px solid #666; /* Bordo di 1px di spessore, lightslategray */
         color: #FFFFFF !important; /* Assicura che il colore del testo sia bianco */
         border-radius: 5px; /* Bordi arrotondati di 5px */
         font-weight: bold;
         font-family: Inter, Helvetica, Arial, sans-serif;
         font-size: 12px;
         float: right;
         margin-right: 35px; /* Sposta il bottone verso destra di 20px */
         cursor: pointer; /* Aggiunge un cursore pointer quando si passa sopra il bottone */
         padding: 4px; /* Aggiunge un po' di padding per migliorare l'aspetto */
         box-sizing: border-box; /* Assicura che la larghezza includa il padding e il bordo */
         text-align: center; /* Centra il testo del pulsante */
  

    }
    
    /* Stile predefinito della casella di input */
       #inputBox {
         display: block;
         float: left;
         background-color: #4A4A4A;
         background: #000000;
         background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
         background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
         background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
         border: 1px solid #666; /* Bordo di 1px di spessore, lightslategray */
         color: #FFFFFF !important; /* Assicura che il colore del testo sia bianco */
         border-radius: 5px; /* Bordi arrotondati di 5px */
         font-weight: bold;
         font-family: Inter, Helvetica, Arial, sans-serif;
         font-size: 12px;
         margin-left: 6px;
         padding: 4px; /* Aggiunge un po' di padding per migliorare l'aspetto */
         box-sizing: border-box; /* Assicura che la larghezza includa il padding e il bordo */
         width: 74px;
         outline: none;
      }
      
       .hidden {
         display: none !important;
      }

      .datePicker {
        display: block;
        float: left;
        background-color: #4A4A4A;
        background: #000000;
        background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
        background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
        background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
        border: 1px solid #666; /* Bordo di 1px di spessore, lightslategray */
        color: #FFFFFF !important; /* Assicura che il colore del testo sia bianco */
        border-radius: 5px; /* Bordi arrotondati di 5px */
        font-weight: bold;
        font-family: Inter, Helvetica, Arial, sans-serif;
        font-size: 12px;
        margin-left: 6px;
        padding: 4px; /* Aggiunge un po' di padding per migliorare l'aspetto */
        box-sizing: border-box; /* Assicura che la larghezza includa il padding e il bordo */
        width: 74px;
    
     }
     
/* Cambia il colore del testo all'interno dell'input */
     .datePicker::placeholder {
       color: white; /* Testo bianco */
     }