* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'AnonymousPro';
  src: url('/fonts/AnonymousPro-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

.boxlib {
  background-color: #021602;
  color: #00aeff;
  font-family: 'AnonymousPro', sans-serif;
font-weight: bold;
font-size: 35px;
text-align: center;
padding: 20px;
}


/* HEADER */
header {
  background-color: #000000;
  width: 100%;
  padding: 10px 0;
}

.header-container {
  display: flex;
  width: 100%;
}

/* BOX SINISTRO: Logo + Titolo */
.left-box {
  display: flex;
  align-items: center;
  padding-left: 20px;
  width: 50%;
}

.logo {
  height: 50px;
  width: auto;
  margin-right: 10px;
}

.site-title {
  font-family: 'AnonymousPro', sans-serif;
  font-size: 50px;
  font-weight: bold;
  color: #ffffff;
}

.site-subtitle {
  font-family: 'AnonymousPro', sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #d1fdd1;
}

/* BOX DESTRO: Menu */
.right-box {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 5px;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  

}

.menu li {
  margin-left: 5px;
  background-color: #a0f0b5;
}

.menu li a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  padding: 8px 12px;
  transition: 0.3s;
}

.menu li a:hover {
  background-color: black;
  color: #00aeff;

}

/* RESPONSIVE */
@media (max-width: 768px) {
  .header-container {
      flex-direction: column;
      text-align: center;
  }

  .left-box,
  .right-box {
      width: 100%;
      justify-content: center;
      padding: 10px 0;
  }

  .menu {
      flex-direction: column;
      gap: 10px;
  }

  .menu li {
      margin: 0;
  }
}

footer {
  background-color: #000000;
  color: #00aeff;
  text-align: center;
  padding: 20px 0;
  width: 100%;
  position: relative;
  bottom: 0;
}

.footer-container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  display: flex;
  gap: 15px;
}

.footer-menu li {
  display: inline;
}

.footer-menu li a {
  color: #00aeff;
  text-decoration: none;
  transition: 0.3s;
}

.footer-menu li a:hover {
  text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .footer-menu {
      flex-direction: column;
      gap: 5px;
  }
}


/* Applica il font solo agli h1 */
h1 {
  font-family: 'AnonymousPro', sans-serif;
  font-weight: bold;
}

h2 {
  font-family: 'AnonymousPro', sans-serif;
  font-weight: bold;
  font-size: 25px;
}

.custom-title {
  font-family: 'AnonymousPro', sans-serif;
  font-weight: bold;
  font-size: 40px;
  text-align: left;
}
h3 {
  font-family: 'AnonymousPro', sans-serif;
  font-weight: bold;
  color:#00aeff;
}

.tuttit {
  font-family: 'AnonymousPro', sans-serif;
  font-weight: bold;
  color:#4ec7ff;
  font-size: 25px;
}

.tuttitsup {
  font-family: 'AnonymousPro', sans-serif;
  font-weight: bold;
  color:#ffffff;
  font-size: 25px;
  text-align: center;
}

.custom-title-h3 {
  font-family: 'AnonymousPro', sans-serif;
  font-weight: bold;
  font-size: 20px;
  text-align: right;
}

a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: bold;
}

a:hover {
  color: #00aeff;
}

a img {
  margin: 0 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.alink {
  color: rgb(24, 150, 7); /* Cambia il colore del testo */
  text-decoration: none; /* Rimuove la sottolineatura, se desiderato */
  font-weight: bold;
}

.alink:hover {
  color: rgb(212, 0, 255); /* Cambia colore al passaggio del mouse */
}

.custom-link {
  color: #007BFF;
  text-decoration: none;
}

.custom-link:hover {
  color: #0056b3;
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
.space10 {
  margin-bottom: 10px; /* Aggiunge 20px di spazio sotto ogni elemento */
}
.space20 {
  margin-bottom: 20px; /* Aggiunge 20px di spazio sotto ogni elemento */
}
.space30 {
  margin-bottom: 30px; /* Aggiunge 20px di spazio sotto ogni elemento */
}
.space40 {
  margin-bottom: 40px; /* Aggiunge 20px di spazio sotto ogni elemento */
}
.space50 {
  margin-bottom: 50px; /* Aggiunge 20px di spazio sotto ogni elemento */
}
.space100 {
  margin-bottom: 100px; /* Aggiunge 20px di spazio sotto ogni elemento */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #000; /* Colore di sfondo dell'header */
  padding: 5px 20px; /* Padding per creare un bordo intorno agli elementi */
}

.header img {
  height: 50px; /* Altezza del logo */
  padding-right: 50px;
}

.header h1 {
  margin: 0; /* Rimuove il margine intorno al titolo */
  color: #00aeff; /* Cambia il colore del testo in bianco */
  padding-right: 50px;
}

.error-container {
  display: flex;
  justify-content: center;
  align-items: center;

  flex-direction: column; /* Per centrare anche verticalmente */
  text-align: center;
  margin-top: 50px; /* Spaziatura dall'inizio */
}

.error-message-container {
  color: #ff0000; /* Rosso per evidenziare */
  font-size: 1.2rem; /* Dimensione del testo */
  font-weight: bold;
  padding: 20px;
  border: 1px solid #ff0000;
  background-color: #ffe6e6; /* Sfondo rosato */
  border-radius: 8px; /* Angoli arrotondati */
  max-width: 600px; /* Limita la larghezza */
}

.accordion-content {
  display: none;
  padding: 10px;
}


.accordion-header:hover {
  background: linear-gradient(to bottom right, #133610, #00aeff)
}

/* Stile per il titolo dell'accordion principale */


.accordion > .accordion-header {
cursor: pointer;
padding: 10px;
margin: 5px;
background: black; 
color: #00aeff;
font-size: 18px;
font-weight: bold;
text-decoration: none;
text-align: center;
transition: background-color 0.3s; 
}

.accordion > .accordion-header:hover {
  background: #00aeff; 
  color: black;
}

/* Stile per i sottotitoli dei sottogruppi di accordioni */
.accordion .accordion .accordion-header {
  background: linear-gradient(to bottom right, #42cf3b, #129b19); 
font-size: 18px; /* Dimensione del font minore per i sottotitoli */
color: white;
padding: 10px;
}

.accordion .accordion .accordion-header:hover {
  background: linear-gradient(to bottom right, #58ee56, #24f127); 
font-size: 18px; /* Dimensione del font minore per i sottotitoli */
color: black;
padding: 10px;
}

.master-header {
  cursor: pointer;
  background: linear-gradient(to bottom right, black, #0c036d);
  padding: 15px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
  margin-bottom: 10px;
  color: white;
}

.master-header:hover {
  background: linear-gradient(to bottom right, #0f0474, #3083e2);
}

.master-content {
  margin-bottom: 20px;
}

.main-header {
  background-color: #eee; /* Sfondo chiaro per il titolo principale */
  font-size: 24px; /* Font più grande per il titolo principale */
  color: #333;
  padding: 15px;
  border: 1px solid #ccc;
}

.sub-header {
  background-color: #ccc; /* Sfondo più scuro per i sottotitoli */
  font-size: 18px; /* Font più piccolo per i sottotitoli */
  color: #666;
  padding: 10px;
}

.highlight-uid-si {
  color: #036800; /* Scegli il colore che preferisci */
  font-weight: bold; /* Opzionale: rende il testo in grassetto */
}

.highlight-uid-no {
  color: #FF0000; /* Scegli il colore che preferisci */
  font-weight: bold; /* Opzionale: rende il testo in grassetto */
}




.adminpage {
  background-color: #4CAF50;
  width: 100%;
  height: 10px;
}

.subadminpage {
  background-color: #000000;
  width: 100%;
  height: 10px;
}

.titlepage {
  font-family: 'AnonymousPro';
  color: black;
  background-color: #00aeff;
  width: 100%;
  padding: 5px 5px 5px 5px;
  font-size: 50px;
  font-weight: bold;
  text-align:center;
}

.titlepage2 {
  font-family: 'AnonymousPro';
  color: #00aeff;
  background-color: black;
  width: 100%;
  padding: 5px 5px 5px 5px;
  font-size: 30px;
  font-weight: bold;
  text-align:center;
}

.subtitlepage {
  color: #00aeff;
  background-color: #00b100;
  width: 100%;
  padding: 5px 5px 5px 5px;
  font-size: 20px;
  font-weight: bold;
  text-align:left;
}

.textpage {
  color: #fbff00;
  background-color: #1755c9;
  width: 100%;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
  font-weight: bold;
  text-align:center;
}

.boxpage {
  color: #fbff00;
  background-color: black;
  width: 100%;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
  font-weight: bold;
  text-align:center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  overflow: hidden;
}

.boxpage60 {
  color: #fbff00;
  background-color: black;
  width: 60%;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
  font-weight: bold;
  text-align:center;
  margin-left: 20%;
}
.matrixcode {
  color: #00aeff;
  background-color: black;
  width: 50%;
  padding: 5px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-left: 25%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  overflow: hidden;
}

/* Media query per schermi più piccoli */
@media (max-width: 768px) {
  .matrixcode {
      width: 90%;
      margin-left: 5%; /* Per centrare il box */
  }
}


.matrixcodeL {
  color: #00aeff;
  background-color: black;
  width: 100%;
  padding: 5px 5px 5px 10px;
  font-size: 16px;
  font-weight: bold;
  text-align:left;
  word-wrap: break-word; /* Forza il testo ad andare a capo */
  overflow-wrap: break-word; /* Gestisce meglio il comportamento moderno */
  word-break: break-word; /* Aggiunge compatibilità */
  white-space: normal; /* Permette di andare a capo */
  overflow: hidden; /* Evita lo sforamento orizzontale */

}

.boxalert {
  color: red;
  background-color: yellow;
  width: 100%;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
  font-weight: bold;
  text-align:center;
  border:5px;
  border-color: #000;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  overflow: hidden;
}

.boxps {
  color: rgb(11, 97, 0);
  background-color: rgb(178, 246, 255);
  width: 100%;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
  font-weight: bold;
  text-align:center;
  border:5px;
  border-color: #000;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  overflow: hidden;
}

.adminpagei {
  background-color: #000000;
  width: 80%;
  height: 5px;
  margin: 0 auto; /* Centra l'elemento orizzontalmente */
  display: flex;
  justify-content: center; /* Allinea orizzontalmente il contenuto */
  align-items: center; /* Allinea verticalmente il contenuto */
}
.titlepagei {
  color: white;
  background-color: #4CAF50;
  width: 80%;
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
  text-align:center;
  margin: 0 auto; /* Centra l'elemento orizzontalmente */
  display: flex;
  justify-content: center; /* Allinea orizzontalmente il contenuto */
  align-items: center; /* Allinea verticalmente il contenuto */
}

.titlepageic {
  color: white;
  background-color: #1755c9;
  width: 80%;
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
  text-align:center;
  margin: 0 auto; /* Centra l'elemento orizzontalmente */
  display: flex;
  justify-content: center; /* Allinea orizzontalmente il contenuto */
  align-items: center; /* Allinea verticalmente il contenuto */
}

.communication-thread {
  border: 2px solid #cccccc;
  border-radius: 8px;
  margin: 20px 0;
  padding: 15px;
  background-color: #f9f9f9;
}

.question-box, .response-box {
  margin-bottom: 15px;
}

.label-text {
  font-weight: bold;
  font-size: 14px;
  padding: 8px;
  border-radius: 5px;
  color: white;
  margin-bottom: 5px;
}

.question-box .label-text {
  background-color: #00796b; /* Verde per Domanda */
}

.response-box .label-text {
  background-color: #ff8f00; /* Arancione per Risposta */
}

.distinct-text {
  width: 100%;
  height: 80px;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: white;
  color: black;
  resize: none;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

.uid {
  color: white;
  background-color: #070e74;
  width: 80%;
  padding: 5px;
  font-size: 2vw; /* Il testo si adatta alla larghezza della finestra */
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  word-break: break-all;
  overflow-wrap: break-word;
}


.uidtxt {
  display: block;
  color: #070e74;
  font-size: 30px;
  font-weight: bold;
  text-align:center;
  padding: 5px 5px 5px 5px;
  margin-top: 10px;

}

.key {
  color: white;
  background-color: #000000;
  width: 50%;
  padding: 5px;
  font-size: 2vw; /* Il testo si adatta alla larghezza della finestra */
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  word-break: break-all;
  overflow-wrap: break-word;
}

.yellowborder {
  background-color: #1b91ff;
  width: 100%;
  height: 10px;
}

.senderpage {
  background-color: #2196F3;
  width: 100%;
  height: 10px;
}
.receiverpage {
  background-color: #ab14b6;
  width: 100%;
  height: 10px;
}

.cypherpage {
  background-color: #010c4b;
  width: 100%;
  height: 10px;
}
.logpage {
  background-color: #fe0000;
  width: 100%;
  height: 10px;
}

.start {
  background-color: black;
}
.container {
  display: flex;
  flex-direction: column; /* Mantiene il layout verticale per header */
  align-items: center;
  width: 100%;
}

  /* Stile generico per le immagini */
  .responsive-img-40 {
      width: 40%;
      height: auto;
  }

  /* Per dispositivi mobili (max-width: 768px) */
  @media (max-width: 768px) {
      .responsive-img-40 {
          width: 100%;
          height: auto;
      }
  }

  .responsive-img-50 {
      width: 50%;
      height: auto;
  }

  /* Per dispositivi mobili (max-width: 768px) */
  @media (max-width: 768px) {
      .responsive-img-50 {
          width: 100%;
          height: auto;
      }
  }

  .responsive-img-60 {
      width: 60%;
      height: auto;
  }

  /* Per dispositivi mobili (max-width: 768px) */
  @media (max-width: 768px) {
      .responsive-img-60 {
          width: 100%;
          height: auto;
      }
  }


.content-wrapper {
  display: flex;
  width: 100%;
  margin-top: 20px;
  justify-content: space-between; /* Assicura che sidebar e contenuto siano distanziati */
}

.sidebar {
  width: 300px;
  background-color: #08249e;
  padding: 20px;
  color: #00a2ff;
  height: 150vh;
  flex-shrink: 0; /* Impedisce alla sidebar di restringersi */
}

.sidebar .cyphersol {
  background-color: #a0d9f0; 
  margin-bottom: 5px;
  border-bottom: 1px solid #010f5e; /* Bordo bianco solo sotto */


}

.sidback {
  background-color:#2135e7;  
  color:white;
  text-align:center;
}

.sidlogout {
  background-color:#ff0000;  
}

.sidTitle {
background-color: black;
color:#00aeff;
font-weight: bold;
padding: 5px;
margin-bottom: 5px;
font-size: 18px;

}

.flag-container {
  text-align: center; /* Centra gli elementi orizzontalmente */

}

.flag-container a img {
  margin: 0 5px; /* Distanza tra le bandiere */
  border: 1px solid #00e1ff; /* Bordo sottile attorno alle bandiere */
  border-radius: 4px; /* Angoli leggermente arrotondati */
}


/* sezione sidebar attiva */
.active {
  background-color: #2059f5; /* Scegli un colore di sfondo per gli elementi attivi */
  color: white; /* Cambia il colore del testo se necessario */
}
/* Nascondi il pulsante per la sidebar sui dispositivi più grandi */
.sidebar-toggle {
  display: none; /* Nascondi il pulsante per schermi grandi */
}
/* Media query per schermi più piccoli (sidebar a scomparsa) */
@media (max-width: 768px) {
  .sidebar {
      width: 100%; /* Occupa tutto lo schermo in orizzontale */
      height: auto; /* L'altezza diventa adattabile */
      position: relative; /* Non è più fissa */
      display: none; /* Nasconde la sidebar */
  }

  .sidebar.open {
      display: block; /* Mostra la sidebar quando è aperta */
  }

  /* Aggiungi un pulsante per aprire la sidebar */
  .sidebar-toggle {
      display: block;
      background-color: #333;
      color: white;
      padding: 10px;
      text-align: center;
      cursor: pointer;
  }
}

.custom-select {
  font-size: 18px;
  padding: 10px;
  width: 300px;
  margin-bottom: 20px;
}

.custom-tx {
  font-size: 18px;
  padding: 5px;
  width: 600px;
  margin: 0 auto;

}

.main-content {
  flex-grow: 1; /* Espandi il contenuto principale per riempire lo spazio rimanente */
  background-color: #deefff;
  padding: 20px;
  padding-bottom: 100px;
  padding-top: 0px;
  max-width: 100%;
  overflow-x: auto;
  height: 150vh; /* Altezza completa della viewport */
}

.content-section {
  display: none;
}

ul {
  list-style-type: none;
}

li a {
  color: black;
  text-decoration: none;
  padding: 10px;
  display: block;
}

li a:hover {
  background-color: #000000;
}

footer {
  background: #000000;
  color: #fff;
  text-align: center;
  padding: 1em;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .content-wrapper {
      flex-direction: column;
      width: 90%; /* Più ampio per dispositivi più piccoli */
  }

  .sidebar {
      width: 100%;
  }

  .main-content {
      width: 100%;
  }
}

/* Sezione formattazione e pulsanti */
/* Stile generale del form */
.form-field {
  margin-bottom: 10px; /* Spazio tra i campi del form */
}

/* Label e input allineati verticalmente */
.form-field label {
  display: block; /* Fa sì che il label occupi l'intera larghezza disponibile */
  margin-bottom: 5px; /* Spazio tra il label e l'input */
  font-weight: bold; /* Rende il testo del label grassetto */
}

/* Stile per gli input */
.form-field input[type="text"],
.form-field input[type="password"],
.form-field input[type="submit"] {
  width: 100%; /* Larghezza completa per occupare il contenitore */
  padding: 8px; /* Padding per rendere il testo più facile da leggere */
  box-sizing: border-box; /* Include padding e bordo nel calcolo della larghezza */
  border: 1px solid #ccc; /* Bordo sottile per definire chiaramente gli input */
  border-radius: 4px; /* Angoli arrotondati per gli input */
}

/* Stile per il bottone di submit */
.form-field input[type="submit"] {
  background-color: #4CAF50; /* Colore di sfondo verde */
  color: white; /* Testo bianco */
  font-weight: bold; /* Testo in grassetto */
  border: none; /* Nessun bordo per il bottone */
  cursor: pointer; /* Mostra il cursore come un puntatore quando sopra il bottone */
  transition: background-color 0.3s; /* Transizione per l'hover */
}

/* Effetto hover per il bottone */
.form-field input[type="submit"]:hover {
  background-color: #45a049; /* Colore leggermente più scuro quando il mouse è sopra */
}

/* Tabelle v2 */
.table-container-v2 {
  width: 100%;
  display: flex; /* Usa Flexbox per centrare */
  justify-content: center; /* Centra orizzontalmente */
  margin: 20px 100;
}

.responsive-table-v2 {
  width: 100%;
  max-width: 800px; /* Imposta una larghezza massima per la tabella */
  border-collapse: collapse;
  border: 1px solid #ddd;
  text-align: left;
  table-layout: auto;
}

.responsive-table-v2 th,
.responsive-table-v2 td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  word-wrap: break-word;
  white-space: normal;
}

.responsive-table-v2 th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}

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

/* Miglioramenti per schermi piccoli */
@media screen and (max-width: 768px) {
  .responsive-table-v2 th,
  .responsive-table-v2 td {
      font-size: 14px;
      padding: 8px;
  }
}

/* fine tabelle v2 */


.table-container {
  max-width: 80%;
  margin: 40px auto;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow-x: auto; /* Permette lo scrolling orizzontale se necessario */
  height:auto;
}

/* Tabella Desktop (visibile di default su desktop) */
.table-desktop {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  table-layout: fixed; /* Forza la larghezza uniforme delle colonne */
}

/* Intestazioni della tabella */
thead {
  background-color: #4CAF50;
  color: white;

  font-size: 14px;
  letter-spacing: 0.05em; /* Spaziatura tra le lettere */
}

th, td {
  padding: 14px 20px;
  text-align: left;
  word-wrap: break-word; /* Forza il wrapping delle parole */
  overflow-wrap: anywhere; /* Spezza anche le parole lunghe */
  white-space: normal; /* Consente il wrapping */
  border-bottom: 1px solid #e0e0e0; /* Bordo inferiore sottile */
}

/* Righe alternate */
tbody tr:nth-child(odd) {
  background-color: #f9f9f9; /* Colore alternato per righe dispari */
}

tbody tr:nth-child(even) {
  background-color: #ffffff; /* Colore alternato per righe pari */
}

/* Effetto hover sulle righe */
tbody tr:hover {
  background-color: #e3f2fd; /* Colore di sfondo quando il mouse è sopra */
  transition: background-color 0.3s ease;
}

/* Link all'interno delle celle */
td a {
  color: #00b100;
  text-decoration: none;
  font-weight: bold;
  padding: 5px 10px;
  background-color: #f0f8ff;
  border: 1px solid #00b100;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block;
}

td a:hover {
  background-color: #00b100;
  color: white;
}

/* Media Query per dispositivi mobili */
@media (max-width: 768px) {
  .table-desktop {
      display: none; /* Nascondi la tabella desktop sui dispositivi mobili */
  }
}


/* Tabella Mobile (di default nascosta) */
/* Tabella Mobile */
.table-mobile {
  display: none;
  table-layout: fixed; /* Larghezza fissa delle celle */
  width: 100%; /* Tabella piena larghezza */
  border-collapse: collapse; /* Evita spazi tra celle */
  border-spacing: 0;
  overflow: hidden;
  height:auto;
}

/* Righe "card" */
.table-mobile tr {
  margin: 0;
  padding: 0;
  width: 100%;
  height:auto;
  box-sizing: border-box;
}

.table-mobile .card {
  display: block;
  margin-bottom: 15px;
  padding: 15px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* Celle */
.table-mobile td {
  display: block;
  padding: 10px;
  text-align: center;
  word-wrap: break-word; /* Spezza le parole lunghe */
  word-break: break-word;
  overflow-wrap: break-word; /* Spezza il contenuto */
  white-space: normal; /* Permette il wrapping del testo */
  height: auto; /* Altezza dinamica */
  line-height: 1.5; /* Spaziatura tra righe */
  box-sizing: border-box; /* Include padding nei calcoli di larghezza/altezza */
  max-width: 100%; /* Impedisce al testo di eccedere la larghezza */
}


.table-mobile td:last-child {
  border-bottom: none;
}

/* Etichette */
.table-mobile td:before {
  content: attr(data-label);
  display: block;
  font-weight: bold;
  color: #4CAF50;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* Link */
.table-mobile td a {
  display: inline-block;
  color: #007BFF;
  text-decoration: none;
  font-weight: bold;
  padding: 5px 10px;
  background-color: #f0f8ff;
  border: 1px solid #007BFF;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.table-mobile td a:hover {
  background-color: #007BFF;
  color: white;
}

/* Media Query */
@media (max-width: 768px) {
  .table-desktop {
      display: none;
  }

  .table-mobile {
      display: table;
  }
}


table {
  margin-top: 10px;
  margin-left: 50px;
  border-collapse: collapse; /* Rimuove lo spazio tra le celle */

}
th, td {
  padding: 14px 20px;
  text-align: left;
  word-wrap: break-word; /* Forza il wrapping delle parole */
  overflow-wrap: anywhere; /* Spezza anche le parole lunghe */
  white-space: normal; /* Consente il wrapping */
  border-bottom: 1px solid #e0e0e0; /* Bordo inferiore sottile */
}

.custom-table {
  width: 100%; /* Assicura che la tabella occupi tutta la larghezza del wrapper */
  border-collapse: collapse;

}

.custom-table th, .custom-table td {
  text-align: left !important;
  padding: 2px 4px;
  border: 1px solid #ddd;
}

.custom-table th {
  background-color: #f9f9f9; /* Colore di sfondo più chiaro per l'intestazione */
  font-weight: bold; /* Grassetto per l'intestazione */
}

.custom-table td {
  vertical-align: top; /* Testo allineato in alto */
}

.table-wrapper {
  max-width: 400px; /* Larghezza massima della tabella */
  margin-left: 0; /* Centra la tabella orizzontalmente */
  padding-left: 100px;
}
/* Stile per il container della tabella */
.main-content table {
  width: 100%; /* Imposta la larghezza della tabella al 100% del suo contenitore */
  margin: 10px auto; /* Centra la tabella orizzontalmente e aggiunge spazio sopra e sotto */
  border-collapse: collapse; /* Rimuove lo spazio tra le celle */
}

/* Stile per le celle e le intestazioni */
.main-content th, .main-content td {
  border: 1px solid #ddd; /* Aggiunge un bordo leggero */
  padding: 8px; /* Spazio intorno al testo */
  text-align: center; /* Centra il testo */
  white-space: nowrap; /* Evita a capo automatico nel testo */
}

/* Stile specifico per le colonne strette */
.main-content th.short, .main-content td.short {
  width: 1%; /* Minima larghezza necessaria per il contenuto */
  white-space: nowrap; /* Evita a capo automatico nel testo */
}

.comparison-table {
  width: 100%; /* Occupa l'intera larghezza dello schermo */
  margin: 20px auto; /* Centra la tabella */
  border-collapse: collapse; /* Unisce i bordi delle celle */
  text-align: center; /* Centra il testo */
  font-size: 1rem; /* Dimensione del testo leggibile */
}

.comparison-table th, .comparison-table td {
  border: 1px solid #ddd; /* Bordo sottile intorno alle celle */
  padding: 15px; /* Spazio interno alle celle */
}

.comparison-table th {
  background-color: #f2f2f2; /* Colore di sfondo per l'intestazione */
  font-weight: bold;
}

.highlight {
  background-color: #e0f7fa; /* Colore per evidenziare la versione premium */
}

.comparison-table tr:nth-child(even) {
  background-color: #f9f9f9; /* Colore alternato per le righe */
}
.comparison-table td {
  word-wrap: break-word; /* Spezza le parole lunghe */
  word-break: break-word; /* Spezza le parole in qualsiasi punto se necessario */
  hyphens: auto; /* Aggiunge trattini per le parole spezzate */
}

@media (max-width: 768px) {
  .comparison-table td {
      word-wrap: break-word; /* Spezza le parole lunghe */
      word-break: break-word; /* Spezza le parole in qualsiasi punto se necessario */
      hyphens: auto; /* Aggiunge trattini per le parole spezzate */
      white-space: normal; /* Permette al testo di andare a capo */
  }
}

/* Responsività per schermi piccoli */
@media (max-width: 768px) {
  .comparison-table {
      font-size: 0.9rem; /* Riduce leggermente il testo per schermi piccoli */
  }

  .comparison-table th, .comparison-table td {
      padding: 10px; /* Riduce il padding per adattarsi agli schermi piccoli */
  }

  .comparison-table thead {
      display: none; /* Nasconde l'intestazione per i dispositivi mobili */
  }

  .comparison-table tr {
      display: block; /* Ogni riga diventa un blocco */
      margin-bottom: 10px; /* Spazio tra i blocchi */
      border-bottom: 1px solid #ddd; /* Aggiunge un bordo sotto ogni riga */
  }

  .comparison-table td {
      display: block; /* Ogni cella diventa un blocco */
      text-align: right; /* Allinea il contenuto a destra */
      padding-left: 50%; /* Sposta il testo verso destra */
      position: relative; /* Posizione relativa per il contenuto pseudo */
  }

  .comparison-table td::before {
      content: attr(data-label); /* Aggiunge un'etichetta prima del contenuto */
      position: absolute;
      left: 10px; /* Posizione a sinistra */
      top: 50%; /* Centra verticalmente */
      transform: translateY(-50%);
      font-weight: bold; /* Evidenzia l'etichetta */
      text-align: left; /* Allinea il testo a sinistra */
  }
}


.collapsible {
  background-color: #0581a0;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
}
.collapsible:hover {
  background-color: #094b81;
}
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;


}

.content2 {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
  text-align: center;


}
.button-container {
  text-align: center; /* Centra tutti gli elementi inline-block dentro il contenitore */
}

.custom-button {
  background-color: #3080ff; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 10px 20px;
  font-size: 24px; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  text-align: center;
  width: 100%;
}

.custom-button:hover {
  background-color: #122c84; /* Colore al passaggio del mouse */
}

.custom-button-30 {
  background-color: #3080ff; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 10px 20px;
  font-size: 3vw; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  text-align: center;
  width: 30%;
  word-break: break-all;
  overflow-wrap: break-word;
}

.custom-button-30:hover {
  background-color: #122c84; /* Colore al passaggio del mouse */
}
.custom-button-30D {
  background-color: #3080ff;
  color: white;
  padding: 10px 20px;
  font-size: 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  display: block; /* Cambia flex in block */
  margin: 0 auto; /* Centra l'elemento */
  width: 40%;
}

.custom-button-30D:hover {
  background-color: #000e4e;
     color: yellow;
}

/* Media query per schermi più piccoli */
@media (max-width: 768px) {
  .custom-button-30D {
      width: 90%;
      margin-left: 5%; /* Per centrare il box */
  }
}

.countdown-button {
  background-color: #000000;
  color: yellow;
  padding: 10px 20px;
  font-size: 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  display: block; /* Cambia flex in block */
  margin: 0 auto; /* Centra l'elemento */
  width: 15%;
}



/* Media query per schermi più piccoli */
@media (max-width: 768px) {
  .countdown-button {
      width: 90%;
      margin-left: 5%; /* Per centrare il box */
  }
}

.countdown-button-xl {
  background-color: #000000;
  color: yellow;
  padding: 10px 20px;
  font-size: 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  display: block; /* Cambia flex in block */
  margin: 0 auto; /* Centra l'elemento */
  width: 30%;
}



/* Media query per schermi più piccoli */
@media (max-width: 768px) {
  .countdown-button-xl {
      width: 90%;
      margin-left: 5%; /* Per centrare il box */
  }
}

.custom-button-30D60 {
  background-color: #3080ff;
  color: white;
  padding: 10px 20px;
  font-size: 1.4vw;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  display: block; /* Cambia flex in block */
  margin: 0 auto; /* Centra l'elemento */
  width: 60%;
}

.custom-button-30D60:hover {
  background-color: #122c84;
}


.custom-button-30Dred {
  background-color: #ff0000;
  color: white;
  padding: 10px 20px;
  font-size: 1.5vw;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  display: block; /* Cambia flex in block */
  margin: 0 auto; /* Centra l'elemento */
  width: 40%;
}

.custom-button-30Dred:hover {
  background-color: #4e0606;
}


.custom-button-30i {
  background-color: #3080ff; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 10px 20px;
  margin:20px;
  font-size: 24px; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  text-align: center;
  width: 30%;
}

.custom-button-30i:hover {
  background-color: #122c84; /* Colore al passaggio del mouse */
}

.custom-button-30-reg {
  background-color:orangered; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 10px 20px;
  font-size: 24px; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  text-align: center;
  width: 30%;
}

.custom-button-30-reg:hover {
  background-color: red; /* Colore al passaggio del mouse */
}

.custom-button-30-log {
  background-color:green; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 10px 20px;
  font-size: 24px; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  text-align: center;
  margin-top: 10px;
  width: 30%;
}

.custom-button-30-log:hover {
  background-color: #005500; /* Colore al passaggio del mouse */
}

.custom-button-c {
  background-color: #4CAF50; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 10px 40px; /* Padding per rendere il bottone più grande */
  font-size: 20px; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  align-content: center;
}

.custom-button-c:hover {
  background-color: #3e8e41; /* Colore al passaggio del mouse */
}

.custom-button-b {
  background-color: #184ab8; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 10px 40px; /* Padding per rendere il bottone più grande */
  font-size: 20px; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  align-content: center;
}

.custom-button-b:hover {
  background-color: #090363; /* Colore al passaggio del mouse */
}

.custom-button-red-c {
  background-color: #f70000; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 5px 32px; /* Padding per rendere il bottone più grande */
  font-size: 16px; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  align-content: center;
}

.custom-button-red-c:hover {
  background-color: orangered; /* Colore al passaggio del mouse */
}

.custom-button-sender {
  background-color: #077929; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 20px;
  font-size: 40px; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  text-align: center;
  width: 300px;
  height: 100px;
}

.custom-button-sender:hover {
  background-color: #043a04; /* Colore al passaggio del mouse */
}

.custom-button-receiver {
  background-color: #1e2b9b; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 20px;
  font-size: 40px; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  text-align: center;
  width: 300px;
  height: 100px;
}

.custom-button-receiver:hover {
  background-color: #071d63; /* Colore al passaggio del mouse */
}

.custom-button-rid {
  background-color: #3080ff; /* Colore di sfondo */
  color: white; /* Colore del testo */
  padding: 10px 20px;
  font-size: 18px; /* Dimensione del testo */
  border: none; /* Rimuove il bordo */
  border-radius: 5px; /* Bordi arrotondati */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  transition: background-color 0.3s; /* Transizione per effetto hover */
  text-align: center;
  margin-bottom: 20px;
  width: 50%;
}

.custom-button-rid:hover {
  background-color: #122c84; /* Colore al passaggio del mouse */
}

.delete-button {
  background-color: #137406; /* Rosso chiaro */
  color: white; /* Testo bianco */
  padding: 5px 10px; /* Padding interno */
  text-decoration: none; /* Rimuove il sottolineato dei link */
  border-radius: 5px; /* Bordi arrotondati */
  border: none; /* Nessun bordo */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
}

.delete-button:hover {
  background-color: #04470a; /* Rosso più scuro al passaggio del mouse */
}

.green-button {
  background-color: #137406; /* Rosso chiaro */
  color: white; /* Testo bianco */
  padding: 5px 10px; /* Padding interno */
  text-decoration: none; /* Rimuove il sottolineato dei link */
  border-radius: 5px; /* Bordi arrotondati */
  border: none; /* Nessun bordo */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  text-align: center;
  width: 200px;
}

.green-button:hover {
  background-color: #04470a; /* Rosso più scuro al passaggio del mouse */
}

.update-button {
  background-color: #137406; /* Rosso chiaro */
  color: white; /* Testo bianco */
  padding: 5px 10px; /* Padding interno */
  text-decoration: none; /* Rimuove il sottolineato dei link */
  border-radius: 5px; /* Bordi arrotondati */
  border: none; /* Nessun bordo */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
}


.update-button:hover {
  background-color: #04470a; /* Rosso più scuro al passaggio del mouse */
}
.accept-button {
  background-color: #097a05; /* Rosso chiaro */
  color: white; /* Testo bianco */
  padding: 5px 10px; /* Padding interno */
  text-decoration: none; /* Rimuove il sottolineato dei link */
  border-radius: 5px; /* Bordi arrotondati */
  border: none; /* Nessun bordo */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  margin-top: 10px;
}


.accept-button:hover {
  background-color: #074105; /* Rosso più scuro al passaggio del mouse */
}

.reject-button {
  background-color: #b31414; /* Rosso chiaro */
  color: white; /* Testo bianco */
  padding: 5px 10px; /* Padding interno */
  text-decoration: none; /* Rimuove il sottolineato dei link */
  border-radius: 5px; /* Bordi arrotondati */
  border: none; /* Nessun bordo */
  cursor: pointer; /* Cursori puntatore per indicare che è cliccabile */
  margin-top: 10px;
}


.reject-button:hover {
  background-color: #550707; /* Rosso più scuro al passaggio del mouse */
}

.input-practice-id {
  width: 50px; /* Larghezza adatta per un ID numerico */
  padding: 5px;
  margin-bottom: 5px;
  text-align: center;
  display: block !important; /* Temporaneo per testare la sovrascrittura */
}


form {
  display: flex;
  flex-direction: column; /* Imposta gli elementi in colonna */
  align-items: center; /* Centra gli elementi lungo l'asse trasversale (orizzontale in questo caso) */
  justify-content: center; /* Opzionale, se vuoi anche centrale verticalmente in un contenitore più alto */
  margin-top: 20px; /* Distanza dal contenuto sopra, adattabile alle tue necessità */
  
}

.form-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  cursor: pointer;
  width: 30%; 
  min-width: 0; /* Previene l'overflow indesiderato */
  padding: 0 10px; 
  margin-left: auto; 
  margin-right: auto; 
}

.form-container .masked-name, .form-container .details {
  padding: 10px;
  margin-bottom: 5px;
  text-align: center;
  background-color: #ab14b6; 
  color: white;
  transition: background-color 0.3s;
  white-space: normal;     /* Permette di andare a capo in base alla larghezza del contenuto */
  word-wrap: break-word;   /* Spezza le parole lunghe */
  overflow-wrap: break-word; /* Spezza le parole lunghe (per compatibilità cross-browser) */
}

.form-container .details {
  display: none;
  border-top: 1px solid #ccc;
  background-color: transparent; 
}

.form-container input[type="text"], .form-container textarea {
  width: 100%; /* Assicura che l'input non ecceda la larghezza del form */
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Stili per gestire il responsive */
@media (max-width: 768px) {
  .form-container {
      width: 100%; /* Usa la larghezza completa a dimensioni di schermo ridotte */
  }

  .form-container .details {
      display: block; /* Mostra i dettagli per default in vista responsive */
  }
}

@media (max-width: 480px) {
  .form-container {
      padding: 5px;
  }

  .form-container .masked-name {
      font-size: 14px;
  }
}

.form-container2 {
  width: 80%; /* Larghezza completa rispetto al contenitore padre */
  height: 200px; /* Altezza specifica per la textarea */
  padding: 10px; /* Padding intorno al testo all'interno della textarea */
  box-sizing: border-box; /* Include padding e bordi nel calcolo delle dimensioni totali */
  resize: vertical; /* Permette all'utente di ridimensionare la textarea solo verticalmente */
}

.form-container3 {
  width: 80%; /* Larghezza completa rispetto al contenitore padre */
  height: 400px; /* Altezza specifica per la textarea */
  padding: 10px; /* Padding intorno al testo all'interno della textarea */
  box-sizing: border-box; /* Include padding e bordi nel calcolo delle dimensioni totali */
  resize: vertical; /* Permette all'utente di ridimensionare la textarea solo verticalmente */
}

.form-container4 {
  width: 80%; /* Larghezza relativa al contenitore padre */
  height: 200px; /* Altezza specifica per la textarea */
  padding: 10px; /* Spazio interno */
  box-sizing: border-box; /* Include padding e bordi nelle dimensioni */
  resize: vertical; /* Permette il ridimensionamento verticale */
  overflow-y: auto; /* Scorrimento verticale se necessario */
  word-wrap: break-word; /* Manda a capo parole lunghe */
  white-space: normal; /* Comportamento di default per il wrapping */
  text-align: left; /* Allinea il testo a sinistra */
  vertical-align: top; /* Non necessario per textarea ma lo lasciamo */
}

.large-select {
  width: 30%; /* Allarga il menu a tutta la larghezza del contenitore */
  height: 50px; /* Aumenta l'altezza */
  font-size: 1.2em; /* Ingrandisce il testo */
  padding: 10px; /* Aggiunge spazio interno */
  border: 1px solid #333; /* Aggiunge un bordo per visibilità */
  border-radius: 5px; /* Smussa i bordi */
  cursor: pointer;
}



.masked-name {
  font-size: 20px; /* Dimensione del testo più grande */
  color: green; /* Colore del testo verde */
}


.hash-input {
  width: 100%;  /* Larghezza relativa al suo contenitore per non essere troppo largo o stretto */
  padding: 10px;
  margin: 10px auto; /* Centra automaticamente l'elemento lungo l'asse orizzontale */
  border: 1px solid #ccc;
  border-radius: 4px;
  
}

.hash-input:focus {
  border-color: #0056b3;
  box-shadow: 0 0 8px rgba(0, 86, 179, 0.2);
}

.label {
  color: #0b3d05;
  font-size: 24px;
  font-weight: bold;
  text-align:center;
  padding: 5px 5px 5px 5px;

}

.code {
  display: block;
  color: #8B008B;
  font-size: 24px;
  font-weight: bold;
  text-align:center;
  padding: 5px 5px 5px 5px;
  margin-top: 10px;
}

.code2 {
  display: block;
  color: #8B008B;
  font-size: 24px;
  font-weight: bold;
  text-align:left;


}

.code3 {
  display: block;
  color: #013b1a;
  font-size: 24px;
  font-weight: bold;
  text-align:center;
  padding: 5px 5px 5px 5px;
  margin-bottom: 10px;
  border-bottom: 2px;
  border-color: #000;
}

.cup {
  display: block;
  color: #399b00;
  font-size: 40px;
  font-weight: bold;
  text-align:center;
  padding: 5px 5px 5px 5px;
  margin-top: 10px;
}

.list {
  display: block;
  color: #175009;
  font-size: 24px;
  font-weight: bold;
  text-align:center;
  padding: 50px 5px 5px 5px;
  margin-top: 10px;
}

.title {
  color: #97fcf6;
  background-color: #000000;
  width: 100%;
  padding: 20px;
  font-size: 40px;
  font-weight: bold;
  text-align:center;
}

.admintitle {
  color: #ffffff;
  font-family: 'AnonymousPro';
  background-color: black;
  width: 100%;
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  text-align:center;
}

.cyphertitle {
  color: #ffffff;
  background-color: #1755c9;
  width: 100%;
  padding: 20px;
  font-size: 40px;
  font-weight: bold;
  text-align:center;
}



.subtitle {
  color: #04061a;
  background-color: #cfcece;
  width: 100%;
  padding: 5px 5px 5px 5px;
  font-size: 18px;
  font-weight: bold;
  text-align:center;
}




.supertitle {
  color: #97fcf6;
  background-color: #000000;
  width: 100%;
  padding: 5px;
  font-size: 24px;
  font-weight: bold;
  text-align:center;
}

.approvetitle {
  color: black;
  background-color: #97fcf6;
  width: 100%;
  padding: 5px;
  font-size: 24px;
  font-weight: bold;
  text-align:center;
}

.greentitle {
  color: white;
  background-color: #4caf50;
  width: 100%;
  padding: 5px;
  font-size: 24px;
  font-weight: bold;
  text-align:center;
  border-top: 2px;
  border-top-color: #000;
}



/* Regole specifiche per sovrascrivere le proprietà della classe 'title' */
.approvetitle .status-approvata {
  color: green !important; /* Sovrascrive qualsiasi altra regola di colore */
  font-weight: bold;
  font-size: 40px;

}

.approvetitle .status-rigettata {
  color: red !important; /* Sovrascrive qualsiasi altra regola di colore */
  font-weight: bold;
  font-size: 40px;

}

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.btn:hover {background-color: #3e8e41}

.btn:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.text {
  color: #000000;
  max-width: 100%;

  font-size: 16px;
  text-align: left; 
  word-wrap: break-word; /* Forza il testo ad andare a capo */
  overflow-wrap: break-word; /* Gestisce meglio il comportamento moderno */
  word-break: break-word; /* Aggiunge compatibilità */
  white-space: normal; /* Permette di andare a capo */
  overflow: hidden; /* Evita lo sforamento orizzontale */
  margin: 0; /* Elimina i margini predefiniti */
}

.testo {
  font-family: 'AnonymousPro';
  background-color: #000000;
  color: #00aeff;
  max-width: 100%;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 16px;
  text-align: left; 
  word-wrap: break-word; /* Forza il testo ad andare a capo */
  overflow-wrap: break-word; /* Gestisce meglio il comportamento moderno */
  word-break: break-word; /* Aggiunge compatibilità */
  white-space: normal; /* Permette di andare a capo */
  overflow: hidden; /* Evita lo sforamento orizzontale */
  margin: 0; /* Elimina i margini predefiniti */
}

p.testo {
  margin: 0; /* Rimuove i margini predefiniti del paragrafo */
}

/* Stile per gli elenchi (desktop) */
.testo ol, .testo ul {
  margin-left: 20px; /* Spazio a sinistra per numeri o punti */
  padding-left: 20px; /* Garantisce che i numeri/punti non siano tagliati */
}

/* Modifica per dispositivi mobili */
@media (max-width: 768px) {
  .testo {
      padding-left: 10px; /* Riduce il padding sinistro */
      padding-right: 10px; /* Riduce il padding destro */
      font-size: 14px; /* Riduce leggermente la dimensione del font */
  }

  .testo ol, .testo ul {
      margin-left: 15px; /* Riduce lo spazio a sinistra per adattarsi ai dispositivi mobili */
      padding-left: 15px; /* Mantiene visibili i numeri/punti */
  }

  .testo li {
      margin-bottom: 5px; /* Aggiunge spazio tra gli elementi dell'elenco per migliorare la leggibilità */
  }
}

.testoinv {
  font-family: 'AnonymousPro';
  background-color: #00aeff;
  color: black;
  max-width: 100%;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 16px;
  text-align: left; 
  word-wrap: break-word; /* Forza il testo ad andare a capo */
  overflow-wrap: break-word; /* Gestisce meglio il comportamento moderno */
  word-break: break-word; /* Aggiunge compatibilità */
  white-space: normal; /* Permette di andare a capo */
  overflow: hidden; /* Evita lo sforamento orizzontale */
  margin: 0; /* Elimina i margini predefiniti */
}

p.testoinv {
  margin: 0; /* Rimuove i margini predefiniti del paragrafo */
}

/* Stile per gli elenchi (desktop) */
.testoinv ol, .testo ul {
  margin-left: 20px; /* Spazio a sinistra per numeri o punti */
  padding-left: 20px; /* Garantisce che i numeri/punti non siano tagliati */
}

/* Modifica per dispositivi mobili */
@media (max-width: 768px) {
  .testoinv {
      padding-left: 10px; /* Riduce il padding sinistro */
      padding-right: 10px; /* Riduce il padding destro */
      font-size: 14px; /* Riduce leggermente la dimensione del font */
  }

  .testoinv ol, .testo ul {
      margin-left: 15px; /* Riduce lo spazio a sinistra per adattarsi ai dispositivi mobili */
      padding-left: 15px; /* Mantiene visibili i numeri/punti */
  }

  .testoinv li {
      margin-bottom: 5px; /* Aggiunge spazio tra gli elementi dell'elenco per migliorare la leggibilità */
  }
}

.testo-c {
  color: #000000;
  width: 100%;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 10px;
  font-size: 15px;
  text-align:center; 
  word-wrap: break-word; /* Forza il testo ad andare a capo */
  overflow-wrap: break-word; /* Gestisce meglio il comportamento moderno */
  word-break: break-word; /* Aggiunge compatibilità */
  white-space: normal; /* Permette di andare a capo */
  overflow: hidden; /* Evita lo sforamento orizzontale */
  margin: 0; /* Elimina i margini predefiniti */
}

p.testo-c {
  margin: 0; /* Rimuove i margini predefiniti del paragrafo */
}

/* Stile per gli elenchi (desktop) */
.testo-c ol, .testo-c ul {
  margin-left: 20px; /* Spazio a sinistra per numeri o punti */
  padding-left: 20px; /* Garantisce che i numeri/punti non siano tagliati */
}

/* Modifica per dispositivi mobili */
@media (max-width: 768px) {
  .testo-c {
      padding-left: 10px; /* Riduce il padding sinistro */
      padding-right: 10px; /* Riduce il padding destro */
      font-size: 14px; /* Riduce leggermente la dimensione del font */
  }

  .testo-c ol, .testo-c ul {
      margin-left: 15px; /* Riduce lo spazio a sinistra per adattarsi ai dispositivi mobili */
      padding-left: 15px; /* Mantiene visibili i numeri/punti */
  }

  .testo-c li {
      margin-bottom: 5px; /* Aggiunge spazio tra gli elementi dell'elenco per migliorare la leggibilità */
  }
}

.testo-l {
  color: #000000;
  width: 100%;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 10px;
  font-size: 15px;
  text-align:left; 
  word-wrap: break-word; /* Forza il testo ad andare a capo */
  overflow-wrap: break-word; /* Gestisce meglio il comportamento moderno */
  word-break: break-word; /* Aggiunge compatibilità */
  white-space: normal; /* Permette di andare a capo */
  overflow: hidden; /* Evita lo sforamento orizzontale */
  margin: 0; /* Elimina i margini predefiniti */
}

p.testo-l {
  margin: 0; /* Rimuove i margini predefiniti del paragrafo */
}

/* Stile per gli elenchi (desktop) */
.testo-l ol, .testo-l ul {
  margin-left: 20px; /* Spazio a sinistra per numeri o punti */
  padding-left: 20px; /* Garantisce che i numeri/punti non siano tagliati */
}

/* Modifica per dispositivi mobili */
@media (max-width: 768px) {
  .testo-l {
      padding-left: 10px; /* Riduce il padding sinistro */
      padding-right: 10px; /* Riduce il padding destro */
      font-size: 14px; /* Riduce leggermente la dimensione del font */
  }

  .testo-l ol, .testo-l ul {
      margin-left: 15px; /* Riduce lo spazio a sinistra per adattarsi ai dispositivi mobili */
      padding-left: 15px; /* Mantiene visibili i numeri/punti */
  }

  .testo-l li {
      margin-bottom: 5px; /* Aggiunge spazio tra gli elementi dell'elenco per migliorare la leggibilità */
  }
}

.txt-message-y {
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align:center;
  word-wrap: break-word; /* Forza il testo ad andare a capo */
  overflow-wrap: break-word; /* Gestisce meglio il comportamento moderno */
  word-break: break-word; /* Aggiunge compatibilità */
  white-space: normal; /* Permette di andare a capo */
  overflow: hidden; /* Evita lo sforamento orizzontale */
  margin: 0; /* Elimina i margini predefiniti */
}

/* Modifica per dispositivi mobili */
@media (max-width: 768px) {
  .txt-message-y {
      padding-left: 10px; /* Riduce il padding sinistro */
      padding-right: 10px; /* Riduce il padding destro */
      font-size: 14px; /* Riduce leggermente la dimensione del font */
  }

  .txt-message-y ol, .txt-message-y ul {
      margin-left: 15px; /* Riduce lo spazio a sinistra per adattarsi ai dispositivi mobili */
      padding-left: 15px; /* Mantiene visibili i numeri/punti */
  }

  .txt-message-y li {
      margin-bottom: 5px; /* Aggiunge spazio tra gli elementi dell'elenco per migliorare la leggibilità */
  }
}

.testo25 {
  color: #000000;
  width: 100%;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 10px;
  font-size: 25px;
  text-align:center; 
  font-weight: bold;
  word-wrap: break-word; /* Forza il testo ad andare a capo */
  overflow-wrap: break-word; /* Gestisce meglio il comportamento moderno */
  word-break: break-word; /* Aggiunge compatibilità */
  white-space: normal; /* Permette di andare a capo */
  overflow: hidden; /* Evita lo sforamento orizzontale */

}



.testored {
  color: #ff0000;
  width: 100%;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 10px;
  font-size: 16px;
  text-align:left; 


}

.testoredbold {
  color: #ff0000;
  width: 100%;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 10px;
  font-size: 16px;
  text-align:left; 
font-weight: bold;

}

.codice {
  color: #000000;
  width: 100%;
  padding: 5px 20px 5px 20px;
  font-size: 18px;
  font-weight: bold;
  text-align:left; 
}

.codicered {
  color: #d10000;
  width: 100%;
  padding: 5px 20px 5px 20px;
  font-size: 18px;
  font-weight: bold;
  text-align:left; 
  justify-content: center;
}
.center-text-q {
  color: #d10000;
  text-align: center; /* Centra il testo orizzontalmente */
  margin: 0 auto; /* Facoltativo: puoi regolare il margine */
  font-size: 18px; /* Puoi regolare la dimensione del testo se necessario */
  font-weight: bold;
  width: 100%;
}

.center-text {
  text-align: center; /* Centra il testo orizzontalmente */
  margin: 0 auto; /* Facoltativo: puoi regolare il margine */
  font-size: 30px; /* Puoi regolare la dimensione del testo se necessario */
  font-weight: bold;
  word-wrap: break-word; /* Forza il testo ad andare a capo */
  overflow-wrap: break-word; /* Gestisce meglio il comportamento moderno */
  word-break: break-word; /* Aggiunge compatibilità */
  white-space: normal; /* Permette di andare a capo */
  overflow: hidden; /* Evita lo sforamento orizzontale */  
}

.center-text-box {
  text-align: center; /* Centra il testo orizzontalmente */
  color: white;
  background-color: #339ef3;
  margin: 0 auto; /* Facoltativo: puoi regolare il margine */
  font-size: 18px; /* Puoi regolare la dimensione del testo se necessario */
  font-weight: bold;
  word-wrap: break-word; /* Forza il testo ad andare a capo */
  overflow-wrap: break-word; /* Gestisce meglio il comportamento moderno */
  word-break: break-word; /* Aggiunge compatibilità */
  white-space: normal; /* Permette di andare a capo */
  overflow: hidden; /* Evita lo sforamento orizzontale */  
}

.center-text-black {
  color: #000000;
  text-align: center; /* Centra il testo orizzontalmente */
  margin: 0 auto; /* Facoltativo: puoi regolare il margine */
  font-size: 18px; /* Puoi regolare la dimensione del testo se necessario */
  font-weight: bold;
}
/* Sezione colori */

.azure {
  color: #0055ff;
  font-size: 24px;
  font-weight: bold;
  
}
.welcome-message {
  color: #297505;
  font-size: 30px;
  font-weight: bold;
  text-align:center;
}

.confirm-message {
  color: #297505;
  font-size: 24px;
  font-weight: bold;
  text-align:center;
}

.noconfirm-message {
  color: #ff0000;
  font-size: 24px;
  font-weight: bold;
  text-align:center;
}

.error-message {
  color: #e70000;
  font-size: 30px;
  font-weight: bold;
  text-align:center;

}

.tit-message-y {
  color: yellow;
  font-size: 24px;
  font-weight: bold;
  text-align:center;
}



.success-message {
  color: #007406;
  font-size: 30px;
  font-weight: bold;
  text-align:center;

}

.error-message2 {
  color: #e70000;
  font-size: 30px;
  font-weight: bold;
  text-align:center;
  margin-top: 50px;
  margin-left: 33%;
}

.error-message3 {
  color: #e70000;
  font-size: 20px;
  font-weight: bold;
  text-align:center;

}


.error-message-vio {
  color: #8B008B;
  font-size: 20px;
  font-weight: bold;
  text-align:center;
}

.subsub {
  color: #ff0000;
  font-size: 24px;
  font-weight: bold;
  text-align:left;
  padding-left: 100px;
}

.subsubc {
  color: #013cff;
  font-size: 30px;
  font-weight: bold;
  text-align:center;
  padding-left: 100px;
}

.text-light-blue-c {
  color: #587cff;
  text-decoration: none;
  text-align:center;
  padding: 5px 5px 5px 5px;
  margin-bottom: 20px;
}

.text-light-blue-c2 {
  color: #587cff;
  text-decoration: none;
  text-align:center;
  padding: 5px 5px 5px 5px;
  margin-bottom: 26px;
  font-weight: bold;
}

.text-yellow-warning {
  color: #fffc58;
  text-decoration: none;
  text-align:center;

}

.text-light-blue-c input[type="text"] {
  width: 100%; /* Larghezza completa rispetto al suo contenitore */
  padding: 10px; /* Più spazio interno per il comfort di digitazione */
  margin-right: 10px; /* Spazio tra il campo di testo e il pulsante */
}

.distinct-text {
  display: block; /* Posiziona il testo su una nuova riga */
  color: #000; /* Colore del testo, esempio nero */
  font-weight: normal; /* Peso del font, modificabile a seconda delle esigenze */
  margin-top: 5px; /* Distanza dal testo sopra, regolabile secondo necessità */
}

.distinct-text-r {
  display: block; /* Posiziona il testo su una nuova riga */
  color: #9b0000; /* Colore del testo, esempio nero */
  font-weight: normal; /* Peso del font, modificabile a seconda delle esigenze */
  margin-top: 5px; /* Distanza dal testo sopra, regolabile secondo necessità */
}

#uploadedFile {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
}


/* Testi */

.long-text {
  white-space: normal;     /* Permette di andare a capo in base alla larghezza del contenuto */
  word-wrap: break-word;   /* Spezza le parole lunghe */
  overflow-wrap: break-word; /* Spezza le parole lunghe (per compatibilità cross-browser) */
  max-width: 100%;         /* Assicura che non superi la larghezza del contenitore */
  overflow-x: hidden; 
  color:red;
  font-weight: bold;

}

.colorful-text {
  white-space: normal;        /* Permette al testo di andare a capo */
  word-wrap: break-word;      /* Spezza il testo per evitare overflow */
  overflow-wrap: break-word;  /* Spezza il testo per compatibilità cross-browser */
  max-width: 100%;            /* Assicura che non superi la larghezza del contenitore */
  overflow-x: hidden;         /* Nasconde qualsiasi overflow orizzontale */
  display: inline-block;      /* Mantiene gli span in linea e responsivi */
}


.text-black-bg-white {
  color: #fff;
  background-color: black;
  text-decoration: none;
}

.boxtit {
  color: #fff;
  background-color: #333333;
  font-size: 30px;
  text-decoration: none;
  padding: 5px;
}

.boxman {
  color: #fff;
  background-color: #0f58c4;
  font-size: 22px;
  text-decoration: none;
  padding: 5px;
}

.boxblack {
  color: yellow;
  background-color: #000;
  font-size: 20px;
  text-decoration: none;
  padding: 5px;
}

.t-black {
  color: black;
  text-decoration: none;
}
.text-green {
  color: #397d1a;
  text-decoration: none;
}

.text-red {
  color: red;
  text-decoration: none;

}

.text-cyan {
  color: #339ef3;
  text-decoration: none;
}

.text-orange {
  color: #fda018;
  text-decoration: none;
}

.text-brown {
  color: #795548;
  text-decoration: none;
}

.text-purple {
  color: #aa55ff;
  text-decoration: none;
}

.text-blue {
  color: #0000ff;
  text-decoration: none;
}

.text-pink {
  color: #fa7be3;
  text-decoration: none;
}

.text-light-brown {
  color: #b2681d;
  text-decoration: none;
}

.text-light-blue {
  color: #587cff;
  text-decoration: none;
}

.text-deep-red {
  color: #680000;
  text-decoration: none;
}

.text-red-b {
  color: #fc0000;
  text-decoration: none;
  font-weight: bold;
}

.text-olive-green {
  color: #555500;
  text-decoration: none;
}

.text-dark-purple {
  color: #55007f;
  text-decoration: none;
}

.text-dark-green {
  color: #003e00;
  text-decoration: none;
}

.text-dirty-yellow {
  color: #b87b00;
  text-decoration: none;
}

.text-deep-purple {
  color: #7f007f;
  text-decoration: none;
}

/* testi su riga */
.deep-red { color: #8B0000; 
  font-size: 24px;
  font-weight: bold;
}

.padding100 {
  padding-left: 100px;
}
  
.dark-orange { color: #FF8C00; 
  font-size: 24px;
  font-weight: bold;} /* Arancione scuro */
.mustard { color: #FFDB58; 
  font-size: 24px;
  font-weight: bold;}     /* Senape, un giallo più scuro */
.forest-green { color: #228B22; 
  font-size: 24px;
  font-weight: bold;} /* Verde foresta */
.navy-blue { color: #000080; 
  font-size: 24px;
  font-weight: bold;}  /* Blu navy */

.burgundy { color: #800020; 
  font-size: 24px;
  font-weight: bold;}   /* Borgogna */
.plum { color: #DDA0DD; 
  font-size: 24px;
  font-weight: bold;}       /* Prugna, un viola medio */
.dark-teal { color: #008080; 
  font-size: 24px;
  font-weight: bold;}  /* Teal scuro */
.olive-green { color: #808000; 
  font-size: 24px;
  font-weight: bold;} /* Verde oliva */
.dark-pink { color: #E75480; 
  font-size: 24px;
  font-weight: bold;}  /* Rosa scuro */
.bronze { color: #CD7F32; 
  font-size: 24px;
  font-weight: bold;}     /* Bronzo */
.violet { color: #330685; 
      font-size: 24px;
      font-weight: bold;}     /* Bronzo */
.midnight-blue {
          color: #191970;
          font-size: 24px;
          font-weight: bold;
      }
      
      .red-bold {
          color: #d80000;
          font-size: 24px;
          font-weight: bold;
      }
      
      .dark-slate-gray {
          color: #2F4F4F;
          font-size: 24px;
          font-weight: bold;
      }
      
      .olive-drab {
          color: #6B8E23;
          font-size: 24px;
          font-weight: bold;
      }
      
      .saddle-brown {
          color: #8B4513;
          font-size: 24px;
          font-weight: bold;
      }
      
      .dark-olive-green {
          color: #556B2F;
          font-size: 24px;
          font-weight: bold;
      }
      
      .sienna {
          color: #A0522D;
          font-size: 24px;
          font-weight: bold;
      }
      
      .dim-gray {
          color: #696969;
          font-size: 24px;
          font-weight: bold;
      }
      
      .dark-cyan {
          color: #008B8B;
          font-size: 24px;
          font-weight: bold;
      }
      
      .dark-magenta {
          color: #8B008B;
          font-size: 24px;
          font-weight: bold;
      }

      .azure {
          color: #0055ff;
          font-size: 24px;
          font-weight: bold;
      }
      .text-bred {
          color: red;
          font-size: 24px;
          font-weight: bold;
      }
              .donate {
          color: #008B8B;
          font-size: 20px;
          font-weight: bold;
          text-align:center;
      }
      .text-yellow {
          color: rgb(255, 223, 78);
          font-size: 14px;
          font-weight: bold;
      }

      .text-yellow-giga {
          color: rgb(255, 223, 78);
          font-size: 22px;
          font-weight: bold;
      }

      .text-yellow-supergiga {
          color: rgb(255, 223, 78);
          font-size: 32px;
          font-weight: bold;
      }
      .recover-password {
          color: #333; /* Cambia il colore del testo */
          font-weight: bold;
      }
      .recover-link {
          color: #0056b3; /* Colore del link */
          font-weight: bold;
      }
      .recover-link:hover {
          color: #003366; /* Colore al passaggio del mouse */
      }