#controls > .section > .seekbar-cont {
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
    cursor:pointer;
}

#controls > .section >  .seekbar-cont:hover .filled {
    background-color:rgb(29, 185, 84)!important;
}

#controls > .section >  .seekbar-cont > .number  {
    display:flex;
    align-items: center;
    justify-content: center;
    width:15%;
    height:100%;
    font-size:0.8em;
    color:rgb(167, 167, 167);
}

#controls > .section >  .seekbar-cont > .bar {
    position:relative;
    flex:1;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: start;
}

#controls > .section >  .seekbar-cont > .bar > .visual-bar {
    pointer-events:none;
    position:relative;
    border-radius:50px;
    height:20%;
    width:100%;
    background-color: rgb(48, 48, 48);
    background-color: rgba(0,0,0,0.7);
}

#controls > .section >  .seekbar-cont > .bar > .filled {
    pointer-events:none;
    position:absolute;
    border-radius:50px 0px 0px 50px;
    height:20%;
    width:0%;
    background-color:rgb(185, 185, 185);
}


#controls > .section >  .seekbar-cont > .bar > .thumb {
    pointer-events:none;
    position:absolute;
    left:0%;
    height:40%;
    width:1%;
    display:flex;
    align-items: center;
    justify-content: center;
}

#controls > .section >  .seekbar-cont > .bar > .thumb > .visual {
    pointer-events:none;
    box-shadow:0px 0px 5px 0px rgba(0,0,0,0.8);
    border-radius:100%;
    height:100%;
    aspect-ratio:1/1;
    background-color:rgb(222, 222, 222);
}