/**
*	MKH Player css
*
**/

.audioWrapper{
    width:100%;
    position: relative;
    min-height: 40px;
}
.functionControl,.volumeControl,.main-content .functionControl, .main-content .volumeControl{
    color:#fff;
    text-decoration: none;
    text-indent: -1000px;
    display: block;
    overflow: hidden;
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url(controls.webp);
    background-size: 80px 20px;
}

.playState{
    background-position: 0px 0px;
    display: none;
}
.pauseState{
    background-position: -20px 0px;
    display: none;
}
.loudState{
    background-position: -40px 0px;
    display: none;
}
.muteState{
    background-position: -60px 0px;
}
.volumeWrapper{
    float: right;
    min-height: 7px;
    min-width: 100px;
    background:rgba(0,0,0,.3);
    position: relative;
    margin-top: 1px;
    margin-right: 1px;
}

.currentTime,.durationTime{
    color: #000;
    font-size: 16px;
    min-width: 49px;
    text-align: center;
    position: absolute;
}
.currentTime {
    left: -85px;
    top: 50%;
    margin-top: -11.5px;
    z-index: 10;
    display: none;
}
.durationTime {
    right: -65px;
    top: 50%;
    margin-top: -9.5px;
    z-index: 10;
}
.progressWrapper{
    position: relative;
    min-height: 5px;
    top:19px;
    background:#8e8e8e;
    z-index: 10;
    cursor: pointer;
    width:100%;
}

.progressBar{
    position: absolute;
    min-height: 5px;
    width:0%;
    background:#6296D3;
    cursor: pointer;
    z-index: 11;
}
@media screen and (max-width: 575px){
    .currentTime{
        display: none;
    }
    .player__wrapper{
        padding-left: 0 !important;
    }
}