body {
  background-color: #ffffff;
  overflow: hidden;
}

.range__wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 240px;
  height: 360px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  overflow: hidden;
}

.range__input {
  display: none;
}

.range__slider {
  position: absolute;
  left: 0;
  top: 0;
}

.range__slider__path {
  fill: #0f6dee;
}

.range__marks__path {
  fill: none;
  stroke: inherit;
  stroke-width: 1px;
}

.range__marks__pink {
  stroke: #0f6dee;
}

.range__marks__white {
  stroke: white;
}

.range__values {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.range__value {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 28px;
  padding-bottom: 52px;
  padding-left: 5px;
  padding-right: 55px;
}

.range__value--top {
  position: absolute;
  bottom: 100%;
  color: #0f6dee;
}

.range__value--bottom {
  color: white;
}

.range__value__number {
  font-size: 22px;
  margin: 0 10px;
}

.range__value__number--top {
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

.range__value__number--bottom {
  -webkit-transform-origin: 100% 0;
      -ms-transform-origin: 100% 0;
          transform-origin: 100% 0;
}

.range__value__text {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 13px;
  text-transform: uppercase;
}

.range__value__text span:first-child {
  margin-bottom: 3px;
}

.range__value__text--top {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
  margin-bottom: 13px;
}

.range__value__text--bottom {
  margin-top: 0px;
}