input[type="range"] {
width: 99.7%;
height: 0.5px;
opacity: 0.4;
background-image: radial-gradient(circle at 50% 50% , rgb(0, 0, 0) 0.2em, rgb(0, 0, 0) 0.25em, rgb(0, 0, 0) 0.375em);
background-attachment: scroll, scroll, scroll;
background-clip: border-box, border-box, border-box;
background-origin: padding-box, padding-box, padding-box;
background-repeat: repeat-x;
cursor: pointer;
transition: all 250ms linear 0s;
background-color: transparent;
margin: 0px;
padding-top: 5px;

}
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  position: relative;
  width: 100%;
  height: 1em;

}
input[type='range']::-moz-range-track {
  box-sizing: border-box;

  width: 100%;
  height: 4em;
visibility:hidden;
background: linear-gradient(rgba(148, 148, 148, 0.2), rgba(0, 0, 0, 0.15) 0.2em, rgba(204, 203, 203, 0.24) 0.25em, rgba(0, 0, 0, 0.25) 0.25em, rgba(252, 252, 252, 0.25) 0.7em, rgba(252, 252, 252, 0) 0.7em) padding-box;
  background-size: 100% 2.7em;
}
input[type='range']::-ms-track {
  box-sizing: border-box;
visibility:hidden;
  width: 100%;
  height: 1em;

  background: radial-gradient(circle at 50% 50%, #878787 0.125em, #878787 , rgba(0, 0, 0, 0) 0.25em), radial-gradient(circle at 50% 50%, #878787  0.2em, #878787  0.25em, #878787  0.375em), radial-gradient(circle at 50% 75%, #878787  0.25em, #878787  0.375em, #878787 0.375em), radial-gradient(circle at 50% 50%, #878787  0.2em, #878787  0.25em);
  background-size: 100% 3.5em;
  color: transparent;
}
input[type='range']::-moz-range-progress {
  height: 1em;
  background: radial-gradient(circle at 50% 50%, #878787 0.125em, #878787 , rgba(0, 0, 0, 0) 0.25em), radial-gradient(circle at 50% 50%, #878787  0.2em, #878787  0.25em, #878787  0.375em), radial-gradient(circle at 50% 75%, #878787  0.25em, #878787  0.375em, #878787 0.375em), radial-gradient(circle at 50% 50%, #878787  0.2em, #878787  0.25em);
  background-repeat: no-repeat, repeat-x, repeat-x, repeat-x;
  background-position: 0 45%;
  background-size: 1.25em 0.5em;

}
input[type='range']::-ms-fill-lower {
  transform: translate(-0.5em);
  background: radial-gradient(circle at 50% 50%, #f3f3f3 0.125em, #707070, rgba(0, 0, 0, 0) 0.25em), radial-gradient(circle at 50% 50%, rgba(242, 242, 242, 0) 0.2em, #CFCFCF 0.25em, #CFCFCF 0.375em), radial-gradient(circle at 50% 75%, rgba(51, 51, 51, 0) 0.25em, #333333 0.375em, rgba(51, 51, 51, 0) 0.375em), radial-gradient(circle at 50% 50%, #FFFFFF 0.2em, rgba(189, 243, 209, 0) 0.25em);
  background-repeat: no-repeat, repeat-x, repeat-x, repeat-x;
  background-position: 0 45%;
  background-size: 1.25em 0.5em;
}
input[type='range']::-ms-tooltip {
  display: none;
}
input[type='range']::-webkit-slider-thumb {
  position: relative;
  z-index: 2;
  margin-top: 0.1em;
  box-sizing: border-box;
border : 0;
  padding: 0em;
  width: 2em;
  height: 0.4em;
background-color:#555;
  cursor: ew-resize;

transition: all 250ms linear;

}
input[type='range']::-webkit-slider-thumb:hover {

}
input[type='range']::-moz-range-thumb {
	
  box-sizing: border-box;
border : 0;
  padding: .25em;
  width: 3.5em;
  height: 3.5em;
  border-radius: .7em;
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.17), 0px 9px 2px rgba(0, 0, 0, 0.4), 1px 16px 4px 2px rgba(0, 0, 0, 0.11) inset, 1px -8px 1px 1px rgba(0, 0, 0, 0.25) inset, 2px 5px 1px 1px rgba(255, 255, 255, 0.28) inset;
cursor: ew-resize;
background: radial-gradient(#4A4A4A, #4D4D4D 30%, #3B3B3B 45%, rgba(0, 0, 0, 0.52) 46%, rgba(35, 35, 35, 0) 46%) content-box, linear-gradient(#363636, #363636) border-box;
transition: all 250ms linear;
visibility:hidden;
}
input[type='range']::-moz-range-thumb:hover {
  box-sizing: border-box;

  padding: .25em;
  width: 3.5em;
  height: 3.5em;
  border-radius: .7em;
box-shadow: 0px 3px 0px rgba(171, 171, 171,0.0), 0px 5px 2px rgba(0, 0, 0, 0.0), 1px 5px 4px 2px rgba(110, 110, 110, 0.0) inset, 1px -4px 1px 1px rgba(0, 0, 0, 0.0) inset, 2px 3px 1px 1px rgba(255, 255, 255, 0.0) inset ;
  cursor: ew-resize;

transition: all 250ms linear;
}



input[type='range']::-ms-thumb {
  box-sizing: border-box;
border : 0;
  padding: .25em;
  width: 3.5em;
  height: 3.5em;
  border-radius: .5em;
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.17), 0px 9px 2px rgba(0, 0, 0, 0.4), 1px 16px 4px 2px rgba(0, 0, 0, 0.11) inset, 1px -8px 1px 1px rgba(0, 0, 0, 0.25) inset, 2px 5px 1px 1px rgba(255, 255, 255, 0.28) inset !important;
  cursor: ew-resize;
background: radial-gradient(#4A4A4A, #4D4D4D 30%, #3B3B3B 45%, rgba(0, 0, 0, 0.52) 46%, rgba(35, 35, 35, 0) 46%) content-box, linear-gradient(#363636, #363636) border-box;
transition: all 250ms linear;
visibility:hidden;
}

input[type='range']::-ms-thumb:hover {
  box-sizing: border-box;

  padding: .25em;
  width: 3.5em;
  height: 3.5em;
  border-radius: .5em;
box-shadow: 0px 3px 0px rgba(171, 171, 171,0.0), 0px 5px 2px rgba(0, 0, 0, 0.0), 1px 5px 4px 2px rgba(110, 110, 110, 0.0) inset, 1px -4px 1px 1px rgba(0, 0, 0, 0.0) inset, 2px 3px 1px 1px rgba(255, 255, 255, 0.0) inset !important;
  cursor: ew-resize;

transition: all 250ms linear;
}


input[type='range']::-webkit-slider-runnable-track:before, input[type='range']::-webkit-slider-runnable-track:after, input[type='range'] /deep/ #track:before, input[type='range'] /deep/ #track:after {
  box-sizing: border-box;
  position: absolute;
  z-index: 1;

  border-bottom-width: 0.375em;
  width: 100%;
  height: 1.5em;
  border-radius: .375em / .25em;
background: linear-gradient(rgba(148, 148, 148, 0.2), rgba(0, 0, 0, 0.15) 0.2em, rgba(204, 203, 203, 0.24) 0.25em, rgba(0, 0, 0, 0.25) 0.25em, rgba(252, 252, 252, 0.25) 0.7em, rgba(252, 252, 252, 0) 0.7em) padding-box;
  background-size: 100% 2.7em;
visibility:hidden;
  left: 0;
  content: '';
  
}
input[type='range']::-webkit-slider-runnable-track:after, input[type='range'] /deep/ #track:after {
  bottom: 0;    height: 1em;
  background: radial-gradient(circle at 50% 50%, #878787 0.125em, #878787 , rgba(0, 0, 0, 0) 0.25em), radial-gradient(circle at 50% 50%, #878787  0.2em, #878787  0.25em, #878787  0.375em), radial-gradient(circle at 50% 75%, #878787  0.25em, #878787  0.375em, #878787 0.375em), radial-gradient(circle at 50% 50%, #878787  0.2em, #878787  0.25em);

}
input[type='range']::-webkit-slider-thumb:before, input[type='range'] /deep/ #thumb:before {
  position: absolute;
visibility:hidden;
  top: 50%;
  left: 50%;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  transform: translate(-50%, -50%);
0px 9px 2px rgba(0, 0, 0, 0.17)
  background: linear-gradient(#f0f0f0, #ffffff) content-box;
  content: '';
  
}
input[type='range']:focus {
  outline: none;
  opacity: .99;
}