ifm/WebRoot/views/htclient/css/wscl.css

.right-grid{
	grid-template-columns: 472px auto 472px;
    grid-template-rows: 1fr;
}
.right-grid-left{
	grid-template-columns: 1fr;
    grid-template-rows: repeat(4,1fr);
	
}
.right-grid-center{
	grid-template-columns: 1fr;
    grid-template-rows: 766px auto;
	
}
.right-grid-right{
	grid-template-columns: 1fr;
    grid-template-rows: repeat(4,1fr);
}
#chart-gzfbqk,#chart-bjfx,#chart-sbgzphb,#chart-pcsssjc{
	width:100%;
	height:100%;
}
.flex-column-table{
	flex-direction:column;
}
.table-wspf{
	width:90%;
	height:50%;
}
.table-wspf>.table-wspf-head{
	font-size:12px;
	height:18px;
	line-height:18px;
	color:#ccf5f9;
}
.scroll-table-wspf{
	width:100%;
	height:calc(100% - 18px);
	overflow:hidden;
}
.table-wspf table{
	font-size:12px;
	width:100%;
}
.table-wspf table tr{
		
}
.table-wspf table tr th{
	font-weight:bolder;
}
.table-wspf table tr td,.table-wspf table tr th{
	height:16px;
	vertical-align:middle;
	text-align:center;
	border:1px solid #6584d7;
	color:#ccf5f9;
}
#map-content{
	width:100%;
	height:100%;
}
.wrapper>.content-container{
	border: 0.5px solid #6076ae;
    border-top: 2px solid #6076ae;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: rgba(113,138,149,0.1);
}
.pding-2{
	padding:2px;
}
.justify-around{
	justify-content:space-around !important;
}
.data-statis{
	border: 0.5px solid #6076ae;
	border-top: 2px solid #6076ae;
	height: 80%;
	width:20%;
	position: relative;
}
.data-statis>.data-circle{
	width:140px;
	height:140px;
	border-radius:50%;
	border: 1px solid #6584d7;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-70px;
	margin-left:-70px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}
.data-statis>.data-circle>.data-circle-num{
	font-size:20px;
	color:#c83428;
}
.data-statis>.data-circle>.data-circle-line{
	width:70%;
	height:2px;
	background-color:#3996dc;
	margin:10px 0;
}
.data-statis>.data-circle>.data-circle-item{
	font-size:12px;
	color:#ccf5f9;
}
.data-statis>.data-circle>.data-circle-name{
	font-size:12px;
	color:#c83428;
	height:30px;
	line-height:30px;
}
.data-statis>.data-circle>.data-circle-value{
	font-size:12px;
	color:#6584d7;
	width:60%;
	text-align:center;
}
.tab>.widther-tab{
	width:197px;
}
.justify-between{
	justify-content:space-between !important;
}
.mcjc-top-datetime{
	display:flex;
	align-items:center;
	justify-content:center;
	height:2em;
	font-size:0.8em;
	color:#ccf5f9;
}
.mcjc-top-datalist{
	display:flex;
	align-items:center;
	justify-content:center;
}
.mcjc-top-datalist>.mcjc-top-item,.mcjc-top>.mcjc-top-datalist>.mcjc-top-status,.mcjc-top>.mcjc-top-datalist>.mcjc-top-style{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
.mcjc-top-datalist>.mcjc-top-status{
	margin: 0 20px;
}
.mcjc-top-item>.mcjc-top-itemname{
	font-size:1em;
	color:#ccf5f9;
	line-height:1.8em;
}
.mcjc-top-status>.mcjc-top-statusvalue{
	font-size:1em;
	line-height:1.8em;
	color:#17b45e;
}
.mcjc-top-status>.mcjc-top-statusvalue.leave{
	color:#dbb244;
}
.mcjc-top-style>.mcjc-top-stylevalue{
	font-size:1em;
	line-height:1.8em;
	color:#17b45e;
}
.mcjc-top-style>.mcjc-top-stylevalue.stop{
	color:#c83428;
}
.mcjc-top-style>.mcjc-top-stylevalue.waiting{
	color:#dbb244;
}
.mcjc-top-count{
	display:flex;
	align-items:center;
	justify-content:space-around;
	width:80%;
}
.mcjc-top-count>.mcjc-top-count-part{
	width:25%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	color:#ccf5f9;
}
.mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-value{
	color:#3996dc;
	font-size:1.2em;
}
.mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-line{
	width:100%;
	height:1px;
	background-color:#449ba4;
	margin:6px 0;
}
.mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-name{
	font-size:0.8em;
	margin-bottom:6px;
}
#video-box{
	width:100%;
	height:100%;
	overflow:hidden;
}
#system-runing-msg{
	border: 1px solid #3e68c0;
	position:absolute;
    height: 95%;
    width: 95%;
	overflow:hidden;
}
.system-count-msglist-item{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	font-size:0.6em;
	height:1.6em;
	color:#ccf5f9;
	border-bottom:1px solid #3e68c0;
	
}
.system-count-msglist-item>.type{
	width:17%;
}
.system-count-msglist-item>.warning-type{
	color:#c83428;
}
.system-count-msglist-item>.recover-type{
	color:#6584d7;
}
.system-count-msglist-item>.cure-type{
	color:#17b45e;
}
.system-count-msglist-item>.repair-type{
	color:#dbb244;
}
.system-count-msglist-item>.system-count-msglist-content{
	width:83%;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.clickable-tab{
	cursor:pointer;
}
.open-box-container{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.3);
	display:none;
	overflow:hidden;
	z-index:99;
}
.open-lauer-box{
	position:fixed;
	top:50%;
	width:1000px;
	height:700px;
	background-color:#021429;
	border-radius:10px;
	left:50%;
	margin-left:-500px;
	margin-top:-350px;
	box-shadow: 0px -10px 5px 0px rgba(255,255,255,0.1), -10px 0px 5px 0px rgba(255,255,255,0.1), 10px 0px 10px 0px rgba(255,255,255,0.1), 0px 10px 10px 0px rgba(255,255,255,0.1);
}
.open-box-head{
	height:50px;
	line-height:50px;
	width:100%;
	text-align:center;
	position:relative;
	color:#ccf5f9;
	font-size:1.4em;
	letter-spacing:0.1em;
}
.open-box-head:after{
	content: '';
    position: absolute;
    bottom: 0px;
    left: 5%;
    height: 2px;
    width: 90%;
    background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
}
.open-box-body{
	height:calc(100% - 50px);
	width:100%;
	display:flex;
	flex-wrap:wrap;
	padding:10px;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.open-box-body video{
	width:100%;
	height:100%;
}
.wsclxt-img{
	width:100%;
	height:100%;
}
.open-box-chart-area{
	width:50%;
	height:50%;	
}
.open-box-msg-area{
	width:50%;
	height:100%;	
}
.left-line{
	position:relative;
}
.left-line:before{
	content:'';
	position:absolute;
	height:100%;
	top:0;
	right:-1px;
	width:2px;
	background: linear-gradient(to top, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
}
.open-box-msg-area>.msg-area-header{
	width:100%;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:1.2em;
	color:#ccf5f9;
	letter-spacing:0.1em;
}
.open-box-msg-area>.msg-area-count{
	height:100px;
	width:100%;
	display:flex;
	justify-content:space-around;
	align-items:center;
}
.open-box-msg-area>.msg-area-list{
	height: calc(100% - 140px);
    width: 100%;
	padding:10px;
}
.open-box-msg-area .msg-area-content{
    border: 1px solid #3e68c0;
    width: 100%;
	height:100%;
    overflow: hidden;
	margin:0 auto
}
.open-box-msg-area>.msg-area-count>.left-count{
	display:flex;
	justify-content:center;
	align-items:center;
}
.open-box-msg-area>.msg-area-count>.left-count>img{
	width:35px;
	margin-right:10px;
}
.open-box-msg-area>.msg-area-count>.left-count>.left-count-item{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	color:#ccf5f9;
}
.open-box-msg-area>.msg-area-count>.left-count>.left-count-item>.left-count-name{
	margin-bottom:10px;
	font-size:1em;
}
.wsclxt-box{
	width:2000px; 
	height:1080px;
	margin-left:-400px;
	margin-top:0;
	top:0;
}
.wsclxt-back{
	background:url(../images/1992.gif) center center no-repeat;
	background-size:100%;
	position:relative;
}

.wscl-status{
	position:absolute;
	font-size:12px;
	color:#fff;
	-webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.75);
	transform: scale(0.75);
	width:49px;
	text-align:center;
}
.wscl-status{
	font-size:9px;
}
.line-style{
	position:absolute;
}
.line-runingtoright{
	  animation: toright 0.5s infinite linear;
}
.line-runingtotop{
	  animation: totop 0.5s infinite linear;
}
.line-runingtobottom{
	  animation: tobottom 0.5s infinite linear;
}
.line-runingtorightandbottom{
	  animation: torightandbottom 0.5s infinite linear;
}
.line-runingtorightandtop{
	  animation: torightandtop 0.5s infinite linear;
}
@keyframes toright {
  from {
  }
  to {
    background-position: 5px 0;
  }
}
@keyframes totop {
  from {
  }
  to {
    background-position: 0 -5px;
  }
}
@keyframes tobottom {
  from {
  }
  to {
    background-position: 100% 5px;
  }
}
@keyframes torightandbottom {
  from {
  }
  to {
    background-position: 100% 6px, 6px 0;
  }
}
@keyframes torightandtop {
  from {
  }
  to {
    background-position:  6px 100%,100% -6px;
  }
}
.ylbtojcj{
	width:30px;
	height:1px;
    top: 228px;
    left: 93px;
    -webkit-transform-origin-x: 0;
	background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 5px 1px;
    background-position: 0 0;
    
}
.jcjtozddj{
	width: 22px;
    height: 1px;
    top: 228px;
    left: 158px;
    -webkit-transform-origin-x: 0;
	background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 5px 1px;
    background-position: 0 0;
}
.zddjtoylc{
    width: 1px;
    height: 82px;
    top: 269px;
    left: 201px;
    -webkit-transform-origin-x: 0;
	background:  linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y;
	background-size: 1px 5px;
    background-position: 100% 0;
	
}
.ylctoslb{
    width: 12px;
    height: 1px;
    top: 397px;
    left: 242px;
    -webkit-transform-origin-x: 0;
	background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 5px 1px;
    background-position: 0 0;
}
.slbtolyc{
    width: 1px;
    height: 112px;
    top: 270px;
    left: 270px;
    -webkit-transform-origin-x: 0;
	background:  linear-gradient(0deg, transparent 3px, #0f0ae8 3px) repeat-y;
	background-size: 1px 6px;
    background-position:  0 0;
	
}
.lyctolyb{
    width: 20px;
    height: 1px;
    top: 202px;
    left: 307px;
    -webkit-transform-origin-x: 0;
	background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 5px 1px;
    background-position: 0 0;
}
.lybtozds{
    width: 20px;
    height: 1px;
    top: 202px;
    left: 365px;
    -webkit-transform-origin-x: 0;
	background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 5px 1px;
    background-position: 0 0;
}
.zdstowsc{
	width: 1px;
    height: 71px;
    top: 242px;
    left: 406px;
    -webkit-transform-origin-x: 0;
	background:  linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y;
	background-size: 1px 5px;
    background-position: 100% 0;
	
}
.wsctowsb{
    width: 20px;
    height: 1px;
    top: 370px;
    left: 453px;
    -webkit-transform-origin-x: 0;
	background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 5px 1px;
    background-position: 0 0;
}
.wsbtoglsx{
    width: 20px;
    height: 1px;
    top: 367px;
    left: 510px;
    -webkit-transform-origin-x: 0;
	background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 5px 1px;
    background-position: 0 0;
}
.glsxtoufzyb1{
	width: 41px;
    height: 1px;
    top: 382px;
    left: 615px;
    -webkit-transform-origin-x: 0;
	background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 5px 1px;
    background-position: 0 0;
}
.ufzyb1togjsf1{
	width: 19px;
    height: 1px;
    top: 383px;
    left: 690px;
    -webkit-transform-origin-x: 0;
	background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 5px 1px;
    background-position: 0 0;
}
.jsf1tocxf1{
    width: 13px;
    height: 1px;
    top: 383px;
    left: 733px;
    -webkit-transform-origin-x: 0;
	background:linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 5px 1px;
    background-position: 0 0;
}
.jsf1totop{
	width: 1px;
    height: 91px;
    top: 292px;
    left: 740px;
    -webkit-transform-origin-x: 0;
	background:  linear-gradient(0deg, transparent 3px, #0f0ae8 3px) repeat-y;
	background-size: 1px 6px;
    background-position:  0 0;
	
}
.jsf1toxpf{
	width: 62px;
    height: 8px;
    top: 280px;
    left: 740px;
    -webkit-transform-origin-x: 0;
	background:  linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x;
	background-size: 1px 6px, 6px 1px;
    background-position:  100% 0, 0 0;
	
}
.csf1tofxf1{
    width: 77px;
    height: 81px;
    top: 304px;
    left: 771px;
    -webkit-transform-origin-x: 0;
	background:  linear-gradient(90deg, transparent 50%, #0f0ae8 0) repeat-x,linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y;
	background-size: 6px 1px,1px 6px;
    background-position:  0 100%, 100% 0;
	
}

.yuanlioabang{
	top: 255px;
    left: 64px;
}
.jichuji{
	top: 255px;
    left: 124px;
}
.zhengdongdianji{
	top: 255px;
    left: 182px;
}
.lvyechi{
	top: 251px;
    left: 251px;
}
.lvyebang{
	top: 229px;
    left: 330px;
}
.zhengdangshai{
    top: 229px;
    left: 386px;
}
.yuanliaochi{
    top: 458px;
    left: 182px;
}
.shangliaobang{
    top: 429px;
    left: 254px;
}
.wushuichi{
    top: 424px;
    left: 393px;
}
.wushuibang{
    top: 398px;
    left: 477px;
}
.guolvshuixiang{
    top: 410px;
    left: 557px;
}
.xunhuanfa{
    top: 253px;
    left: 619px;
}
.shangpaifa{
    top: 253px;
    left: 657px;
}
.ufzengyabang1{
    top: 412px;
    left: 659px;
}
.jinshuifa{
    top: 401px;
    left: 705px;
}
.chongxifa{
    top: 401px;
    left: 742px;
}
.xiapaifa{
    top: 310px;
    left: 810px;
}
.fanxifa{
    top: 292px;
    left: 856px;
}
.chanpaifa{
    top: 208px;
    left: 888px;
}
.chanshuifa{
	top: 171px;
    left: 897px;
}
.xunhuanfa2{
	top: 676px;
    left: 712px;
}
.shangpaifa2{
    top: 677px;
    left: 757px;
}
.ufzengyabang2{
    top: 857px;
    left: 693px;
}
.jinshuifa2{
    top: 857px;
    left: 756px;
}
.chongxifa2{
    top: 857px;
    left: 812px;
}
.xiapaifa2{
    top: 749px;
    left: 869px;
}
.fanxifa2{
	top: 731px;
    left: 915px;
}
.chanpaifa2{
    top: 636px;
    left: 970px;
}
.chanshuifa2{
    top: 608px;
    left: 980px;
}
.mochognxibang{
    top: 516px;
    left: 964px;
}
.zhongjianshuixiang1{
    top: 531px;
    left: 1041px;
}
.nfzengyafa{
    top: 529px;
    left: 1116px;
}
.yijunji{
    top: 529px;
    left: 1163px;
}
.zugouji{
    top: 378px;
    left: 1172px;
}
.phji{
    top: 378px;
    left: 1202px;
}
.yijunji2{
    top: 378px;
    left: 1239px;
}
.baoanlvxing{
    top: 536px;
    left: 1253px;
}
.nfgaoyafa{
    top: 526px;
    left: 1309px;
}
.nfchongxifa{
    top: 601px;
    left: 1310px;
}
.mochognxibang2{
    top: 680px;
    left: 1361px;
}
.chongxishuixiang{
    top: 709px;
    left: 1490px;
}
.chongxipaifangfa{
    top: 571px;
    left: 1443px;
}
.shibeinongsuochi{
    top: 573px;
    left: 1542px;
}	
.zhongjianshuixiang2{
    top: 366px;
    left: 1486px;
}
.rozengyabang{
    top: 378px;
    left: 1574px;
}
.zugouji2{
    top: 289px;
    left: 1638px;
}
.baoanlvxing2{
    top: 390px;
    left: 1666px;
}
.rogaoyabang{
    top: 380px;
    left: 1709px;
}
.rochongxifa{
    top: 449px;
    left: 1722px;
}
.chongxipaifangfa2{
    top: 440px;
    left: 1843px;
}
.yanshuicao{
    top: 427px;
    left: 1924px;
}
.guyefenlidanyuan{
    left: 171px;
    bottom: 288px;
    text-align:left;
}
.uf1xitong{
    left: 171px;
    bottom: 261px;
    text-align:left;
}
.ufxitong{
    left: 171px;
    bottom: 235px;
    text-align:left;
}
.uf2xitong{
    left: 171px;
    bottom: 209px;
    text-align:left;
}
.roxitong{
    left: 171px;
    bottom: 182px;
    text-align:left;
}
.wscl-3dcontent{
	width:100%;
	height:100%;
	position:relative;
}
.wscl-datadetail{
	position:absolute;
	left:20px;
	top:20px;
	display:flex;
	align-items:center;
	justify-content:start
}
#WebGL-output{
	width:100%;
	height:500px;
}
#chart-ws-data{
	width:100%;
	height:calc(100% - 500px);
	display:flex;
	justify-content:space-around
}
#chart-center1,#chart-center2,#chart-center3{
	width:33.33%;
	height:100%;
}
.t_num{
	display:flex;
	align-items:center;
				
}
.t_num i {
	width: 16.5px;
	height: 23.5px;
	display: inline-block;
	background: url(../images/number1.png) no-repeat;
	background-position: 0 0;
	background-size:100%;
}
.day_handle_count{
				
	color:#ccf5f9;
	font-size:24px;
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"
}
.all_handle_count{
	color:#ccf5f9;
	font-size:24px;
	margin-left:20px;
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"
}
.num_dot{
	color:#fff;
	margin:0 7px;
	font-size:33px;
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"
}
.label{
	 width:80px;
	 height:30px;
	 text-align:center;
	 line-height:30px;
	 background:linear-gradient(to bottom, #3c92f5, #194d95);
	 border-radius:5px;
}
.right-wsclset{
 position:absolute;
    right: 6px;
    bottom: 255px;
 background:linear-gradient(to bottom, #3c92f5, #194d95);
 border-radius:5px;
 z-index:9
}
.wsclset-item{
 display: flex;
    justify-content: space-around;
    align-items: center;
    height: 38px;
    font-size: 16px;
    color: #fff;
    width: 180px;
 cursor:pointer;
  -webkit-user-select:none;

     -moz-user-select:none;

     -ms-user-select:none;

     user-select:none;
}
.set-itembottom{
 position:relative;
}
.set-itembottom:after{
 content:'';
 width:90%;
 position:absolute;
 left:5%;
 bottom:0;
 height:1px;
 background-color:#a2a2a2
}
.wsclset-item>img{
 width:30px;
}
.wscl-dataset-container{
 position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    overflow: hidden;
    z-index: 999;
 display:none;
}
.wscl-dataset-box{
	position:absolute;
	width:700px;
	height:760px;
	left:50%;
	top:70px;
	background-color: #021429;
    border-radius: 10px;
    margin-left: -350px;
    box-shadow: 0px -10px 5px 0px rgba(255,255,255,0.1), -10px 0px 5px 0px rgba(255,255,255,0.1), 10px 0px 10px 0px rgba(255,255,255,0.1), 0px 10px 10px 0px rgba(255,255,255,0.1);
}
.wscl-dataset-box>.open-box-body{
	flex-direction:column;
}
.wsclset-dataTable{
 width:90%;
 border:1px solid #0b52e0;
 color:#fff;
}
.wsclset-dataTable tr td{
 border:1px solid #0b52e0;
 height:40px;
 line-height:40px;
 text-align:center;
}
.wsclset-dataTable tr td.top-system-set{
 height:40px;
 line-height:40px;
}
.wsclset-dataTable tr td.table-real-head{
 height:50px;
 line-height:50px;
 font-size:16px;
 font-weight:bold;
 background-color:#171567;
}
.wsclset-dataTable tr td.top-system-set{
 background-color:#0c0a4a;
 height:50px;
 line-height:50px;
 font-weight:bold;
 font-size:20px;
}
.wsclset-dataTable tr td .param-dataset{
	 border:1px solid #0b52e0;
	 height:30px;
	 line-height:30px;
	 width:85px;
	 background:none;
	 text-align:center;
	 border-radius:5px;
	 color:#fff;
}
.wsclset-dataTable tr td.switch-block{
 	width:154px;
}
input:focus{
 	outline:none;
}
.savewsclset{
	padding:10px 15px;
	font-size:16px;
	color:#fff;
	background-color:#0a5bb5;
	border-radius:3px;
	margin-top: 30px;
    cursor: pointer;
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}