<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/***
########     ###    ##    ##  ######   ######## 
##     ##   ## ##   ###   ## ##    ##  ##       
##     ##  ##   ##  ####  ## ##        ##       
########  ##     ## ## ## ## ##   #### ######   
##   ##   ######### ##  #### ##    ##  ##       
##    ##  ##     ## ##   ### ##    ##  ##       
##     ## ##     ## ##    ##  ######   ########    
 */

/************************************************************************************************************************************/

input.range {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
  border-radius: 8px;
}
input.range:focus {
  outline: none;
}

/** webkit *************************************************************************************************************************/
input.range::-webkit-slider-runnable-track {
  width: 100%;
  height: 16px;
  cursor: pointer;
  animate: 0.2s;
  background: #e6ff70;
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, .3);
}
input.range::-webkit-slider-thumb {
  border: 2px solid rgba(0, 0, 0, .5);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}
input.range:hover::-webkit-slider-thumb {
	transform: scale(1.05);
}
input.range:active::-webkit-slider-thumb {
	transform: scale(.95);
}
input.range:active::-webkit-slider-runnable-track {
  border-color: rgba(0, 0, 0, .4);
}

/** mozilla ************************************************************************************************************************/
input.range::-moz-range-track {
  width: 100%;
  height: 16px;
  cursor: pointer;
  animate: 0.2s;
  background: #e6ff70;
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, .2);
}
input.range:active::-moz-range-track{
	border-color: rgba(0, 0, 0, .5);
}
input.range::-moz-range-thumb {
  border: 2px solid rgba(0, 0, 0, .5);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}
input.range:hover::-moz-range-thumb {
	transform: scale(1.05);
}
input.range:active::-moz-range-thumb {
	transform: scale(.95);
}

/** ie ************************************************************************************************************************/
input.range::-ms-track {
  width: 100%;
  height: 16px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input.range::-ms-fill-lower {
  background: #e6ff70;
  border: 2px solid rgba(0, 0, 0, .2);
  border-radius: 8px;

}
input.range::-ms-fill-upper {
  background: rgba(0, 0, 0, .2);
  border: 2px solid rgba(0, 0, 0, .2);
  border-radius: 8px;
}
.body--edge input.range::-ms-thumb{
  margin-top: 2px;
}
input.range::-ms-thumb {
  border: 2px solid rgba(0, 0, 0, .5);
  height: 32px;
  width: 32px;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}
input.range:active::-ms-fill-lower {
  background: #e6ff70;
}
input.range:active::-ms-fill-upper {
  background: rgba(0, 0, 0, .2);
}

/** input range text ***************************************************************************************************************/
.range-text{
    width: 64px;
    font-size: 16px;
    text-align: center;
}
</pre></body></html>