.volume-control input[type=range]{
 -webkit-appearance:none;appearance:none;display:block;width:100%;height:12px!important;
 padding:0!important;margin:22px 0 30px!important;border:1px solid #819889!important;border-radius:999px;
 background:linear-gradient(to right,#e4bc70 0%,#e4bc70 var(--volume,0%),#35514f var(--volume,0%),#35514f 100%)!important;
 cursor:pointer;box-sizing:border-box;
}
.volume-control input[type=range]::-webkit-slider-thumb{
 -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#edc575;border:2px solid #f6db9e;box-shadow:0 2px 5px #0004;
}
.volume-control input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:#edc575;border:2px solid #f6db9e}
.volume-control input[type=range]::-moz-range-track{background:transparent;border:0}
.volume-control input[type=range]:focus-visible{outline:2px solid #f3d593;outline-offset:6px}
#test-hover{margin:8px 0}