.container_player
{
position: fixed;
bottom: 0;
width: 100%;
background-color: #fff;
z-index: 300;
padding:0.3em 1em;
/*display: none;*/
}

#playlist a
{
display: inline-block;
outline: none;
width: 80%;
}

.container_player button
{
display: inline-block;
padding: 0.5em 1.5em;
background-color: black;
border: 0;
color: white;
text-transform: uppercase;
font-size: 0.6em;
cursor: pointer;
text-decoration: none;
/*width: 5%;*/
border-radius: 1em;

}

#waveform
{
margin-left: 3em
}

.container_player button:disabled
{
background-color: #999 !important;
}

.container_player button:hover
{
background-color: #999 !important;
}

#playlist
{
display: none;
max-height: 25vh;
overflow: hidden auto;
padding-top: 0.5em;
}

#playlist li{
margin-bottom: 0.2em !important;
}

#playlist span.m-last, .list-indis span.m-last
{
background-color: #FF6600;
color: #FFF;
text-align: center;
width: 8%;
border-radius: 1em;
height: 1.4em;
line-height: 1.4em;
float: right;
text-transform: uppercase;
}

#playlist span.m-soon, .list-indis span.m-soon
{
background-color: #FFD700;
color: #000 !important;
text-align: center;
width: 8%;
border-radius: 1em;
height: 1.4em;
line-height: 1.4em;
float: right;
text-transform: uppercase;
}

#playlist span.m-out, .list-indis span.m-out
{
background-color: #900;
color: #FFF;
text-align: center;
width: 8%;
border-radius: 1em;
height: 1.4em;
line-height: 1.4em;
float: right;
text-transform: uppercase;
}

#playlist span.m-ok, .list-indis span.m-ok
{
background-color: #060;
color: #FFF;
text-align: center;
width: 8%;
border-radius: 1em;
height: 1.4em;
line-height: 1.4em;
float: right;
text-transform: uppercase;
}
#playlist span.m-px, .list-indis span.m-px
{
background-color: #000;
color: #FFF;
text-align: center;
width: 5%;
border-radius: 1em;
cursor: pointer;
height: 1.4em;
line-height: 1.4em;
float: right;
text-transform: uppercase;
}

#playlist span.m-px:hover
{
background-color: #006491;
color: #FFF;
height: 1.4em;
line-height: 1.4em;
}

#playlist span.m-px-out, .list-indis span.px-out
{
background-color: #999;
color: #333;
cursor: default;
border-radius: 1em;
width: 5%;
text-align: center;
height: 1.4em;
line-height: 1.4em;
float: right;
}

#playlist span.m-prevente, .list-indis span.m-prevente
{
background-color: #00A4B3;
color: #FFF;
text-align: center;
width: 8%;
border-radius: 1em;
height: 1.4em;
line-height: 1.4em;
float: right;
}

#playlist span.m-name, .list-indis span.m-name
{
width: 25%;
height: 1.4em;
line-height: 1.4em;
}

#playlist span.m-format, .list-indis span.m-format
{
width: 20%;
height: 1.4em;
line-height: 1.4em;
}

#playlist span.fa-eye
{
/*width: 2%;*/
cursor: pointer;
height: 1.4em;
line-height: 1.4em;
float: right;
}

#playlist span.fa-eye:hover
{
color:#060;
height: 1.4em;
line-height: 1.4em;
}

#playlist span.m-style, .list-indis span.m-style
{
width: 10%;
height: 1.4em;
line-height: 1.4em;
}

#playlist span.m-title, .list-indis span.m-title
{
width: 10%;
height: 1.4em;
line-height: 1.4em;
}

#playlist span.m-ref, .list-indis span.m-ref
{
width: 10%;
height: 1.4em;
line-height: 1.4em;
}

#playlist span.m-item, .list-indis span.m-item
{
width: 20%;
height: 1.4em;
line-height: 1.4em;
}

#info_current_play_container
{
margin: 0 0.5em;
width: 45%;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}

/* animations */
#info_current_play {
display: inline-block;
white-space: nowrap;  
}

@keyframes defilement-rtl {
  5% {
transform: translate3d(0,0,0); 
  }
  100% {
transform: translate3d(-100%,0,0);  
  }
}

#playlist div
{
padding:0.2em 0 !important;
border-bottom: 1px solid #E8E8E8 !important;
margin:0 !important;
}

#playlist span
{
display: inline-block;
margin: 0 0.5em 0 0;
line-height: 1.4em;
font-size: 1em;
text-align: left;
overflow: hidden;
max-height: 1.4em;
/*vertical-align: middle;*/
}

#playlist img
{
height: 1.4em;
width: 1.4em;
}

#container_waveform #cover_track
{
width: 2.6em;
position: absolute;
cursor: pointer;
}

#player_playlist
{

}

.search_no_list
{
background-color: #FFF;
width:100%;
padding:0.5em;
z-index: 999;
position: absolute;
}

.controls_player
{
margin: 0.5em 0;
}

.active, #playlist a:active, #playlist a:hover{
color:#900;
}

.active .fa-compact-disc
{
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


@media only screen and (max-width: 1030px) {
#backward,#skiforward,#info_current_play_container,.m-ref,.m-format,.m-style,#see_current_play
{display: none !important;}
    
#playlist a {
width: 40% !important;
}

.m-px {
width: 20% !important;
}

.m-ok,.m-out,.m-last {
width: 20% !important;
} 

}