/*ScrewWheelCertLogin.css*/
/*https://www.w3docs.com/snippets/css/how-to-create-responsive-login-form-in-navbar-with-css*/
/*
* {
    box-sizing: border-box;
  }
*/
* {
  box-sizing: border-box;
}


.inputype {
  margin: 5px;
  /* Margine tra i pulsanti */
  padding: 5px 10px;
  /* Dimensione del padding */
  font-size: 16px;
  /* Dimensione del testo */
  background-color: #0b4d9d;
  /* Colore di sfondo */
  color: white;
  /* Colore del testo */
  border: none;
  /* Rimuovi il bordo */
  border-radius: 5px;
  /* Arrotonda gli angoli */
  cursor: pointer;
  /* Mostra il cursore a mano quando ci si passa sopra */
  transition: background-color 0.3s;
  /* Effetto di transizione */
}

button:hover {
  background-color: #1576ed;
  /* Cambia il colore di sfondo quando si passa sopra */
}

button:focus {
  outline: none;
  /* Rimuovi l'outline sul focus */
}


.hello {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  color: white;
  font-size: 17px;
  border: none;
  cursor: pointer;
}



/*********************************** sidenav ********************************/

/* Fixed sidenav, full height */
.sidenav {
  height: auto;
  width: 100px;
  position: fixed;
  vertical-align: bottom;
  left: 0;
  background-color: #939596;
  overflow: hidden;
}

/* Style the sidenav links and the dropdown button */
.sidenav a,
.dropdown-btn,
.sidenav button {
  float: center;
  width: 100%;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 0px;
  /*padding: 14px 16px;*/
  text-decoration: none;
  font-size: 18px;
  background-color: #939596;
  border: none;
}

/* On mouse-over */
.sidenav a:hover,
.dropdown-btn:hover,
.sidenav button:hover {
  background-color: #eeeeee;
  color: #000000;
}

.sidenav a.active,
.sidenav button.active {
  background-color: #0e002b;
  color: #ffffff;
}

/*****************************************************************************/

.hom {
  margin-left: 200px;
  /* Same as the width of the sidenav */
  width: 200px;
  display: block;
  flex-direction: column;
  justify-content: left;
  align-items: left;

}

.homform {
  /*margin-left: 100px;*/
  height: 40%;
  width: 50%;
  display: block;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
}


.header-buttons {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 1;
  top: 50px;
  left: 0;
  background-color: #b0afb2;
  overflow-x: hidden;
  padding-top: 20px;
}



/*****************************************************************************/


/* Bordi delle celle dei due form input e output */
table,
th,
td,
tr {
  border: 1.5px solid black;
  border-collapse: collapse
}


#tableI {
  border: 1px solid black;
  border-collapse: collapse
}



#inputTable {
  /*width: auto;  Larghezza fissa per l'intera tabella */
  table-layout: fixed;
  /* Le colonne avranno larghezza proporzionale */
  /* border: 1.5px solid black; */
  border: none;
  border-collapse: collapse;
}



th,
td {
  text-align: left;
  width: 100;
}

div[id="XY input profile"] {
  width: 150px;
}

.inputField {
  /* width: auto; */
  width: 100 px;
}


th {
  vertical-align: 0%;
}

table td.activable {
  width: 400px;
  /* La div si espande per occupare tutto lo spazio disponibile */
}




table button {
  width: 150px;
  display: block;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 18px;
  background-color: #b0afb2;
  border: none;
  transition: .3s;
}

table button:hover {
  background-color: #d6d6d6;
  transition: .1s;
}

table button.active {
  background-color: #0b4d9d;
  transition: .3s;
}

table button.active:hover {
  background-color: #1576ed;
  transition: .1s;
}




/*********************************    label   *****************************/
#inputSelect {
  display: flex;
  width: 170px;
  /* padding-right: 6px; */
}


/*********************************    tool tip    *****************************/

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 85px;
  /*50% 1*/
  margin-left: -60px;
  /*-60 0*/
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Seconda tooltip: centrata verticalmente e posizionata a destra della cella */
.secondTooltip {
  visibility: hidden;
  width: 250px;
  background-color: blue;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 50%;
  /* Centrata verticalmente rispetto alla cella */
  left: 100%;
  /* Posizionata a destra della cella */
  margin-left: 10px;
  /* Distanza dal bordo destro della cella */
  transform: translateY(-50%);
  /* Centra verticalmente rispetto alla cella */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Mostra la seconda tooltip quando si passa sopra la prima tooltip */
.tooltip:hover .secondTooltip {
  visibility: visible;
  opacity: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


.offset_button {
  margin: 5px;
  /* Margine tra i pulsanti */
  width: 70px;
  display: inline-block;
  padding: 2px 2px;
  /* Dimensione del padding */
  font-size: 12px;
  /* Dimensione del testo */
  background-color: #0b4d9d;
  /* Colore di sfondo */
  color: white;
  /* Colore del testo */
  border: none;
  /* Rimuovi il bordo */
  border-radius: 5px;
  /* Arrotonda gli angoli */
  cursor: pointer;
  /* Mostra il cursore a mano quando ci si passa sopra */
  transition: background-color 0.3s;
  /* Effetto di transizione */
}

.tdbutton_offset {
  text-align: center;
}

.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

/* Create two equal columns that floats next to each other */
.column {
  display: flex;
  flex-direction: column;
  /* width: 50%; */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*REPORT*/
.tableO {
  /**/
  border: 1px solid black;
  /**/
  border-collapse: separate
}


/*************cella dinamica report errori******************/
#updateErrorMessage {
  display: none;
  /* Nasconde il container di default */
  color: red;
  /* Colore del testo degli errori */
  background-color: #FFF0F0;
  /* Sfondo leggermente rosato per gli errori */
  border: 1px solid red;
  /* Bordo rosso per evidenziare il container */
  padding: 10px;
  /* Spaziatura interna */
  margin-top: 10px;
  /* Distanza dal pulsante Update o altri elementi */
  font-size: 14px;
  /* Dimensione del testo appropriata */
  white-space: pre-wrap;
  /* Aggiornato per mantenere gli spazi e gli a capo */
}

#updateErrorMessage ul {
  list-style-type: none;
  /* Rimuove i marcatori dell'elenco */
  padding: 0;
  /* Rimuove il padding di default dell'elenco */
  margin: 0;
  /* Rimuove i margini di default dell'elenco */
}

#updateErrorMessage li {
  margin-bottom: 5px;
  display: block;
}


/*************cella exe message******************/
#exe_message {
  background-color: #f8f9fa;
  /* Sfondo chiaro per la cella */
  border: 1px solid #dee2e6;
  /* Bordo sottile e chiaro */
  padding: 8px 12px;
  /* Spaziatura interna per un aspetto più spazioso */
  margin-top: 10px;
  /* Distanza dal contenuto sopra per separazione */
  font-size: 14px;
  /* Dimensione del testo adeguata per la lettura */
  color: #495057;
  /* Colore del testo scuro per contrasto */
  display: none;
  /* Nascondi di default, mostra tramite JS se necessario */
  width: 100%;
  /* Assicura che occupi l'intera larghezza del contenitore */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Ombra leggera per un effetto sollevato */
}



/************** sezione 1 **************/

/* table[id="T01"] {
  height: 75px;
} */

#T01 {
  border-collapse: collapse;
  width: 100%;
  height: 75px;
  border-bottom: none;
  border-top: none;
}

tr {
  width: 100%;
  /*height:  75px;*/
  border: none
}

#T0101 {
  width: 30%;
  height: 75px;
  font-weight: normal;
  text-align: center;
  align-items: center;
  vertical-align: middle;
}

#T0102 {
  width: 50%;
  height: 75px;
  font-weight: bold;
  text-align: center;
  align-items: center;
  vertical-align: middle;
}

#T0103 {
  width: 20%;
  height: 75px;
  font-weight: normal;
  text-align: center;
  align-items: center;
  vertical-align: middle;
  overflow: hidden; /* Aggiungi questa linea */
}


#T0103 img {
  width: 150px;    /* Imposta la larghezza a 150px */
  height: auto;    /* L'altezza si adatta mantenendo le proporzioni */
  object-fit: contain;
  max-width: 100%; /* Assicura che l'immagine non superi la larghezza della cella */
  border-bottom: none;
  border-top: none;
  padding: 1px 10px;
  margin: 0 auto;  /* Centra l'immagine orizzontalmente */
}

#T01 th {
  height: 70px;
  /* Uniformare l'altezza delle celle */
  text-align: center;
  /* Allineamento orizzontale al centro */
  vertical-align: middle;
  /* Allineamento verticale al centro */
  padding: 0 10px;
  /* Rimuovere padding verticale e aggiungere padding orizzontale */
  margin: 0;
  font-size: 14px;
  /* Regolare se necessario */
  line-height: 1.2;
  /* Ridurre per prevenire aumento dell'altezza */
  white-space: normal;
  /* Permette al testo di andare a capo */
  word-wrap: break-word;
  /* Forza la rottura delle parole se necessario */
}



/************** sezione 2 **************/

#T02 td {
  padding: 0;
  margin: 0;
}

/* #T02 {
  border-collapse: collapse;
  width: 100%;
  /* border-bottom: none;
  border-top: none; 
  /* height: 100%;
} */


#T02 { /* fondamentale fissare la larghezza di almeno questa sezione che senno si strecciava con le parole nelle diverse lingue */
  border-collapse: collapse;
  width: 21cm; /* Imposta la larghezza fissa equivalente a un A4 */
  table-layout: fixed; /* Forza le colonne a rispettare le larghezze assegnate */
}


#T0201,
#T0202,
#T0203,
#T0204,
#T0205,
#T0206 {
  height: 32px;
  /* Altezza fissa della cella */
  font-weight: normal;
  white-space: normal;
  /* Permette il ritorno a capo */
  overflow: hidden;
  /* Nasconde il testo che esce fuori dai limiti della cella */
  text-overflow: ellipsis;
  /* Aggiunge puntini di sospensione se il testo è troppo lungo */
  word-wrap: break-word;
  /* Permette alle parole lunghe di andare a capo */

  /* Imposta la massima altezza per consentire solo due righe */
  line-height: 16px;
  /* Imposta l'altezza della riga a 16px (o un valore che si adatta alla tua font-size) */
  max-height: 32px;
  /* Limita l'altezza massima della cella a due righe (line-height * 2) */
}

#T0201 {
  width: 17%;
}

#T0202 {
  width: 20%;
}

#T0203 {
  width: 18%;
}

#T0204 {
  width: 10.499999999666666666666667%;
}

#T0205 {
  width: 22.16666666666666666666666667%;
}

#T0206 {
  width: 12.333333333333333333%;
}


/************** sezione 3 **************/

#T03 {
  border-collapse: collapse;
  width: 100%;
  /* border-bottom: none;
  border-top: none; */
}

#T0301 {
  width: 10%;
  border: none
}

#T0302 {
  width: 30%;
  font-weight: normal;
  text-align: right;
  padding-right: 28px;
  border: none
}

#T0303 {
  width: 30%;
  font-weight: normal;
  text-align: center;
  border: none
}

#T0304 {
  width: 30%;
  font-weight: normal;
  text-align: left;
  padding-left: 28px;
  border: none
}

/************** sezione 4 **************/

#T04 td,
#T05 td {
  padding: 0;
  margin: 0;
}

#T04 {
  border-collapse: collapse;
  width: 100%;
}

#T0401 {
  width: 10%;
  font-weight: normal;
  border-top: none;
  /* Elimina il bordo superiore */
  border-left: none;
  /* Elimina il bordo destro */
  border-bottom: none;
  /* Elimina il bordo inferiore */
}


#T0404 {
  width: 10%;
  font-weight: normal;
  border-left: none;
  border-top: none;
  border-bottom: none;
  text-align: center
}



#T0402,
#T0403 {
  width: 45%;
  font-weight: normal;
  border: none;
}

#T04 tr:last-child td {
  border-top: none;
  border-bottom: none;
}

/************** sezione 5 **************/

#T05 {
  border-collapse: collapse;
  width: 100%;
  /* border-bottom: none;
  border-top: none; */
}



#T0501 {
  width: 10%;
  font-weight: normal;
  border: none
}

#T0502,
#T0504 {
  width: 22.5%;
  font-weight: normal;
}

#T0503,
#T0505 {
  width: 22.5%;
  font-weight: normal;
  text-align: center;
}


Nasconde il bordo superiore della prima riga #T05 tr:first-child td {
  border-top: none;
}

/* Nasconde il bordo inferiore dell'ultima riga */
#T05 tr:last-child td {
  border-bottom: none;
}

/* #T0506,
#T0507 {
  width: 17.5%;
  font-weight: normal;
} */

/************** sezione 6 **************/

#T06 {
  border-collapse: collapse;
  width: 100%;
  border-bottom: none;
  /* height: 100%;*/
}



#T0601 {
  width: 100%;
  font-weight: normal;
  text-align: center;
  padding-left: 10%;
  /* border-bottom: none;
  border-top: none; */
}


/************** sezione 7 **************/

#T07 {
  border-collapse: collapse;
  width: 100%;
  /* border-bottom: none;
  border-top: none; */
  /* height: 100%;*/
}

#T0701 {
  width: 55%;
  font-weight: normal;
}

#T0702 {
  width: 15%;
  font-weight: normal;
  text-align: center;
}

#T0703,
#T0704 {
  width: 15%;
  font-weight: normal;
  text-align: center;
}

#T0705,
#T0706 {
  width: 15%;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  /* Impedisce il ritorno a capo del testo */
  overflow: hidden;
  /* Nasconde il testo che supera la larghezza della cella */
  text-overflow: ellipsis;
  /* Aggiunge dei puntini di sospensione se il testo è troppo lungo */
}

/*******************************************/


#page {
  background: white;
  display: block;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#page[size="A4"] {
  width: 21cm;
  height: 29.7cm;
}



#google_translate_element {
  background-color: #b0afb2;
  position: relative;
  float: right;
  transform: translateY(-50%);
  margin-top: 2vw;
  /* Sposta l'elemento traduttore al di sotto della barra nav */
}


.language-select-container {
  display: flex;
  justify-content: flex-end;
  /* Allinea gli elementi a destra */
  align-items: center;
  /* Allinea verticalmente al centro */
  margin-right: 20px;
  /* Margine destro per separare dalla restante UI */
}

label[for="languageSelect"],
#languageSelect {
  margin-left: 10px;
  /* Spazio tra label e select */
}

label[for="languageSelect"] {
  font-size: 18px;
  /* Maggiore per il label, per evidenziare */
}

#languageSelect {
  font-size: 16px;
  /* Dimensione del font per il select */
}


canvas {
  width: 100%;
  height: 355.4px;
  /* margin: -1px; */
  aspect-ratio: 1 / 1;
}



@media print {

  span,
  option,
  select,
  label,
  input,
  #tableI,
  table button,
  .homform,
  .noprint,
  #logged_user_text,
  #homform {
    display: none;
  }

  .nav,
  .nav a,
  .sidenav,
  .sidenav at {
    display: none;
  }

  /* Aggiunta della regola per nascondere i bottoni di offset */
  .tdbutton_offset {
    display: none;
    border: none;
  }

  canvas {
    display: block;
    width: 100%;
    /* Assicura che la larghezza non ecceda il contenitore */
    max-width: 100%;
    /* Evita che il canvas si estenda oltre il suo contenitore */
    height: auto;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }

  /* Assicura che il contenitore del canvas sia configurato per centrare i contenuti */
  #T0402,
  #T0403 {
    text-align: center;
    /* Centra i contenuti delle celle */
    padding: 0;
  }

  .column {
    position: absolute;
    width: 100%;
    height: 90%;
    margin: 0;
    padding: 0;
    flex-direction: row;
  }

  body,
  html {
    margin: 0;
    padding: 0;
    width: 21cm;
    height: 29.7cm;
  }

  page {
    size: A4;
    width: 21cm;
    height: 29.7cm;
    margin: 0;
    table-layout: fixed;
    /* Aggiunge un layout fisso alle tabelle */
  }

  /* Assicurati che le larghezze delle colonne siano mantenute  */
  #T01,
  #T02,
  #T03,
  #T04,
  #T05,
  #T06,
  #T07 {
    width: 100%;
    table-layout: fixed;
  }

  input[type="text"] {
    display: block;
    /* o inline-block, a seconda delle tue esigenze */
  }
}