input[type=range] {
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
}

    input[type=range]::-webkit-slider-runnable-track {
        width: 160px;
        height: 5px;
        background: #777E94;
        border: none;
        border-radius: 3px;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #159BAE;
        margin-top: -4px;
    }

    input[type=range]:focus {
        outline: none;
    }

        input[type=range]:focus::-webkit-slider-runnable-track {
            background: #777E94;
        }



input[type=range] {/* fix for FF unable to apply focus style bug  */
    border: 0px solid white;/*required for proper track sizing in FF*/
    width: 195px;
}

    input[type=range]::-moz-range-track {
        width: 160px;
        height: 5px;
        background: #777E94;
        border: none;
        border-radius: 3px;
    }

    input[type=range]::-moz-range-thumb {
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #159BAE;
    }

    /*hide the outline behind the border*/
    input[type=range]:-moz-focusring {
        outline: 1px solid white;
        outline-offset: -1px;
    }

    input[type=range]:focus::-moz-range-track {
        background: #777E94;
    }


    input[type=range]::-ms-track {
        width: 160px;
        height: 5px;
        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
        background: transparent;
        /*leave room for the larger thumb to overflow with a transparent border */
        border-color: transparent;
        border-width: 6px 0;
        /*remove default tick marks*/
        color: transparent;
    }

    input[type=range]::-ms-fill-lower {
        background: #777;
        border-radius: 10px;
    }

    input[type=range]::-ms-fill-upper {
        background: #777E94;
        border-radius: 10px;
    }

    input[type=range]::-ms-thumb {
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #159BAE;
    }

    input[type=range]:focus::-ms-fill-lower {
        background: #888;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: #777E94;
    }


/*--------------------------------------------  */



.range-input {
    margin-top: 10px;
    border-bottom: 1px solid gray;
    padding-bottom: 8px;
}


.setting-menu::-webkit-scrollbar {
    width: 0.5em;
}
 
.setting-menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.setting-menu::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}


.setting-menu::-moz-scrollbar {
    width: 0.5em;
}
 
.setting-menu::-moz-scrollbar-track {
    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.setting-menu::-moz-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.setting-menu::-ms-scrollbar {
    width: 0.5em;
}
 
.setting-menu::-ms-scrollbar-track {
    -ms-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.setting-menu::-ms-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}