/* ---------------------------------------------------------------------- */
/* Bootsrap Slider
/* ---------------------------------------------------------------------- */
.slider {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.slider.slider-horizontal {
    margin: 10px 0;
    width: 210px !important;
}

.slider.slider-horizontal .slider-track {
    height: 5px !important;
    left: 0;
    margin-top: -5px;
    top: 50%;
    width: 100%;
}

.slider.slider-horizontal .slider-handle {
    margin-top: -10px !important;
}

.slider.slider-vertical {
    margin: 0 10px;
}

.slider.slider-vertical .slider-handle {
    margin-left: -10px !important;
}

.slider.slider-vertical .slider-track {
    width: 5px !important;
}

.slider.slider-vertical .slider-handle {
    margin-left: -10px !important;
}

.slider-handle.round {
    background: linear-gradient(to bottom, #DDDDDD 13%, #ffffff 97%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 2px 1px -1px #ffffff inset, 0 1px 3px rgba(0, 0, 0, 0.39);
    height: 26px;
    opacity: 1;
    width: 26px;
}

.slider-selection {
    background-image: none !important;
    border-radius: none;
    box-shadow: none;
}

.slider.slider-primary .slider-selection {
    background: $primary;
}

.slider.slider-blue .slider-selection {
    background: $blue;
}

.slider.slider-green .slider-selection {
    background: $green;
}

.slider.slider-orange .slider-selection {
    background: $orange;
}

.slider.slider-red .slider-selection {
    background: $red;
}

.slider.slider-yellow .slider-selection {
    background: $yellow;
}

.slider.slider-purple .slider-selection {
    background: $purple;
}

.slider.slider-azure .slider-selection {
    background: $azure;
}