/* Now Playing Styles */

.nowPlaying{background-color: #f4f4f4 !important;  border-style: solid;
    border-color: #77a547; border-radius: 5px;}
#npBanner{background-color: #77a547;color:white;font-size:24px;text-align:center;height:50px;padding:10px 0 10px 0}
.nowPlayingContainer{display: flex;}
#right{color:#434343;}

/* end Now Playing */

/* Playlist Styles */
#playlistDisplay{padding:20px;width:auto;height:500px;background-color: #f4f4f4;overflow-y: scroll !important; scroll-behavior: smooth !important;}
.flexContainer{justify-content:space-evenly;}

#nowPlayingPanel{margin-top:20px;background-color: #f4f4f4 !important; border-style: solid; border-color: #77a547; border-radius: 5px;}

    /* Controller bar */
#playlistController{background-color: #77a547;}
#myForm{font-size: 22px;text-align: right;}
#dateDisplay p{color:#f4f4f4;font-size: 24px;}

@media only screen and (min-width: 600px) {
    #playlistController{display:flex; justify-content: space-evenly; }
    #dateDisplay{margin:15px 0 15px 0;}
    #myForm{margin:15px 0 15px 0;}

    .nowPlayingContainer .nowPlayingImage {width: 200px !important;}
    #npSong{font-size:26px;}
    #npArtist{font-size: 22px;}
    #npAlbum{font-size: 22px;}
    #npDuration{font-size: 22px;}
    #npBy{font-size: 16px;}
    #left, #right{padding:25px 0px 25px 25px;}
}   

@media only screen and (max-width: 599px) { 
    .nowPlayingContainer{flex-direction: column;}  
    #left {text-align: center !important;} 
    .nowPlayingContainer .nowPlayingImage {max-width: 100% !important;margin-top: 5px;}
    #npSong{font-size:20px;}
    #npArtist{font-size: 18px;}
    #npBy{font-size: 12px;}
    #npDuration, #npAlbum{display:none;}

    #dateDisplay p, #myForm form, #npSong, #npBy, #npArtist{text-align: center;}
    #dateDisplay p {padding:5px 0 0 0;}
    #myForm{padding: 0 0 5px 0;}
    

}