/* 사이즈 조절  */
.vjs-default-skin{
    font-size: 1.2rem;

}
.vjs-default-skin *{
    color: white;
}

/* 비디오 컨트롤 바  */
.vjs-default-skin .vjs-control-bar{
    background: linear-gradient(
        rgba(20, 20, 20, 0) 10%,
        rgba(20, 20, 20, 0.1) 25%,
        rgba(20, 20, 20, 0.25) 50%,
        rgba(20, 20, 20, 0.5) 75%,
        rgba(20, 20, 20, 0.75) 100%
    );
    height: 3.5em;
    padding: 0 10px;
}

/* -----컨트롤바 버튼 밑 수정 ------*/





/* 디스플레이 none 처리 */
.vjs-default-skin .vjs-control-bar .vjs-play-control {
    display: none;
}
.vjs-default-skin .vjs-control-bar .vjs-picture-in-picture-control{
    display: none;
}

.vjs-default-skin .vjs-control-bar .vjs-audio-button{
    display: none;
}
.vjs-default-skin .vjs-control-bar .vjs-time-divider {
    display: none;
}
.vjs-default-skin .vjs-control-bar .vjs-menu .vjs-menu-content::-webkit-scrollbar{
    display: none;
}
.vjs-default-skin .vjs-control-bar .vjs-menu .vjs-menu-content .vjs-menu-title{
    display: none;
}
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}

/* 프러세스바 설정 */

.vjs-default-skin .vjs-control-bar .vjs-progress-control{
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    font-size: 0.8em;
    height: 1em;
    top: -1em;
    color: #467dd9;
}
.vjs-default-skin .vjs-control-bar .vjs-progress-control .vjs-progress-holder{
    margin: 0 20px;
    border-radius:3px;

}
.vjs-default-skin .vjs-control-bar .vjs-progress-control .vjs-play-progress:before{
    color: #467dd9;
    opacity: 0;
}

.vjs-default-skin .vjs-control-bar .vjs-progress-control .ative.vjs-play-progress:before{
    top:-3.0px;
    color: #467dd9;
    opacity: 1;
}
.vjs-default-skin  .vjs-control-bar .vjs-progress-control .ative.vjs-play-progress .vjs-progress-holder{
    font-size: 1.6666666667em;
}


/* video.js 컨트롤 바 버튼  */
.video-js .vjs-speed-cus-control{
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    height: 80%;
    display: flex;
    flex-direction: column;
}
.vjs-default-skin .vjs-control-bar .vjs-play-progress{
    background: #467dd9;
    border-radius:3px;
}

.vjs-default-skin .vjs-control-bar .vjs-current-time {
    position: absolute;
    top: -50px;
}
.vjs-default-skin .vjs-control-bar .vjs-duration {
    position: absolute;
    top: -50px;
    right: 0;
}
.vjs-default-skin .vjs-control-bar .vjs-speed{
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.vjs-default-skin .vjs-control-bar .vjs-volume-panel .vjs-volume-vertical{
    background-color: #333333;
}
.vjs-default-skin .vjs-control-bar .vjs-playback-rate  .vjs-playback-rate-value{
    margin-top: 10px;
    font-size: 1.4rem;
}
.video-js .vjs-volume-vertical{
    /*bottom: 9em;*/
    z-index: 100;
}
.vjs-default-skin .vjs-control-bar .vjs-menu-button-popup .vjs-menu{
    /*margin-bottom: 4rem;*/
}
.vjs-default-skin .vjs-control-bar .vjs-menu-button-popup .vjs-menu .vjs-menu-content{
    background-color: #333333;
}
.vjs-default-skin .vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover, .js-focus-visible .vjs-menu li.vjs-selected:hover{
    background: none;
}

/* 사용자 버튼 수정 버튼  */
.vjs-default-skin .vjs-control-bar .share_btn{
    margin-left: auto;
}
/* 사용자 버튼 수정 버튼  */
.vjs-default-skin .vjs-control-bar .rotateRight span svg{
 margin-bottom: 3px;
}
.vjs-default-skin .vjs-control-bar .rotateLeft span svg{
    margin-bottom: 3px;
}

.vjs-default-skin .vjs-control-bar .active span svg g g circle{
    fill: #467dd9 !important;
}


/*!*호버 기능 삭제*!*/
/*.vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu { display: none; }*/

/* 아이콘 수정 */

.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
    content:url("https://br-idge.s3.ap-northeast-2.amazonaws.com/bridge/vidojs_Icon/volume-high.svg");
    margin-top: 5.65px;
}
.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
   content:url("https://br-idge.s3.ap-northeast-2.amazonaws.com/bridge/vidojs_Icon/volume-mute.svg");
   margin-top: 5.65px;
}
.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
    content:url("https://br-idge.s3.ap-northeast-2.amazonaws.com/bridge/vidojs_Icon/volume_lv1.svg");
    margin-top: 5.65px;
}
.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
    content:url("https://br-idge.s3.ap-northeast-2.amazonaws.com/bridge/vidojs_Icon/volume_lv2.svg");
    margin-top: 5.65px;
}
.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
   content:url("https://br-idge.s3.ap-northeast-2.amazonaws.com/bridge/vidojs_Icon/fullscreen.svg");
}

/*.video-js.vjs-playing .vjs-tech {*/
/*    pointer-events: none;*/
/*}*/






/* 커스텀 재생 일시정지 디스플레이  */

.vjs-default-skin .play-pause-highlighter{
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    /* To let the events pass through to the lower divs */
    pointer-events: none;
}
.vjs-default-skin .my-play-pause-highlighter {
    min-height: 30px;
    min-width: 30px;

    /*background-color: rgba(0, 0, 0, 0.5);*/
    background: none;

    /* To make child elements center aligned */
    display: flex;
    justify-content: center;
    align-items: center;

    /* To make the element circular */
    border-radius: 50%;

    /* Note: This time should be less than the fade-out time,
    otherwise the element will be displayed 'none' and trnasition end event won't get fired.*/
    transition: transform 0.7s;
}
.vjs-default-skin .my-play-pause-highlighter.my-zoom-out {
    transform: scale(2.5);
}
.vjs-default-skin .my-play-pause-highlighter p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    font-weight: 100;
    margin-bottom: 0;
    margin-top:0.3rem;
}
.vjs-default-skin .play-pause-highlighter{
    background: rgba(0,0,0,.1);
}



.vjs-default-skin.vjs-none-skin .vjs-control-bar{
    height: 0px;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .rotateLeft{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .rotateRight{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .vjs-volume-panel{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .likeButton{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .bookMarkButton{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .share_btn{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .vjs-playback-rate{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .vjs-fullscreen-control{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .vjs-current-time{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .vjs-duration{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .vjs-quality-selector{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar .setting{
    display: none;
}
.vjs-default-skin.vjs-none-skin .vjs-control-bar {
    display: none;
}

.vjs-default-skin.vjs-none-skin .play-pause-highlighter{
    /* To let the events pass through to the lower divs */
    pointer-events: auto;
}
.vjs-default-skin.vjs-none-skin .my-play-pause-text{
    display: none;
}






/*.player-center {*/
/*    position: absolute;*/
/*    margin: auto;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    max-width: 100%;*/
/*    max-height: 100vh;*/
/*}*/

/* 모바일 버튼 커스텀 */
.play-setting {
    width: 350px;
    padding: 30px 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #1e1e32ee;
    border-radius: 10px;
    text-align: center;
    color: #fff;
    display: none;
    z-index: 100;
}

.play-setting-bg-on {
    content: '';
    display: block;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}
.play-setting-bg-on *{
  color: white;
}

.play-setting-on {
    display: block !important;

}

.play-setting .title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.play-setting .content {
    padding: 0 15px;
    text-align: start;
    margin-bottom: 30px;
    font-size: 1.4rem;
}

.play-setting .content>div {
    margin-bottom: 20px;
}

.play-setting .content select {
    width: 100%;
    height: 50px;
    padding: 0 10px;
    margin-top: 10px;
    border: none;
    border-radius: 4px;
    font-size: 1.4rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.1) no-repeat calc(100% - 10px) center url(https://br-idge.s3.ap-northeast-2.amazonaws.com/bridge/icon-down.png);
    background-size: auto 6px;
    border: none;
    border-radius: 5px;
    position: relative;
    top: -1px;
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.play-setting .content select option {
    background-color: #1e1e32;
}


.play-setting .alert-btn-wrapper {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.play-setting .alert-btn-wrapper .btn {
    width: 40%;
    height: 40px;
    font-size: 1.6rem;
    border-radius: 6px;
    color: #fff;
}

.play-setting .alert-btn-wrapper .btn-cfm {
    background-color: #467DD9;
}

.play-setting .alert-btn-wrapper .btn-cfm:active {
    background-color: #3b6bbe;
}


.play-setting .alert-btn-wrapper .btn-cxl {
    background-color: #666666aa;
    color: #bbb;
    margin-right: 10px;
}

.play-setting .alert-btn-wrapper .btn-cxl:active {
    background-color: #777777aa;
    color: #ccc;
}





@media screen and (max-width:1100px) {
    .vjs-default-skin .vjs-control-bar .like_btn{
        display: none;
    }
    .vjs-default-skin .vjs-control-bar .bookMarkButton{
        display: none;
    }
    .vjs-default-skin .vjs-control-bar .share_btn{
        display: none;
    }
    .vjs-default-skin .vjs-control-bar  .vjs-volume-panel{
        margin-right: auto;
    }


}