/* Slider */

.slidecontainer {
  width: 100%; 
  position: relative;
  margin-top: 5px;
  margin-bottom: 20px;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  
  appearance: none;
  width: 100%; 
  height: 2px; 
  background: #d3d3d3; 
  outline: none; 
  position: relative;
  z-index: 5;
}

.slider-edge {
    height: auto;
    background: #FFF;
}

.slider-ie {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 29px;
    background: transparent;
}

.slide-start, .slide-end {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 15px; 
    background-color: #d3d3d3;
    bottom: 0;
}

.slide-start, .slide-min {
    left: 0;
}


.slide-end, .slide-max {
    right: 0;
}

.slide-min, .slide-max {
    position: absolute;
    bottom: -25px;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; 
  appearance: none;
  width: 45px; 
  height: 29px;
  background: url('/microsites/selectors/steppers/images/thumbnail_smiley-slider-control.png'); 
  background-position: center;
  background-size: cover;
  cursor: pointer;
  z-index: 7;
}

.slider::-moz-range-thumb {
  width: 45px; 
  height: 29px; 
  background: url('/microsites/selectors/steppers/images/thumbnail_smiley-slider-control.png'); 
  background-position: center;
  background-size: cover;  
  cursor: pointer; 
  border: none;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    width: 45px; 
    height: 29px; 
    background: url('/microsites/selectors/steppers/images/thumbnail_smiley-slider-control.png'); 
    background-position: center;
    background-size: cover;  
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}