@import "https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css";
.video-content{
	color: #ffffff;
	padding: 23px 16px 16px;
	height: calc(100% - 80px);
}
.video-content .tab-list{
	width:100%;
	display:flex;
	justify-content:center;
	padding:30px 0;
}
.video-content .tab-list .build-tab{
	padding:10px 25px;
	border:1px solid #2196f3;
	margin-left:20px;
	border-radius:25px;
	cursor:pointer;
	font-size:1.8em;
}
.video-content .tab-list .build-tab.active{
	background-color:#2196f3
}
.video-content .tab-list .build-tab:nth-child(1){
	margin-left:0px;
}
.video-content .tab-list .build-tab:hover{
	background-color:#2196f3
}
.video-content .video-box{
	width:100%;
}
.video-box .video-wrapper{
	display:flex;
	flex-direction:column;
	align-items:center;
	
}
.video-box .video-wrapper .video-wrapper-head{
	padding:20px 40px;
	font-size:1.8em;
	position:relative;
}
.video-box .video-wrapper .video-wrapper-head:before{
	content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(to right, rgba(33,150,243,0), #2196f3, rgba(33,150,243,0));
}
.video-box .video-wrapper .video-windows{
	padding:20px;
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position:relative;
	justify-content:center;
}

.video-windows .video-play1{
	width:50%;	
	padding:10px;
}
.video-windows .video-play1 .video-play1-container{
	background-color:#0E1E51;
}
.video-windows .video-play1 .tab{
	height: 40px;
    line-height: 40px;
    padding-left: 68px;
	color:#fff;
}
.video-windows .video-play1 .tab .tab-title{
	font-size:1.2em;
	color:#69F8FE;
}
.video-windows .video-play1 .tab .clqk{
	font-size:1.2em;
	margin:0 30px;
	font-weight:bold;
}
.video-windows .video-play1 .tab .dutyman{
	font-size:1.2em;
	font-weight:bold;
	
}
.video-windows .video-play1 .tab .tab-time{
	font-size:1em;
	margin-left:10px
}
.video-windows .video-play1 .video{
	border:1px solid #53BAFD;
	padding:10px;
	position:relative;
}
.video-windows .video-play1 .video video{
	width:100%;
}
.wide-border-line1 {
    position: absolute;
    left: -1px;
    top: -24px;
    background-color: #0E1E51;
}
.wide-border-line2 {
    position: absolute;
    right: -1px;
    top: -24px;
    background-color: #0E1E51;
}
.select {
    position: relative;
    display: block;
    margin: 0 30px;
    width: 100%;
    max-width: 325px;
    color: #cccccc;
    vertical-align: middle;
    text-align: left;
    user-select: none;
    -webkit-touch-callout: none;
}
.select .placeholder {
    position: relative;
    display: block;
    background-color: #393d41;
    z-index: 1;
    padding: 1em;
    border-radius: 2px;
    cursor: pointer;
}
.select .placeholder:hover {
    background: #34383c;
}
.select .placeholder:after {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FontAwesome';
    content: '\f078';
    z-index: 10;
}
.select.is-open .placeholder:after {
    content: '\f077';
}
.select.is-open ul {
    display: block;
}
.select.select--white .placeholder {
    background: #fff;
    color: #999;
}
.select.select--white .placeholder:hover {
    background: #fafafa;
}
.select ul {
    display: none;
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    z-index: 100;
}
.select ul li {
    display: block;
    text-align: left;
    padding: 0.8em 1em 0.8em 1em;
    color: #999;
    cursor: pointer;
}
.select ul li:hover {
    background: #4ebbf0;
    color: #fff;
}
.playerbox{
	width:885px;
	height:498px;
	
}
.playerbox canvas{
	width:100%;
	height:100%;
}

#deviceList{
	max-height:500px;
	overflow-y:scroll;
}
#deviceList::-webkit-scrollbar {
 width: 8px;
}
 #deviceList::-webkit-scrollbar-track {
 background-color:transparent;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 #deviceList::-webkit-scrollbar-thumb {
 background-color:#ccc;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}