html {
  font-family: Arial;
  display: inline-block;
  margin: 0px auto;
  background-color: #F7F5F1;
  }

:root {
  --col-sensore1:  rgba(232, 132, 249, 0.8);
  --col-sensore2:  rgba(224, 225,  97, 0.8);
  --col-sensore3:  rgba(105, 182,  99, 0.8);
  --col-sensore4:  rgba(68,  152, 204, 0.8);
  --col-sensore5:  rgba(237,  86,  67, 0.8);
  --col-dashboard: rgba( 67,  67,  87, 1);
  --col-temperature: lightgray;
  --col-umidita:     lightgray;
  --col-tecnico:     lightgray;
  --col-spare:       gray;
  }
  
.img {
  style="width:60%"
}

.intesta {
  display: flex;
  width: 550px; /* Larghezza del rettangolo */
  height: 250px; /* Altezza del rettangolo */
  }

h1 {
  color: #0F3376;
  font-size: 1.5rem;
  }

p {
  font-size: 1.1rem;
 }

.sp2 {
  font-size: 1.3rem;
 }

.spaziatura1 {
  margin-bottom: 7px; /* Margine specifico per questo paragrafo */
  }

.button {
  display: inline-block;
  background-color: #008CBA;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 13px 30px;
  text-decoration: none;
  font-size: 20px;
  margin: 2px;
  cursor: pointer;
  width: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
  }

.button2 {
  background-color: #f44336;
  padding: 10px 25px;
  }

.units {
  font-size: 1.5rem;
  vertical-align:baseline;
 }

.sensor-labels {
  font-size: 1.5rem;
  vertical-align:baseline;
  }


/* Definisci lo stile per il rettangolo */
.container {
   display: flex;
   justify-content: center; /* Centra le due colonne orizzontalmente */
   align-items: center;
   flex-wrap: wrap; /* Per schermi piccoli */
   }

.portafoto {
   width: 450px; /* Larghezza del rettangolo */
   height: 377px; /* Altezza del rettangolo */
   background-color: white;
   color: #0F3376; /* Colore del testo */
   background-color: #F7F5F1;
   display: flex;
   /* flex-direction: column; /* Disposizione verticale del testo */
   justify-content: center; /* Centra il testo orizzontalmente */
   text-align: left;
   border-radius: 10px; /* Angoli arrotondati opzionali */
   }

.pf1 {
    justify-content: center; /* Centra il testo orizzontalmente */
    align-items: center; /* Centra il testo verticalmente */
    height: 200px; /* Altezza del rettangolo */
    }

.pf2 {
    align-items: center; /* Centra il testo verticalmente */
    height: 200px; /* Altezza del rettangolo */
    justify-content: center; /* Centra il testo orizzontalmente */
    font-size: 1.2rem;
    line-height: 1.5;
    }

.pf3 {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     text-align: center;
     font-size: 1.2rem;
     line-height: 1.7;
     margin-top: -20px;
     width: 100%;
     height: 75%;
     }

.pf4 {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     text-align: left;
     margin-top: -20px;
     }


.pft {
      line-height: 2;
     /* padding-top: 5px;
      padding-bottom: 10px; */
      font-size: 1.4rem;
      margin: 5px;
      }

.iframe-title {
      text-align: center;
      font-size: 24px;
      margin-bottom: -9px;
      padding-top: 8px;
      padding-bottom: 8px;
      margin-right: 7%;
      margin-left: 7%;
      color: #333;
      }

.iframe-container {
      display: flex;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;
           /*   background-color: rgba(0, 0, 255, 0.5); */
      padding-top: 8px;
      padding-bottom: 15px;
      margin-right: 7%;
      margin-left: 7%;
      }

iframe {
      border: none;
      border-radius: 8px;
      }

.stat {
    margin-top: -8px;
    margin-bottom: -23px;
    margin-left: 100px;
    margin-right: 100px;
    }

#statistiche {
  display: grid;
/*  grid-template-columns: repeat(2, 50%); */
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 53px;
  gap: 19px;
  align-items: start;
  margin-top: 0; /* importante: evita distacco dal bordo alto */
  justify-items: stretch; /* allunga i figli per tutta la larghezza della colonna */
  align-items: stretch; /* allunga i figli per tutta l’altezza della riga disponibile */ }
}

/* Fa sì che il titolo si estenda su entrambe le colonne */
#statistiche .pft {
  grid-column: 1 / -1;
  text-align: center;
  padding: 0;
}

/* I pulsanti si adattano bene al grid */
#statistiche .button {
  width: 104%;
  padding: 10px 0;
  height: 100%; /* o un’altezza fissa che va bene per tutti – cambia in base al tuo layout */
  padding: 0;   /* se vuoi rimuovere padding extra */
  display: flex;
  justify-content: center;
  align-items: center;
}