/*generated with Input range slider CSS style generator (version 20210711)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
  height: 1em;
	border:none;
  -webkit-appearance: none;
	pointer-events:none;
}

input[type=range].styled-slider:focus {
  outline: none;
}

/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border-radius: 1em;
  background: var(--text-color);
  border: none;
	outline: 10px solid transparent;
  box-shadow: none;
  margin-top: calc(2px * 0.5 - 20px * 0.5);
  -webkit-appearance: none;
	pointer-events:auto;
}

input[type=range].styled-slider::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: var(--text-color);
  border: none;
  box-shadow: none;
	pointer-events:none;
}


/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 1em;
  background: var(--text-color);
	outline: 10px solid transparent;
  border: none;
  box-shadow: none;
	pointer-events:auto;
}

input[type=range].styled-slider::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: var(--text-color);
  border: none;
  box-shadow: none;
	pointer-events:none;
}

/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-thumb {
  width: 20px;
  height: 20px;
  border-radius: 1em;
  background: var(--text-color);
  border: none;
  box-shadow: none;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-track {
  height: 2px;
  border-radius: 2px;
  background: var(--text-color);
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}