/*
  We include some minimal custom CSS to make the playlist UI look good
  in this context.
*/

body {
  font-family: Arial, sans-serif;
}

.videojs-player {
	position: relative;
	overflow: auto;
	width: 100%;
	margin: 0 0 20px;
	background: #fbfbfb;
}

.videojs-title {
	position: absolute;
	color: #fff;
	height: 32px;
	left: 27px;
	top: 14px;
	padding-top: 12px;
	font-size: 20px;
	word-wrap: normal;
	white-space: nowrap;
	font-family: 'Noto Sans KR', sans-serif;
	overflow: hidden;
	z-index: 9999;
}

.player-container {
	float: left;
	overflow: hidden; /* auto하면 툴팁 원인 박스 작아짐 */
	width: calc(100% - 115px);
	background: #fbfbfb;
	scrollbar-width: none;
}

.video-js {
	float: left;
	height: auto;
	padding-top: 0.3px;
	/*padding-top: 56.29%;*/
	z-index: 97;
	width: calc(100% - 2px );
}

.vjs-playlist,
.my-custom-class,
#my-custom-element {
	float: left;
	width: 115px;
}

.vjs-playlist.vjs-playlist-horizontal {
	float: none;
	height: 120px;
	width: 600px;
}

/* hover 레이아웃 깨짐 버그 해결.*/
.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
  height: auto;
}

/* 플레이 버턴 사람 얼굴 아래에  */
.vjs-big-play-centered .vjs-big-play-button {top: 60%;}

/* control-bar button의 외곽선 제거와 폰트 크기와 높이 */
.vjs-control-bar  button, .vjs-control-bar div {box-shadow:none;font-size: inherit;color: #fff;}
.video-js .vjs-control-bar {font-size: 10px;}
.video-js .vjs-time-control {font-size: 1.06em;}

/* 여기부터 time 표시 */
.video-js .vjs-time-control {padding-left: 0;}
.video-js .vjs-current-time, .vjs-no-flex .vjs-current-time {display: unset;color: #03A9F4;}
.video-js .vjs-duration {display: unset;}
.video-js .vjs-remaining-time span {color: #FFA726;}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {max-height: 20em;}
.vjs-menu li.vjs-menu-item {color:#fff;font-size: 1.3em;}
.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-color: #00BCD4;}


/* 여기부터 스크롤바 제거 */
.vjs-control-bar {
    /* overflow: scroll; 툴팁 안보여짐 */
    /* IE scroll 숨김 */
    -ms-overflow-style: none;
}

.vjs-control-bar::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

.vjs-control-bar{
	-ms-overflow-style:none /* IE and Edge */
    scrollbar-width:none /* Firefox */
}

.vjs-control-bar::-webkit-scrollbar {
	display:none /* Chrome , Safari , Opera */
}