/* Range input */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  opacity: 0.9;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input[type=range]:hover {
  opacity: 1;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(white, currentColor);
  border: 0.2em solid currentColor;
}

input[type=range]::-moz-range-thumb {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(white, currentColor);
  border: 0.2em solid currentColor;
}

/* Progress */

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  height: 1em;
  border-radius: 1em;
  background-color: inherit;
  color: currentColor;
}

progress::-webkit-progress-bar {
  background-color: inherit;
  border-radius: 1em;
}

progress::-webkit-progress-value {
  background-color: currentColor;
  border-radius: 1em;
}

progress::-moz-progress-bar {
  background-color: currentColor;
  border-radius: 1em;
}