body{
    /* display: flex;
    justify-content: center;
    align-items: center; */
    font-family: Arial, Helvetica, sans-serif;
}

.player-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 1px solid black; */
    min-width: 360px;
}

.cur-song-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 1px solid black; */
}

.img-cur-song-img-container{
    min-width: 360px;
    height: 360px;
    /* border: 1px solid black; */
}

#cur-track-img{
    width: 360px;
    height: 360px;
    object-fit: cover;
    border-radius: 15px;
    /* background-size: cover; */
}

#cur-song-title{
    font-size: 1.2rem;
    padding: 5px 0;
}

.player-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 360px;
    justify-content: space-around;
    border: 1px solid rgb(207, 207, 207);
    border-radius: 15px;
    /* margin: 10px 0; */
}


 .fa-solid:active{
    color: #d81111;
    
}



.btns-style{
    /* text-align: center; */
    display: inline-block;
    border: none;
    /* border: 2px solid #c0c0c0; */
    padding: 5px 10px;
    background-color: #ffffff;
    color: #1c1c1c;
    border-radius: 15px;
    font-size: 45px;
    font-weight: 600;
    cursor: pointer;
}

.btns-style:focus{
    background-color: #cecece;
}

#play-btn{
    z-index: 2;
    padding: 5px 20px;
    font-size: 50px;
    
}

#play-btn-img{
  text-align: center;
  min-width: 37.5px;
}

/* .fa-play{
    padding: 0 3px;
} */

.audio-time{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    font-size: 19px;
}


#track-time-slider {
    -webkit-appearance: none;
    appearance: none;
    min-width: 230px;
    height: 10px;
    border-radius: 15px;
    background-color: #ececec;
  }

  #track-time-slider:active {
    background-color: #dadada;
  }

  #track-time-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    max-width: 15px;
    height: 40px;
    background: #1c1c1c;
    border-radius: 12px;
    cursor: pointer;
  }


  /* #track-time-slider::-webkit-slider-thumb:active {
    color: #f91155;
  } */

  .audio-slider-container{
    /* display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; */
  }

.audio-slider-container-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-width: 360px;
}

  .volume-img-container{
    /* align-self: flex-start; */
    
  }

  #volume-btn{
    /* padding-right: 10px; */
    font-size: 30px;
  }

  #vol-icon{
    min-width: 37.500px;
    max-height: 30px;
  }

  #curr-track-volume{
    -webkit-appearance: none;
    appearance: none;
    min-width: 230px;
    height: 10px;
    border-radius: 15px;
    background-color: #ececec;
  }

  #curr-track-volume:active {
    background-color: #dadada;
  }

  #curr-track-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    max-width: 15px;
    height: 15px;
    background: #1c1c1c;
    border-radius: 12px;
    cursor: pointer;
  }

  #curr-track-volume-nums{
    min-width: 43px;
    font-size: 17px;
    padding: 0 7px;
  }


  /* tracklist */
.tracklist-container{
    min-width: 360px;
    margin-top: 10px;
    /* border: 1px solid black; */
}

.song-table{
    min-width: 360px;
    text-align: left;
    border-collapse: collapse;
}


.selected-playlist-song{
  cursor: pointer;
}

.song-list-id{
    text-align: center;
    
}

.song-list-img{
    text-align: center;
    z-index: 0;
}

th, td{
    border-right: 1px solid rgb(26, 26, 26);
    padding: 0 5px;
}

tr:nth-child(even) {
    background-color: #dddddd;
  }

tr:hover {
    background-color: #D6EEEE;
}

#show-audio{
    display: none;
}