/* reset di base per margini e padding */
* {
  /* Seleziona tutti gli elementi della pagina. */
  margin: 0;
  /* Rimuove il margine predefinito. */
  padding: 0;
  /* Rimuove il padding predefinito. */
  box-sizing: border-box;
  /* Include bordo e padding nelle dimensioni. */
  font-size: 0.96rem;
  /* Imposta la dimensione del testo di base. */
}

/* Chiude il reset globale. */

/* per tutto il documento, utilizza il font Roboto e imposta il box-sizing a border-box */
body {
  /* Applica lo stile di base al documento. */
  font-family: "Roboto", sans-serif;
  /* Imposta il carattere principale. */
  background-color: #212121;
  /* Imposta il colore di sfondo. */
  color: #fff;
  /* Imposta il colore del testo. */
}

/* Chiude il body. */
-----------------men----------------------- */

/* le ancore del menù  */
.header .logo,
.header .menu li a {
  /* Seleziona il logo e i link del menu. */
  text-decoration: none;
  /* Rimuove la sottolineatura dei link. */
  color: gray;
  /* Imposta il colore grigio dei link. */
}

/* Chiude la regola condivisa. */
/* colore più scuro al passaggio */

.header .logo:hover {
  /* Stile al passaggio del mouse sul logo. */
  background-color: #000;
  /* Crea sfondo nero al passaggio. */
}

/* Chiude la regola hover del logo. */
/* l'eader della pagina */

.header {
  /* Definisce la barra superiore del sito. */
  position: fixed;
  /* Fissa l'header in alto. */
  top: 0;
  /* Lo posiziona all'inizio della pagina. */
  background-color: #181818;
  /* Imposta il colore di sfondo. */
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  /* Aggiunge un'ombra leggera. */
  width: 100%;
  /* Occupa tutta la larghezza. */
  z-index: 1;
  /* Mantiene l'header sopra altri elementi. */
}

/* Chiude l'header. */

/* l'ul del menù */
.header .menu {
  /* Seleziona l'elenco del menu. */
  margin: 0;
  /* Rimuove il margine. */
  padding: 0;
  /* Rimuove il padding. */
  list-style: none;
  /* Rimuove i pallini dell'elenco. */
  overflow: hidden;
  /* Nasconde il contenuto fuori dal box. */
  background-color: #212121;
  /* Imposta il colore di sfondo del menu. */
}

/* Chiude il menu. */

/* le ancore della lista menù */
.header .menu li a {
  /* Stile dei link del menu. */
  display: block;
  /* Trasforma i link in blocchi. */
  padding: 15px;
  /* Spazio interno dei link. */
  border-right: 1px solid gray;
  /* Aggiunge una linea divisoria a destra. */
  text-decoration: none;
  /* Rimuove la sottolineatura. */
  cursor: pointer;
  /* Mostra il cursore a mano quando si passa sopra i link del menu. */
  color: gray;
  /* Imposta il colore del testo dei link del menu. */
}

/* Chiude i link del menu. */

/* colore più scuro al passaggio */
.header .menu li a:hover {
  /* Stile al passaggio del mouse sui link del menu. */
  background-color: #373737;
  /* Cambia sfondo al passaggio. */
}

/* Chiude il hover del menu. */

.header .menu .li-disabled {
  color: darkgray;
  /* Colore del testo per gli elementi disabilitati. */
  padding: 15px;
  /* Spazio interno per gli elementi disabilitati. */
}

/* Chiude gli elementi disabilitati. */

/* spazio e carattere logo */
.header .logo {
  /* Stile del logo. */
  float: left;
  /* Appoggia il logo a sinistra. */
  padding: 10px 20px;
  /* Spazio interno del logo. */
}

/* Chiude il logo. */

/* voci menù */
.header .menu {
  /* Stile della lista del menu. */
  clear: both;
  /* Forza il menu sotto gli elementi flottanti. */
  max-height: 0;
  /* Inizialmente nascosto. */
  transition: max-height 0.6s ease-out;
  /* Animazione di apertura del menu. */
}

/* Chiude il menu nascosto. */
/* posizione del riquadro della ics */
.header .menu-icon {
  /* Stile dell'icona del menu. */
  padding: 24px 20px;
  /* Spazio interno del bottone del menu. */
  margin: 0px 30px 0px 5px;
  /* Margini attorno all'icona. */
  position: relative;
  /* Posizione relativa per elementi figli. */
  float: right;
  /* Allinea l'icona a destra. */
  cursor: pointer;
  /* Mostra il cursore a mano. */
}

/* Chiude l'icona del menu. */

/* il panino centrale */
.header .menu-icon .nav-icon {
  /* Stile della linea centrale del menu a panino. */
  background-color: gray;
  /* Colore della linea centrale. */
  display: block;
  /* Imposta il blocco. */
  width: 18px;
  /* Larghezza della linea. */
  height: 2px;
  /* Altezza della linea. */
  position: relative;
  /* Posizione relativa. */
  transition: background-color 0.2s ease-out;
  /* Animazione del colore di sfondo. */
}

/* Chiude la linea centrale. */

/* il panino superiore e inferiore */
.header .menu-icon .nav-icon::before,
.header .menu-icon .nav-icon::after {
  /* Stile delle linee superiori e inferiori del panino. */
  background-color: gray;
  /* Colore delle linee. */
  content: "";
  /* Crea i pseudo-elementi vuoti. */
  display: block;
  /* Imposta i pseudo-elementi come blocchi. */
  width: 100%;
  /* Larghezza completa. */
  height: 100%;
  /* Altezza piena. */
  transition: all 0.2s ease-out;
  /* Animazione del movimento delle linee. */
  position: absolute;
  /* Posizionamento assoluto. */
}

/* Chiude le linee del panino. */

.header .menu-icon .nav-icon::after {
  /* Stile della linea superiore del panino. */
  top: -5px;
  /* Sposta la linea superiore verso l'alto. */
}

/* Chiude la linea superiore. */

.header .menu-icon .nav-icon::before {
  /* Stile della linea inferiore del panino. */
  top: 5px;
  /* Sposta la linea inferiore verso il basso. */
}

/* Chiude la linea inferiore. */

/* nascondo l'input checkbox */
.header .menu-btn {
  /* Nasconde il checkbox del menu. */
  display: none;
  /* Non viene mostrato. */
}

/* Chiude il checkbox nascosto. */
/* menu dropdown */

.header .menu-btn:checked~.menu {
  /* Quando il checkbox è attivo, mostra il menu. */
  max-height: 500px;
  /* Imposta l'altezza massima del menu aperto. */
}

/* Chiude il menu apribile. */
/* nascondo la linea centrale del menu a tendina */
.header .menu-btn:checked~.menu-icon .nav-icon {
  /* Quando il menu è attivo, nasconde la linea centrale. */
  background-color: transparent;
  /* Rende trasparente la linea centrale. */
}

/* Chiude la linea centrale nascosta. */

/* creo la ics */
.header .menu-btn:checked~.menu-icon .nav-icon::before {
  /* Ruota la linea inferiore per formare la X. */
  transform: rotate(45deg);
  /* Ruota di 45 gradi. */
  top: 0;
  /* Allinea la linea in alto. */
}

/* Chiude il trasformato della linea inferiore. */

.header .menu-btn:checked~.menu-icon .nav-icon::after {
  /* Ruota la linea superiore per formare la X. */
  transform: rotate(-45deg);
  /* Ruota di -45 gradi. */
  top: 0;
  /* Allinea la linea in alto. */
}

/* Chiude il trasformato della linea superiore. */
/* -------------------- body -------------------- */
.div-autetication {
  /* Stile per il div di autenticazione */
  width: 100vw;
  /* Larghezza completa */
  height: auto;
  /* Altezza completa della finestra */
  display: block;
  /* Utilizza il flexbox */
  justify-content: center;
  /* Centra orizzontalmente */
  align-items: center;
  /* Centra verticalmente */
  background-color: #fff;
  /* Colore di sfondo */
  margin: 0 auto;
  /* Centra il div all'interno del body */
  border-radius: 10px;
  /* Angoli arrotondati */
  color: #000;
  /* Colore del testo */
  padding: 20px;
  /* Spaziatura interna */
  margin-top: 20px;
  /* Posiziona il div al centro verticale */
  font-size: 1.5rem;
  /* Dimensione del testo */
  text-align: center;
  /* Centra il testo all'interno del div */
  /* text-transform: bold; Trasforma il testo in maiuscolo */
}

/* il paragrafo di benvenuto */
.h1-welcome {
  font-size: 1.5rem;
  /* Dimensione del testo per il benvenuto */
  margin-top: 100px;
  /* Spaziatura superiore */
  text-align: center;
  /* Centra il testo orizzontalmente */
}

/* --------------------- form -------------------- */
/* il pulsante normale */
.btn-normal {
  background-color: #007bff;
  /* Colore di sfondo del pulsante */
  color: #fff;
  /* Colore del testo del pulsante */
  border: none;
  /* Nessun bordo */
  padding: 10px 20px;
  /* Spaziatura interna */
  border-radius: 5px;
  /* Angoli arrotondati */
  cursor: pointer;
  /* Cambia il cursore al passaggio del mouse */
  transition: background-color 0.3s ease-out;
  /* Animazione del cambiamento del colore di sfondo */
  display: block;
  /* Rende il pulsante un elemento a blocco per centrarlo orizzontalmente */
  margin: 0 auto;
  /* Centra il pulsante orizzontalmente */
}

/* al passaggio del mouse sul pulsante normale */
.btn-normal:hover {
  background-color: #013872;
  /* Colore di sfondo al passaggio del mouse */
}

/* il pulsante normale */
.btn-cancel {
  background-color: #6c757d;
  /* Colore di sfondo del pulsante */
  color: #fff;
  /* Colore del testo del pulsante */
  border: none;
  /* Nessun bordo */
  padding: 10px 20px;
  /* Spaziatura interna */
  border-radius: 5px;
  /* Angoli arrotondati */
  cursor: pointer;
  /* Cambia il cursore al passaggio del mouse */
  transition: background-color 0.3s ease-out;
  /* Animazione del cambiamento del colore di sfondo */
  display: inline-block;
  /* Rende il pulsante un elemento a blocco per centrarlo orizzontalmente */
  margin: 0 auto;
  /* Centra il pulsante orizzontalmente */
}

.btn-cancel:hover {
  background-color: #34383b;
  /* Colore di sfondo al passaggio del mouse */
}

/* il pulsante normale */
.btn-mod {
  background-color: #007bff;
  /* Colore di sfondo del pulsante */
  color: #fff;
  /* Colore del testo del pulsante */
  border: none;
  /* Nessun bordo */
  padding: 10px 20px;
  /* Spaziatura interna */
  border-radius: 5px;
  /* Angoli arrotondati */
  cursor: pointer;
  /* Cambia il cursore al passaggio del mouse */
  transition: background-color 0.3s ease-out;
  /* Animazione del cambiamento del colore di sfondo */
  display: inline-block;
  /* Rende il pulsante un elemento a blocco per centrarlo orizzontalmente */
  margin: 0 auto;
  /* Centra il pulsante orizzontalmente */
}

.btn-mod:hover {
  background-color: #013872;
  /* Colore di sfondo al passaggio del mouse */
}

/* il pulsante alert */
.btn-alert {
  background-color: #d32626;
  /* Colore di sfondo del pulsante */
  color: #fff;
  /* Colore del testo del pulsante */
  border: none;
  /* Nessun bordo */
  padding: 10px 20px;
  /* Spaziatura interna */
  border-radius: 5px;
  /* Angoli arrotondati */
  cursor: pointer;
  /* Cambia il cursore al passaggio del mouse */
  transition: background-color 0.3s ease-out;
  /* Animazione del cambiamento del colore di sfondo */
  display: block;
  /* Rende il pulsante un elemento a blocco per centrarlo orizzontalmente */
  margin: 0 auto;
  /* Centra il pulsante orizzontalmente */
}

/* al passaggio del mouse sul pulsante alert */
.btn-alert:hover {
  background-color: #aa1111;
  /* Colore di sfondo al passaggio del mouse */
}

/* l'input normale */
.input-normal {
  width: 70%;
  /* Larghezza completa */
  padding: 10px;
  /* Spaziatura interna */
  margin: 5px 0;
  /* Margine superiore e inferiore */
  box-sizing: border-box;
  /* Include padding e bordo nella larghezza */
  border: 1px solid #3e54ac;
  /* Bordo blu */
  border-radius: 5px;
  /* Angoli arrotondati */
}

/* Chiude lo stile degli input normali */

/* al focus sull'input normale */
.input-normal:focus {
  border: 1px solid #ff0000;
  /* Bordo rosso */
}

/* Chiude lo stile degli input in focus */

/* -------------------- footer -------------------- */
/* il piè di pagina della home */
.footer {
  display: flex;
  /* Utilizza il flexbox */
  justify-content: center;
  /* Centra il contenuto orizzontalmente */
  margin-top: 20px;
  /* Spaziatura superiore del footer */
}

/* i link del footer */
.a-foloter {
  color: #fff;
  /* Colore del testo del link */
  text-decoration: none;
  /* Senza sottolineatura */
}

/* al passaggio del mouse sui link del footer */
.a-foloter:hover {
  text-decoration: underline;
  /* Sottolinea il link al passaggio del mouse */
  font-weight: bold;
  /* Rende il testo in grassetto al passaggio del mouse */
}

/* ------------------------ main -------------------- */
.container-tab {
  display: grid;
  /* Utilizza il grid layout */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* Definisce le colonne della griglia */
  gap: 15px;
  /* Spaziatura tra le celle della griglia */
  margin-top: 20px;
  /* Spaziatura superiore del container */
  text-align: center;
  /* Allinea il testo al centro */
  font-weight: bold;
  /* Trasforma il testo in grassetto */
  border-radius: 10px;
  /* Angoli arrotondati del container */
  margin-bottom: 20px;
  /* Spaziatura inferiore del container */
}

/* i box all'interno del container */
.box-1,
.box-2 {
  background-color: #cccccc;
  /* Colore di sfondo delle celle */
  padding: 20px;
  /* Spaziatura interna delle celle */
  border: 1px solid #000;
  /* Bordo delle celle */
  border-radius: 5px;
  /* Angoli arrotondati delle celle */
  color: #000;
  /* Colore del testo delle celle */
}

/* lo span all'interno dei box */
.span-contenuto {
  display: block;
  /* Rende lo span un blocco inline */
  padding: 10px;
  /* Spaziatura interna */
  background-color: #e0e0e0;
  /* Colore di sfondo */
  border-radius: 5px;
  /* Angoli arrotondati */
  border: 1px solid #000;
  /* Bordo dello span */
  margin: 10px;
  /* Margine intorno allo span */
}

/* il paragrafo di benvenuto */
.p-hi {
  font-size: 1.4rem;
  /* Dimensione del testo */
  margin-bottom: 20px;
  /* Margine inferiore */
  margin-top: 80px;
  /* Margine superiore */
  text-align: center;
  /* Allinea il testo al centro */
  font-weight: bold;
  /* Rende il testo in grassetto */
}

/* ------------------------- avatar -------------------- */
.div-avatar {
  display: inline-block;
  /* Utilizza il display inline-block */
  justify-content: center;
  /* Centra il contenuto orizzontalmente */
  border-radius: 50%;
  /* Rende l'avatar circolare */
  margin-left: 43%;
  margin-right: auto;
  /* Spaziatura intorno al container */
  top: 10px;
  /* posizione relativa per l'indicatore online */
  position: relative;
  /* posizione relativa per l'indicatore online */
}

.img-avatar {
  width: 50px;
  /* Larghezza dell'avatar */
  height: 50px;
  /* Altezza dell'avatar */
  border-radius: 50%;
  /* Rende l'avatar circolare */
  border: 1.5px solid #fff;
  /* Bordo dell'avatar */
}

/* indicatore online */
.div-online {
  /* Definisce l'indicatore dello stato online. */
  position: absolute;
  /* Posiziona l'indicatore sull'avatar. */
  bottom: 0px;
  /* Allinea l'indicatore al bordo inferiore. */
  right: 0px;
  /* Allinea l'indicatore al bordo destro. */
  width: 15px;
  /* Imposta la larghezza dell'indicatore. */
  height: 15px;
  /* Imposta l'altezza dell'indicatore. */
  border-radius: 50%;
  /* Rende circolare l'indicatore. */
  border: 2px solid white;
  /* Aggiunge un bordo bianco all'indicatore online. */
  background-color: green;
  /* Colora di verde lo stato online. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Aggiunge un'ombra. */
}

.change-avatar:hover {
  cursor: pointer;
  /* Cambia il cursore quando si passa sopra l'immagine */
}

/* il paragrafo di istruzione */
.p-instruction {
  font-size: 1rem;
  /* Dimensione del testo */
  text-align: center;
  /* Allinea il testo al centro */
  margin: 20px;
  /* Margine intorno al paragrafo */
}

/* ------------------------- preference -------------------- */
.div-preference {
  display: flex;
  /* Utilizza il flexbox */
  justify-content: center;
  /* Centra il contenuto orizzontalmente */
  margin: 20px;
  /* Spaziatura intorno al container */
}

.div-preference:hover {
  cursor: pointer;
  /* Cambia il cursore quando si passa sopra l'immagine */

}

/* ------------------------- portrait -------------------- */
.div-portrait {
  display: none;
  /* Nasconde il container del ritratto */
  justify-content: center;
  /* Centra il contenuto orizzontalmente */
  align-items: center;
  /* Centra il contenuto verticalmente */
  margin-top: 20px;
  /* Spaziatura intorno al container */
}

.img-portrait {
  width: 240px;
  /*Larghezza del ritratto */
  height: 296px;
  /* Altezza del ritratto */
  border-radius: 15px;
  /* Rende il ritratto con angoli arrotondati */
  border: 1.5px solid #fff;
  /* Bordo del ritratto */
  margin: 0 auto;
  /* Centra il container orizzontalmente */
}

/* ------------------------- amministrazione -------------------- */

/* il paragrafo di amministrazione */
.p-admin {
  font-size: 1.5rem;
  /* Dimensione del testo */
  text-align: center;
  /* Allinea il testo al centro */
  margin: 20px;
  /* Margine intorno al paragrafo */
  font-weight: bold;
  /* Rende il testo in grassetto */
}

/* il container per gli elementi di amministrazione */
.container-admin {
  display: grid;
  /* Utilizza il layout a griglia per il container degli elementi di amministrazione */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  /* Definisce il numero di colonne e la larghezza minima degli elementi della griglia */
  gap: 10px;
  /* Spaziatura tra gli elementi della griglia */
  color: #fff;
  /* Imposta il colore del testo all'interno del container degli elementi di amministrazione */
  margin: 20px;
  /* Margine intorno al container */
}

/* gli elementi di amministrazione */
.item-adm {
  background-color: #605e5e;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* le checkbox di amministrazione */
.checkbox-admin {
  width: 15px;
  /* Larghezza della checkbox */
  height: 15px;
  line-height: 15px;
  /* Altezza della linea della checkbox */
  cursor: pointer;
  /* Imposta il cursore come puntatore quando si passa sopra la checkbox */
  border-radius: 5px;
  /* Imposta il bordo arrotondato della checkbox */
}

/* lo stato selezionato della checkbox */
.checkbox-admin:checked {
  background-color: #007bff;
  /* Cambia il colore di sfondo quando la checkbox è selezionata */
}

/* lo span di amministrazione */
.span-admin {
  font-size: 1.5rem;
  /* Dimensione del testo */
  margin: 20px;
  /* Margine intorno allo span */
}

/* ------------------------- i link -------------------- */
/* il pulsante di ritorno alla home nell'amministrazione */
.a-home {
  text-decoration: none;
  /* Rimuove la sottolineatura dal link. */
  color: #f5f5f5;
  /* Imposta il colore del testo del link. */
  font-size: 1rem;
  /* Imposta la dimensione del font del link. */
  padding: 10px;
  /* Aggiunge padding intorno al link. */
  border-radius: 5px;
  /* Aggiunge un bordo arrotondato al link. */
  background-color: #626261;
  /* Imposta il colore di sfondo del link. */
  float: right;
  /* Posiziona il link a destra con un margine destro. */
  margin-right: 40px;
  /* Aggiunge un margine destro al link per separarlo dagli altri elementi. */
}

/* al passaggio del mouse sul link */
.a-home:hover {
  background-color: #212121;
  /* Cambia il colore di sfondo quando si passa sopra il link */
}

.a-spese {
  background-color: #565656;
  /* Aggiunge un bordo arrotondato al link. */
  /* Imposta il colore di sfondo del link. */
}

/* ------------------------- spese -------------------- */
.container-spese {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 20px 10px 0 10px;
}

.box1-spese,
.box2-spese {
  background-color: #605e5e;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: auto;
}

.table-spese,
tr,
td,
th {
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  margin: 20px 0;
}

.table-spese td,
th {
  padding: 8px;
}

.table-spese th {
  background-color: #353434;
  color: rgb(69, 140, 234);
  text-align: center;
  font-size: 1.2rem;
}

.table-spese tr:nth-child(even) {
  background-color: #4a4848;
}

.table-spese tr:nth-child(odd) {
  background-color: #909090;
}

.table-spese tr:hover {
  background-color: #292929;
}

.p-spese {
  font-size: 1.2rem;
  color: #f5f5f5;
  text-align: center;
  margin-bottom: 10px;
  background-color: #4a4848;
  /* Aggiunge uno sfondo per il paragrafo delle spese */
  border-radius: 5px;
  /* Aggiunge bordi arrotondati al paragrafo delle spese */
}

.p-spese-categoria {
  font-size: 1.5rem;
  font-weight: bold;
  color: rgb(69, 140, 234);
  text-align: center;
  margin-bottom: 10px;
  background-color: #4a4848;
  /* Aggiunge uno sfondo per il paragrafo della categoria delle spese */
  border-radius: 5px;
  /* Aggiunge bordi arrotondati al paragrafo della categoria delle spese */
}

.p-totale {
  display: block;
  font-size: 1.2rem;
  color: #f5f5f5;
  text-align: center;
  margin-bottom: 10px;
  background-color: #4a4848;
  /* Aggiunge uno sfondo per il paragrafo del totale */
  border-radius: 5px;
  /* Aggiunge bordi arrotondati al paragrafo del totale */
}

.div-blink {
  display: none;
  /* inizia nascosto */
  content: "";
  width: 20%;
  height: 5%;
  /* Altezza del div lampeggiante */
  border-radius: 10px;
  /* Colore di sfondo del div lampeggiante */
  transition-duration: all 1s ease-in-out;
  border: 2px solid #fff;
}

.div-mod {
  display: none;
  /* inizia nascosto */
  position: absolute;
  /* Posiziona il div in modo fisso */
  color: #fff;
  width: 300px;
  height: 250px;
  /* Altezza del div lampeggiante */
  border-radius: 10px;
  background-color: rgba(96, 94, 94, 0.95);
  /* Colore di sfondo del div mod e del div del totale */
  border: 1px solid #000;
  padding: 10px;
}

.div-del {
  display: none;
  /* inizia nascosto */
  position: absolute;
  /* Posiziona il div in modo fisso */
  color: #fff;
  width: 300px;
  height: 150px;
  font-weight: bold;
  /* Altezza del div lampeggiante */
  border-radius: 10px;
  background-color: rgba(96, 94, 94, 0.95);
  /* Colore di sfondo del div mod e del div del totale */
  border: 1px solid #000;
  padding: 20px 10px;
}

/* ------------------------- media queries -------------------- */
@media screen and (orientation: landscape) and (max-height: 700px) {

  .header,
  main,
  footer a,
  footer p,
  hr,
  .select-admin,
  .a-home,
  .p-admin,
  .container-admin,
  .span-admin,
  #btn-aggiorna,
  .container-spese,
  .img-avatar,
  .div-online,
  strong,
  .div-blink {
    display: none;
  }

  .div-portrait {
    display: flex;
    /* Mostra il container del ritratto su schermi più grandi */
  }
}