body {


  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: max(1vw, 12px);

  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Header wrapper per bottoni e titolo */
#header-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
}

/* Bottoni di controllo */
.controls {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 0;
}


#header {

  flex: 0 0 auto;
  padding: 2vh 2vh;
  margin: 0;
  text-align: center;

  background-color: #C0C0C0;

  display: flex;
  flex-direction: row;
  align-content: space-around;
  justify-content: space-between;
  align-items: center;
}


#header h1 {

  font-size: 1.8em;
  font-weight: bold;
}

#corpo {
  flex: 1 1 auto;
  overflow: auto;

  display: flex;
  flex-direction: column;

}



#footer {
  flex: 0 0 auto;
  padding: 5vh 0;
}


#menu {

  margin: 1em 0;
  padding: 0;
  font-size: 2em;
  list-style-type: none;
  width: 100%;
}

.voce {

  margin: 2em 0.5em;
  padding: 1em;
  border: 1px solid gray;
  border-radius: 1em;
  background-color: lightblue;

}



#logo {

  top: 1em;
  right: 1em;
  width: 5em;
  height: auto;
  border-radius: 1em;
  margin: 0.5em;
}

#user {


  top: 0;
  left: 0;
  margin: 0.2em;
  width: auto;
  height: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  font-size: 1.8em;
  font-weight: bold;
}

#icona {

  width: 4em;
  height: auto;
  margin: 0.5em;
  border-radius: 0.5em;
  background-color: white;

}

#nome {

  white-space: nowrap;

}

#ruolo {

  white-space: nowrap;

}


/*-------------------------------------------------- per news.html --------------------------------------*/

.news {

  position: relative;
  background-color: white;
  width: auto;
  height: auto;
  margin: 2.5em 0.5em 0.5em 0.5em;
  padding: 0.5em;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #888888;
}

.titolo {

  font-size: 1.2em;
  font-weight: bold;
}

.testo {

  font-size: 1em;
  font-weight: normal;
}

.data_pub {

  position: absolute;
  top: -1.5em;
  background-color: white;
  left: -0.5em;
  font-size: 0.9em;
  border: 1px solid gray;
  border-radius: 4px;
  padding: 0.2em;
}


/*---------------------------------- per eventi ----------------------------------------------*/


.evento {

  position: relative;
  background-color: white;
  width: auto;
  height: auto;
  margin: 2.5em 0.5em 0.5em 0.5em;
  padding: 0.5em;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #888888;
}


.evento .tipologia {

  position: absolute;
  top: -1.6em;
  background-color: white;
  left: 0;
  font-size: 1.2em;

  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid white;

  border-radius: 4px;
  padding: 0.2em;
}

.evento .descrizione {

  font-size: 1.2em;
  font-weight: bold;
  padding: 1em;
}

.evento .data_evento {

  position: absolute;
  top: -1.6em;
  background-color: white;
  right: 0.5em;
  font-size: 1.2em;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid white;
  border-radius: 4px;
  padding: 0.2em;
}

/* --------------------------------------------- PER RIMBORSI -------------------------------------------------*/


.rimborso {

  position: relative;
  background-color: white;
  width: auto;
  height: auto;
  margin: 2.5em 0.5em 0.5em 0.5em;
  padding: 0.5em;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #888888;

  display: grid;
  grid-template-columns: 2fr 3fr 1fr;

  grid-template-areas: 
    "header header header header header header button1 button2" 
    "fields foto foto foto foto foto foto foto"
    "fields foto foto foto foto foto foto foto"
    "fields foto foto foto foto foto foto foto"
    "fields foto foto foto foto foto foto foto"    
    "footer footer footer footer footer footer footer footer";
}

.rimborso .foto {

 /* width: auto;
  height: min( 35vh, 200px);*/
  width:100%;
  height:100%;
  align-self: center;
  justify-self: center;
  grid-area:foto ;

  border-radius: 10%;
}

.rimborso .nome {

  font-size: 1.6em;
  font-weight: bold;
  padding: 1em;
  grid-area:header;
}

.rimborso .elimina {

  width:5em;
  height: auto;
  padding:1em;
  grid-area: button2;
}

.rimborso .rimborsato {

  width:5em;
  height: auto;
  padding:1em;
  grid-area: button1;

}

.rimborso .tipologia {

  position: absolute;
  top: -1.6em;
  background-color: white;
  left: 0;
  font-size: 1.6em;

  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid white;

  border-radius: 4px;
  padding: 0.2em;
}


.rimborso .importo {

  font-size: 1.6em;
  font-weight: bold;
  padding: 1em;

  grid-area: fields;
}


.rimborso .note {

  font-size: 1.6em;
  font-weight: bold;
  padding: 1em;

  grid-area: footer;
}

.rimborso .data_spesa {

  position: absolute;
  top: -1.6em;
  background-color: white;
  right: 0.5em;
  font-size: 1.6em;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid white;
  border-radius: 4px;
  padding: 0.2em;
}


/* --------------------------------------------- PER DOCUMENTI (allineato ai RIMBORSI) -------------------------------------------------*/




.documento {
  position: relative;
  background-color: white;
  width: auto;
  height: auto;
  margin: 2.5em 0.5em 0.5em 0.5em;
  padding: 0.5em;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #888888;

  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  /* stessa mappa aree della card rimborso */
  grid-template-areas:
    "header header header header header buttons"
    "fields foto foto foto foto foto"
    "fields foto foto foto foto foto"
    "fields foto foto foto foto foto"
    "fields foto foto foto foto foto"
    "footer footer footer footer footer footer";
}

.documento .foto {
  /* come i rimborsi: occupa tutta l’area immagine */
  width: 100%;
  height: 100%;
  align-self: center;
  justify-self: center;
  grid-area: foto;
  border-radius: 10%;
  object-fit: contain; /* evita distorsioni su pdf/word/excel icon o immagini panoramiche */
}

.documento .nome {
  font-size: 1.6em;
  font-weight: bold;
  padding: 1em;
  grid-area: header;
}

.documento .elimina {
  width: 5em;
  height: auto;
  padding: 1em;
  grid-area: buttons;
}

.documento .tipologia {

  position: absolute;
  top: -1.6em;
  background-color: white;
  left: 0;
  font-size: 1.6em;

  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid white;

  border-radius: 4px;
  padding: 0.2em;
}

.documento .data_doc {
  position: absolute;
  top: -1.6em;
  background-color: white;
  right: 0.5em;
  font-size: 1.6em;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid white;
  border-radius: 4px;
  padding: 0.2em;
}

/* come "importo" nei rimborsi: info principali nel blocco fields */
.documento .data_scadenza {
  font-size: 1.6em;
  font-weight: bold;
  padding: 1em;
  grid-area: fields;
}

.documento .note {
  font-size: 1.6em;
  font-weight: bold;
  padding: 1em;
  grid-area: footer;
}

.documento .data_doc {

  position: absolute;
  top: -1.6em;
  background-color: white;
  right: 0.5em;
  font-size: 1.6em;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid white;
  border-radius: 4px;
  padding: 0.2em;
}


.documento .data_scadenza {

  font-size: 1.6em;
  font-weight: bold;
  padding: 1em;

  grid-area: fields;
}





/*------------------------------------------- COMUNI -----------------------------------------*/

#back {

  /*position:fixed;
  top:0;border-radius: 1em;
  right:0;
 background-color: lightgray; */
  margin: 0.5em;
  width: 5em;
  height: auto;


  font-size: 1em;
  cursor: pointer;
}



#scrivi {

  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0.5em;
  width: 5em;
  height: auto;
  background-color: rgb(110, 189, 250);
  border: 0.2em solid darkslategray;
  border-radius: 1em;
  font-size: 1em;
  cursor: pointer;
  display: none;
}



.empty {

  font-size: 2em;
  margin: 50% auto;
  text-align: center;
}



#saveButton {

  /*position: fixed;
    top: 0;
  right: 0;*/
  font-size: 1em;
  width: auto;
  min-width: 5em;
  height: auto;
  margin: 1em;
  padding: 1em;
}


.campo {

  margin: 1em 0.5em 0.5em 0.5em;
  padding: 0.4em;
  font-size: 1.2em;
  width: 94%;
}


.campo input,
.campo select,
.campo textarea {

  font-size: 1.2em;
  width: 100%;
}



.checkboxes {
  display: flex;
  gap: 2em;
  /* Spazio tra i checkbox */
  border: 1px solid gray;
  padding: 1em;
}

.checkboxes label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  /* Spazio tra il checkbox e la label */
}

.valore {
  margin: 0.5em;
  font-size: 1.2em;
  background-color: #ffffff;
  padding: 0.2em;

}


#feedback {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  font-size: 1.2em;
  margin: 2em 1em;
  padding: 1em;
  border: 3px solid gray;
  border-radius: 0.5em;
  background-color: #ffffff;
}

#feedback h1 {
  position: absolute;
  top: -1.8em;
  left: -0.5em;
  background-color: #ffffff;
  padding: 0.3em;
  font-size: 1.2em;
  font-weight: normal;
  margin: 0;
  border: 3px solid gray;
}




#sezione_pre,
#sezione_post {
  display: flex;
  flex-direction: column;
  align-items: center;
}


#feedback select,
#feedback input,
#feedback button {
  font-size: 1.2em;
  margin: 0.2em;
  padding: 0.2em;
  border-radius: 0.5em;
}



#feedback_list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1em;
}


#feedback_list li {
  font-size: 1.2em;
  width: 95vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 1em;
  flex-wrap: nowrap;
  border: 1px solid lightgray;
  background-color: #373737;
  color: white;
  font-weight: bold;
  padding: 0.4em;
  margin: 0;
}


#feedback_list h1 {
  position: absolute;
  top: -0.9em;
  left: -0.5em;
  background-color: #3a3a3a;
  color: white;
  padding: 0.3em;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
}


#feedback_list ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  align-items: center;
  flex-wrap: wrap;
}


#feedback_list li div {
  font-size: 1.2em;
}


#evento {

  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2em;
  margin: 1em;
  padding: 1em;
  border: 1px solid gray;
  border-radius: 0.5em;
  background-color: rgb(231, 236, 240);
}

.div1 {
  flex: 1 1 40%;
}

.div2 {
  flex: 1 1 20%;
}

.div3 {
  flex: 1 1 40%;
}

.div4 {
  flex: 1 1 50%;
}

.div5 {
  flex: 1 1 10%;
}


#filterTipologia {
  margin: 1em 0.5em 0.5em 0.5em;
  padding: 0.4em;
  font-size: 1.6em;
}

label[for="filterTipologia"] {
   font-size: 1.6em;
  }