/* Reset */
* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ovrrride Variables Here */
:root {
  --bg: #e3e4e8;
  --bgT: #e3e4e800;
  --fg: #17181c;
  --inputBg: #DFE1F6;
  --handleBg: #373E46;
  --handleDownBg: #373E46;
  --handleTrackBg: #FFC334;
}

/* Core */
input {
  color: var(--fg);
}

.range, .range__counter {
  display: flex;
}

input[type="range"], .range__input, .range__counter-sr {
  width: 100%;
}

.range input[type=range],
.range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; 
  appearance: none;
}

.range input[type=range], .range__input-fill {
  border-radius: 5px;
  height: 10px;
}

.range input[type=range] {
  background-color: var(--inputBg);
  display: block;
  margin: 0.5em 0;
  padding: 0;
}

.range input[type=range]:focus {
  outline: transparent;
}

.range input[type=range]::-webkit-slider-thumb {
  background-color: var(--handleBg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: background 0.1s linear;
  width: 20px;
  height: 20px;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.5) 1px 3px 6px -2px;
}

.range input[type=range]::-moz-range-thumb {
  background-color: var(--handleBg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transform: translateZ(1px);
  transition: background-color 0.1s linear;
  width: 20px;
  height: 20px;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.5) 1px 3px 6px -2px;
}

.range input[type=range]::-moz-focus-outer {
  border: 0;
}

.range__input, .range__input-fill {
  display: block;
}

.range__input {
  position: relative;
}

.range__input {
  margin-right: 0.375em;
}

.range__input:active input[type=range]::-webkit-slider-thumb,
.range input[type=range]:focus::-webkit-slider-thumb,
.range input[type=range]::-webkit-slider-thumb:hover {
  background-color: var(--handleDownBg);
}

.range__input:active input[type=range]::-moz-range-thumb,
.range input[type=range]:focus::-moz-range-thumb,
.range input[type=range]::-moz-range-thumb:hover {
  background-color: var(--handleDownBg);
}

.range__input-fill {
  position: absolute;
  left: 0;
}

.range__input-fill {
  background-color: var(--handleTrackBg);
  pointer-events: none;
  top: calc(50% - 0.25em);
}