.wrapper{
    width:auto;
    height:200px;
    background:#17202a;
    background:linear-gradient(90deg,#55e7fc,#0162c8);
}
.container-ranges{
    position:relative;
    width:100%;
    height:60px;
}
input.ranges[type="range"]{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    width:100%;
    outline:none;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    background-color:transparent;
    pointer-events:none;
}
.slider-track{
    width:100%;
    height:5px;
    background: var(--color-line);
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    border-radius:5px;
}
input.ranges[type="range"]::-webkit-slider-runnable-track{
    -webkit-appearance:none;
    height:5px;
}
input.ranges[type="range"]::-moz-range-track{
    -moz-appearance:none;
    height:5px;
}
input.ranges[type="range"]::-ms-track{
    appearance:none;
    height:5px;
}
input.ranges[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    height:1.4em;
    width:1.4em;
    background-color:#3264fe;
    cursor:pointer;
    border-radius:10px;
    pointer-events:auto;
    margin-top:-7px;
}
input.ranges[type="range"].active{
    z-index:1000;
}
input.ranges[id="slider1"]::-webkit-slider-thumb{
    background-color:#55e7fc;
}
input.ranges[id="slider2"]::-webkit-slider-thumb{
    background-color:#0162c8;
}

span.rotate-icon{
    transform: rotate(45deg);
}
.select-option li span{
    padding:0.1rem;
}
.select-btn{
    padding:0.2rem 0.5rem;
}
.select-btn i{
    font-size:0.7rem;
    color:var(--color-gray-6);
}