
.slider {
  display: flex;
  align-items: center;
}

.sliderBar {
  position: relative;
  height: 1.5rem;
  flex: 1;
  margin-left: 1.125rem;
  margin-right: 1.125rem;
}

.sliderBtn {
  background-color: #fff;
  border: 0.0625rem solid #8e9092;
  border-radius: 50%;
  color: #8e9092;
  height: 1.375rem;
  position: relative;
  transition: background-color 0.25S ease-out, border-color 0.25S ease-out, box-shadow 0.25S ease-out;
  width: 1.375rem;
  will-change: background-color, border-color, box-shadow;
}

.sliderBtn:hover {
  background-color: #006fcf;
  border-color: #006fcf;
  color: #fff;
}

.sliderBtn:focus {
  outline: dashed 1px #53565a;
  outline-offset: 3px;
}

.sliderBtn::before {
  font-size: 0.825rem;
}

.sliderBtn[disabled]:hover {
  background-color: transparent;
  border-color: #8e9092;
}

.sliderButton {
  padding: 0.6875rem;
}

.sliderButton:focus {
  outline: none;
}

.sliderButton:focus span {
  outline: dashed 1px #53565a;
  outline-offset: 3px;
}

.sliderButton[disabled] span, .sliderButton[disabled] i {
  background-color: #fff;
  border: 0.0625rem solid #8e9092;
  color: #8e9092;
}

.sliderButtonStyles {
  background-color: #fff;
  border: 0.0625rem solid #006fcf;
  border-radius: 50%;
  color: #006fcf;
  height: 1.375rem;
  position: relative;
  transition: background-color 0.25S ease-out, border-color 0.25S ease-out, box-shadow 0.25S ease-out;
  width: 1.375rem;
  will-change: background-color, border-color, box-shadow;
}

.sliderButtonStyles:hover {
  background-color: #006fcf;
  color: #fff;
  border: 0.0625rem solid #006fcf;
}

.sliderButtonStyles:focus {
  outline: dashed 1px #53565a;
  outline-offset: 3px;
}

.sliderButtonStyles::before {
  font-size: 0.825rem;
  top: 0.25rem;
}

.sliderButtonStyles[disabled] {
  background-color: #fff;
  border: 0.0625rem solid #8e9092;
  color: #8e9092;
}

.sliderButtonStyles[disabled]:hover {
  background-color: transparent;
  border-color: #8e9092;
}

.sliderTrack {
  background-color: #f7f8f9;
  border-radius: 8px;
  box-shadow: inset 0 0 0 0.0625rem #8e9092;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  height: 1rem;
  top: 0.25rem;
  left: -0.375rem;
  right: -0.375rem;
}

.sliderTrackActive {
  box-shadow: inset 0 0 0 0.0625rem #006fcf;
}

.sliderSelection {
  background-color: #006fcf;
  border-radius: 8px;
  position: absolute;
  will-change: width;
  bottom: 0;
  height: 100%;
  top: 0;
}

.sliderHandle {
  width: 1.375rem;
  height: 1.375rem;
  cursor: pointer;
  position: relative;
  will-change: left;
  border-radius: 50%;
  border: 0.0625rem solid #006fcf;
  box-shadow: 0 0 5px rgba(83, 86, 90, 0.4);
  background-color: #fff;
}

.sliderHandle:hover, .sliderHandle:active {
  background-color: #fff;
}

.sliderHandler {
  padding: 0.6875rem 2.0625rem 2.0625rem 0.6875rem;
  margin-top: -0.75rem;
}

.sliderHandler:focus {
  outline: none;
}

.sliderHandler:focus span {
  outline: dashed 1px #53565a;
  outline-offset: 3px;
}

.sliderHandlerStyles {
  width: 1.375rem;
  height: 1.375rem;
  display: flex;
  cursor: pointer;
  position: relative;
  will-change: left;
  border-radius: 50%;
  border: 0.0625rem solid #006fcf;
  box-shadow: 0 0 5px rgba(83, 86, 90, 0.4);
  background-color: #fff;
  outline: 0.0625rem solid #fff;
}

.sliderHandlerStyles:hover, .sliderHandlerStyles:active {
  background-color: #fff;
}

.slider .tooltipContainer {
  position: absolute;
  width: 1.375rem;
  height: 1.375rem;
  top: 0.0625rem;
}

.slider .tooltipContainer .tooltipSlider {
  left: 95%;
}