#sliderContainer {
  position: relative;
  width: 10px; /* Larghezza del container dello slider */
  height: 300px; /* Altezza del container dello slider */
  top: 50px;
  left: 100px;
  margin: 0;
}

#sliderValue {
  position: absolute;
  left: -40px; /* Spostare l'etichetta a sinistra dello slider */
  top: 50%;
  transform: translateY(-50%);
  font-family: Arial, sans-serif;
  font-size: 12pt;
  font-weight: bold;
  background: white;
  border: 1px solid #ccc;
  padding: 2px 5px;
  border-radius: 4px;
  z-index: 10;
}

.slider-track {
  position: absolute;
  width: 10px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: url('img/fondoVer.png') no-repeat;
  border-radius: 5px;
  overflow: hidden;
  margin: 0;
  z-index: 1;
}

.slider-track-active {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  flex-direction: column-reverse;
  margin: 0;
  z-index: 2;
}

.slider-track-active .rounded-start {
  width: 100%;
  height: 6px; /* Altezza dell'immagine arrotondata */
  background: url('img/rounded-startVer.png') no-repeat;
}

.slider-track-active .fill {
  width: 100%;
  background: url('img/red-trackVer.png') repeat-y;
  flex-grow: 1;
}

input[type="range"] {
  appearance: none;
  width: 100%;
  height: 100%;
  background: transparent;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 50%;
  margin: 0;
  z-index: 3;
  writing-mode: vertical-lr; /* Scrive verticalmente da sinistra a destra */
  direction: rtl; /* Direzione del testo da destra a sinistra */
}


input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 10px;
  background: url('img/retVer.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
}