/* Target Input 
  taken from: https://www.cssportal.com/style-input-range/
*/
.range {
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

/* --- Webkit Browsers --- */
.range::-webkit-slider-runnable-track {
  height: 12px;
  background: #6b5ca5;
  border-radius: 20px;
  border: 0px solid #cbd5e1;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background: #f472b6;
  border-radius: 30px;
  border: 4px solid #fff7ae;
  box-shadow: 0px 4px 6px rgba(244, 114, 182, 0);
  margin-top: -11px;
}

/* --- Firefox --- */
.range::-moz-range-track {
  height: 12px;
  background: #6b5ca5;
  border-radius: 20px;
  border: 0px solid #cbd5e1;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
}

.range::-moz-range-thumb {
  height: 20px;
  width: 20px;
  background: #f472b6;
  border-radius: 30px;
  border: 4px solid #fff7ae;
  box-shadow: 0px 4px 6px rgba(244, 114, 182, 0);
}