@charset "UTF-8";
/* CSS Document */

.tabella-testo-ridotto th{
    font-size: 13px;
}
.tabella-testo-ridotto td{
    font-size: 10pt;
}

.nav-item .active a{
    text-decoration: underline;
    color:yellow;
}
.text-right{
    text-align: right!important;
}
.row-space{
    margin-bottom: 5px;
}
.contain{
    display: block;
    overflow: hidden;
    padding: 30px;
    margin-top: 90px;
}
.table th{
    text-align: center;
    background-color: #80D0C7;
    color:#454545;
}

.riga-grafico{
    display: block;
    overflow: hidden;
    width: 20px;
    height: 100px;
    border: solid 1px #e1e1e1;
    border-radius: 3px;
    text-align: center;
    background-color: limegreen;
}
.riga-valore{
    display: block;
    overflow: hidden;
    width: 100%;
    background-color: red;
    content: ' ';
    position: relative;
}

.form-check-label{
    padding-left: 5px;
    padding-right: 5px;
}
tr.danger-mode td{
    background-color: #E31619!important;
}
/*-------------*/

.vertical-bar {
  --bar-width: 40px;      /* larghezza della barra */
  --bar-height: 200px;    /* altezza totale della barra */
  --value: 0%;            /* valore di default */

  position: relative;
  width: var(--bar-width);
  height: var(--bar-height);
  border: 1px solid #333;
  border-radius: 0px;
  background: #f0f0f0;
  overflow: hidden;
}

/* riempimento in basso proporzionale a --value */
.bar-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--value);
  background: linear-gradient(to top, #4caf50, #81c784);
  transition: height 0.5s ease;
}

/* etichetta che mostra xxx% */
.bar-label {
  position: absolute;
  bottom: calc(var(--value) + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 10px;
  color: #333;
}
.bar-label::before {
  content: attr(data-value);
}

/* quando usi inline style, segnala anche il data-value */
.vertical-bar[style] .bar-label {
  /* estrae il valore numerico da --value */
  /* purtroppo content non supporta var() in ::before, 
     quindi ridichiarare direttamente in data-value: */
}

/* ESEMPIO: questo vale per il nostro HTML di esempio */
.vertical-bar[style] .bar-label::before {
  /*content: "65%";*/
}

/*--------------*/

.invalid, .invalid:focus{
    color:red;
    border-color:red;
}

.box{
    display: block;
    padding: 8px;
    /*border: solid 1px #e1e1e1;*/
    margin-bottom: 20px;
    border-radius: 8px;
    background-color: rgb(253,253,253);
    box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.13);
}
.box h5{
    font-size: 16px;
    line-height: 16px;
    color:#B1B1B1;
    margin-bottom: 10px;
}

.rowspace{
    margin-bottom: 5px!important;
}

@keyframes blink {
      0%   { background-color: transparent; }
      50%  { background-color: yellow;      }
      100% { background-color: transparent; }
}

.blink-row {
      animation: blink 1.2s infinite;
      /* 
         1s: durata di un ciclo completo (andata+ritorno)
         infinite: ripete all'infinito
      */
}