/*##########################################################################*/ /* Slider Elements */ /*##########################################################################*/

.slider {

@include border-radius(5px);
background: #E2E2E2 repeat-x 0 0;
height: 6px;
position: relative;
cursor: pointer;
border: 1px solid #999;
width: 250px;
float: left;
margin-top: 12px;

}

.progress {

height: 9px;
margin-left: 50px;
background-color: #C5FF00;
display: none;
opacity: 0.6px;

}

.handle {

@extend .button;

width: 35px;
top: -10px;
position: absolute;
display: block;
text-align: center;
font-size: 0.8em;
font-weight: 700;
letter-spacing: -0.07em;
color: #666;
vertical-align: bottom;
padding-left:2px;
padding-right:2px;
padding-top: 3px;
text-decoration: none !important;

&:active {
  padding-top:3px;
  padding-left:2px;
  padding-right:2px;
}

&.thin {
  width: 8px;
}

}

.range {

@include border-radius(5px);
border: 1px inset #ddd;
float: left;
font-size: 20px;
text-align: center;
width: 50px;
margin: 0 0 0 15px;
padding: 3px 0;

}

.left {

float: left;
font-size: 1em;
letter-spacing: -0.07em;
color: #999;
font-weight: 500;
width: 85px;
padding-top: 3px;

}

div {

&.leftseconds {
  float: left;
  text-align: right;
  padding-right: 12px;
  color: #000;
  margin-top: 7px;
  font-style: italic;
  font-size: 0.9em;
}

&.rightseconds {
    float: left;
    text-align: left;
    padding-left: 12px;
    color: #000;
    margin-top: 7px; 
    font-style: italic;
    font-size: 0.9em;
}

}