/*--------------------- Music player ---------------------*/
.musicPlayerContainer{
    margin: 5px;
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: auto;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    gap: 10px;
    background:
    repeating-linear-gradient(135deg,
    #201a1720 0 6px, transparent 6px 12px);
    color:#0a0f1a;
    border-radius: 20px;
}
.musicPlayerControls,
.musicPlayerControls *,
.player-row,
.player-row * {
  user-select: none;              
  -webkit-user-select: none;      
  -ms-user-select: none;         
  -moz-user-select: none;        

  -webkit-touch-callout: none;    
  -webkit-tap-highlight-color: transparent; 
  
  -webkit-user-drag: none;
}

.musicPlayerControls ::selection,
.player-row ::selection {
  background: transparent; 
  color: inherit;
}
.musicPlayerInfo{
    position: relative;
    display: flex;
    align-items: flex-start;
}
.musicPlayerInfo img{
    margin-right: auto;
    width: 38%;
    height: auto;
    border-radius: 35px;
}
.musicText{
    width: 200px;
    margin-left: auto;
    display: flex;
    align-items: start;
    justify-content: flex-start;
    gap: 15px;
    flex-direction: column;
}
.musicText h2{
font-size: 1.5rem;
}
.musicText p{
font-size: 1rem;
font-weight: 550;
}
.musicPlayerControls{
    margin-top: auto;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.musicPlayerControls img{
    width: 20px;
    height: 20px;
}
.musicPlayerControls button{
    cursor: pointer;
    border: none;
    background: none;
    transition: all ease 0.3s;
}
.musicPlayerControls button:hover{
    transform: scale(1.2);
}
.playerTimeContainer{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}
.timelineInfo{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.currentTime{
    margin-right: auto;
}
.durationTime{
    margin-left: auto;
}
input[type=range]::-webkit-slider-thumb{
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: hsl(204, 100%, 62%);
}
input[type=range]{
        -webkit-appearance: none;
        appearance: none;
        background: #201a17;
}
input:hover{
        cursor: pointer;
    }
#seekSlider{
        width: 100%;
        height: 5px;
        border-radius: 0;
}
.playerVolumeContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 80%;
}
.volumeSlider{
    display: block;
    margin-right: auto;
}
#volumeSlider{
     width: 50%;
     height: 5px;
    border-radius: 0;
}
.playerVolumeContainer img{
    width: 20px;
    height: 20px;
}
    .musicPlayerMenu{
        display: none;
        cursor: pointer;

}
#favBtn{
    /* -webkit-appearance: none; */
    background-color: transparent;
    background-image: none;
    border: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 5px;
    right: 15px;
    cursor: pointer;
    &&:hover {
  transform: rotate(0deg) scale(1.2);
}
}
#moreInfo{
    width: 20px;
    height: auto;
    cursor: pointer;
    transition: all ease 0.3s;
    &&:hover {
  transform: scale(1.2);
}
}
#resizePlayer {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 15px;
    right: 15px;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

#resizePlayer:hover {
  transform: rotate(0deg) scale(1.2);
}

#resizePlayer.rotated {
  transform: rotate(180deg);
}

#resizePlayer.rotated:hover {
  transform: rotate(180deg) scale(1.2);
}
.musicCover{
    display: block;
}
#moreInfoContainer{
    background-color: #F8F7E2;
    /* opacity: 1;
    background: radial-gradient(circle, transparent 20%, #F8F7E2 20%, #F8F7E2 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #F8F7E2 20%, #F8F7E2 80%, transparent 80%, transparent) 32.5px 32.5px, linear-gradient(#201a17 2.6px, transparent 2.6px) 0 -1.3px, linear-gradient(90deg, #201a17 2.6px, #F8F7E2 2.6px) -1.3px 0;
    background-size: 65px 65px, 65px 65px, 32.5px 32.5px, 32.5px 32.5px; */
    position: absolute;
    padding: 20px;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    overflow: auto;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    z-index: 98;
}
#moreInfoContainer { display: none; }
#moreInfoContainer.is-open { display: flex; }
#moreInfoContainer button{
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: all ease 0.3s;
}
#moreInfoContainer button:hover{
    transform: scale(1.2);
}
#lessInfo{
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all ease 0.3s;
}
#lessInfo:hover{
    transform: scale(1.2);
}
#uiPlaylists{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}
#uiPlaylists ul{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 15px;
    flex-wrap: wrap;
}
#uiTracks{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}
#uiTracks ul{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: start;
    list-style: none;
    gap: 15px;
    flex-wrap: wrap;
}
.currentSongContainer{
    display: flex;
    align-items: center;
    justify-content: start;
    width: 120px;
    height: auto;
    text-overflow: ellipsis;
    overflow: hidden;
    gap: 5px;
    flex-direction: column-reverse;
    padding: 5px;
}
#uiPlaylists img{
    width: 100px;
    height: auto;
    border-radius: 20px;
}
#uiTracks img{
    width: 70px;
    height: auto;
    max-height: 70px;
    border-radius: 20px;
}
@media (max-width: 950px) {
    .musicPlayerMenu{
        display: block;
        position: fixed;
        top: 35px;
        left: 20px;
        z-index: 95;
}
.musicPlayerMenu img{
    width: 70px;
    height: 70px;
}
    .musicPlayerContainer{
    display: none;
    z-index: 90;  
    margin: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
    justify-content: center;
    align-items: center;
    background:
    repeating-linear-gradient(135deg,
    #201a1720 0 6px, #f8f7e2 6px 12px),
    #f8f7e2;;
    color:#0a0f1a;
    border-radius: 0px;
    transform: translateY(-150%);
    transition: all 0.5s ease;
    }
    .musicPlayerInfo{
    display: flex;
    align-items: flex-start;
}
#resizePlayer {
    display: none;
}

.musicPlayerControls{
    margin-top: 0;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
}