/* ---------------------------------------------------------------------------------------- 
	Logout form
   ---------------------------------------------------------------------------------------- */
.logout__container {width: 100%; margin: 40px auto; display: flex; justify-content: center; gap: 20px;}

/* ---------------------------------------------------------------------------------------- 
	Pannello di controllo
   ---------------------------------------------------------------------------------------- */
.pannelloControllo {width: 100%; max-width: 1000px; margin: 40px auto; padding: 10px; display: flex; gap: 40px; flex-wrap: wrap;}
    .azione {width: 200px; height: 200px; padding: 10px; border: 4px solid var(--color1); display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-radius: 12px;}
 
@media (max-width: 767px) {
   .pannelloControllo {gap: 20px 0; justify-content: space-between;}
   .azione {width: 48%; height: auto;}
}
/* ---------------------------------------------------------------------------------------- 
	Commenti
   ---------------------------------------------------------------------------------------- */
#tabellaCommenti {width: 100%; max-width: 1400px; margin: 20px auto; margin-bottom: 100px; border-collapse: collapse;}
   #tabellaCommenti tr {vertical-align: top; border-bottom: 1px solid var(--grey);}
      #tabellaCommenti td, #tabellaCommenti th {padding: 10px; text-align: left;}
      #tabellaCommenti td:nth-child(2) {width: 250px}
      #tabellaCommenti .btn {padding: 6px 12px; width: 100px;}
            
@media (max-width: 767px) {
   #tabellaCommenti td:nth-child(2) {width: auto; display: flex; flex-direction: column; gap: 6px;}
   #tabellaCommenti .btn {width: auto;}
   #tabellaCommenti .btn span {display: none;}
   .btnApprova:after {content: 'OK';}
   .btnRifiuta:after {content: 'NO';}
}
/* ---------------------------------------------------------------------------------------- 
	Incarichi
   ---------------------------------------------------------------------------------------- */
   #tabellaIncarichi {width: 100%; margin-top: 40px; margin-bottom: 100px; border-collapse: collapse; font-size: 13px;}
   #tabellaIncarichi tr {vertical-align: top; border-bottom: 1px solid var(--grey);}
      .tabellaIncarichi__tr__incarico {background: var(--color2); color: var(--color4); cursor: pointer;}
      .tabellaIncarichi__tr__dettaglio {color: var(--color1); display: none;}
      #tabellaIncarichi td, #tabellaIncarichi th {padding: 10px; text-align: left;}
         .tabellaIncarichi__dettagli {display: flex; padding: 10px;}
            .tabellaIncarichi__dettagli__documenti {flex-grow: 1;}
               .tabellaIncarichi__dettagli__documenti__documento {width: 100%; display: flex; gap: 10px; align-items: center;}
                  .tabellaIncarichi__dettagli__documenti__documento__icona {width: 30px;}
                     .tabellaIncarichi__dettagli__documenti__documento__icona img {height: 25px; width: auto;}
               .tabellaIncarichi__dettagli__documenti a {color: blue;}
            .tabellaIncarichi__dettagli__altreInfo {display: none;}
            .tabellaIncarichi__dettagli__contatti {width: 15%; border-left: 1px solid gray; padding-left: 10px;}

@media (min-width: 768px) and (max-width: 1281px) {
      #clmIndirizzo {display: none;}  
            .tabellaIncarichi__dettagli__altreInfo {display: block; width: 15%;}
}
            
@media (max-width: 767px) {
   #tabellaIncarichi {font-size: 11px; margin: 20px auto;}
      #tabellaIncarichi td, #tabellaIncarichi th {padding: 6px 2px;}
      #clmTipologia, #clmIndirizzo, #clmPagato{display: none;}
         .tabellaIncarichi__dettagli {display: block;}
            .tabellaIncarichi__dettagli__altreInfo {display: block; width: 100%; margin-top: 10px; padding-left: 0px; border-top: 1px solid gray;}
            .tabellaIncarichi__dettagli__contatti {width: 100%; margin-top: 10px; border-left: none; padding-left: 0px; border-top: 1px solid gray;}
}

/* ---------------------------------------------------------------------------------------- 
	Utenti
   ---------------------------------------------------------------------------------------- */
   #tabellaUtenti {width: 100%; margin-top: 40px; margin-bottom: 100px; border-collapse: collapse; font-size: 13px;}
   #tabellaUtenti tr {vertical-align: top; border-bottom: 1px solid var(--grey);}
      #tabellaUtenti td, #tabellaUtenti th {padding: 10px; text-align: left;}
      #tabellaUtenti td img {width: 30px; height: auto;}

@media (max-width: 767px) {
   #tabellaUtenti {font-size: 11px; margin: 20px auto;}
      #tabellaUtenti td, #tabellaUtenti th {padding: 6px 2px;}
}