/* ////////////////////// per tutto il sito //////////////////////// */
* {
  /* Applica la regola a tutti gli elementi della pagina. */
  margin: 0;
  /* Rimuove il margine predefinito. */
  padding: 0;
  /* Rimuove il riempimento predefinito. */
  box-sizing: border-box;
  /* Include padding e bordi nelle dimensioni dell'elemento. */
  font-size: 1rem;
  /* Imposta la dimensione base del testo. */
  line-height: 1.5;
  /* Imposta l'altezza della riga in proporzione al testo. */
}

/* Chiude la regola generale. */
/* //////////////////////// i tag //////////////////// */
body {
  /* Definisce lo stile del corpo della pagina. */
  font-family: 'Roboto', sans-serif;
  /* Usa Roboto o, se non disponibile, un carattere sans-serif. */
  background-color: #cccccc;
  /* Imposta lo sfondo grigio chiaro della pagina. */
}

/* Chiude la regola del corpo della pagina. */
/* ////////////////// i paragrafi ////////////////////  */

.p-intro {
  /* Stile per i paragrafi con la classe "p-intro". */
  margin: 10px;
  /* Imposta il margine del paragrafo. */
  color: #000;
  /* Imposta il colore del testo del paragrafo. */
  text-align: justify;
  /* Giustifica il contenuto orizzontalmente. */
}

/* Chiude la regola per i paragrafi con la classe "p-intro". */

/* ///////////////// i div //////////////////// */

.div-intro {
  /* Stile per il div con la classe "div-intro". */
  border-radius: 1rem;
  /* Arrotonda gli angoli del div. */
  background-color: #c0c0c0;
  /* Imposta lo sfondo grigio chiaro del div. */
  -webkit-box-shadow: 10px 10px 20px -5px rgba(0, 0, 0, 0.5);
  /* Supporto per browser WebKit. */
  box-shadow: 10px 10px 20px -5px rgba(0, 0, 0, 0.5);
  /* Aggiunge un'ombra al div. */
  margin: 10px;
  /* Imposta il margine del div. */
}

/* Chiude la regola per il div con la classe "div-intro". */

.div-logo {
  /* Stile per il div con la classe "div-logo". */
  display: inline-block;
  /* Imposta il div del logo come elemento inline-block. */
  width: 50px;
  /* Imposta la larghezza del logo. */
  height: 50px;
  /* Imposta l'altezza del logo. */
  background-image: url('../img/favicon/apple-touch-icon.png');
  /* Imposta l'immagine di sfondo del logo. */
  -webkit-box-shadow: 10px 10px 20px -5px rgba(0, 0, 0, 0.5);
  /* Supporto per browser WebKit. */
  box-shadow: 10px 10px 20px -5px rgba(0, 0, 0, 0.5);
  /* Aggiunge un'ombra al div. */
  overflow: hidden;
  /* Nasconde eventuali parti dell'immagine che eccedono il div. */
  background-size: cover;
  /* Adatta l'immagine alle dimensioni del div. */
  border-radius: 50%;
  /* Rende il logo circolare. */
  padding: 0;
  /* Rimuove il riempimento interno del div. */
  margin: 10px;
  /* Il margine esterno del div. */
}

/* Chiude la regola per il div con la classe "div-logo". */

.div-registra,
.div-login {
  display: none;
  /* Stile per il div con la classe "div-registra". */
  border-radius: 1rem;
  /* Arrotonda gli angoli del div. */
  background-color: #B0C4DE;
  /* Imposta lo sfondo grigio chiaro del div. */
  margin: 10px;
  /* Imposta il margine del div. */
  padding: 0px;
  /* Imposta il riempimento interno del div. */
  border: 1px solid #000;
  /* Bordo nero */
  justify-content: center;
  /* Centra verticalmente il contenuto del div. */
  text-align: center;
  /* Centra orizzontalmente il contenuto del div. */
}

/* Chiude la regola per i div con le classi "div-registra" e "div-login". */

.div-login {
  display: block;
  /* Stile per il div con la classe "div-login". */
}

.div-switch {
  /* Stile per il div con la classe "div-switch". */
  text-align: center;
  /* Centra orizzontalmente il contenuto del div. */
  margin: 0 auto;
  /* Centra orizzontalmente il div. */
}

.div-alert-reg {
  display: grid;
  grid-template-columns: auto-fit(minmax(200px, 1fr));
  /* Imposta una colonna per il layout a griglia. */
  gap: 10px;
  margin: 0 auto;
  /* Margine superiore e inferiore per l'avviso. */
  color: #000;
  /* Colore del testo nero per l'avviso. */
  border: 1px solid #000;
  /* Bordo nero per l'avviso. */
  border-radius: 5px;
}

.item-dashboard {
  flex: 1 1 300px;
  /* Imposta la larghezza minima e la flessibilità degli elementi della dashboard. */
  margin: 10px;
  /* Margine esterno per gli elementi della dashboard. */
  padding: 20px;
  /* Spaziatura interna per gli elementi della dashboard. */
  background-color: #f0f0f0;
  /* Colore di sfondo per gli elementi della dashboard. */
  border: 1px solid #000;
  /* Bordo per gli elementi della dashboard. */
  border-radius: 5px;
  /* Angoli arrotondati per gli elementi della dashboard. */
  text-align: center;
  /* Centra il contenuto degli elementi della dashboard. */
}

.div-ins-password {
  position: relative;
  /* Imposta la posizione relativa per il contenitore della password. */

}

.div-dashboard {
  display: flex;
  /* Imposta il contenitore come un flexbox per disporre gli elementi figli in riga. */
  flex-wrap: wrap;
  /* Permette agli elementi figli di andare a capo se necessario. */
  justify-content: space-around;
  /* Distribuisce lo spazio tra gli elementi figli. */
  margin: 10px;
  /* Margine esterno del contenitore dashboard. */
}

.div-form-actions {
  text-align: center;
  /* Centra orizzontalmente il contenuto del div delle azioni del form. */
  margin: 20px 0;
  /* Margine superiore e inferiore per il div delle azioni del form. */
}

/* Stile per il div con l'id "data-filtra-entrate" */
#data-filtra-entrate,
#data-filtra-uscite {
  overflow: auto;

}

.div-filtra-uscite {
  width: 100vw;
  display: flex;
  padding: 10px;
}
.div-del-mod-popup {
  display: none;
  /* Nasconde il popup di modifica/eliminazione di default */
  position: absolute;
  width: 300px;
  /* Larghezza del popup */
  height: 350px;
  /* Altezza del popup */
  background-color: rgba(27, 25, 25, 0.9);
  /* Colore di sfondo del popup */
  border: 1px solid #000;
  /* Bordo del popup */
  border-radius: 10px;
  /* Angoli arrotondati del popup */
  padding: 20px;
  /* Spaziatura interna del popup */
  z-index: 100;
  /* Assicura che il popup sia sopra altri elementi */
  color: #fff;
  text-align: center;
}
/* ////////////////// i link //////////////////// */

.link-switch {
  color: #007bff;
  /* Colore del link */
  text-decoration: none;
  /* Rimuove la sottolineatura del link */
  cursor: pointer;
  /* Cambia il cursore al passaggio del mouse */
}

.link-switch:hover {
  text-decoration: underline;
  /* Aggiunge la sottolineatura al passaggio del mouse */
  color: #0056b3;
  /* Cambia il colore del link al passaggio del mouse */
}

 /* ////////////////// i form (AJAX)//////////////////// */

/* 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 */
}

.input-adatta {
  min-width: 100px;
  /* Larghezza minima dell'input adattabile */
  width: 200px;
  /* Larghezza automatica in base al contenuto */
  height: auto;
  /* Altezza automatica in base al contenuto */
  field-sizing: content;
  /* Include padding e bordo nella larghezza e altezza */
  font-weight: bold;
  border: none;
  background-color: transparent;
}

.input-basse {
  width: 100%;
  /* Larghezza completa */
  padding: 10px;
  /* Spaziatura interna */
  margin: 5px 0;
  /* Margine superiore e inferiore */
  box-sizing: border-box;
  /* Include padding e bordo nella larghezza */
  border: none;
  font-weight: bold;
}

/* ////////////////// i bottoni //////////////////// */

/* il pulsante normale */
.btn-normal {
  display: inline;
  /* Rende il pulsante un elemento inline-block. */
  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 */
  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-delete{
  background-color: red;
  /* 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-delete:hover {
  background-color: darkred;
  /* Colore di sfondo al passaggio del mouse */
}

/* ////////////////// le immagini //////////////////// */

.img-logout {
  font-size: 1.5rem;
  cursor: pointer;
  /* Cambia il cursore al passaggio del mouse */
  font-weight: bold;
  margin: 20px;
  transition: font-size 0.3s ease-out;
}

.img-logout:hover {
  font-size: 2rem;
  background-color: rgba(255, 0, 0, 0.7);
  border-radius: 5px;
}

.img-eye {
  position: absolute;
  top: 20px;
  right: 17%;
  cursor: pointer;
  /* Posiziona l'icona dell'occhio all'interno del campo password. */

}

.giusto-base {
  display: none;
  color: green;
}

.sbagliato-base {
  display: none;
  color: red;
}
/* ////////////////// il footer //////////////////// */

footer {
  padding: 20px;
  /* Spaziatura interna del footer */
  text-align: center;
  /* Centra il contenuto del footer */
  border-top: 1px solid #e7e7e7;
  /* Bordo superiore del footer */
}

footer a {
  color: #007bff;
  /* Colore del link nel footer */
  text-decoration: none;
  /* Rimuove la sottolineatura dal link */
}

footer a:hover {
  text-decoration: underline;
  /* Aggiunge la sottolineatura al passaggio del mouse */
  color: #0056b3;
  /* Cambia il colore del link al passaggio del mouse */
}

/* ////////////////// le liste //////////////////// */
.ul-basse {
  display: inline;
  list-style-type: none;
  /* Rimuove i punti elenco */
  padding: 0;
  /* Rimuove il padding interno */
  margin: 10px;
  /* Rimuove il margine esterno */
}


/* ////////////////// le righe orizzontali //////////////////// */

.hr-separator {
  border: 1px solid #c0c0c0;
  height: 2px;
  background: #c0c0c0c0;
  margin: 10px 0;
}

/* ////////////////// le label//////////////////// */

.label-base_1 {
  display: inline;
  background: #fff;
}

/* ////////////////// i commenti //////////////////// */


/* ////////////////// gli header h1 //////////////////// */

.h1-intro {
  display: inline;
  /* Imposta l'intestazione come elemento a linea. */
  margin: 10px;
  /* Imposta il margine dell'intestazione. */
  color: #000;
  /* Imposta il colore del testo dell'intestazione. */
  font-size: 1.2rem;
  /* Imposta la dimensione del testo dell'intestazione. */
  text-align: center;
  /* Centra il contenuto orizzontalmente. */
}

/* ########################## i tab ########################## */
.tabs-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 90vw;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

/* Nasconde i radio button nativi */
.tabs-container input[type="radio"] {
  display: none;
}

/* Stile delle etichette (le tab) */
.tabs-container label {
  flex: 1;
  padding: 12px;
  background: #e0e0e0;
  text-align: center;
  cursor: pointer;
  border: 1px solid #ccc;
  font-weight: bold;
  transition: background 0.3s;
  border-radius: 8px 8px 0 0;
}

/* Stile al passaggio del mouse sulle tab */
.tabs-container label:hover {
  background: #757474;
}

/* Nasconde di default tutti i contenuti */
.tabs-container .tab-content {
  display: none;
  width: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  box-sizing: border-box;
}

/* Mostra il contenuto della prima tab se il radio 1 è selezionato */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

/* Cambia colore alla tab attiva */
#tab1:checked + label,
#tab2:checked + label,
#tab3:checked + label {
  background: #fff;
  border-bottom: 2px solid #fff;
}

/* ########################## i tab img ########################## */

.i-preference {
  font-size: 2rem;
  color: lightblue;
  display: block;
  cursor: pointer;
}
.i-preference:hover {
  color: deepskyblue;
}

/* ################################## gli span ########################## */

.span-preferenze {
  font-size: 0.8rem;
  color: #000;
  display: inline;
  font-style: italic;
  /* font-weight: 300; */
}

/* ################################## i popup ########################## */

.btn-popup {
  font-size: 1.5rem;
  color: rgb(127, 127, 127);
  display: inline-block;
  cursor: pointer;
}
.btn-popup:hover {
  color: #000;
}
/* Popup container */
.popup-content {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 20px;
}

/* The actual popup (appears on top) */
.popup-content .popup-text {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;
}

/* Popup arrow */
.popup-content .popup-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup-content .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* ######################### le tabelle ########################## */

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  border: 1px solid #8b8a8a;
  padding: 4px;
  text-align: center;
}

.table th {
  background-color: #cccccc;
}

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

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