body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#overlay {
    position: fixed;
    bottom: 20px; /* adjust as needed */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#playOverlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Transparent black */
    display: flex;
    justify-content: center;
    align-items: center;
}

#playButton {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid #fff; /* Play button color */
    cursor: pointer;
    transition: transform 0.2s;
}

#playButton:hover {
    transform: scale(1.1); /* Scale up on hover */
}

#slidercontainer {
    margin-bottom: 10px; /* adjust as needed */
    width: 100%;
}

#vslider {
    width: 100%; /* occupy full width */
    height: 20px; /* adjust height as needed */
    -webkit-appearance: none; /* Override default appearance */
    appearance: none;
    background: #d3d3d3; /* Slider track color */
    border-radius: 10px; /* Slider track border radius */
    outline: none; /* Remove outline */
}

/* Style the thumb icon */
#vslider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default appearance */
    appearance: none;
    width: 25px; /* Adjust width to make the thumb bigger */
    height: 25px; /* Adjust height to make the thumb bigger */
    background: #727272; /* Thumb color */
    border-radius: 50%; /* Make it circular */
    cursor: pointer; /* Add cursor pointer */
}

#vslider::-moz-range-thumb {
    width: 25px; /* Adjust width to make the thumb bigger */
    height: 25px; /* Adjust height to make the thumb bigger */
    background: #000000; /* Thumb color */
    border-radius: 50%; /* Make it circular */
    cursor: pointer; /* Add cursor pointer */
}

#body_check {
    display: flex;
    align-items: center;
}

label {
    margin-left: 5px; /* adjust as needed */
}

/* Mobile-friendly styles */
@media screen and (min-width: 768px) {
    #slidercontainer {
        margin-bottom: 0;
        width: auto; /* reset width */
    }

    #vslider {
        width: 800px; /* adjust as needed */
        height: 25px; /* adjust height as needed */
    }
}