/* The slider */
.ui-slider {
  cursor: pointer;
  -webkit-transition: .4s;
  transition: .4s;
  opacity: 0.7;
  height: 105px;
  width: 50px;
  background: transparent
}


.ui-slider .ui-slider-range {
  background: url("../images/slider-values.svg");
  background-position: bottom;
  background-size: 85px 105px;
  background-repeat: no-repeat;
}
.ui-slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}
.ui-slider .ui-slider-handle{
  width: 100%;
  height: 1em;
  border: 0;
  background: url("../images/slider-drag.svg");
  background-position: 0 3px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.ui-slider-vertical .ui-slider-handle{
  left: 0;
}
.ui-corner-all{
  border-radius: 0px;
  border-color: #44C7F1;

}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}