@import "bigscreen/static-table.scss";

/* head */
html,body{ width: 100%; height: 100%;}
#app {
	width:1920px; height:1080px;
	transform:scale(1, 1);transform-origin:left top;
	left: 0%;top: 0%;position: relative;
	background-attachment: inherit; overflow:hidden;
}


.bs-head--bg{
	position: absolute; left: 0; top:0; width: 100%; height: 100%; z-index: -1;
	img{ width: 100%; height: 100%;}
}
.bs-head__tools{
	position: absolute; right: 35px; top:25px; z-index: 0;
}
.bs-head__more{ 
	position: absolute; top: 32px; margin-left: 12px; padding: 0 3px; cursor: pointer;
	border:rgba(28, 235 ,255,0.4) 1px solid;border-radius:5px;background:rgba(28, 235 ,255,0.15);color:#1cebff;
	&:hover,&:active{ background:rgba(28, 235 ,255,0.6);color:#fff }
}
.bs-btn-back{
	background: url(../img/btn-back-bg.svg) center no-repeat;
	background-size: contain;text-align: center;color: #1CEBFF;padding: 8px 15px;font-size: 16px;
	&:hover{ background-image: url(../img/btn-back-bg--hover.svg);color: #fff}
}
.bs-head__logo{ color: #FFF; font-weight: bold; font-size: 30px; line-height: 65px; width: 600px; display: inline-block;
	img{ vertical-align: middle;}
}
.bs-head__logo-mini{
	position: absolute; left: 0;z-index: 0;height: 40px; left: 20px; top:15px;
	img{ height: 100%; width: 100%;}
}


.bs-head__menu{
	text-align: center;
	
	/* el-menu */
	.el-menu--horizontal{background: none;border-bottom-width: 0;display: inline-block; vertical-align: middle;}
	.el-submenu__icon-arrow{ display: none;}
	
	/* normal */
	.el-menu-item,
	.el-submenu .el-submenu__title{
		color: #1CEBFF; height: 50px; line-height: 50px; margin:18px -13px 0; border-bottom-width: 0;
		padding: 0 45px; font-size: 18px; font-weight: bold; 
		background-position: center; background-repeat: no-repeat;
	}
	
	// focus
	.el-submenu{
		&:focus,&:hover{
			.el-submenu__title{ color: #fff; }
		}
	}
	
	// hover
	.el-menu-item:not(.is-disabled):hover,
	.el-submenu .el-submenu__title:not(.is-disabled):hover{
		color: #fff; background-color: transparent;
	}
	// active
	.el-menu-item.is-active,
	.el-menu-item:not(.is-disabled):focus,
	.el-submenu.is-active .el-submenu__title,
	.el-submenu__title:focus{
		background-color: transparent;color: #fff;border-bottom: 0;
	}
	
}


.bs-head__menu--left,.bs-head__menu--right{ 
	width: 30%; display: inline-block; vertical-align: top;
}
.bs-head__menu--left{
	text-align: right; 
	// normal
	.el-menu-item,
	.el-submenu .el-submenu__title{ background-image: url(../img/bs-nav.svg); }
	/* hover */
	.el-menu-item:not(.is-disabled):hover,
	.el-submenu .el-submenu__title:not(.is-disabled):hover{
		background-image: url(../img/bs-nav--hover.svg); 
	}
	/* active */
	.el-menu-item.is-active,
	.el-menu-item:not(.is-disabled):focus,
	.el-submenu.is-active .el-submenu__title{
		background-image: url(../img/bs-nav--active.svg); 
	}
}
.bs-head__menu--right{
	text-align: left;
	// normal
	.el-menu-item,
	.el-submenu .el-submenu__title{ background-image: url(../img/bs-nav-r.svg); }
	// hover
	.el-menu-item:not(.is-disabled):hover,
	.el-submenu .el-submenu__title:not(.is-disabled):hover{
		background-image: url(../img/bs-nav-r--hover.svg);
	}
	// active
	.el-menu-item.is-active,
	.el-menu-item:not(.is-disabled):focus,
	.el-submenu.is-active .el-submenu__title{
		background-image: url(../img/bs-nav-r--active.svg);
	}
}


/* el-menu--popup */
body>.el-dropdown-menu:before,
body>.el-menu--horizontal:before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	position: absolute;
	background: #000;
	left: 38%;
	margin-top: -1px;
	transform: rotate(45deg);
	z-index: 99999;
	border-left: 3px solid rgba(24, 144, 255,0.9);
	border-top: 3px solid rgba(24, 144, 255,0.9);
}
body>.el-dropdown-menu:before{ margin-top:-19px; left:50%; margin-left: -8px;}
.el-menu--popup-bottom-start{margin-top: 5px;}
.el-menu--popup,.el-dropdown-menu{
	border: rgba(24, 144, 255,0.9) 3px solid !important; background-color:rgba(0,0,0,0.8) !important; border-radius:9px
}
.el-menu--popup .el-menu-item,
.el-menu--popup .el-submenu .el-submenu__title,
.el-dropdown-menu__item{background-color: transparent !important;color: #fff !important;}
.el-menu--popup .el-menu-item:not(.is-disabled):focus,
.el-menu--popup .el-menu-item:not(.is-disabled):hover,
.el-menu--popup  .el-submenu .el-submenu__title:hover,
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover{background-color: #004EA2 !important;}
.el-dropdown-menu{margin-right:-90px !important;width: 200px;}
.el-popper .popper__arrow,
.el-popper .popper__arrow::after{display: none;}
.el-submenu__title i{ color: #fff;}

















.head {height: 80px; position: relative; padding: 0 20px}
.logo{
	line-height: 50px;color: #fff;width: 100%;text-align: center; position: absolute; left: 0;
	h1{font-size: 42px; font-weight: bold; }
}
.date{line-height: 47px;color: #0ad4ff; float: left}
.time{line-height: 47px;color: #0ad4ff; float: right}




	







.chartBox{ width: 100%; height: 100%;}
	
	
	
/* 大屏card/tab 外框 */
.bs_box{ width: 100%; height: 100%; padding: 1px 1px 3px 3px; position: relative;}
.bs_contain{ height: 100%;}
.shine{position:absolute;z-index:0;fill:#00F5FC;}
.shine_tl{width:55px;height:70px;left:0px;top:0; background: url(../img/shine_tl.svg);}
.shine_tr{width:18px;height:22px;right:0;top:0; background: url(../img/shine_tr.svg);}
.shine_bl{width:16px;height:24px;left:0px;bottom:2px; background: url(../img/shine_bl.svg);}
.shine_br{width:64px;height:24px;right:0;bottom:0; background: url(../img/shine_br.svg);}
	
	
/* cotab.dark */
.co-tabs{
	&.dark{
		&.is-always-shadow {box-shadow: inset rgba(255, 255, 255, 0.2) 0 0 60px}
		// .el-tabs{ padding: 0 16px;}
		.el-tabs__header .el-tabs__item{ color: rgba(104,216,254,0.6); font-size: 18px} 
		.el-tabs__header .is-active{ color: rgb(104,216,254);}
	}
	.el-tab-pane{ padding: 10px 0;}
}

/* card.dark */
.el-card{
	&.dark{color: #fff;
		&.is-always-shadow {box-shadow: inset rgba(255, 255, 255, 0.2) 0 0 60px}
		.co-rect:not(.light){color: #68d8fe; font-size: 18px;}
	}
}


/* form */
.dark{
	.el-form-item__label{color: #68d8fe;}
	.el-input__inner{background-color: transparent;border-color:#1890FF; color: #ffffff;}
	.el-input__inner,.el-select:not(.light) .el-input__inner{background-color: transparent;border-color:#1890FF;color: #ffffff;}
}

	
	
	
	
/* animate */
@-webkit-keyframes bounce-down {
	25% { -webkit-transform: translateY(-4px); }
	50%, 100% { -webkit-transform: translateY(0); }
	75% { -webkit-transform: translateY(4px); }
}
@keyframes bounce-down {
	25% { transform: translateY(-4px); }
	50%, 100% { transform: translateY(0); }
	75% { transform: translateY(4px); }
}