/**player 2**/
.player2{
    position: fixed;
    left:0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(7, 7, 7, 0.788);
    padding:10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(30px);
}
.player2 .player2-data-info{
    display: flex;
    gap:10px;
    width:50%
}
.player2-data-info .meta{

}
.player2-data-info .thumbnail img{
    display: block;
    width: 50px;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    border-radius: .5em;
}
.player2-data-info .meta .meta-title, .player2-data-info .meta .meta-artist{
    line-height: 1;
}
.player2-data-info .meta .meta-title{
    color:white;
    font-size: 1em;
}
.player2-data-info .meta .meta-artist{
    color:grey
}
.player2-controls{
    display: flex;
    gap:10px;
    justify-content: space-between;
    align-items: center;
    width:50%;
}
.player2-controls .control-btns{
    display:flex;
    gap:10px;
    align-items: center;
    width:100%;
}
.player2-controls .control-btns button{
    color:white
}

.player2-controls .player2-actions button span{
    color:white
}
.player2-controls{
    display:flex;
    gap:10px
}
.player2 .progress{
    padding:1.5px;
    background-color: rgb(54, 54, 54);
    position:absolute;
    left:0;
    top:0;
}
.control-btns .player-waiting{
    width:35px;
    aspect-ratio: 1/1;
    border:2px solid white;
    border-radius: 360px;
    border-top:2px solid rgb(56, 56, 56);
    animation:spin .4s linear infinite;
    display:none
}
@keyframes spin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}    
}
.control-btns #play, .control-btns #pause{
    width:40px;
    aspect-ratio: 1/1;
    border:2px solid grey;
    display:grid;
    place-content: center;
}
.control-btns #play:hover, .control-btns #pause:hover{
    background-color:rgb(44, 44, 44) ima !important
}

.player2 .player2-controls .player2-actions #audio-time{
    color:white
}

@media(max-width:1200px){
    .player2{
        flex-direction: column;
        gap:10px;
        justify-content:start;
        align-items:start
    }
    .player2 .player2-data-info{
        width:100%;
    
    }
    .player2-controls{
        width:100%
    }
    .player2-controls .control-btns{
        gap:15px
    }
  
    
}