/********** Player **********/

audio { display: none; }

#divAudio {
    width: 100%;
    max-width: 1225px;
    margin: auto;
    position: fixed;
    z-index: 1100;
    padding-bottom: 20px;
    border-bottom: 1px gray solid;
    height: 120px;
    top: 92px;
    background: white;
    transition: margin 1s;
    margin-top: -240px;
    display: block !important;
}
body.playerActive #divAudio { margin-top: 0; }

#divAudio .action_icons {
    right: 0;
    float: right;
    line-height: 50px;
    margin-right: 150px;
    margin-left: 0 !important;
}
#divAudio .action_icons a {
    width: 16px;
    height: 16px;
    margin-bottom: initial;
    background-position: center;
    background-size: contain;
}
#divAudio .action_icons a#vol  {

}
#divAudio .action_icons a:last-child {
    margin-right: 0;
}

#trackInfosContent, #albumInfosContent, #playlistInfosContent { width: 15%; min-width: 400px; padding-bottom: 20px;}
#trackInfosContent h2, #albumInfosContent h2, #playlistInfosContent h2 { margin-bottom: 10px; margin-left: 30px; text-decoration: underline; }
#trackInfosContent p, #albumInfosContent p, #playlistInfosContent p { margin-left: 30px; }
#trackInfosContent label, #albumInfosContent label, #playlistInfosContent label { color: #0e71b4; width: 140px; display: inline-block; font-size: 1.1em; margin-bottom: 6px;}
#trackInfosContent label:after, #albumInfosContent label:after, #playlistInfosContent label:after { content: ' :'; }

#divOtherVersions h2 { margin-left: 30px; }
#divOtherVersions table {
    width: 100% !important;
    margin-bottom: 30px;
    margin-top: 30px
}

#divOtherVersions tr th {
    color: #50afef;
    border-bottom: 1px #50afef solid;
    padding-bottom: 5px;
}
#divOtherVersions tr th span { color: #50afef; }
#divOtherVersions tr td { border-bottom: 1px lightgray solid; text-align: center; padding: 5px 0 4px 0; }
#divOtherVersions tr td.jsTitre { border-bottom: 1px lightgray solid; text-align: left; }
#divOtherVersions tr td a { display: inline-block; width: 17px; height: 17px; margin: 0.55em; margin-bottom: 0; margin-top: 0; cursor: pointer; }
#divOtherVersions tr td span { display: inline-block; line-height: 17px; }

#audioContainer {
    padding: 0;
    padding-top: 0;
    float: left;
    margin: 6px;
}

#pieceTitle, #pieceVersions {
    display: inline-block;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 30px;
    margin-top: 14px; 
    margin-left: 1em;
}
#pieceVersions { margin-right: 20%; float: right; margin-top: 21px; cursor: pointer; font-size: 0.8em !important;}

#duration {
    font-size: 0.7em;
    font-weight: bold;
    line-height: 24px;
    float: right;
    margin-right: 30px;
    margin-left: 1em;
}
#duration span { color: #0e71b4; }

#controls { height: 20px; margin: 0 1em; margin-left: 50px; margin-top: 5px; vertical-align: middle; }
#controls:after { clear: both; display: block; content: ""; }

#sliderVolume {
    background: white;
    position: absolute;
    bottom: 30px;
    right: 145px;
    width: 200px;
    text-align: center;
    border: 1px #3e4449 solid;
    padding-bottom: 5px;
    background: white;
    z-index: 1;
}

/* https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */

#audioContainer input[type=range] {
    -webkit-appearance: none;
    background-color: #3e4449;
    width: 175px;
    height:3px;
    z-index: 0;
    outline: 0;

}

#audioContainer input[type="range"]::-moz-range-thumb{
    background-color: #3e4449;
    width: 9px;
    height: 9px;
    border-radius: 4px;
}

#audioContainer input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #3e4449;
    width: 9px;
    height: 9px;
    border-radius: 4px;
}

#controls a {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-position: center;
    margin: 0 0.1em;
    vertical-align: middle; 
}

#wave {
    display: block;
    float: left;
    width: calc(100% - 160px);
    max-width: 1040px;
    height: 75px;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    transition: height 0.5s linear 0.5s;
    /*border-bottom: 1px #666666 solid;*/
    margin-left: 40px;
}

#cover {
    max-height: 120px;
    float: right;
    cursor: pointer;
}

#mask {
    border-right: 2px #0e71b4 solid;
    height: 100%;
    width: 0;
    transition: all linear 0.25s;
    overflow: hidden;
}
#alternate {
    height: 100%;
    background-position: top 98% left 0;
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 1px;
}

#play { 
    background-image: url(/userfiles/_icons/icon_play_bleu.png); background-repeat: no-repeat; 
    border: 2px #0e71b4 solid; 
    border-radius: 50%;
    height: 40px !important;
    width: 40px !important;
    background-position: 10px !important;
    background-size: 26px;
}
#play.playing { 
    background-image: url(/userfiles/_icons/picto_pause.png); 
    background-repeat: no-repeat; 
    background-position: center !important;
}
#previous { background: url(/userfiles/_icons/picto_previous.png) no-repeat; background-size: 16px; }
#next { background: url(/userfiles/_icons/picto_next.png) no-repeat; background-size: 16px; }
#vol { 
    background: url(/userfiles/_icons/picto_volume.png) no-repeat; 
    bottom: 16px;
    right: 145px;
}