.range-slider {
  height: 2px;
  position: relative;
  background-color: #e1e9f6;
  border-radius: 2px;
}
.range-selected {
  height: 100%;
  position: absolute;
  border-radius: 5px;
  background-color: #338d56;
}

.range-input {
  position: relative;
}
.range-input input {
  position: absolute;
  width: 100%;
  height: 5px;
  top: -4px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.range-input input::-webkit-slider-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 1px solid #c7c8c8;
  background-color: #fff;
  pointer-events: auto;
  -webkit-appearance: none;
}

.range-input input::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 1px solid #c7c8c8;
  background-color: #fff;
  pointer-events: auto;
  -moz-appearance: none;
}

/* Add Firefox-specific track styling to remove the default line */
.range-input input::-moz-range-track {
  background: none;
  border: none;
}

/* Firefox specific overrides */
.range-input input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
  height: 5px;
}

.range-input input[type="range"]::-moz-range-progress {
  background: transparent;
  height: 5px;
}

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

.range-input input[type="range"]::-moz-focus-outer {
  border: 0;
}
.range-input input:disabled::-webkit-slider-thumb {
  background-color: #fff;
  border: 1px solid #c7c8c8;
  opacity: 1;
}

.range-input input:disabled::-moz-range-thumb {
  background-color: #fff;
  border: 1px solid #c7c8c8;
  opacity: 1;
}

.number-input input::-webkit-outer-spin-button,
.number-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.number-input input[type="number"] {
  -moz-appearance: textfield;
}