/* 
* @Author: anchen
* @Date:   2020-02-09 16:03:09
* @Last Modified by:   anchen
* @Last Modified time: 2020-02-09 19:51:00
*/
.audiojs audio { position: absolute; left: -1px; }         
.audiojs { 
    width: 94%; 
    height: 8px;  
    padding:20px 0;
    font-family: monospace; 
    font-size: 12px;        
}         
.audiojs .play-pause { width: 70px; height: 70px; margin: 0px; float: left; overflow: hidden;
    position: absolute;
    left: 20px;
    top: 10px;
}         
.audiojs p { display: none; width: 25px; height: 40px; margin: 0px; cursor: pointer; }         
.audiojs .play { display: block; }         
.audiojs .scrubber { 
    position: relative;
    z-index: 3; 
    float: left; 
    width: calc(78% - 110px); 
    background: #ccc; 
    height: 8px;   
    margin-left: calc(11% + 110px);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; 
}         
.audiojs .progress {
    position: absolute; 
    top: 0; 
    left: 0px; 
    height: 100%; 
    width: 0px; 
    background: #999;  
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; 
    z-index: 1;           
}         
.audiojs .loaded { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 0px; 
    background: #ccc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;             
}         
.audiojs .time { 
    width:100%;
    height: 48px; 
    line-height: 48px;  
    color: #999; 
    font-size: 0;
    position: absolute;
    left: 0;
    bottom:0;
    z-index: 1;
}         
.audiojs .time em {
    font-style: normal;
    font-size: 14px;
    position:absolute;
    left: 0%;
    bottom:0;
    margin-left: 110px;
}         
.audiojs .time strong { 
    font-weight: normal;
    font-size: 14px;
    position:absolute;
    right: 7%;
    bottom:0;
}         
.audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff;           text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }         
.audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; }                 
.audiojs .play { background: url("$1") -2px -1px no-repeat; }         
.audiojs .loading { background: url("$1") -2px -31px no-repeat; }         
.audiojs .error { background: url("$1") -2px -61px no-repeat; }         
.audiojs .pause { background: url("$1") -2px -91px no-repeat; }  
.audiojs .play {
    width:100%;
    height:100%;
    background: url(play.png) center no-repeat;
    -o-background-size:auto 100%;
   -ms-background-size:auto 100%;
    -moz-background-size:auto 100%;
    -webkit-background-size:auto 100%;
    background-size:auto 100%;
}   
.audiojs .pause {
    width:100%;
    height:100%;
    background: url(pause.png) center no-repeat;
    -o-background-size:auto 100%;
   -ms-background-size:auto 100%;
    -moz-background-size:auto 100%;
    -webkit-background-size:auto 100%;
    background-size:auto 100%;
}              
.playing .play, .playing .loading, .playing .error { display: none; }         
.playing .pause { display: block; }                 
.loading .play, .loading .pause, .loading .error { display: none; }         
.loading .loading { display: block; }                 
.error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; }         
.error .error { display: block; }         
.error .play-pause p { cursor: auto; }         
.error .error-message { display: block; }