#musicplayer {
font-family: 'Arial';
/* default font */
/* background color of player */
background-image:url(https://www.transparenttextures.com/patterns/debut-light.png); 
/* border around player */
width: 146px;
/* width of the player - make it 100% if you want it to fill your container */
padding: 15px;
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}

.songtitle,
.track-info,
.now-playing {
padding: 5px;
}

.controls {
display: flex;
flex-direction: column;
gap: 10px;
}

.buttons {
display: flex;
justify-content: center;
font-size: 17px !important;
/* size of controls */
width: 100%;
}

.buttons div {
width: 33.3%;
}

.playpause-track,
.prev-track,
.next-track {
color: #bfbfbf;
/* color of buttons */
font-size: 35px !important;
/* size of buttons */
}

.volume-icon {
font-size: 22px !important;
/* size of volume icon */
}

.seeking,
.volume {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
.volume_slider, .seek_slider{
    background:transparent;
}
.current-time, .total-duration
{
color:#bfbfbf;

}
.now-playing,
.track-info {
background-color: #a1a1a1;
/* background color of top two boxes */
}

.now-playing {
font-weight: bold;
}

input[type=range] {
appearance: none;
/* removes default appearance of the tracks */
width: 100%;
}

input[type=range]:focus {
outline: none;
/* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
/* thickness of seeking track */
background: #ffffff;
/* color of seeking track */
}

input[type=range]::-webkit-slider-thumb {
height: 10px;
/* height of seeking square */
width: 10px;
/* width of seeking square */
border-radius: 0px;
/* change to 5px if you want a circle seeker */
background: #000000;
/* color of seeker square */
-webkit-appearance: none;
margin-top: -3px;
/* fixes the weird margin around the seeker square in chrome */
}

input[type=range]::-moz-range-track {
width: 100%;
height: 4px;
/* thickness of seeking track */
background: #8b8b8b;
/* color of seeking track */
}

input[type=range]::-moz-range-thumb {
height: 10px;
/* height of seeking square */
width: 10px;
/* width of seeking square */
border-radius: 0px;
/* change to 5px if you want a circle seeker */
background: #ffffff;
/* color of seeker square */
border: none;
/* removes weird border around seeker square in firefox */
}

.volume-icon
{
    color:#bfbfbf;
}