@charset "UTF-8";
@import "basic.css";
.container:before, .container:after,
.header:before, .header:after,
.content:before, .content:after,
ul:before, ul:after {
	display: table;
	content: " ";
}
.container:after,
.header:after,
.content:after,
ul:after {
	clear: both;
}

.container{
	min-width: 1200px;
	min-height: 600px;
	padding-left: 15px;
	padding-right: 15px;
	margin-right: auto;
  	margin-left: auto;
}
.left {
	float: left;
}
.right {
	float: right;
}
.text-center {
	text-align: center;
}
.btn {
	display: block;
	padding: 8px 10px;
	border-radius: 14px;
	box-shadow: 4px;
	background-color: #1044BE;
	color: #E9E2E2;
	text-decoration: none;
}
.btn:hover {
	color: #DEDCDC;
	background-color: #7D84E7
}

.header, .content {
	padding: 4px 15px;
	margin-left: -15px;
	margin-right: -15px;
}

.header {
	background-color:#F6EEEE;
}
.content {
	width: 1200px;
	margin: 0 auto;
}
.content .network .network-content {
	width: 100%;
	border-right: 1px solid #ccc;
	overflow: hidden;
	border: 1px solid #ccc;
	box-shadow: -10px 12px #E4E0E0;
}
.img-list {
	float: left;
	margin-top: 10px;
	text-align: center;
	width: 33.33333%;
}
.actual-line {
	width: 400px;
	height: 450px;
	background-color: #D0CBCB;
}

.line {
	width: 200px;
}
.line canvas {
	width: 200px;
	height: 522px;
	background-color: pink;
}

.master-control {
	position: relative;
	width: 560px;
	height: 522px;
	border:1px solid #ccc;
	box-shadow: 10px 12px #E4E0E0;
}

.master-control .tab {
	width: 100%;
}
.tab ul {
	width: 100%;
}
.tab li {
}
.tab ul li{
	float: left;
	height: 44px;
	background-color: #A1BCF9;
}

.tab li a{
	display: block;
	margin-top: 5px;
	width: 60%;
	height: 32px;
	line-height: 32px;
	font-size: 16px;
	color: #F6F0F0;
	text-decoration: none;
	text-align: center;
	background-color:#3439A4;
	border-radius: 10px 12px;
	white-space: nowrap;
}
.tab li a:hover {
	font-size: 20px;
	background-color: #6468AD;
}

.tab li.active a {
	font-size: 20px;
	background-color: #6468AD;
}
.ele-group-cont {
	position: relative;
	width: 100%;
	height: 478px;
	overflow: hidden;
}
.ele-group {
	position: absolute;
}
.group-header {
	font-size: 16px;
}
.group-header a{
	display: block;
	color: #FEFCFC;
	text-decoration:none;
	height: 30px;
	line-height: 30px;
	text-indent: 1.5em;
	font-weight: bold;
	background-color: #80ABF0
}
.group-content li {
	float:left;
	width: 80px;
	height: 80px;
	padding: 4px 6px;
	border-right: 1px solid #ccc;
	border-bottom:1px solid #ccc;
}
.group-content li img {
	margin-top: 10px;
	margin-left: 26px;
	width: 23px;
	height: 50px;
}
.group-content li img:hover {
	margin-top: 5px;
	margin-left: 24px;
	width: 32px;
	height: 70px;
}
.page{
	position: fixed;
	width: 100%;
	top: -3000px;
	left: 0;
	z-index: 9999999;
	min-width: 1200px;
	min-height: 500px;
	overflow:hidden;
	background-color: #fff;
}
.page-close:before, .page-close:after {
	display: table;
	content: " ";
}
.page-close:after {
	clear: both;
}
.page .page-close {
	width: 100%;
}
.page .page-close a {
	display: block;
	float:right;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-size: 18px;
	text-decoration: none;
	color: #000000;
}
.page .page-close a:hover {
	background-color: #F47C7C;
	color: #FFFFFF;
	font-weight: bold;
}

.page .tab-list {
	display: none;
	width: 100%;
	min-heihgt: 300px;
}
.page .tab-list.active {
	display: block;
}
.page .thr-line {
	position: relative;
}
.page .thr-line .time-change{
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 9999;
}
.time-change a{
	display: block;
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	// color: #000;
	text-decoration: none;
	border: 1px solid #ddd;
}
.time-change a:hover {
	background-color: #8DAFFD;
	color: #FFFFFF;
}
.page .thr-line .break-line {
	width: 100%;
	height: 100%;
}
.page .thr-line .echarts {
	width: 100%;
	height: 100%;
	background-color: pink;
}


.listview {
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}
.listview ul {
	margin-top: 15px;
	width: 100%;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background-color: #fff;
}

.listview a {
	display: block;
	padding: 12px 6px;
	text-decoration: none;
	text-align: center;
	border-top: 1px solid #ddd;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
	color: #030303;
}
.listview a:hover {
	background-color: #8DAFFD;
	color: #FFFFFF;
}
.listview a.active {
	background-color: #8DAFFD;
	color: #FFFFFF;
}

.ele-time .dash-board {
	width: 100%;
	height: 100%;
	outline: 1px solid #ddd;
}
.ele-time .dash-board .echarts{
	width: 100%;
	height: 100%;
	background-color: pink;
}
.ele-time .break-line {
	width: 100%;
	height: 100%;
}
.ele-time .break-line .echarts {
	width: 100%;
	height: 100%;
	/* background-color: pink; */
}

.ele-life .tbl {
	width: 100%;
}
.tbl table {
	width: 100%;
	border-collapse: collapse;
}
.tbl table th, .tbl table td {
	padding: 8px 0;
	text-align: center;
	border: 1px solid #DDDDDD;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}

.tbl table th {
	background-color: #ccc;
}

.tbl table tbody tr:hover {
	background-color: #B9B7E3;
	color: #FFFFFF;
}