html {
  box-sizing: border-box;
}

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

.chart {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #f9f9f9;
  border-left: 2px solid #655A3C;
  border-bottom: 2px solid #655A3C;

  max-width: 1240px;
  height: 300px; /* Ridotta altezza complessiva della tabella */
  margin: 50px auto;
}

.chart tbody td {
  padding: 0; /* Rimuove il padding per rendere le barre pił sottili */
  height: 100%; /* Mantiene l'altezza delle celle al 100% */
}

.chart td span {
  display: block;
  background: #023269;
  border: 1px solid #655A3C;
  box-shadow: 5px -5px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  height: calc(100% * (var(--valore_percentuale) / 100)); /* Assicura che l'altezza delle barre sia proporzionale */
  color: #ffffff; /* Imposta il colore del testo all'interno della barra */
}
 
.chart td {
  width: 10px; /* Riduce la larghezza delle celle per barre pił strette */
  vertical-align: bottom;
  text-align: center;
}

.chart tbody {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 2px, transparent 1px);
  background-size: 98% 30px; /* Regola la dimensione delle linee di sfondo */
}

@media screen and (max-width: 601px) {
  table.mobile-optimised.chart td {
    text-align: left;
    white-space: nowrap;
    height: auto;
  }
  table.mobile-optimised.chart span {
    text-align: right;
    height: 25px !important;
    line-height: 25px;
    padding: 0 5px 0 0;
    position: relative;
    white-space: nowrap;
  }
  .chart td span b {
    display: inline;
    position: static;
  }
  .chart tbody {
    background: none;
  }
}
/* small initial animation if required */
.chart span {
  opacity: 1;
  animation: barchart 5s ease reverse;
}
@keyframes barchart {
  to {
    height: 0%;
    opacity: 0;
  }
}
table.turni_dip th, table.turni_dip td {
    border-spacing: 1px;
    border-collapse: separate;
    font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, sans-serif;
    font-size: 10px;
    color: #ffffff;
    padding: 1px;
    text-align: center;
    background-color: #FFF;
    border: 0.5px solid rgba(235, 235, 235, 0.3);
    /* Applica l'arrotondamento dei bordi agli angoli della tabella */
}

table.turni_dip th:first-child, table.turni_dip td:first-child {
    border-top-left-radius: 10px; /* Arrotonda l'angolo superiore sinistro */
    border-bottom-left-radius: 10px; /* Arrotonda l'angolo inferiore sinistro */
}

table.turni_dip th:last-child, table.turni_dip td:last-child {
    border-top-right-radius: 10px; /* Arrotonda l'angolo superiore destro */
    border-bottom-right-radius: 10px; /* Arrotonda l'angolo inferiore destro */
}


body {
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
    padding: 0px;
    background: linear-gradient(to left bottom, #cee3ff, #024086); /* Da blu a ciano */
    height: 100vh; /* Assicura che lo sfondo copra l'intera altezza della pagina */
    width: 100vw; /* Copre l'intera larghezza della pagina */
    overflow-x: hidden; /* Previene lo scroll orizzontale */
    margin: 0;
}

table {
    width: 100%;
    border-spacing: 0;
}

table td {
    padding: 5px;
    vertical-align: middle;
}