@charset "UTF-8";
body,html{width:100%;height:100%;margin:0;padding:0;background:#eef4ff;background-size: 100% 100%;font-size:14px;color:#666;}
body,html,#app,.top,.main,.ft{min-width:1200px;}
h1,h2,h3,h4,h5,h6,ul,li,button,div,p{margin: 0;padding:0;list-style-type: none;outline: none;}
a,a:link,a:active,a:hover{text-decoration: none;}
button{cursor: pointer;border: 0;}
/* *{box-sizing: border-box;} */
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width:8px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0);
    border-radius:10px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.3);
    
}


.txt_green{color: #39C68F !important;}
.txt_red{color: #fb5757 !important;}
.txt_blue{color: #3965e7 !important;}
.txt_yelow{color: #DFA536 !important;}
.txt_gray{color: #999 !important;}

/* 登录 */

.login_top_bg{width: 100%;height: 100%;background: url(../images/login_top.png) no-repeat bottom center;display: flex;justify-content: center;align-items: center;}
#login_logo{height: 60px;display: flex;justify-content: center;}
#login_logo img{height: 60px;}
.login_top .el-radio-group{position: absolute;top:10px;right:10px;color:#afbcf3;display: flex;justify-content: center;align-items: center;font-size:12px;}
.head_language{padding:0 10px;color:#afbcf3;font-size:12px;}
.head_language label{color:#afbcf3;margin:0 5px;cursor: pointer;}
.head_language_rad:checked + .radio-label{color: #FFF !important;}
.head_language label>.head_language_rad{display: none;}


.ft{position: absolute;bottom: 0;left: 0;width:100%;padding: 10px 0;color:#999;font-size:12px;text-align: center;}

.el-input__clear{display: none;cursor: pointer !important;}
.el-input__suffix,.el-input__prefix{pointer-events:all;display: flex;align-items: center;justify-content: center;width:25px;}
.el-input--suffix2 .el-input__inner{padding-right:50px !important;}
.el-button--text{padding:0 !important;}

/* 登录盒子 */
.login_box{width:420px;background: #fff;border-radius: 10px;padding:15px 30px;position: absolute;top:45%;left:50%;margin-left:-210px;z-index: 99;box-sizing: border-box;}
.login_list li{padding:10px 0;}
.logli_tit{font-size:16px;text-align: center;}
.logli_ft{display: flex;width:100%;justify-content: space-between;align-items: center;}
.login_list li .el-button{width: 100%;}


/* 内页框架 */
.top_header{display: flex;position: fixed;top:0;left:0;width:100%;height:60px;background: #3965e7;}
.logbar{width:240px;height: 100%;display: flex;justify-content: center;align-items: center;}
.logbar.isCollapse{width:65px !important;}

/*.logbar.isCollapse #logo{background:url(../images/slogo.png) no-repeat center center;}
#logo{width:100%;height:30px;background:url(../images/logo_link.png) no-repeat center center;}*/
.header_r{padding:0 15px;flex: 1;display: flex;align-items: center;justify-content: space-between;}
.fold{color: #fff !important;padding:10px 20px 10px 0!important;}
.head_devicename{height: 32px;display:inline-flex;align-items: center;padding:0 10px;border: solid 1px #C4D1F8;border-radius: 4px;color:#fff;}
.head_r_right{display: flex;align-items: center;}
.head_ser{display: flex;align-items: center;position: relative;}
.head_ser .el-input__inner{border-radius: 16px;padding-right:60px !important;}
.head_ser .el-input__suffix{right:32px !important;}
.head_ser .el-button{width:32px;height: 32px;color:#999 !important;position: absolute;top:0;right:0;z-index: 99;}
.head_user{padding:0 10px;cursor: pointer;}
.head_user .el-dropdown-link{color:#fff !important;display: flex;align-items: center;}
.head_user .el-dropdown-link .iconfont{font-size: 32px !important;margin-right: 5px;color: #9CB2F3;}

.main{display: flex;height: calc(100vh - 60px);padding-top:60px;overflow: hidden;align-items:start;}
/* 左边菜单 */
.el-menu{height: 100%; box-shadow: 3px 0px 5px rgba(0,0,0,0.05);}
.el-menu-vertical:not(.el-menu--collapse) {width: 240px;}
.sidemenu_tit{width: 100%;height: 40px;border-bottom: solid 1px #DCDFE6;display: flex;justify-content: center;align-items: center;font-size:16px;font-weight: 700;color: #333;}
/* .el-menu>.el-submenu>.el-menu>.el-menu-item,.el-menu>.el-submenu>.el-menu>.el-submenu{text-indent: 20px;} */
.el-submenu__title,.el-menu-item{font-size: 16px !important;}
.sidemenu_con{height: calc(100vh - 101px);overflow: scroll; overflow-x: hidden;}
/* 左侧导航滚动条 */
.sidemenu_con::-webkit-scrollbar {
    width:2px;
    }
    /* 滚动槽 */
    .sidemenu_con::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0);
    border-radius:10px;
    }
    /* 滚动条滑块 */
    .sidemenu_con::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    }
    .sidemenu_con::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.3);
    }

/* 右侧 */
.rmain{flex:1;height: 100%;padding:0 0 36px;box-sizing: border-box;position: relative;}
.rmain_content{padding: 0 12px 0 20px;margin-top: 36px;height: calc(100vh - 132px);overflow: scroll; overflow-x: hidden;box-sizing: border-box;display: flex;}
.rmain_tcz{position:absolute;top:0;left:0;padding:10px 20px;width: 100%;box-sizing: border-box;}
.rmain_right{width:220px;height: 100%;background: #fff;}
.rmain_left{flex: 1;margin-right: 20px;}

/* 盒子公用*/
.combox{padding:0 20px;background: #fff;margin-bottom: 16px;}
.home_main .combox{margin-top: 16px;margin-bottom: 0 !important;}
.combox_tit{padding:10px 0;display: flex;justify-content: space-between;border-bottom: solid 1px #e8eaee;}
.combox_tit b{font-size: 16px;color: #585757;}
.combox_con{padding:10px 0;}

/* 欢迎 */
.huany{display: flex;justify-content: space-between;background: url(../images/hi_bg.png) no-repeat bottom right;padding:10px 20px;}
.huany_left{display: flex;justify-content: space-between;align-items: center;}
.huany_left .iconfont{font-size:36px;margin-right: 10px;color: #ccc;}
.huany p{line-height: 18px;}
.huany_left p strong,.huany_right b{font-size:18px;}
.huany_left p strong,.huany_left p b{color: #3965e7;}
.huany_right{text-align: right;color: #333;}

/* 四按钮统计 */
.big_count_list{display: flex;}
.big_count_list li{width:25%;border-right: solid 1px #e8eaee;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.big_count_list li:last-child{border-right: 0 !important;}
.big_count_list li .iconfont{font-size:36px;}
.big_count_list li b{font-size: 24px;padding:5px 0;}
.big_count_list li.online .iconfont,.big_count_list li.online b{color: #39C68F;}
.big_count_list li.offline .iconfont,.big_count_list li.offline b{color: #999999;}
.big_count_list li.runtime .iconfont,.big_count_list li.runtime b{color: #4B75F0;}
.big_count_list li.usecpu .iconfont,.big_count_list li.usecpu b{color: #DFA536;}
.big_count_list li.usemer .iconfont,.big_count_list li.usemer b{color: #36C1DF;}

/* 四盒子统计 */
.home_four{display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);grid-row-gap:0;grid-column-gap: 20px;justify-content:center;align-content: center;overflow: hidden;}
/* 列表共用*/
.item_li li{padding:8px 10px;display: flex;border-bottom: solid 1px #f5f6f7;}
.item_li .item_li_label{width:45%;padding:0 5px;display: flex;justify-content: right;align-items: center;}
.item_li .item_li_r{flex: 1;padding:0 5px;display: flex;align-items: center;padding-right: 20%;position: relative;}
.home_four .item_li li{padding:7px 10px;}
.home_four .item_li .item_li_r{padding-right: 0;}

.el-table,.el-table__header,.el-table__body{width: 100%;}
.home_four .el-table td, .home_four .el-table th{padding:11.6px 0 !important;}

/* 方盒子共用 */
.fbox_item_li{display: grid;grid-row-gap:16px;grid-column-gap: 20px;height: 100%;}
.fbox_item_li li{display: flex;justify-content: space-between;align-items: center;padding:10px;box-sizing: border-box;border: solid 1px #E0E2E8;height: 100%;}
.fbox_item_li li:nth-child(5) {grid-column: 1 / 3;}

.home_four .fbox_item_li li span .iconfont{color: #3965e7;margin-right: 5px;}
.fbox_item_li li span{display: inline-block;width:50%;display: flex;align-items: center;}
.fbox_item_li li strong{display: inline-block;width:50%;}

/* 右侧右边 */
.comuse_list li{display: flex;align-items: center;justify-content: space-between;font-size:16px;background: #E9EDF9;border-radius: 4px;margin-bottom:10px;}
.comuse_list li a{padding: 20px;display: flex;align-items: center;justify-content: space-between;width:100%;box-sizing: border-box;}
.comuse_list li a{color: #333;}
.comuse_list li:hover{background: #cfd9f3;color: #3965e7;}
.comuse_list li:hover a{color: #3965e7;}

.help_list li{display: flex;align-items: center;justify-content: space-between;font-size:18px;background: #fff;border:solid 1px #E0E2E8;margin-bottom:10px;box-shadow: 3px 5px 5px rgba(0,0,0,0.05);}
.help_list li a{padding: 15px 20px 15px 10px;display: flex;align-items: center;justify-content: space-between;width:100%;box-sizing: border-box;}
.help_list li strong{display: flex;align-items: center;}
.help_list li strong img{margin-right: 5px;}
.help_list li a{color: #3965e7;}
.help_list li:hover{background: #E9EDF9;}
.ftcaoz_warp{display: flex;justify-content: center;align-items: center;}
.el-button span{display: flex;align-items: center;justify-content: center;}

/* 表格 */
.btcaoz{padding-bottom: 10px;}
.el-table .iconfont,.el-button .iconfont{font-size:14px !important;}
.el-button{line-height: normal !important;}

/* 灰色盒子标题 */
.gray_tit{margin-bottom: 15px;padding:10px 10px 10px 0;display: flex;justify-content: space-between;background: #F3F2F2;font-size:16px;color: #333;}
.gray_tit b{padding:0 15px;border-left: solid 4px #3965e7;}


.fullh_tabs{min-height: calc(100vh - 132px);}





/* bootstrap控件样式重置 */
.form-switch .form-check-input{width:4em !important;height: 2em !important;}
.form-switch .form-check-input:checked{background-color: #39C68F !important;border-color: #39C68F !important;}
.form-switch .form-check-input:disabled{opacity:.8 !important;}
.form-switch{margin:0 !important;}
.form-switch .form-check-input{margin-top: 0 !important;}
.cell .form-switch{padding:0 !important;}
.item_li_r label.btn{width:50%;}


/* 网关图片状态 */
.wangguan_picstate{width:700px;height:154px;margin:50px auto;position: relative;}
.wangguan_picstate img{width: 100%;}

/* 网口 */
.state_bg{display: inline-flex;width:61px;height:48px;justify-content: center;flex-direction: column;align-items: center;}
.state_bg .f1{display: block;width:18px;height:3px;}
.state_bg .f2{display: block;width:25px;height:6px;}
.state_bg .f3{display: block;width:43px;height:26px;}
.picstate_kou{width: 92px;height:87px;display: flex;justify-content: space-between;flex-wrap: wrap;position: absolute;left: 340px;top:39px;z-index: 99;row-gap:17px;}
.picstate_kou li{width:43px;height:35px;display: flex;flex-direction: column;}
.picstate_kou .online .state_bg span{background: #06e92590;}
.picstate_kou .state_bg span{background: #00000030;}

/* 电口 */
.picstate_dkou{width:56px;height:42px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.picstate_dkou .f1{display: block;width:56px;height:39px;}
.picstate_dkou .f2{display: block;width:28px;height:3px;}
.picstate_dkou.online span{background: #06e92590;}
.picstate_dkou span{background: #00000030;}

.dpon{position: absolute;left:534px;top:89px;z-index: 99;}
.d5{position: absolute;left:242px;top:89px;z-index: 99;}


/* 指示灯 */
.picstate_power{width:1000px;height:220px;position: absolute;top:0;left:0;}
.picstate_power .online.idot{background: #06e925;font-weight: bold;animation: animated-border 1.5s infinite;}
.picstate_power .idot{width:10px;height:10px;display: inline-block;background:#99a4aa;border-radius: 5px;}
/* 灯定位 */
.p_link{position: absolute;left:203px;top:94px;z-index: 99;}
.p_act{position: absolute;left:203px;top:111px;z-index: 99;}
.p_power{position: absolute;left:630px;top:59px;z-index: 99;}
.p_pon{position: absolute;left:630px;top:77px;z-index: 99;}
.p_wk2{position: absolute;left:630px;top:94px;z-index: 99;}
.p_wk4{position: absolute;left:650px;top:94px;z-index: 99;}
.p_wk1{position: absolute;left:630px;top:111px;z-index: 99;}
.p_wk3{position: absolute;left:650px;top:111px;z-index: 99;}

@keyframes animated-border {
  0% {
    box-shadow: 0 0 0 0 rgba(6, 233, 37, 1);
  }

  100% {
    box-shadow: 0 0 0 6px rgba(8, 146, 59, 0);
  }
}

@keyframes animated-border1 {
  0% {
    box-shadow: 0 0 0 0 rgba(153, 153, 153, 1);
  }

  100% {
    box-shadow: 0 0 0 4px rgba(153, 153, 153, 0);
  }
}

/* 遮罩样式
* wuhj
*/
.df_lock_bg{
	position:absolute;
	left:0px;
	top:0px;
	background:#333;
	opacity:0.3;
	filter:alpha(opacity=20);
	z-index:100;
	display:none;
}
.df_lock_load{
    position:absolute;
    left:35% !important;
    top:35% !important;
    margin:0 auto;
	width: 300px;
	height:120px;
	/*line-height: 100px;*/
	border-radius: 10px;
	background: #f3f3f3;
	border:solid 1px #999;
	z-index:200;
	display:none;
	text-align:center;
	font-size:14px;
	color:#3F648E;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.df_lock_msg{
	line-height:initial;
	display:block;
	height:auto;
	line-height:100%;
	text-align: center;
    word-wrap: break-word;
    padding: 20% 5% 0 5%;	
	margin-bottom: 2%;
}

.select_el_input__inner {
	background-color:#FFF;
	background-image:none;
	border-radius:4px;
	border:1px solid #DCDFE6;
	box-sizing:border-box;
	color:#606266;
	display:inline-block;
	height:40px;
	line-height:40px;
	outline:0;
	padding:0 15px;
	-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);
	transition:border-color .2s cubic-bezier(.645,.045,.355,1);
    width:200px;
}