@import "https://www.hashtracking.com/common/css/compass/css3";

.rangeslider {
    position: relative;
}

.rangeslider__range,
.rangeslider__fill {
    background: #f6f6f6;
    border: 1px solid #aaa;
	borde-radius: 3px;
    display: block;
    height: 18px;
    width: 100%;
    margin: 0;
    @include box-shadow(0px 2px 2px rgba(255,255,255,0.25), inset 0px 1px 3px rgba(0,0,0,0.3));
    @include border-radius(10px);
}

.rangeslider__fill {
    background: #e6e6e6;
    position: absolute;
    top: 0;
}

.rangeslider__handle {
    background: white;
    border: 1px solid #aaa;
	border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
	z-index:2;
    top: -6px;
    @include background-image(linear-gradient(rgba(white, 0), rgba(black, .10)));
    @include box-shadow(1px 1px 8px rgba(black, .3));
    @include border-radius(20px);

    &:after {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        @include background-image(linear-gradient(rgba(black, .13), rgba(white, 0)));
        @include border-radius(20px);
    }
}