/* =======================================================================
 * mt-range-slider.css
 * Version: 1.0
 * Date: 2016/04/29
 * By: Rich DeBourke
 * License: MIT
 * GitHub: https://github.com/RichDeBourke/mouse-touch-range-slider
 * ======================================================================= */

.rs-hidden-input {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    outline: none;
    z-index: 0;
    background: none;
    border-style: solid;
    border-color: transparent;
}

.rs {
    position: relative;
    display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
    /* Design related properties */
    height: 50px;
}

.rs-track {
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 2;
    outline: none;
    /* Design related properties */
    height: 16px;
    top: 23px;
    border: none;
    border-radius: 16px;
}

.rs-slider {
    position: absolute;
    display: block;
    cursor: default;
    z-index: 3;
    /* Design related properties */
    top: 15px;
    width: 30px;
    height: 30px;
    border: 1px solid #8a8a8a;
    background: #CCDBE6; /* Old browsers */
    background: -moz-linear-gradient(top, #CCDBE6 0%, #637780 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #CCDBE6 0%,#637780 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #CCDBE6 0%,#637780 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    -moz-border-radius: 15px;
    border-radius: 15px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background 200ms ease;
}

.slider-dragging {
    cursor: pointer;
}

.red .rs-track {
    background-color: #ff0000;
}

.green .rs-track {
    background-color: #00ff00;
}

.blue .rs-track {
    background-color: #0000ff;
}

.hue .rs-track {
    background: #ff0000; /* Old browsers */
    background: -moz-linear-gradient(left,hsla(0,100%,50%,1),hsla(10,100%,50%,1),hsla(20,100%,50%,1),hsla(30,100%,50%,1),hsla(40,100%,50%,1),hsla(50,100%,50%,1),hsla(60,100%,50%,1),hsla(70,100%,50%,1),hsla(80,100%,50%,1),hsla(90,100%,50%,1),hsla(100,100%,50%,1),hsla(110,100%,50%,1),hsla(120,100%,50%,1),hsla(130,100%,50%,1),hsla(140,100%,50%,1),hsla(150,100%,50%,1),hsla(160,100%,50%,1),hsla(170,100%,50%,1),hsla(180,100%,50%,1),hsla(190,100%,50%,1),hsla(200,100%,50%,1),hsla(210,100%,50%,1),hsla(220,100%,50%,1),hsla(230,100%,50%,1),hsla(240,100%,50%,1),hsla(250,100%,50%,1),hsla(260,100%,50%,1),hsla(270,100%,50%,1),hsla(280,100%,50%,1),hsla(290,100%,50%,1),hsla(300,100%,50%,1),hsla(310,100%,50%,1),hsla(320,100%,50%,1),hsla(330,100%,50%,1),hsla(340,100%,50%,1),hsla(350,100%,50%,1),hsla(360,100%,50%,1) 100%); /* FF3.6-15 */
    background: -webkit,hsla(120,100%,50%,1)-linear-gradient(left,hsla(0,100%,50%,1),hsla(10,100%,50%,1) hsla(20,100%,50%,1),hsla(30,100%,50%,1),hsla(40,100%,50%,1),hsla(50,100%,50%,1),hsla(60,100%,50%,1),hsla(70,100%,50%,1),hsla(80,100%,50%,1),hsla(90,100%,50%,1),hsla(100,100%,50%,1),hsla(110,100%,50%,1),hsla(120,100%,50%,1),hsla(130,100%,50%,1),hsla(140,100%,50%,1),hsla(150,100%,50%,1),hsla(160,100%,50%,1),hsla(170,100%,50%,1),hsla(180,100%,50%,1),hsla(190,100%,50%,1),hsla(200,100%,50%,1),hsla(210,100%,50%,1),hsla(220,100%,50%,1),hsla(230,100%,50%,1),hsla(240,100%,50%,1),hsla(250,100%,50%,1),hsla(260,100%,50%,1),hsla(270,100%,50%,1),hsla(280,100%,50%,1),hsla(290,100%,50%,1),hsla(300,100%,50%,1),hsla(310,100%,50%,1),hsla(320,100%,50%,1),hsla(330,100%,50%,1),hsla(340,100%,50%,1),hsla(350,100%,50%,1),hsla(360,100%,50%,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, hsla(0,100%,50%,1),hsla(10,100%,50%,1),hsla(20,100%,50%,1),hsla(30,100%,50%,1),hsla(40,100%,50%,1),hsla(50,100%,50%,1),hsla(60,100%,50%,1),hsla(70,100%,50%,1),hsla(80,100%,50%,1),hsla(90,100%,50%,1),hsla(100,100%,50%,1),hsla(110,100%,50%,1),hsla(120,100%,50%,1),hsla(130,100%,50%,1),hsla(140,100%,50%,1),hsla(150,100%,50%,1),hsla(160,100%,50%,1),hsla(170,100%,50%,1),hsla(180,100%,50%,1),hsla(190,100%,50%,1),hsla(200,100%,50%,1),hsla(210,100%,50%,1),hsla(220,100%,50%,1),hsla(230,100%,50%,1),hsla(240,100%,50%,1),hsla(250,100%,50%,1),hsla(260,100%,50%,1),hsla(270,100%,50%,1),hsla(280,100%,50%,1),hsla(290,100%,50%,1),hsla(300,100%,50%,1),hsla(310,100%,50%,1),hsla(320,100%,50%,1),hsla(330,100%,50%,1),hsla(340,100%,50%,1),hsla(350,100%,50%,1),hsla(360,100%,50%,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.state_hover, .rs-slider:hover {
    background: #A3AFB8; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #A3AFB8 0%, #455359 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #A3AFB8 0%,#455359 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #A3AFB8 0%,#455359 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.rs-slider:focus {
    outline: 0;
    background: #FFFFFF; /* Old browsers */
    background: -moz-linear-gradient(45deg, #C7EEFF 0%, #FFFFFF 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #C7EEFF 0%,#FFFFFF 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #C7EEFF 0%,#FFFFFF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}