input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    margin: 0;
    margin-left: 10px;
    padding: 0;
    vertical-align: middle;
    line-height: 1;

    opacity: 1;

    /* width: 100%; */
    height: 10px;
    /* background: green; */
    outline: none;
}

input[type='range']::-webkit-slider-runnable-track {
    background: grey;
}

input[type=range]:hover {
    opacity: 1;
}

input {
    border: none;
    /* border-radius: 0; */
    /* height: 9px; */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    margin: 0;
    border: #000;
    border-radius: 0;
    width: 10px;
    height: 9px;
    background: #444;
    cursor: pointer;
}

input[type='range']:active {
    transform: none;
}

input[type=range]::-webkit-scrollbar {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: blue;
    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    width: 25px;
    height: 25px;
    cursor: pointer;

    border: none;
    border-radius: 0;
    width: 10px;
    height: 10px;
    background: #111;
    cursor: pointer;
}




/* #inflections input {
    background: red;
    display: inline-block;
    height: 20px;
} */
/* #inflections input[type='range']::-webkit-slider-runnable-track {
    background: red;
} */
#inflections input[type='range'] {
    /* background: red; */
    width: 60px;
}


#i0::-webkit-slider-runnable-track {
    background: yellow;
}

#i1::-webkit-slider-runnable-track {
    background: blue;
}

#i2::-webkit-slider-runnable-track {
    background: red;
}

#master-volume::-webkit-slider-runnable-track {
    background: grey;
}



.f1 option {
    padding: 10px;
}

.f1 input[type="range"] {
    width: 90%;
    margin: 0;
}