label[for="audio-ms"]>div {
    width: 10%;
    text-align: center;
}
label[for="audio-bg"]>div {
    width: 10%;
    text-align: center;
}
label[for="audio-fx"]>div {
    width: 10%;
    text-align: center;
}

label[for="audio-ms"] {
    color: var(--color-high-light);
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 10px;
    width: 100%;
}

label[for="audio-bg"] {
    color: var(--color-high-light);
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 10px;
    width: 100%;
}

label[for="audio-fx"] {
    color: var(--color-high-light);
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 10px;
    width: 100%;
}

.audio-slider {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background: none;
    border: 1px solid transparent;
    border-image: linear-gradient(to right, transparent, var(--color-high-light-darkness)) 1;
    border-radius: 5px;
    height: 5px;
    width: 60%;
    padding: 10px;
}

.audio-slider:hover::-webkit-slider-thumb {
    background: var(--color-high-light);
}

.audio-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 5px;
    background: var(--color-high-light-darkness);
    cursor: pointer;
}

.audio-slider::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: var(--color-high-light);
    border-radius: 3px;
    cursor: pointer;
}