.label
  font-size: 0.875em

// Thumb
.range-slider
  -webkit-appearance: none
  width: 100%

.range-slider:focus
  outline: none

.range-slider::-webkit-slider-runnable-track
  width: 100%
  height: 5px
  cursor: pointer
  background: color-gray-light
  border-radius: 5px
  border: 0

.range-slider::-webkit-slider-thumb
  border: 2px solid color-orange-dark
  height: 25px
  width: 25px
  border-radius: 100px
  background: white
  cursor: pointer
  -webkit-appearance: none
  margin-top: -10px

.range-slider:focus::-webkit-slider-runnable-track
  background: color-orange-dark

.range-slider::-moz-range-track
  width: 100%
  height: 8.4px
  cursor: pointer
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d
  background: #3071a9
  border-radius: 1.3px
  border: 0.2px solid #010101

.range-slider::-moz-range-thumb
  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d
  border: 2.8px solid #fffff7
  height: 20px
  width: 20px
  border-radius: 100px
  background: rgba(52, 115, 80, 0)
  cursor: pointer

.range-slider::-ms-track
  width: 100%
  height: 8.4px
  cursor: pointer
  background: transparent
  border-color: transparent
  color: transparent

.range-slider::-ms-fill-lower
  background: #2a6495
  border: 0.2px solid #010101
  border-radius: 2.6px
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d

.range-slider::-ms-fill-upper
  background: #3071a9
  border: 0.2px solid #010101
  border-radius: 2.6px
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d

.range-slider::-ms-thumb
  box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d
  border: 2.8px solid #fffff7
  height: 20px
  width: 20px
  border-radius: 100px
  background: rgba(52, 115, 80, 0)
  cursor: pointer
  height: 8.4px

.range-slider:focus::-ms-fill-lower
  background: #3071a9

.range-slider:focus::-ms-fill-upper
  background: #367ebd