#player_container {z-index: 100; position: fixed; bottom: 0; left: 0;}
#player_column {padding: 0 25px 0 0;}
#player {position: relative; padding: 7px 10px 0; background: linear-gradient(to bottom, #e2b0d6 0%, #9e97ca 70%);}

#song_title {display: inline-block; font-family: LithosPro; text-transform: uppercase; font-size: 18px; line-height: 20px; text-shadow: 0px 1px 0px #00F; margin: 5px 0; vertical-align: middle;}
#playlist_toggler {display: inline-block; font-family: LithosPro; text-transform: uppercase; font-size: 16px; text-shadow: 0px 1px 0px #000; vertical-align: middle; padding: 3px 3px 0 0; cursor: pointer;}

#progress_container {height: 8px; width: 100%; background-color: #FDFBFA; border: 1px solid #120E72; margin: 0 0 3px 0;}
#progress_bar {background-color: #120E72;}

#player [id^='icon'] {display: inline-block; font-size: 20px; padding: 4px 6px 0 6px; cursor: pointer;}
#time_container {display: inline-block; font-size: 16px; vertical-align: top; padding: 7px 10px 0;}

#volume {display: inline-block; vertical-align: top;}
#icon_volume {display: block; float: left;}
#volume_container {height: 8px; width: 120px; background-color: #FDFBFA; border: 1px solid #120E72; margin: 12px 0 0 0;}
#volume_bar {background-color: #120E72;}

#playlist {display: none; border: 1px solid #D4D3D1; background: #F6E7F2; padding: 7px 10px 0; max-height: 300px; overflow: auto;}
#playlist ul {list-style-type: none;}
#playlist ul li {font-size: 18px; font-family: MyriadPro;}
#playlist ul li[data-selected="active"] {text-shadow: 0px 1px 0px #00F;}
.song_title {cursor: pointer;}
.delete_item {cursor: pointer; padding-left: 8px;}
#playlist .time_duration {display: none;}
#playlist_clear {border-top: 1px solid #120E72; padding: 7px 0; text-align: right;}
#remove_all {cursor: pointer; font-family: LithosPro; text-transform: uppercase; font-size: 13px; text-shadow: 0px 1px 0px #000;}



/* RESPONZIVITA */
/* Bootstrap = Extra small */
@media only screen and (max-width: 575px) 
  {
    #player_column {padding: 0;}
  }
/* Bootstrap = Small */
@media only screen and (min-width: 576px) and (max-width: 767px)
  {
    #player_column {padding: 0;}
  }

/* Bootstrap = Medium */
@media only screen and (min-width: 768px) and (max-width: 991px)
  {
    #player_column {padding: 0;}
  }

/* Bootstrap = Large */
@media only screen and (min-width: 992px) and (max-width: 1199px)
  {
    
  }

/* Bootstrap = Extra Large */
@media only screen and (min-width: 1200px) and (max-width: 1399px)
  {

  }

/* Bootstrap = XXL */
@media only screen and (min-width: 1400px)
  {
    
  }