.video-responsive {
width: 100%;
height: auto;
max-width: 100%;
}
.vid-container {
position: relative;
}
.vid-sound-toggle {
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.vid-sound-toggle svg {
width: 16px;
height: 16px;
}
.vid-volume-control {
position: absolute;
bottom: 10px;
right: 50px;
width: 80px;
height: 30px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.vid-volume-slider {
width: 60px;
margin: 0 10px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
height: 4px;
background: #ccc;
border-radius: 2px;
}
.vid-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
cursor: pointer;
}
.vid-volume-slider::-moz-range-thumb {
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
cursor: pointer;
border: none;
}