/* CSS from Krysgroup */
/* I didn't used it as a dependency, because fronttools are on Base, and thus, this would be transcripted for all websites where it's not needed */
/* See later if it's needed on another website */
/* See later if there is a cleaner solution */
/* Don't alter this CSS, because we don't know if there will be updates from the guy that developped it */
#neotech-myopie { width: 100%; max-width:90vh; margin:0 auto; }
#neotech-myopie-w {
  position: relative; 
  padding-top: 75%;
  width: 100%;
}
#neotech-myopie-w .neotech-myopie-image {
  background-size: cover; 
  width:100%; 
  height:100%; 
  top: 0; 
  position: absolute; 
}

#neotech-myopie-w .neotech-myopie-image-0 {
  background-image: url(../webp/neotech-myopie-classe-0.webp); 
  z-index:0
}

#neotech-myopie-w .neotech-myopie-image-1 {
  background-image: url(../webp/neotech-myopie-classe-1.webp); 
  z-index:1
}

#neotech-myopie-w .neotech-myopie-image-2 {
  background-image: url(../webp/neotech-myopie-classe-2.webp); 
  z-index:2
}

#neotech-myopie-w .neotech-myopie-image-3 {
  background-image: url(../webp/neotech-myopie-classe-3.webp); 
  z-index:3
}

#neotech-myopie-w .neotech-myopie-image-4 {
  background-image: url(../webp/neotech-myopie-classe-4.webp); 
  z-index:4
}

#neotech-myopie-w .neotech-myopie-image-5 {
  background-image: url(../webp/neotech-myopie-classe-5.webp); 
  z-index:5
}

#neotech-myopie-w .neotech-myopie-image-6 {
  background-image: url(../webp/neotech-myopie-classe-6.webp); 
  z-index:6
}

#neotech-myopie-w .neotech-myopie-image-7 {
  background-image: url(../webp/neotech-myopie-classe-7.webp); 
  z-index:7
}

#neotech-myopie-w .neotech-myopie-image-8 {
  background-image: url(../webp/neotech-myopie-classe-8.webp); 
  z-index:7
}

#neotech-myopie-range {
  margin: 0 auto;
  position: relative;
  width: 85%;
  min-width: 272px;
  --neotech-myopie-range: 0;
  height: 2.5rem;
}

#neotech-myopie-rect {
  width: calc(100% - 1.5rem);
  margin: 0.875rem 0.75rem 0;
  height: 0.4375rem;
  background: linear-gradient(to right, #1f91d0 0%, #1f91d0 var(--neotech-myopie-range), #ccc var(--neotech-myopie-range), #ccc 100%);
  box-sizing: border-box;
}

#neotech-myopie input[type=range] {
  -webkit-appearance: none;
  display: inline-block;
  background-color: transparent;
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  font-size: 1.057692308rem; /* 16 x 1.057 x 1.3 = 22px */
  transform: translateY(-0.875rem);
  z-index: 2;
}

#neotech-myopie input[type=range]:focus { outline: none; }

#neotech-myopie input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.4375em;
  cursor: pointer;
  background: none;
  border-color: transparent;
}
#neotech-myopie input[type=range]:focus::-webkit-slider-runnable-track { 
  background: none;
}
#neotech-myopie input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  cursor: pointer;
  height: 1.5rem;
  width: 1.5rem;
  margin-top: -0.4375rem;
}

#neotech-myopie input[type=range]::-moz-range-progress {
  height: 0.4375rem;
  cursor: pointer;
  background: none;
}
#neotech-myopie input[type=range]::-moz-range-track {
  width: 100%;
  height: 0.4375rem;
  cursor: pointer;
  background: none;
}
#neotech-myopie input[type=range]::-moz-range-thumb {
  border: 1px solid #000000;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

/* Internet Explorer */
#neotech-myopie input[type=range]::-ms-track {
  width: 100%;
  height: 0.4375rem;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 0.75em 0;
  color: transparent;
  margin: 0;
}

#neotech-myopie input[type=range]::-ms-fill-lower,
#neotech-myopie input[type=range]:focus::-ms-fill-lower { background: #1f91d0; }

#neotech-myopie input[type=range]::-ms-fill-upper,
#neotech-myopie input[type=range]:focus::-ms-fill-upper { background: #ccc; }

#neotech-myopie input[type=range]::-ms-tooltip { display: none; }
#neotech-myopie input[type=range]::-ms-thumb {
  border: 1px solid #000;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
  
#neotech-myopie .neotech-myopie-legende {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

#neotech-myopie .neotech-myopie-regle {
  display: flex;
  padding: 0 0.75rem 0 0.75rem;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#neotech-myopie .neotech-myopie-tick {
  height: 0.4375rem;
  margin-top: -0.5rem;
}

#neotech-myopie .neotech-myopie-tick>div {
  display: block;
  box-sizing: border-box;
  padding: 0;
  border-left: 1px solid #ccc;
  height: 100%;
}

#neotech-myopie .neotech-myopie-label {
  font-size: 0.75rem;
  padding-top: 0.3125rem;
}

#neotech-myopie .neotech-myopie-label>div>div {
  width: 100%;
  margin-left: -50%;
  text-align:center;
}    

#neotech-myopie .neotech-myopie-label>div.neotech-myopie-step-end>div {
  margin-left: 50%;
}   

#neotech-myopie .neotech-myopie-step-05 {
  width: 5%;
}

#neotech-myopie .neotech-myopie-step-10 {
  width: 10%
}

#neotech-myopie .neotech-myopie-step-20 {
  width: 20%
}

#neotech-myopie .neotech-myopie-tick>div.neotech-myopie-step-end {
  border-right: 1px solid #ccc;
}

@media screen and (max-width: 767px), screen and (max-height: 650px) {
  #neotech-myopie .neotech-myopie-label > div.neotech-is-desktop {
    display:none;
  }
  #neotech-myopie .neotech-myopie-label > div.neotech-myopie-step-05 {
    width: 10%;
  }
}