/* CSS Document */

#video {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-js .vjs-progress-control{
    /*bottom: 4em !important;*/
}

.video-js .vjs-control-bar {
    padding: 10px 0px;
    height: 4.0em !important;
}

.video-js .vjs-control{
    height: 2.0em !important;
    margin-right: 7px;
}

.video-js .vjs-time-control, .video-js .vjs-current-time {
    display: inline-block;
}
.video-js .vjs-time-control {
    padding-right: 3px;
    padding-left: 3px;
    line-height: 20px;
    min-width: inherit;
}
.video-js .vjs-remaining-time {
    display: none;
}
.vjs-progress-control {
    position: absolute !important;
    bottom: 35px;
    left: 0;
    height: 3px !important;
    width: 100% !important;
}
.vjs-progress-holder {
    position: absolute;
    left: 0;
    margin: 0;
    height: 6px !important;
    width: 100%;
}
.vjs-control {
    position: absolute;
}
.video-js .vjs-progress-control .vjs-progress-holder {
    margin: 0 0px !important;
}
.vjs-fullscreen-control, .vjs-fullscreen-control-self {
    position: absolute !important;
    bottom: 1em;
    right: 0;
}
.vjs-fullscreen-control-self {
    cursor: pointer;
    flex: none;
    width: 40px;
    height: 20px;
    text-align: center;
}
.vjs-fullscreen-control-self i{
    display: inline-block;
    width: 12px;
    height:20px;
    background: url("/ananas/modules/video/fullBtn.png") no-repeat left center;
    background-size: 100%;
    text-align: center;
    margin-top: 0;
}
.vjs-fullscreen-control-self i.closeFull{
    width: 20px;
    background: url("/ananas/modules/video/closeFull.png") no-repeat left center;
    background-size: 100%;
}
.vjs-volume-panel {
    position: absolute !important;
    bottom: 1em;
    right: 30px;
}
.vjs-resolution-button {
    position: absolute !important;
    /*bottom: 0;*/
    right: 120px;
}
.vjs-playline-button {
    right: 70px;
}
.vjs-playback-rate .vjs-menu {
    z-index: 10 !important;
}
.vjs-texttrack-settings {

}
.vjs-control-bar :focus {
    outline: none
}
.ans-timelineobjectsbg, .ans-timelineobjects {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 101;
    text-align: center;
    font-size: 14px;
}

.ans-timelineobjectsbg, .ans-customIframe {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 101;
    text-align: center;
    font-size: 14px;
}

.ans-timelineobjectsbg, .ans-customIframeV2 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 101;
    text-align: center;
    font-size: 14px;
}


.ans-timelineobjectsbg {
    background: rgba(0, 0, 0, .7);
    z-index: 1;
}

.ans-timelineobjects-autosize {
    width: auto !important;
    height: auto !important;
}

.ans-videoquiz {
    text-align: left;
    padding: 20px;
}
.ans-videoquiz-opts {
    padding: 0;
    margin-top: 20px !important;
}
.ans-videoquiz-opt,.ans-vjserrdisplay-opt {
    list-style: none;
    margin-top: 20px;

}
.ans-videoquiz-opt input, .ans-vjserrdisplay-opt input{
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 10px;
}

.ans-videoppt{
    float: left;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.ans-videoppt-fullscreen{
    width: 100% !important;
}

.vjs-text-track-display{
    z-index: 9;
}

.vjs-error .vjs-modal-dialog-content{
    position:static;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    display: none;
}

.ans-vjserrdisplay{
    padding: 40px 50px;
    font-size: 14px;
}

.ans-vjserrdisplay-opts{
    margin-top: 20px !important;
}

.vjs-error .vjs-error-display:before{
    content: '' !important;
}
.ans-vjserrdisplay-title{
    font-size: 20px;
}
/*for 360*/
/*
.is360 .vjs-control-bar {
  visibility:visible !important;
}
.is360 .video-js .vjs-control-bar{
	background-color: #2B333F !important;
	opacity: 1 !important;
}*/

.vjs-text-track-display{
    bottom: 3em !important;
}
.fullScreenContainer.full .vjs-text-track-display{
    bottom: 8em !important;
}

.vjs-menu-button-popup .vjs-menu{
    bottom: -1.2em !important;
}
.ans-videoquiz-title{
    white-space: pre-wrap;
}
.comment_icon{display:none;width:58px;height:58px;position:absolute;right:20px;top:20px;cursor:pointer}
.comment_icon img {display:block;width:100%;height:100%}
.comment_box{position:absolute;right:0;top:0;width:259px;height:469px;text-align:left;background: rgba(16, 26, 41, 0.76);border-radius: 8px 0px 0px 8px;padding:20px;box-sizing:border-box;font-family: SF Pro Display,Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}
.comment_tit{height:20px;line-height:20px;margin-bottom:20px;color: #ACB4BF;font-size: 14px;}
.stow_icon{display:inline-block;width:20px;height:20px;}
.stow_icon img{display:block;width:100%;height:100%}
.comment_con{font-size: 16px;line-height: 22px;color: #FFF;width:100%;height:calc(100% - 90px);overflow: hidden}

.continueLearn{margin-top:10px;display:inline-block;width:92px;height:36px;background:url(/ananas/modules/video/jb_btn_92.png) no-repeat 0 0;display:inline-block;color: #FFFFFF;text-align:center;line-height:36px;font-size:14px;}
.continueLearn:hover{background-position:0 -48px;}
.vjs-screen-shot{position:fixed;right:20px;display: inline-block;width:36px;height: 36px;background: url("/ananas/modules/video/screenshot.png") no-repeat left center;background-size: 100%;margin-top:-18px;}
.vjs-control-bar .vjs-self-setting{display:none;position: absolute;right: 62px;}
.vjs-self-setting .vjs-button{width: 20px;height: 20px;background: url(/ananas/modules/video/video_settingIcon.png) no-repeat;background-size: 100% 100%;display: inline-block;cursor: pointer;}
.vjs-self-setting .vjs-menu{bottom: -17px !important;right: 34px;left: auto;background: rgba(24, 30, 51, 0.8)}
.vjs-self-setting .vjs-menu >ul{
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    position: absolute;
    min-width: 296px;
    border: solid 1px rgba(127, 137, 173, 0.2);
    background: rgba(24, 30, 51, 0.8);
    right: -92px;
    bottom: 30px;
    padding: 18px 20px;
    border-radius: 6px;
}
.vjs-self-setting .vjs-menu >ul li{font-size: 14px;}
.video_line li{float:left;height:28px;line-height: 28px;background:rgba(59, 65, 83, 0.8);margin-right:13px;width: 76px;cursor: pointer;text-align: center;margin-top:10px}
.video_line li:nth-child(3n){margin-right:0}
.video_line li.active{color:#3A8BFF}
.vjs-self-setting .vjs-menu .vjs-menu-content{max-height:350px;overflow: auto;width:auto;z-index:101}
.rightArrow{vertical-align: middle;display:inline-block;width:14px;height:14px;background: url(images/whiteArrow.png) no-repeat;background-size:100%}
.vjs-sub-setting-btn.videoTitle{margin-top:20px;cursor: pointer;display: flex;align-items: center;justify-content: space-between;}
.vjs-sub-title.videoTitle{margin-top:30px}
.vjs_base_setting{width:256px;}
.vjs_advanced_setting{display:none;width:300px;}
.toZimuBx{display: flex;align-items: center;justify-content: space-between;}
.toZimuBx .rightArrow{transform: rotate(180deg);}
.toZimu{cursor: pointer;}
.resetBtn{display:inline-block;width:45px;height: 25px;text-align: center;line-height: 25px;border-radius:100px;background:rgba(59, 65, 83, 0.8);font-size:12px;cursor:pointer}
.fontBordList li{width:65px;margin-right:10px !important}
.fontBordList li:nth-child(4n){margin-right:0}
.video_setting_zimu{width:256px;box-sizing: border-box;}
.video_setting_highBx{width:300px;box-sizing: border-box;}
.marTop24{margin-top:24px}
.marTop12{margin-top:12px}
.itemLineBx{display: flex;align-items: center;justify-content: space-between;}
.rightbox{width:166px}
.vjs_advanced_setting .selectBox{ vertical-align:top; position:relative;cursor:pointer; background:rgba(59, 65, 83, 0.8); width:100%; border:1px solid rgba(255, 255, 255, 0.2); line-height:28px; height:28px;border-radius:4px;font-size:13px}
.vjs_advanced_setting .selectBox:after{content:'';position: absolute;border:solid 5px transparent;border-top:solid 5px #ACB4BF;top:10px;right:6px}
.vjs_advanced_setting .selectBox:hover{border-color:#3A8BFF}
.vjs_advanced_setting .selectBox:hover::after{border-top-color:#3A8BFF}
.dropDown:after{transform: rotate(180deg);top:5px}
.vjs_advanced_setting .selectBox p{  vertical-align:top; padding:0 15px 0 10px;margin-right:10px;}
.vjs_advanced_setting .selectBox ul{ width:100%;position:absolute; z-index:1; top:30px; left:-1px; background-color:#3A4258; display:none;border-radius:6px}
.vjs_advanced_setting .selectBox ul li a{ display:block; line-height:32px; padding:0 20px; color:#fff;}
.vjs_advanced_setting .selectBox ul li a:hover{ background-color:#4B536C;}
.vjs_advanced_setting .selectBox ul li.active a{color:#3A8BFF;background:url(images/xz.png) no-repeat 95% center}
.vjs_advanced_setting .selectBox ul::-webkit-scrollbar { width: 8px;height:8px;}
.vjs_advanced_setting .selectBox ul::-webkit-scrollbar-thumb {border-radius: 20px;background-color: rgba(255, 255, 255, 0.15);}
.dragBx{height:20px;display: flex;align-items: center;justify-content: space-between;}
.dragCon{width:120px;position:relative;height:4px;background:#3A8BFF;border-radius:10px}
.dragFont{font-size:12px}
.dragStart,.dragMiddle,.dragEnd{position: absolute;width:2px;height:2px;background:#fff;border-radius:100%;left:0;top:1px}
.dragMiddle{left:calc(50% - 2px)}
.dragEnd{left:calc(100% - 2px)}
.dragCircle{width:16px;height:16px;background:#fff;border-radius: 100%;position:absolute;top:-6px;cursor: move;user-select:none}

.vjs-self-setting .vjs-menu .vjs-menu-content::-webkit-scrollbar {display: inline-block; width: 8px; height: 8px;}
.vjs-self-setting .vjs-menu .vjs-menu-content::-webkit-scrollbar-thumb {border-radius: 20px;background-color: rgba(255, 255, 255, 0.15);}

.video-js .vjs-play-control{margin-right: -8px;}