@charset "utf-8";

body,html{
	width:100%;
	height: 100%;
	padding:0px;
	margin:0px;
	overflow:hidden;
}

.mainBody{
	width:100%;
	height: 100% !important;
	overflow:hidden;
	background-size: 100% 100%;
	background-repeat:no-repeat;
	position: relative;
}
.backdrop-filter {
	/* background-color: rgba(6, 37, 56, 0.3);
	backdrop-filter: blur(20px) brightness(70%); */
}
.login-bg-scip{
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	background:url(../images/login-bg-scip.png) center center / 100% 100% no-repeat;
	z-index: -1;
}
.video-bg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	object-fit: fill;
	background:url(../images/bg-scip.png) center center / 100% 100% no-repeat;
}
.form-itme{
	width: 400px;
	height: 48px;
	background: #446e95 0% 0% no-repeat padding-box;
	/* box-shadow: inset 0px 0px 8px #0099F84D; */
	border-bottom: 1px solid #80CBFF;
	border-radius: 4px;
	margin-bottom: 16px;
}
.form-itme input{
	color: #fff;
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;
	padding: 12px 16px;
}
.form-itme + .form-itme{
	margin-top: 24px;
}
.linebox2{
	width: 240px;
	position: relative;
}
.btnbox{
	display: flex;
	justify-content: center;
}
.verificationCodes{
	position: absolute;
	top: 0;
	right: -160px;
	/*transform: translateX(-100%);*/
	display: inline-block;
	width: 144px;
	height: 48px;
}
.foot{
	font-size: 16px;
	color: rgba(255, 255, 255, 0.3);
	text-align: center;
	width: 100%;
	height: 40px;
	line-height: 40px;
	position: absolute;
	bottom: 0;
	left: 0;
}
.homeBorder{
	position:absolute;
	width:10px;
}

.leftTop{
	top:10px;
	left:0px;
	width:24px;
	height:313px;
	background:url(../images/leftTop.png) top center no-repeat;
}
.rightTop{
	top:10px;
	right:0px;
	width:41px;
	height:313px;
	background:url(../images/rightTop.png) top center no-repeat;
}
.leftBottom{
	bottom:10px;
	left:0px;
	width:24px;
	height:342px;
	background:url(../images/leftBottom.png) top center no-repeat;
}
.rightBottom{
	bottom:10px;
	right:0px;
	width:41px;
	height:345px;
	background:url(../images/rightBottom.png) top center no-repeat;
}
.topLeft{
	top:0px;
	width:500px;
	height:10px;
	background:url(../images/topLeft.png) top center no-repeat;
}
.topRight{
	top:0px;
	right:0px;
	width:187px;
	height:10px;
	background:url(../images/topRight.png) top center no-repeat;
}
.bottomLeft{
	bottom:0px;
	left:0px;
	width:430px;
	height:10px;
	background:url(../images/bottomLeft.png) top center no-repeat;
}
.bottomRight{
	bottom:0px;
	right:0px;
	width:350px;
	height:10px;
	background:url(../images/bottomRight.png) top center no-repeat;
}
.leftMiddle{
	left:0px;
	width:24px;
	background:url(../images/leftMiddle.png);
}
.rightMiddle{
	right:0px;
	width:41px;
	background:url(../images/rightMiddle.png);
}
.bottomMiddle{
	bottom:0px;
	height:10px;
	background:url(../images/bottomMiddle.png);
}
.topMiddle{
	top:0px;
	height:10px;
	background:url(../images/topMiddle.png);
}
.rowgrid{
	width:100%;
}
.logo{
	/* width:100%;
	float:left; */
	margin:0;
}
.userInfo{
	line-height:70px;
	float:right;
}
.userInfo #loginUser{
	float:left;
	font-family: PingFangSC-Regular;
	font-size: 14px;
	height:19px;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 14px;
	margin-top:25px;
}

.userInfo #logoutLink{
	width:56px;
	height:24px;
	background: #FFFFFF;
	border-radius: 2px;
	background-color:rgba(255,255,255,0.16);
	float:right;
	cursor: pointer;
	margin:21px 20px 0px 10px;
}
.userInfo #logoutLink div{
	font-family: PingFangSC-Regular;
	font-size: 12px;
	color: #FFFFFF;
	width:48px;
	height:12px;
	letter-spacing: 0;
	line-height: 12px;
	margin:4px 0px 4px 4px;
}
.userInfo #logoutLink div a{
	color: #FFFFFF;
}
.appCode{
	margin-right:25px;
	float:right;
}
.maincontentWrap .maincontent{
	position: absolute;
	top: 0;
	right: 0;
	width: 500px;
	height: 100%;
	background:rgba(0,0,0,0.16);
}
.envtitle{
	margin-left:10px;
}
#aqms,#wms{
	float:left;
}
#daiban{
	float:right;
}
#aqmscontent{
	background:url(../images/aqms.png);
	width:407px;
	height:186px;
	display: flex;
	flex-direction: row;
}
#wmscontent{
	background:url(../images/wms.png);
	float:left;
	width:463px;
	height:186px;
	display: flex;
	flex-direction: row;

}
#daibancontent{
	background:url(../images/daiban.png);
	float:left;
	width:333px;
	height:186px;
}
#navigation{
	display:block;
	width:100%;
}
#category{
	float:left;
	margin-left:80px;
	width:224px;
}
#category div{
	text-align:center;
	width:224px;
	height:50px;
	cursor:hand;
	cursor:pointer;
}
.category_split{
	text-align:center;
	height:10px!important;
	line-height:10px!important;
}
#system{
	float:right;
	width:774px;
	height:307px;
	margin-right:80px;
	background:url(../images/systemframe.png) no-repeat;
}
.tc_front,.tc_back{
	margin-left:8px;
	margin-top:-10px;
	width:168px;
	height:280px;
}

.tc_disabled{
	opacity:0.4;
}
.aqms_left{
	width: 170px;
	height: 172px;
	padding-top: 8px;
	padding-left: 8px;
}
.datetime{
	padding-top: 8px;
	padding-left: 8px;
	font-size: 12px;
	color: #FFFFFF;
	opacity: 0.5;
}
#aqidata{
	font-size: 42px;
	font-family: Roboto-Thin;
	width: 82px;

}
.aqi_center{
	display: flex;
	flex-direction: row;
	margin-top: 10px;
	margin-left: 40px;
	text-align: center;
}
.aqitext{
	display: flex;
	flex-direction:column;
	margin-top: 10px;
	font-size: 12px;
	color: #FFFFFF;
	opacity: 0.3;
}
.aqi_level{
	height: 22px;
	width: 64px;
	font-size: 12px;
	border-radius: 2px;
	text-align: center;
	color: #FFFFFF;
	margin-top: 8px;
	margin-left: 54px;
}
.aqi_factor{
	left: 27px;
	bottom: 21px;
	margin-left: 27px;
	margin-top: 16px;
	display: flex;
	flex-direction: row;
}
.aqi_info{
	font-size: 12px;
	opacity: 0.5;
	line-height: 12px;
	color: #FFFFFF;
}
.factor_info{
	margin-left: 16px;
	font-size: 14px;
	line-height: 14px;
	color: #FFFFFF;
}
.aqms_right{
	height: 170px;
	width: 228px;
	margin-top: 8px;
}
.aqms_echarts{
	margin-left: 34px;
	margin-top: 24px;
	height: 48px;
	width: auto;
	display: flex;
	flex-direction: row;
}
#compareYear{
	height: 48px;
	width: 48px;
}
.echarts_text{
	display: flex;
	flex-direction:column;
	margin-left: 8px;
}
.textinfo_left{
	height: 12px;
	width: 48px;
	font-size: 12px;
	opacity: 0.5;
	color: #FFFFFF;
	box-sizing:border-box;
}
.textinfo_center1{
	font-size: 14px;
	color: #00FF53 ;
	margin-left: 16px;
	width: 27px;
}
.textinfo_center2{
	font-size: 14px;
	color: #00FF53 ;
	margin-left: 28px;
	width: 27px;
}
.textinfo_right{
	font-size: 12px;
	opacity: 0.5;
	color: #FFFFFF;
	margin-left: 4px;

}
.infos{
	opacity: 0.5;
	color: #FFFFFF;
	font-size: 12px;
	margin-left: 30px;
	margin-top: 8px;
}
.mainPollutants{
	margin-left: 34px;
	margin-right: 34px;
	margin-top: 12px;
	font-size: 14px;
	line-height: 14px;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	font-family: Roboto-Regular;
}
.factorone{
	color: #FFFFFF;
	font-size: 14px;
	line-height: 14px;
	font-family: Roboto-Regular;
}
.mainPollutantdata{
	margin-left: 34px;
	margin-right: 34px;
	margin-top: 12px;
	font-size: 16px;
	line-height: 16px;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	font-family: Roboto-Regular;
}
.factordata{
	color: #00FFDA;
	font-size: 16px;
	line-height: 16px;
	font-family: Roboto-Regular;
}
.wms_left{
	padding-top: 8px;
	padding-left: 8px;
}
.wms_png{
	width: 14px;
	height: 12px;
}
.wms_center{
	margin-left: 25px;
	margin-top: 8px;
}
.wms_title{
	font-size: 12px;
	color: #FFFFFF;
}
.wms_level{
	height: 20px;
	width: 48px;
	border-radius: 2px;
	text-align: center;
	line-height: 20px;

}
.levelstyle{
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	line-height: 20px;
}
.wms_b{
	margin-top: 8px;
}
#wms_b{
	margin-top: 8px;
}
.yuandian{
	width: 8px;
	height: 8px;
	border: 1px;
	border-radius: 4px;
}
.wms_font{
	font-size: 12px;
}
.wmscontent_right{
	height: 170px;
	width: 284px;
	margin-top: 8px;
	margin-left: 8px;
	display: flex;
	flex-direction: row;
}
.wmscontent_left{
	height: 170px;
	width: 168px;
}
.wmscharts_left{
	width: 142px;
}
.wmscharts_right{
	width: 142px;
}
.wmscharts_left_title{
	color: #FFFFFF;
	font-size: 12px;
	opacity: 0.8;
	text-align: center;
	margin-top: 16px;
	line-height: 12px;
}
#wmscharts_left_body{
	width: 142px;
	height: 142px;
}
#wmscharts_right_body{
	width: 142px;
	height: 142px;
}
.tabletitle{
	display: flex;
	flex-direction: row;
	height: 28px;
	width: 325px;
	margin-left: 8px;
	font-size: 12px;
	color: #A4EDFF;
	opacity: 0.6;
	line-height: 28px;
	margin-top: 8px;
}
.taskname{
	width: 140px;
	text-align: left;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 28px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left: 24px;
}
.taskdate{
	width: 160px;
	text-align: center;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 28px;
	padding-left: 12px;
}
.titledate{
	width: 160px;
	text-align: center;
	font-size: 12px;
	color: #A4EDFF;
	opacity: 0.6;
	line-height: 28px;

}

.hseperator{
	display: flex;
	flex-direction: row;
}
.tablebody{
	margin-left: 8px;
	margin-top: 0px;
	padding: 0px;
	height: 150px;
}
.default-scrollbar {
  overflow-y: auto;
  overflow-x: hidden;
  height: 140px;
}
.flex-scrollbar {
  width: auto;
  height: auto;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.el-scrollbar__wrap.default-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scrollbar__view.p20-scrollbar__view {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.totalnum{
	opacity: 0.6;
	font-size: 14px;
	line-height: 14px;
	color: #FFFFFF;
	margin-left: 8px;
}
.totalgo{
	cursor: pointer;
	font-size: 14px;
	color: rgb(8,139,140);
}
.totalnumend{
	opacity: 0.6;
	font-size: 14px;
	line-height: 14px;
	color: #FFFFFF;
}
.pollutantstab{
	margin: 0px;
	padding-left: 15px;

	width: 235px;
	padding-right: 10px;
}