*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
img{
    max-width: 100%;
}
audio{
    max-width: 100%;
}
#currentP{
    max-width: 300px;
    
}
#player2{
    background-color: crimson;
}

.box2{
    display: flex;
    height: 50px;
}
.box2 img{
    width: 50px;
} 
table{
    border: 1px solid black;
    width: 600px;
}
.box img{
    height: 300px;
    width: 300px;
}
body{
    display: flex;
 justify-content: space-between;
 height: 100vh;
 position: relative;

}
.nav{
display: flex;
flex-direction: column;
background-color: black;
width: 10%;
height: 100vh;
}
.mid,.side{
    width: 85%;
    height: 100vh;
    border: 1px solid black;
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

td{
    height: 10px;
}
th{
    height: 10px;
    display: inline;
}
.form{
    display: flex;
    justify-content: space-between;
}
button{
    width: 100%;
}
.bg:hover{
    background-color: aqua;
}
.active{
    background-color: aqua;
}

.pause{
    background-image: url("./images/Icons/pause.png");
    background-size: cover;
}

.play{
    background-image: url("./images/Icons/play.png");
    background-size: cover;
}


#currentP > audio{
    width: 99.9%;
    outline: none;
    background-color: bisque;
    position: absolute;
    left: 1px;
    bottom: 1px;
}

#currentP > audio::-webkit-media-controls-enclosure{
background: none;
}

.player--btn{
    display: flex;
    border: 1px solid black;
    justify-content: center;
    padding: 5px 0 5px 0;
}

.player--btn > img{
    width: 30px;
}

.player--btn > :nth-child(2){
    margin: 0px 10px 0px 10px;
}

.player--btn > :nth-child(1){
    transform: scaleX(-1);
    margin-right: 4px;
}

.parag{
    font-weight: bold;
}
#start-pause{
    width: 30px;
    border: 1px solid black;
}
.Hide{
    display: none;
}
/* #previousP3{
    display:none;
}
#previousP2{
    display:none;  
}
#previousP{
    display: none;
} */