.controller li {
    position: relative;
    float: left;
    border: 15px solid #404040;
    color: #404040;
    height: 0;
    width: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    margin: 0 5px;
}

    .controller li a {
        border-style: solid;
        text-indent: -9999px;
        position: absolute;
        top: -8px;
        left: -5px;
    }

.playBtn a {
    border-color: transparent transparent transparent #fff;
    border-width: 8px 0 8px 12px;
    width: 0;
    height: 0;
}

.pauseBtn a {
    border-color: transparent white;
    border-width: 0 3px;
    height: 15px;
    width: 6px;
    left: -6px;
}

.stopBtn a {
    border: 7px solid #fff;
    height: 0;
    width: 0;
    left: -7px;
    top: -7px;
}

.forwardBtn a {
    border-left-width: 8px;
    left: 1px;
}

    .forwardBtn a:first-child {
        margin-left: -7px;
    }

.rewindBtn a {
    border-width: 8px 8px 8px 0;
    border-color: transparent #fff transparent transparent;
    width: 0;
    height: 0;
}

    .rewindBtn a:first-child {
        margin-left: -7px;
    }

.ejectBtn a.arrow {
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #fff transparent;
    top: -26px;
    left: -8px;
}

.ejectBtn a.dash {
    border-width: 0 0 4px;
    border-color: transparent transparent #fff;
    height: 0;
    width: 16px;
    left: -8px;
    top: 4px;
}

.player-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.glplayer {
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
    pointer-events: none !important;
}

.ptsLabel {
    display: none;
}

.bottom-container {
    margin-top: 600px;
}

.controller {
    background-color: black;
    opacity: 0.5;
    /*background-image: linear-gradient(
        to right, red 50px, yellow, blue, green);*/
    /*background-position: 100% 50%;*/
    width: 100%;
    /*min-height: 50px;**/
    position: absolute;
    /*float: bottom;*/
    z-index: 99999;
    left: 0;
    bottom: 0;
    /*height: 30px !important;*/
}

/*.controller:hover {
	background-color: white;
}*/

.operate-container {
    min-height: 20px;
    padding: 0px 3px;
    /*position: relative;
    top: 50%;
    transform: translateY(-50%);*/
}

.playBtn {
    display: none;
}

.pauseBtn {
    display: none;
}

.muteBtn {
    color: white;
}

.progressVoice {
    float: left;
    width: 50%;
    margin-top: 0.2rem;
    /*border: 10px solid rgba(255,255,255,0);*/
    color: #d9d9d9;
    height: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: none;
}

    .progressVoice::-moz-progress-bar {
        background-color: #d9d9d9;
    }

    .progressVoice::-webkit-progress-value {
        background-color: #d9d9d9;
    }

#coverLayer {
    width: 100%;
    height: 100%;
    padding-top: 300px;
    z-index: 10000;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.5);
}

#coverLayerBtn {
    width: 20%;
    height: 200px;
    border-radius: 50px;
}


.ptsLabel {
    font-size: 10px;
    color: white;
    background: rgb(0, 0, 0);
    /*border: 1px solid white;*/
    float: left;
    /*border-radius: 7px;*/
    padding: 1px;
    margin-top: 4px;
    margin-left: 5px;
}

.voice-div {
    color: white;
    /*background: rgb(0, 0, 0);
    border: 2px solid white;
    border-radius: 7px;
    padding-left: 20px;*/
    width: 18%;
    float: left;
    margin-top: 3px;
    margin-left: 10px;
    /*position: relative;*/
    /*margin-top: 50%;*/
    /*transform: translateY(-50%);*/
    display: none;
}

    .voice-div > span {
        /*font-size: 15px;*/
        float: left;
        color: white;
        margin-right: 5px;
    }

    .voice-div > progress {
        margin-top: 8px;
    }

.fullScreenBtn {
    /*font-size: 10px;*/
    float: right;
    margin-top: 3px;
    margin-right: 5px;
    color: white;
    /*background: #ffffff;*/
    /*border: 2px solid white;*/
    /*text-align: center;*/
    /*line-height: 20px;*/
    height: 24px;
    /*font-weight: bold;*/
    /*border-radius: 7px;*/
}

.showLabel {
    height: 18px;
    font-size: 8px;
    color: white;
    background: rgb(0, 0, 0);
    border-bottom: 1px solid #666666;
    /*border-radius: 7px;*/
    padding-top: 1px;
    padding-left: 5px;
    padding-right: 5px;
    float: right;
    margin-top: 5px;
    margin-right: 5px;
}

.progress-common {
    height: 3px; /** same as progress-contaniner **/
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: none;
    margin-bottom: 2px;
}

.progress-contaniner {
    z-index: 1000;
    width: 100%;
    background-color: #666666;
}

.cachePts {
    position: absolute;
    z-index: 1001;
    width: 0px;
    /*margin-top: 0.125rem;*/
    background-color: #d9d9d9;
    display: none;
}
/*.cachePts::-moz-progress-bar {
    background-color: #e9e9e9;
}
.cachePts::-webkit-progress-value {
    background-color: #e9e9e9;
}*/

.progressPts {
    position: absolute;
    z-index: 1002;
    width: 0px;
    /*margin-top: 0.125rem;*/
    background-color: rgba(246, 79, 30, 255);
    display: none;
}

/*.progressPts::-moz-progress-bar {
    background-color: yellow;
}
.progressPts::-webkit-progress-value {
    background-color: yellow;
}*/