#flat-slider.ui-slider {
  background: $lighter-gray;
  border: none;
  border-radius: 0;
}

#flat-slider.ui-slider .ui-slider-handle {
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 0;
  border: 1px solid transparent;
  transition: border 0.4s ease;
}

#flat-slider.ui-slider .ui-slider-handle.ui-state-hover,
#flat-slider.ui-slider .ui-slider-handle.ui-state-focus,
#flat-slider.ui-slider .ui-slider-handle.ui-state-active {
  outline: none;
  border-color: #172f38;
}

#flat-slider.ui-slider .ui-slider-pip .ui-slider-line {
  background: $lighter-gray;
  transition: all 0.4s ease;
}

#flat-slider.ui-slider.ui-slider-horizontal {
  height: 6px;
}

#flat-slider.ui-slider.ui-slider-horizontal .ui-slider-handle {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  top: -25px;
  margin-left: -10px;
}

#flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip {
  top: 10px;
}

#flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip .ui-slider-line {
  width: 2px;
  height: 10px;
  margin-left: -1px;
}

#flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
  height: 20px;
}

#flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
  height: 12px;
}

#flat-slider.ui-slider.ui-slider-vertical {
  width: 6px;
  height: 125px;
  display: inline-block;
  margin: 0 15%;
}

#flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle {
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  left: -25px;
  margin-bottom: -10px;
}

#flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip {
  left: 10px;
}

#flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip .ui-slider-line {
  height: 2px;
  width: 10px;
  margin-top: -1px;
}

#flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
  width: 20px;
}

#flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
  width: 12px;
}

#flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip,
#flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip {
  visibility: visible;
  opacity: 1;
  border: none;
  background: transparent;
  left: 50%;
  width: 30px;
  margin-left: -15px;
  text-align: center;
  color: white;
  font-weight: normal;
  top: 10px;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

#flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip:before,
#flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip:before {
  display: none;
}

#flat-slider .ui-slider-handle,
#flat-slider .ui-slider-range,
#flat-slider .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
#flat-slider .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
  background-color: $light-blue;
}


#flat-slider-vertical-1 .ui-slider-handle,
#flat-slider-vertical-1 .ui-slider-range,
#flat-slider-vertical-1 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
#flat-slider-vertical-1 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
  background-color: #f27793;
}


#flat-slider-vertical-2 .ui-slider-handle,
#flat-slider-vertical-2 .ui-slider-range,
#flat-slider-vertical-2 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
#flat-slider-vertical-2 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
  background-color: #bd77f2;
}


#flat-slider-vertical-3 .ui-slider-handle,
#flat-slider-vertical-3 .ui-slider-range,
#flat-slider-vertical-3 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
#flat-slider-vertical-3 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
  background-color: #67c3ec;
}