/* noUi Slider css */
/* --------------- */
/* default bg for noUi Slider */
.noUi-background {
  background : #EAEDED;
}

.noUi-target {
  background-color : #E4E8E8;
  border : none;
  box-shadow : none;
  border-radius : 1rem;
}

.noUi-target.noUi-connect {
  box-shadow : none;
}

.noUi-horizontal {
  height : 10px;
  padding-left : 17px;
}

.noUi-horizontal .noUi-handle {
  width : 20px;
  height : 20px;
  top : -5px;
  right : -1px;
  cursor : pointer;
}

.noUi-horizontal .noUi-origin {
  right : 17px;
  left : -17px;
}

.noUi-horizontal.slider-xl {
  height : 14px;
}

.noUi-horizontal.slider-xl .noUi-handle {
  width : 28px;
  height : 28px;
  top : -7px;
}

.noUi-horizontal.slider-lg {
  height : 12px;
}

.noUi-horizontal.slider-lg .noUi-handle {
  width : 24px;
  height : 24px;
  top : -6px;
}

.noUi-horizontal.slider-sm {
  height : 6px;
}

.noUi-horizontal.slider-sm .noUi-handle {
  height : 15px;
  width : 15px;
  left : -2px !important;
}

.noUi-horizontal.slider-xs {
  height : 3px;
}

.noUi-horizontal.slider-xs .noUi-handle {
  height : 10px;
  width : 10px;
  top : -4px;
  left : -2px !important;
}

/* slider handle styles */
.noUi-handle {
  box-shadow : none;
  border : none;
  border-radius : 50%;
  background : #FFFFFF;
  border : 5px solid #5A8DEE;
}

.noUi-handle:after, .noUi-handle:before {
  display : none;
}

/* for noUi square circle filled */
.circle-filled .noUi-handle {
  background : #5A8DEE;
  border-radius : 50%;
}

.circle-filled .noUi-handle:after, .circle-filled .noUi-handle:before {
  display : none;
}

/* for noUi square and it's sizes */
.square .noUi-handle {
  background : #5A8DEE;
  border-radius : 3px;
}

.square .noUi-handle:before {
  display : block;
  width : 2px;
  height : 10px;
  right : 2px;
  top : 0;
}

.square .noUi-handle:after {
  display : block;
  width : 2px;
  height : 10px;
  right : 7px;
  top : 0;
}

.square.slider-xl .noUi-handle:before {
  right : 5px;
  top : 4px;
}

.square.slider-xl .noUi-handle:after {
  right : 10px;
  top : 4px;
}

.square.slider-lg .noUi-handle:before {
  right : 3px;
  top : 2px;
}

.square.slider-lg .noUi-handle:after {
  right : 8px;
  top : 2px;
}

.square.slider-sm .noUi-handle:before {
  right : -1px;
  top : -1px;
  height : 7px;
}

.square.slider-sm .noUi-handle:after {
  right : 4px;
  top : -1px;
  height : 7px;
}

.square.slider-xs .noUi-handle:before {
  right : -3px;
  top : -3px;
  height : 5px;
}

.square.slider-xs .noUi-handle:after {
  right : 1px;
  top : -3px;
  height : 5px;
}

/* default connect color */
.noUi-connect {
  background : #5A8DEE;
  box-shadow : none;
}

/* noUi Vertical customization */
.noUi-vertical {
  display : inline-block;
  width : 8px;
  height : 150px;
}

.noUi-vertical .noUi-handle {
  width : 20px;
  height : 20px;
  top : -5px;
  right : -6px;
}

.noUi-vertical.square .noUi-handle {
  background : #5A8DEE;
  border-radius : 3px;
}

.noUi-vertical.square .noUi-handle:before {
  display : block;
  width : 12px;
  height : 2px;
  right : -1px;
  top : 2px;
}

.noUi-vertical.square .noUi-handle:after {
  display : block;
  width : 12px;
  height : 2px;
  right : -1px;
  top : 7px;
}

/* for example value of noUI Hover */
.example-val {
  font : 400 12px Arial;
  color : #888888;
  display : block;
  margin : 15px 0;
}

/* to remove outline on focus */
.noUi-handle:focus {
  outline : 0;
}

/* IE SPECIFIC FOR SLIDER WITH INPUT */
:-ms-lang(x), .slider-select {
  -ms-flex : 0 0 10%;
      flex : 0 0 10%;
  max-width : 10%;
}