/* layout.css */


/* Impostazioni base */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #15191D; 
    color: white; 
    height: 100vh;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: auto;
    font-size: 62.5%;
    box-sizing: border-box;
}


.main-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    max-width: 100%;
    max-width: 70vw;
    margin-left: 15vw;
    margin-right: 15vw;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1;
    margin-bottom: 2rem;

}


.cl-sez {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    overflow: auto;

}

.cl-sez-cont {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-start;
    align-items: flex-start;
}



.titolo-main {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
}


.titolo-main h2 {
    display: inline;
    margin: 0;
    font-size: clamp(2.4rem, 2.6rem, 2.8rem); /* Dimensione del titolo */
}

.help-icon {
    margin-left: 20px; /* Spaziatura tra titolo e icona */
    color: yellow; /* Colore del punto interrogativo */
    cursor: pointer; /* Mostra il puntatore come cliccabile */
    font-size: clamp(1.6rem, 1.8rem, 2rem); /* Dimensione del punto interrogativo */
}

.help-icon:hover {
    color: #0056b3; /* Cambia colore quando si passa il mouse */
}




*, *::before, *::after {
  box-sizing: border-box;
}



/* Contenitore del gruppo switch */
.cl-switch-gruppo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    padding: 1.5rem;

    background-color: #1C2025;
    border-top: 1px solid #2a2f35;
    border-bottom: 1px solid #2a2f35;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.cl-switch-gruppo::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Bottoni di switch */
.cl-switch-btn {
    color: white;
    font-size: clamp(1.4rem, 1.5rem, 1.6rem);
    padding: 0.8rem 1.2rem;
    background-color: #283142;
    border: 1px solid #394455;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Hover e stato attivo */
.cl-switch-btn:hover,
.cl-switch-btn.active {
    background-color: #1C2025;
}

.cl-switch-btn.active {
    background-color: #394455;
    color: #ffc107;
    border-color: #ffc107;
}



/* SWITCH INT */

.switch-int container {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
}

/* Contenitore dei bottoni switch */
.switch-int-btn  {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

/* Etichetta sopra i bottoni */
.switch-int-label {
  display: flex;         /* Forza il posizionamento su una nuova riga */
  font-size: 1.4rem;        /* Dimensione testo */
  text-align: left;       /* Allineamento a sinistra */
}


/* Bottoni switch */
.btn-stats-opera {
  flex: 1 1 0;
  width: 100%;
  margin: 0;
  border-radius: 0;
  border: 1px solid #394455;
  background-color: #283142;
  color: white;
  font-size: clamp(1.4rem, 1.6rem, 1.8rem);
  padding: 1rem 1rem;  /* 5 5 */
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

/* Bottone attivo */
.btn-stats-opera.btn-stats-attivo {
  background-color: #394455;
  color: #ffc107;
  border-color: #ffc107;
}

.btn-speed-attivo {
  background-color: #394455;
  color: #ffc107;
  border-color: #ffc107;
}



.site-footer {
    width: 70vw; /* Adatta la larghezza considerando la sidebar */
    border-top: 1px solid #fff; /* Linea bianca di separazione */
    box-sizing: border-box; /* Evita overflow causato dal padding */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra gli elementi orizzontalmente */
    justify-content: center; /* Centra gli elementi verticalmente */
    text-align: center;
    gap: 0;
    height: auto;
    max-height: 100%;
    margin-left: 15vw;
    margin-right: 15vw;
    padding-bottom: 0.5rem;
    background-color: #15191D; 

  }

  
  /* Stili specifici per le sezioni del footer */
  .footer-disclaimer,
  .footer-copyright {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    justify-content: center; /* Centra il testo orizzontalmente */
    align-items: center; /* Centra verticalmente */
    height: auto;
    box-sizing: border-box;

}
  
.footer-disclaimer {
    font-size: 1.2rem;
}
  
.footer-copyright {
    font-size: 1.2rem;
}

.footer-link {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #fff;
}


div {
    font-size: 1.2rem;
}

 div select {
    width: auto;
}

/* Resetta margin e padding per gli elementi principali */
h1, h2, h3, h4, h5, h6, p, a {
    margin: 0;
    padding: 0.5rem;
    text-align: left;
    font-size: 1.6rem;
}

/* Stili per i titoli */
h1 {
    font-size: clamp(3.4rem, 3.6rem, 3.8rem); /* Dimensione grande per titoli principali, ben leggibile */
    font-weight: bold; /* Grassetto per dare enfasi */
}

h2 {
    font-size: clamp(2.8rem, 3rem, 3.2rem); /* Leggermente più piccolo di h1 per gerarchia visiva */
    font-weight: bold;
}

h3 {
    font-size: clamp(2.2rem, 2.4rem, 2.6rem); /* Adatto per sottotitoli o sezioni minori */
    font-weight: bold;
}

h4 {
    font-size: clamp(1.8rem, 2,2rem, 2rem); /* Buon compromesso per testi ancora importanti ma non dominanti */
    font-weight: bold;
}

h5 {
    font-size: clamp(1.6rem, 1.8rem, 2rem); /* Meno enfatico, adatto per titoli ausiliari o specifici */
    font-weight: bold;
}

h6 {
    font-size: clamp(1.4rem, 1.6rem, 1.8rem); /* Il più piccolo dei titoli, ma ancora distinto dal testo normale */
    font-weight: bold;
}


a {
    color: white;
    text-decoration: none; /* Rimuove il sottolineato dai link */
}




/* Stili di base per i menu a tendina */
select {
    padding: 1rem; /* Spazio interno per rendere le opzioni più facili da selezionare */
    background-color: #283142; /* Colore di sfondo che si abbina allo sfondo del sito */
    color: white; /* Colore del testo */
    border: 2px solid #555; /* Bordo per distinguere visivamente il menu a tendina */
    border-radius: 5px; /* Bordo arrotondato per un aspetto moderno */
    font-size: clamp(1.4rem, 1.6rem, 1.8rem); /* Dimensione del testo leggibile */
    margin: 0 0px; /* Margine laterale per evitare che il menu tocchi direttamente i bordi del contenitore */
    width: auto; /* Larghezza auto per adattarsi al contenuto, ma sarà ridefinito nei CSS specifici della pagina se necessario */
    cursor: pointer; /* Cambia il cursore per indicare che l'elemento è interattivo */
}


select option {
    padding: 1rem;
}


label {
    color: white; /* Testo bianco per contrastare con lo sfondo scuro */
    font-size: clamp(1.2rem, 1.4rem, 1.6rem); /* Dimensione uniforme del testo per tutti i label */
    cursor: default; /* Indica che il label non è interattivo, ma migliora l'UX */
    transition: color 0.3s; /* Transizione morbida per cambi di colore, se necessario */
    display: block;
    margin-bottom: 0.2rem;
    text-align: left;
}


/* Migliora l'interazione visiva al passaggio del mouse */
label:hover input[type="checkbox"] {
    box-shadow: 0 0 5px #ffc107;
}



.cl-tabelle {
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: 100%;
    height: auto;
    overflow-y: auto; 
    overflow-x: auto; 
    align-self: center;
}




/* Stile per le tabelle */
.cl-tabelle table {
    width: auto; /* Prende la larghezza massima disponibile */
    border-collapse: collapse;
    margin: 0; /* Centra la tabella */
    table-layout: auto; /* Forza una larghezza fissa delle colonne */
    display: table;
}


.cl-tabelle th, .cl-tabelle td {
    padding: 1rem;
    text-align: center; /* Centra il testo nelle celle */
    font-size: clamp(1.4rem, 1.6rem, 1.8rem);
}


.cl-tabelle th {
    position: sticky;
    top: 0; /* Aggiorna questo se c'è una barra di navigazione sopra la tabella */
    background-color: #19232D; /* Usa un colore di sfondo consistente */
    z-index: 5; /* Eleva sopra il contenuto scorrevole */
    box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.5); /* Ombra per separazione visiva */
}


.cl-tabelle tr:nth-child(even) {
    background-color: #19232D; /* Alternanza colori per le righe */
}

.cl-tabelle tr:nth-child(odd) {
  background-color: #141A20; /* più vicino a #0F1215 per differenziare le righe */
}





/* Stile per i bottoni */
.cl-bottoni {
    background-color: #ffc107; /* Colore di sfondo giallo */
    color: white; /* Testo nero */
    padding: 1rem 2rem; /* Dimensioni generose per rendere il bottone grande e facilmente cliccabile */
    font-size: 1.8rem; /* Dimensione del testo grande per leggibilità */
    font-weight: bold;
    border: none; /* Nessun bordo per mantenere l'aspetto pulito */
    border-radius: 2.5rem; /* Bordo arrotondato per un aspetto moderno */
    cursor: pointer; /* Indica che l'elemento è cliccabile */
    transition: background-color 0.3s; /* Transizione fluida per il cambio colore al passaggio del mouse */
    margin: 1rem 0.5rem; /* Spazio sopra e sotto il bottone */
    display: inline-block; /* Consente al bottone di avere margini e di essere allineato con altri elementi */
}


.cl-bottoni-contenitore {
    display: flex;
    justify-content: flex-start;
}



.back-btn {
    padding: 0.5rem; /* Padding ridotto per permettere alla freccia di riempire più spazio */
    font-size: 2.4rem; /* Aumenta la dimensione del font per riempire il bottone */
    background-color: #283142; /* Colore di sfondo */
    color: white;
    border: 2px solid #555; /* Bordo coerente con altri elementi di design */
    border-radius: 5px; /* Bordo arrotondato */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Utile se il bottone è un link */
    width: 1.5rem; /* Larghezza fissa del bottone */
    height: 1.5rem; /* Altezza fissa del bottone */
}



/* Stili per gli input numerici */
input[type="number"] {
  padding: 1rem;
  background-color: #283142;
  color: white;
  border: 2px solid #555;
  font-size: clamp(1.4rem, 1.6rem, 1.8rem);
  width: 8rem;
  text-align: center;
}



input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Rimuove i pulsanti di incremento e decremento per Webkit browsers */
    margin: 0; /* Rimuove il margine dei pulsanti di spin */
}

input[type="number"]:focus {
    outline: none; /* Rimuove l'outline al focus per mantenere un aspetto pulito */
    border-color: #ffc107; /* Cambia il colore del bordo quando l'input è focalizzato per migliorare la visibilità */
    box-shadow: 0 0 5px #ffc107; /* Aggiunge un leggero shadow per enfatizzare l'input attivo */
}


/* Stili per gli input di testo */
input[type="text"], input[type="date"] {
    padding: 1rem; /* Spazio interno per una digitazione comoda */
    background-color: #283142; /* Colore di sfondo per abbinarsi al resto dell'interfaccia */
    color: white; /* Colore del testo bianco per contrasto su sfondo scuro */
    border: 2px solid #555; /* Bordo per distinguere visivamente l'input */
    font-size: clamp(1.4rem, 1.6rem, 1.8rem); /* Dimensione del testo leggibile */
    text-align: left; /* Allinea il testo a sinistra */
    flex-grow: 1;
}

input[type="text"]:focus, input[type="date"]:focus {
    outline: none; /* Rimuove l'outline al focus per mantenere un aspetto pulito */
    border-color: #ffc107; /* Cambia il colore del bordo quando l'input è focalizzato per migliorare la visibilità */
    box-shadow: 0 0 5px #ffc107; /* Aggiunge un leggero shadow per enfatizzare l'input attivo */
}

.btn-move {
    background-color: #394455; /* Colore di sfondo blu-grigio */
    color: white;
    padding: 0.6rem 1rem; /* Padding ulteriormente ridotto */
    font-size: clamp(1.4rem, 1.6rem, 1.8rem); /* Dimensione del font mantenuta */
    font-weight: bold;
    border: 1px solid #555; /* Bordo sottile */
    border-radius: 6px; /* Bordo leggermente arrotondato */
    cursor: pointer;
    transition: background-color 0.2s; /* Transizione veloce */
    display: inline-block;
    margin: 0.8rem;
}

.btn-move:hover {
    background-color: #506680; /* Colore più chiaro al passaggio del mouse */
}

.btn-move:focus {
    outline: none;
    border-color: #ffc107;
    box-shadow: 0 0 6px #ffc107; /* Ombra leggermente più sottile */
}

.btn-apply {
    background-color: #283142; /* Colore di sfondo più scuro */
    color: #ffc107; /* Colore del testo giallo per distinguerlo */
    padding: 0.6rem 1rem; /* Padding ulteriormente ridotto */
    font-size: clamp(1.4rem, 1.6rem, 1.8rem); /* Dimensione del font mantenuta */
    font-weight: bold;
    border: 1px solid #ffc107; /* Bordo giallo sottile */
    border-radius: 6px; /* Bordo leggermente arrotondato */
    cursor: pointer;
    transition: background-color 0.2s; /* Transizione veloce */
    display: inline-block;
    margin: 0.8rem;
}

.btn-apply:hover {
    background-color: #394455; /* Cambio colore di sfondo al passaggio del mouse */
}

.btn-apply:focus {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 6px #ffffff; /* Ombra leggermente più sottile */
}


/* Stili per il bottone 'btn-delete' */
.btn-delete {
    background-color: #D32F2F; /* Rosso scuro per segnalare un'azione di cancellazione */
    color: white; /* Testo bianco per contrastare con il rosso scuro */
    padding: 1rem 2rem; /* Padding per rendere il bottone grande e facilmente cliccabile */
    font-size: clamp(1.4rem, 1.6rem, 1.8rem); /* Dimensione del testo leggibile */
    font-weight: bold; /* Testo in grassetto per dare enfasi */
    border: none; /* Nessun bordo per un look più pulito */
    border-radius: 8px; /* Bordo arrotondato per un aspetto moderno */
    cursor: pointer; /* Indica che l'elemento è cliccabile */
    transition: background-color 0.3s; /* Transizione fluida per il cambio colore al passaggio del mouse */
    display: inline-block; /* Consente al bottone di avere margini e di essere allineato con altri elementi */
    margin: 1rem; /* Spazio intorno al bottone per evitare sovrapposizioni */
}

.btn-delete:hover {
    background-color: #F44336; /* Rosso più chiaro al passaggio del mouse per indicare interattività */
}

.btn-delete:focus {
    outline: none; /* Rimuove l'outline al focus per mantenere l'aspetto pulito */
    box-shadow: 0 0 8px #F44336; /* Aggiunge una leggera ombra per enfatizzare il bottone attivo */
}

.btn-delete:before {
    content: "\1F5D1"; /* Aggiunge il simbolo unicode per '🗑️' che è un cestino */
    display: inline-block; /* Rende il simbolo un blocco in linea con il testo */
    margin-right: 0.5rem; /* Distanza tra il simbolo e il testo */
    font-size: 2rem; /* Rende il simbolo un po' più grande del testo per enfatizzarlo */
}


/* Stile per il bottone 'Modifica' con simbolo di penna */
.btn-edit {
    font-weight: bold; /* Testo in grassetto per maggiore visibilità */
    font-size: clamp(1.4rem, 1.6rem, 1.8rem); /* Dimensione del testo adeguata per leggibilità */
    padding: 1rem 2rem; /* Padding per rendere il bottone più grande e comodo da cliccare */
    border: none; /* Nessun bordo per un look più pulito */
    border-radius: 25px; /* Bordi arrotondati per un design moderno */
    cursor: pointer; /* Cambia il cursore per indicare che è cliccabile */
    display: flex; /* Usa flexbox per centrare l'icona e il testo */
    align-items: center; /* Allinea verticalmente il contenuto */
    justify-content: center; /* Centra orizzontalmente il contenuto */
}
  
.btn-edit:before {
    content: "\270E"; /* Aggiunge il simbolo unicode per '✎' che è una penna stilizzata */
    display: inline-block; /* Rende il simbolo un blocco in linea con il testo */
    margin-right: 0.5rem; /* Distanza tra il simbolo e il testo */
    font-size: 2rem; /* Rende il simbolo un po' più grande del testo per enfatizzarlo */
}
  




/* Stile per i checkbox */
input[type="checkbox"] {
    accent-color: #ffc107; /* Imposta il colore principale del checkbox al giallo per mantenere coerenza con gli elementi interattivi */
    height: 2rem; /* Altezza uguale alla larghezza per mantenere la proporzione quadrata */
    cursor: pointer; /* Indica che l'elemento è cliccabile */
    width: 2rem;
}

input[type="checkbox"]:focus {
    outline: none; /* Rimuove l'outline al focus per mantenere l'aspetto pulito */
    box-shadow: 0 0 3px #ffc107; /* Aggiunge un leggero shadow intorno al checkbox per enfatizzare l'elemento attivo */
}

input[type="checkbox"]:checked {
    background-color: #394455; /* Cambia il colore di sfondo quando il checkbox è spuntato */
    border: 2px solid #ffc107; /* Bordatura evidente per distinguere quando è spuntato */
}





/* Stili comuni per il contenitore del menu */
.menus-container {
    position: relative;
    width: 20rem;
    display: flex;
    flex-direction: column;
}

/* Stili comuni per l'input che funge da trigger del menu */
.menus-input {
    width: 100%;
    border: 2px solid #394455; /* Colore più chiaro rispetto al precedente per un migliore contrasto */
    background-color: #283142; /* Tonalità di blu scuro coerente con il resto del sito */
    color: white;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
    margin: 0;
    padding: 1rem;
    font-size: 1.6rem;
}

.menus-input:focus, .menus-input:hover {
    border-color: #ffffff; /* Accento bianco per elevare il focus e l'interazione */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* Ombra luminosa per un maggiore risalto */
}


/* Stili comuni per la lista di opzioni che appare sotto l'input */
.menus-lista {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #19232D;
    border: 1px solid #394455;
    z-index: 1000;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 20rem;
    overflow-wrap: break-word; /* Permette ai testi lunghi di andare a capo */

}


/* Stili per le opzioni all'interno della lista */
.menus-lista .option {
    padding: 1rem;
    color: white; /* Testo bianco per mantenere il contrasto e la leggibilità */
    cursor: pointer;
    font-size: 1.6rem;
    border-bottom: none; /* Eliminata la separazione per un aspetto più unitario */
    text-align: left;
}

.menus-label {
    font-size: clamp(1.2rem, 1.4rem, 1.6rem);
    display: flex;
    text-align: left;
    align-self: flex-start;
    margin-bottom: 0.2rem;
}

/* Stile per l'opzione selezionata nella lista */
.menus-lista .option.selected {
    background-color: #394455; /* Sfondo di un blu più chiaro per evidenziare l'opzione selezionata */
    color: #ffffff; /* Testo bianco per contrasto */
    font-weight: bold; /* Rendi il testo grassetto per un ulteriore enfasi */
}





/* Stili comuni per il contenitore del nuovo menu */
.menus2-container {
    position: relative;
    width: auto;
    display: flex;
    flex-direction: column;
}

/* Stili comuni per l'input che funge da trigger del nuovo menu */
.menus2-input {
    width: 100%;
    height: 4rem;
    border: 2px solid #394455;
    background-color: #283142;
    color: white;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
    margin: 0;
    padding: 1rem;
}

.menus2-input:focus, .menus2-input:hover {
    border-color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Stili comuni per la lista di opzioni che appare sotto l'input */
.menus2-lista {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #19232D;
    border: 1px solid #394455;
    z-index: 1000;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 20rem;
    overflow-wrap: break-word;
}

/* Stili per le opzioni all'interno della lista */
.menus2-lista .option2 {
    padding: 1rem;
    color: white;
    cursor: pointer;
    border-bottom: none;
    display: flex;
    flex-direction: column;
}

/* Stili per il nome dell'opzione */
.menus2-lista .option2-nome {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* Stili per la descrizione dell'opzione */
.menus2-lista .option2-descrizione {
    font-size: clamp(1.4rem, 1.6rem, 1.8rem);
    color: #b0b0b0; /* Colore grigio chiaro per differenziare la descrizione dal nome */
}

/* Stili per l'opzione selezionata nella lista */
.menus2-lista .option2.selected {
    background-color: #394455;
    color: #ffffff;
    font-weight: bold;
}

/* Stili per il label del nuovo menu */
.menus2-label {
    text-align: left;
    font-size: clamp(1.2rem, 1.4rem, 1.6rem);
    display: inline-block;
    margin-bottom: 0.2rem;
}




.cl-inputs {
    display: flex;
    flex-direction: column;
    margin: 0;
}



/* Avatar nella prima colonna delle tabelle */
.avatarGioc-img {
  width: 5rem;
  height: 6rem;
  object-fit: contain; /* così non si taglia mai */
  padding: 0.1rem; /* spazio interno per distacco dal bordo */
  background-color: white; /* sfondo per creare contrasto */
  border-radius: 50%; /* stesso stile circolare del campo */
  border: 1px solid white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  display: block;
  margin: auto;
}


/* Nome e squadra in colonna */
.avatarGioc-nomi {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.avatarGioc-nome {
  font-weight: 600;
  font-size: 1.6rem;
  color: #ffffff;
  line-height: 1.3;
}

.avatarGioc-sq {
  font-size: 1.2rem;
  color: #bbbbbb;
  line-height: 1.2;
}









/* MEDIA */



/* Responsive Design */
@media (max-width: 768px) {

    body, html {
    width: 100%;
    height: auto !important;
    }
  
    .main-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    }

    .cl-sez {
        flex: 1;
        width: 100%;
        text-align: left;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .cl-sez-cont {
        flex: 1;
        width: 100%;
    }



    .site-footer {
        width: 100%;
        height: auto !important;
        max-width: 100%;
        margin-top: 2rem;
        margin-left: 0;
        margin-right: 0;
    }




    .cl-tabelle {
        width: 100%;
        max-height: 70vh;
        border: 2px solid #15191D;
        align-self: center;
    }





    div select {
        width: 100%; /* I menu a tendina occupano l'intera larghezza */
    }

    .cl-menus-mb {
        width: 100%;
    }

    .cl-menus-mb select, .cl-menus-mb input[type="text"], .cl-menus-mb input[type="number"], .cl-menus-mb input[type="date"] {
        width: 100%;

    }




    .cl-bottoni-contenitore {
        width: 100%;
        justify-content: flex-end;
        padding-top: 10px;
    }

    .cl-inputtext-contenitore {
        width: 100%;
        flex-direction: column;
        display: flex;
    }

    input[type="number"] {
        width: 3.5rem;
    }

    input[type="text"] {
        width: 100%; /* Occupare tutta la larghezza */
        box-sizing: border-box; /* Includere padding e border nella larghezza */
    }


    .menus-container {
        width: 100%;
    }

    .menus2-container {
        width: 100%;
    }

    .titolo-main {
        display: flex; /* Utilizza il layout flessibile per posizionare gli elementi */
        justify-content: space-between; /* Spazio tra il titolo e il punto interrogativo */
        align-items: center; /* Centrare verticalmente gli elementi */
    }

    .titolo-main h2 {
        margin: 0; /* Rimuove margini per evitare spostamenti indesiderati */
        flex-grow: 1; /* Il titolo occupa lo spazio disponibile a sinistra */
    }

    .titolo-main .help-icon {
        margin-left: auto; /* Sposta il punto interrogativo all'estrema destra */
        cursor: pointer; /* Imposta il puntatore come cliccabile */
        font-size: 18px; /* Dimensione del punto interrogativo */
    }


    .cl-switch-gruppo {
        justify-content: flex-start;
        overflow-x: auto;

    }


}






@media (min-width: 768px){



    .chisiamo-testo {
        width: 15vw;
    }




    .cl-bottoni-contenitore {
        padding-top: 1rem;
    }

  
           

}