.ui-slider {
  position: relative;
  text-align: left;
}
.ui-slider .ui-slider-handle.ui-slider-handle-active {
  z-index: 2;
}
.ui-slider .ui-slider-range {
  position: absolute;
  //font-size: .7em;
  display: block;
  border: 0;
  background-position: 0 0;
}
.ui-slider-horizontal {
  height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -.55em;
  margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}
.ui-slider-vertical {
  width: .8em;
  height: 100px;

}
.ui-slider-vertical .ui-slider-handle {
  left: -.45em;
  margin-left: 0;
  margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}
.ui-slider-animate .ui-slider-handle {
  transition: left .3s;
}
.ui-slider-horizontal {
  height: .8em;
}
.ui-slider {
  position: relative;
  text-align: left;
}
.ui-widget, .ui-widget * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ui-slider-horizontal {
  height: 6px;
}
.ui-slider {
  position: relative;
  text-align: left;
  //background: #838688;
  border: none;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
}
.ui-corner-all {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3em;
}
.ui-widget-content {
  border: 1px solid #D5D5D5;
  //background: grey;
  //color: #222222;
}
.ui-widget {
  font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif;
  //font-size: 1em;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider .ui-slider-range {
  position: absolute;
  //font-size: .7em;
  display: block;
  border: 0;
  background-position: 0 0;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider .ui-slider-range {
  position: absolute;
  //font-size: .7em;
  display: block;
  border: 0;
 // background: $cardHeaderBGColor;   /** use card header here **/
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.ui-corner-all {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.ui-widget-header {
  border: 1px solid #d9d9d9;
  // background: #f6f7f9;
  // color: #1b1d1f;
  // font-weight: normal;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 0;
  width: 21px !important;
  height: 21px !important;
  cursor: default;
  outline: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 3em !important;
  border: none;
}
.ui-slider-horizontal2 {
  height:15px;
  top: 10px;
  }
  
  .ui-slider-horizontal2 {
    height:15px;
    top: 10px;
    }
    
    .ui-slider-handle2 {
      position: absolute;
      z-index: 0;
      width: 29px !important;
      height: 29px !important;
      cursor: default;
      outline: none;
      border-radius: 3em !important;
      border: none;
      background: $rangeSliderBGColor;
      bottom: -8px;
      margin-left: -.9em;
      cursor: pointer; }

    .ui-slider-vertical2 {
      width: 1em;
      height: 100px;
    }
    .ui-slider-handle3 {
      margin-left: -17px;
      position: absolute;
      z-index: 0;
      width: 42px !important;
      height: 42px !important;
      cursor: default;
      outline: none;
      border-radius: 3em;
      border: none;
      background: $rangeSliderBGColor;
      margin-bottom: -2em;
      margin-top: -2em;
      }

    .ui-slider-handle1 {
      margin-left: -6px;
       position: absolute;
       z-index: 0;
       width: 21px !important;
       height: 21px !important;
       cursor: default;
       outline: none;
       border-radius: 3em;
       border: none;
       background: $rangeSliderBGColor;
    }
    .ui-slider-range2 {
       background: #b8dfff;
    }
    .ui-slider-range3 {
      background: #b8dfff;
    
    }

    .slider-round {
      -webkit-appearance: none;
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background:$sliderWidgetBGColor;
      color: $sliderWidgetColor;
      border: 1px solid #D5D5D5;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
      opacity: 1;

    }
    
    .slider-round::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      // background: #4CAF50;
      cursor: pointer;
    }
    
    .slider-round::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      // background: #4CAF50;
      cursor: pointer;
    }  
    
    .slidecontainer {
      width: 100%;
      padding-top: 17px;
    }

    .slider-square {
      -webkit-appearance: none;
      width: 100%;
      height: 10px;
      background:$sliderWidgetBGColor;
      color: $sliderWidgetColor;
      border: 1px solid #D5D5D5;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
  
    .slider-square::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      // background: #4CAF50;
      cursor: pointer;
    }
    
    .slider-square::-moz-range-thumb {
      width: 25px;
      height: 25px;
      background: #4CAF50;
      cursor: pointer;
    }