html {
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857;
  margin: 0;
}

h3 {
  margin-bottom: 0;
  padding-bottom: 0;
}

#header {
  position: fixed;
  z-index: 255;
  top: 0;
  background-color: rgb(255, 255, 255);
  color: #000000;
  height: 7vh;
  width: 100%;
  text-align: center;
  font-weight: bold;
  border-bottom: 2px solid rgb(135, 226, 144);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-items: center;
  justify-content: space-between;
}

#header img {
  height: 100%;
}

#main {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: #fdfdfd;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: center;
  justify-items: center;
}

h1 {
  margin: 0;
  padding: 0;
}

#main-top {
  text-align: center;
}

#main-top img {
  width: 30vh;
}

#main-bottom {
  text-align: center;
}

#footer {
  width: 100%;
  height: 5vh;
  background-color: #c0c0c0;
  text-align: center;
  line-height: 200%;
  position: fixed;
  bottom: 0;
  color: #fff;
  vertical-align: center;
  padding-top: 1vh;
  z-index: 100;
}

#login {
  margin-top: 10vh;
}

#login-form {
  margin-top: 5vh;
  width: 20em;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  border: 2px solid rgb(73, 118, 223);
  margin-left: auto;
  margin-right: auto;
  margin-top: 2vh;
  margin-bottom: 2vh;
  padding: 2vh 2vw;
}

#login-form input {
  width: 10em;
  margin-bottom: 1vh;
  padding: 1em;
  background-color: #dadada;
  color: rgb(0, 0, 0);
  border: 2px solid #fe93fe;
}

#login-form input[type="submit"] {
  width: 5em;
  margin-bottom: 1vh;
  padding: .5em;
  background-color: #d5d5d5;
  color: rgb(13, 13, 59);
  border: 2px solid #b7e8d0;
  border-radius: 1em;
  font-weight: bold;
  font-size: 120%;
}

#workspace {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  justify-items: center;
  align-content: center;
  margin-top: 5vh;
  margin-bottom: 5vh;
  flex-wrap: wrap;
}

#header-utente {
  display: none;
}

#header-utente img {
  height: 2em;
  margin-right: 1em;
}

.resizable-table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
}

.abcresizable-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.resizable-table td,
.abcresizable-table td {
  white-space: nowrap;
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  width: auto;
}

.abcresizable-table td {
  font-size: x-large;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: .5em;
}

.resizable-table tr {
  border-bottom: 1px solid #797979;
  height: 3em;
}

.abcresizable-table tr {
  border-bottom: 3px solid #e1e1e1;
  height: 2em;
}

.resizable-table th,
.abcresizable-table th,
.tabulargrid-table thead {
  background-color: rgb(170, 170, 170);
  color: #ffffff;
  font-size: large;
  padding: 5px 10px;
  font-style: normal;
  text-align: center;
  font-weight: bold;
  line-height: 1.5em;
}

.striped-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

@media screen and (max-width: 600px) {

  .resizable-table td,
  .abcresizable-table td {
    font-size: 20px;
  }
}

.tabulargrid-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tabulargrid-table tbody td {
  font-size: 18px;
  border-bottom: 1px solid #797979;
  height: 1.5em;
}

.tabulargrid-odd-column {
  background-color: #ffffff;
}

.tabulargrid-even-column {
  background-color: #f8f8f8;
}

.grid-title,
.abcgrid-title,
.tabulargrid-title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 5px;
  width: 100%;
  background-color: rgb(254, 254, 254);
}

#info-modale {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
  align-content: center;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.info-modale-contenuto {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

#info-modale-chudi {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#info-modale-intestazione {
  display: flex;
  flex-direction: row;
  align-items: normal;
  justify-content: space-between;
  justify-items: center;
  align-content: center;
  width: 100%;
  margin-bottom: 10px;
  font-weight: bold;
  border-bottom: 1px solid #888;
}

.indicatore {
  margin-left: 1vw;
  margin-right: 1vw;
}

.componente {
  position: relative;
  padding: 1em;
  margin: 1em;
  border: 1px solid #64b4ff;
  border-radius: 5px;
}

.icone {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  width: 2.1em;
  height: 10em;
}

.help {
  /*
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 1em;
  padding: 1em;
  */
  background-color: transparent;
  color: #000;
  cursor: pointer;
  z-index: 200;
  width: 1em;
}

.help img {
  width: 2em;
  height: auto;
}

.icona img {
  width: 2em;
  height: auto;
  fill: red;
}

.condividi, .espandibile, .indietro, .help, .riferimento {
  /* position: absolute;  */
  top: 0;
  right: 0;
  height: 1em;
  padding-left: 1em;
}


.pagina {
  border: 4px solid magenta;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
  align-content: center;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.banda {
  border: 2px solid green;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  justify-items: center;
  align-content: center;
  margin-top: 5vh;
  margin-bottom: 5vh;
  flex-wrap: wrap;
}

.blocco {
  border: 1px solid cyan;
  color: cyan;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
  align-content: center;
  margin-top: 5vh;
  margin-bottom: 5vh;
  flex-wrap: wrap;
}

.elemento {
  display: flex;
  /* border: 1px solid rgb(161, 214, 230); */
  margin: 1vh 1vw;
  padding: 1vh 1vw;
  /* border: 1px solid #DDD;
  border-radius: 5px; */
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.riga,
.colonna {
  display: flex;
  /* border: 1px solid rgb(232, 167, 188); */
  width: 100%;
}

.riga {
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.riga>div {
  flex: 1;
}

.colonna {
  flex-direction: column;
}

.voci {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-radius: 1em;
  list-style-type: none;
  margin: .5em;
  padding: .5em;
  overflow: hidden;
  background-color: #f1f1f1;
  text-align: left;
  font-size: x-large;
  font-weight: bold;
}

/*
.punteggio {
  display: inline-block;
  background-color: greenyellow;
  border-radius: 50%;
  padding: 0.1em;
  width: 2em;
}
*/

/*
.punteggio {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: green;
  color: white;
  z-index: 2;
}
*/

.punteggio {
  position: relative;
  display: inline-block;
  width: 30px; /* Imposta la larghezza desiderata del cerchio */
  height: 30px; /* Altezza uguale alla larghezza per mantenere la forma circolare */
  padding: 5px;
  border-radius: 50%;
  background-color: gray;
  color: white;
  text-shadow: 0px 0px 4px black;
  z-index: 2;
  font-weight: bold;
}

.voce {
  margin: 0.1em 0.4em 0.1em 0.4em;
  padding: 0;
}

.dato {
  font-size: 3em;
  margin: 0 0 0 0;
  padding: 0;
}

.dato-box {
  border: 1px solid #c7c7c7; 
  border-radius: 1em;
  /* width: 10em; */
}


/* selettore scala temporale */
.time-selector,
.domain-selector {
  flex-direction: row;
  flex-wrap: nowrap;
  display: flex;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
  padding: 0;
  background-color: rgb(218, 243, 255);
  position: relative;
  touch-action: none;
  width: 100%;
}

.time-selector-option,
.domain-selector-option {
  flex: 1;
  text-align: center;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-right: 1px solid #78ddff;
}

.time-selector-option:last-child,
.domain-selector-option:last-child {
  border-right: none;
}

.time-selector-option-selected,
.domain-selector-option-selected {
  background-color: #3498db;
  color: #fff;
}

.selected-sequence-item {
  display: block;
}

.unselected-sequence-item {
  display: none;
}

.scorrimento {
  overflow-x: hidden;
  white-space: nowrap;
  user-select: none;
  touch-action: pan-y;
  transition: transform 0.3s ease-in-out;
  /* touch-action: none;
  pointer-events: none; */
}

.medaglia {
  width: 4em;
  height: 4em;
  margin: .1em;
  padding: .1em;
  border: 0;
  background-color: transparent;
  border: 1px solid turquoise;
  border-radius: .5em;
}

.medaglia img {
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  transition: filter 0.3s ease-in-out;
  max-height: 4em;
  cursor: pointer;
}

.medaglia-hovered {
  filter: none;
  filter: grayscale(0%);
  transition: filter 0.3s ease-in-out;
  border-color: coral;
}

.medagliere {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}



.help-window {
  display: none;
  position: fixed;
  z-index: 10;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(253, 253, 253);
  background-color: rgba(253, 253, 253, 0.9);
  color: #222222;
}

.help-window-visible {
  display: block;
}


.modalbox {
  display: none;
  flex-direction: column;
  position: fixed;
  z-index: 10;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(255, 255, 255);
}

.tab-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0em;
  padding: 1em;
  background-color: #f1f1f1;
  border: 1px solid #e1e1e1;
  border-radius: 0em;
  color: black;
  width: 100%;
  font-size: small;
}

.tab-section {
  padding: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: bold;
  text-transform: uppercase;
}

.tab-content {
  display: none;
  padding: .1em;
  border: 1px solid #e1e1e1;
  /* border-radius: 1em; */
  background-color: #f1f1f1;
}

.tab-content h3 {
  text-align: center;
}

.destroy-button {
  position: relative;
  top: 0;
  right: 0;
  width: 6em;
  font-weight: bold;
  color: black;
}

.selected {
  background-color: #3498db;
  color: white;
}

.collapsible {
  display: block;
}

@media (max-width: 400px) {
  .collapsible {
    display: none;
  }
}

.sezione {
  color: rgb(255, 255, 255);
  background-color: #2d70a7;
  font-weight: bold;
  text-align: center;
  font-size: x-large;
  text-transform: uppercase;
  width: 100%;
  padding: .2em;
  border: 0;
}

.section {
  background-color: #e7f5ff;
  color: rgb(0, 0, 0);
}

.sticky { /* Stile per i titoli "sticky" */
  position: fixed;
  top: 7vh;
  width: 100%; /* Assicurati che il titolo occupi tutta la larghezza */
  background-color: rgb(68, 170, 216); /* Sfondo bianco per evitare sovrapposizioni */
  z-index: 10; /* Assicurati che il titolo sia sopra gli altri elementi */
}

.form-row {
  margin-bottom: .5em;
}

#autorizzazioni .form-row {
  border-bottom: 1px solid #ccc;
}

.form-row label {
  display: inline-block;
  margin-bottom: 0.5em;
  width: 12em;
  text-align: right;
}

.tot td {
  background-color: rgb(205, 255, 250);
}