@charset "utf-8";

/********** Global **********/
/*
 *常用背景色： #0f1c30 #0b0f34 (6,64,102) (29,45,57) (7,33,58) (8,13,28) (15,43,36)
 */
html, body {
	width:100%;
	height:100%;
	min-height:635px;
	font-family:"microsoft yahei", arial, sans-serif;
	background-color:#0f0a28;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% 100%;
	overflow-x:hidden;
	overflow-y:auto;
}
body.bg02 {background-image:url("../img/bg02.png");}
.header {
	margin:0 auto;
	width:100%;
	height:42px;
	max-width:1920px;
	background:url("../img/header-left.png") left center no-repeat, url("../img/header-right.png") right center no-repeat;
	background-size:43% 80%, 43% 80%;
	overflow:hidden;
}
.header h3 {
	margin:0;
	padding:0;
	line-height:42px;
	text-align:center;
	font-size:24px;
	color: #41b9fe;
}
.xpanel h4{
	margin:3px;
	padding:0px;
	text-align:left;
	font-size:20px;
	color: #dddefe;
}
@media (max-width: 1199px) {
	.header {
		background-size:25% 60%, 25% 60%;
	}
}
.wrapper {position:absolute;top:57px;bottom:0;left:0;right:0;min-height:565px;}
.container-fluid {height:100%;min-height:100%;}
.row {margin-left:-7px;margin-right:-8px;}
.row>div {padding-left:7px;padding-right:8px;}
.xpanel-wrapper {padding-bottom:15px;box-sizing:border-box;}
.xpanel-wrapper-1 {height:100%;}
.xpanel-wrapper-2 {height:50%;}
.xpanel-wrapper-1-3 {height:33.33333%;}
.xpanel-wrapper-2-3 {height:66.66666%;}
.xpanel {
	padding:15px;
	height:100%;
	min-height:170px;
	background:url("../img/panel.png") center no-repeat;
	background-size:100% 100%;
	box-sizing:border-box;
}

/* tool */
.fill-h {height:100%;min-height:100%;}
.no-margin {margin:0 !important;}
.no-padding {padding:0 !important;}
.no-bg {background:none !important;}
.no-border {border:0 !important;}

/* scrollbar */
::-webkit-scrollbar {width:0;height:0;}
::-webkit-scrollbar-track {background-color:transparent;}
::-webkit-scrollbar-thumb {border-radius:5px;background-color:rgba(0, 0, 0, 0.3);}
.flex-row {
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
}
.flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:15px;}
.flex-cell-l,
.flex-cell-r {-webkit-flex:2;-ms-flex:2;flex:2;}
.flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;}
.flex-cell-lc {-webkit-flex:5;-ms-flex:5;flex:5;}

.chart-wrapper {position:relative;height:100%;}
.chart-title {height:32px;font-size:22px;font-weight:normal;color:#9aa8d4;}
.chart-div {position:absolute;top:32px;bottom:0;left:0;right:0;}

.data-t {table-layout:fixed;width:100%;height:100%;border-collapse:collapse;}
.data-t th,
.data-t td {min-height:48px;}
.data-t th img {width:30px;height:30px;}
.data-t td {padding-left:15px;}
.data-t p {margin:5px 0;line-height:1;font-size:14px;color:#b0c2f9;}
.data-t p span {font-size:32px;font-weight:bold;color:#fff;}

/* media query */
@media (max-width:1900px) {
	#header {height:48px;}
	.header-title {line-height:42px;font-size:24px;}
	.header-info {top:17px;font-size:14px;}
	.header-info-l {left:15px;}
	.header-info-r {right:15px;}
	.flex-cell {padding:10px;}
	.chart-title {height:24px;font-size:18px;}
	.chart-div {top:24px;}
	.data-t p span {font-size:24px;}
	#footer {height:16px;}
	#container {top:48px;bottom:12px;}
}

/* chart-loader */
.chart-loader {
	position:absolute;
	top:0;
	left:0;
	z-index:99;
	width:100%;
	height:100%;
	background:rgba(255, 255, 255, 0);
	transition:all .8s;
}
.chart-loader .loader {
	position:absolute;
	left:50%;
	top:50%;
	width:60px;
	height:60px;
	margin:-30px 0 0 -30px;
	border:3px solid transparent;
	border-top-color:#3498db;
	border-radius:50% !important;
	-webkit-animation:spin 2s linear infinite;
	animation:spin 2s linear infinite;
}
.chart-loader .loader:before {
	content:"";
	position:absolute;
	top:3px;
	left:5px;
	right:5px;
	bottom:5px;
	border:3px solid transparent;
	border-top-color:#e74c3c;
	border-radius:50% !important;
	-webkit-animation:spin 3s linear infinite;
	animation:spin 3s linear infinite;
}
.chart-loader .loader:after {
	content:"";
	position:absolute;
	top:9px;
	left:10px;
	right:10px;
	bottom:10px;
	border:3px solid transparent;
	border-top-color:#f9c922;
	border-radius:50% !important;
	-webkit-animation:spin 1.5s linear infinite;
	animation:spin 1.5s linear infinite;
}
.chart-done .chart-loader {display:none;}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}