html, body{
  padding: 0; margin: 0; background: #515475; color: #fff; width: 100%; height: 100%; font-size: 12px;
}
a{
	text-decoration: none;
}
ul{
	margin: 0; padding: 0;
}
ul > li{
	margin: 0; padding: 0; list-style: none;
}
/*������*/
.main-container{
	width: calc(100vw - 40px); height: calc(100vh - 40px); padding: 20px; overflow: hidden;
}
.main-container > .main-title{
	padding-bottom: 20px;
}
.main-container > .main-title > .logo{
	min-width: 300px; height: 50px; vertical-align: middle; display: inline-block; line-height: 50px; font-weight: bolder; font-size: 26px;
}
.main-container > .main-title > .title{
	display: inline-block; padding-left: 20px; vertical-align: middle;
}
.main-container > .main-title > .title > span{
	border-left: 1px solid #EEEEEE; padding-left: 20px;
}
.main-container > .main-title > .action{
	display: inline-block; float: right; line-height: 50px; font-size: 26px; font-weight: bolder;
}
/*������*/
.main-container > .main-content{
	background: url("../images/bg.jpg") center; height: calc(100vh - 125px); border-radius: 20px; background-size: cover; padding-top: 15px;
}
/*������*/
.search-container{
	font-size: 14px; height: 50px; line-height: 50px;
}
.search-container .title{
	padding-left: 10px; font-weight: bolder; display: inline-block;
}
.search-container .content{
	display: inline-block; padding-left: 20px;
}
.main-container>.main-title>.logo {
  min-width: 300px;
  height: 50px;
  vertical-align: middle;
  display: inline-block;
  line-height: 50px;
  font-weight: bolder;
  font-size: 37px;
  color: #00ffe7;
}
.main-container>.main-title>.title {
  display: inline-block;
  padding-left: 20px;
  vertical-align: middle;
}

.main-container>.main-title>.title>span {
  border-left: 1px solid #eeeeee;
  padding-left: 20px;
  font-size: 22px;
  color: #f4df03;
}

.main-container>.main-title>.action {
  display: inline-block;
  float: right;
  line-height: 50px;
  font-size: 22px;
  font-weight: bolder;
}
/*���*/
.table-container{
	border: 2px solid #547FC5; width: calc(100% - 24px); margin-left: 10px; border-radius: 10px; height: calc(100% - 128px); overflow-x: hidden; overflow-y: auto;
}
.table-container > .table{

}
.table-container > .table > .table-header{
	font-size: 14px; font-weight: bolder; background: -webkit-linear-gradient(top, #374372, #68B8FA); border-radius: 10px 10px 5px 5px; border-bottom: 1px solid #63B2FA; height: 50px; line-height: 50px; position: absolute; width: calc(100vw - 64px); z-index: 9;
}
.table-container > .table > .table-placeholder{
	width: 100%; height: 50px;
}
.table-container > .table > .table-header  .header-font{
	font-size: 14px; color: #ffffff;
}
.table-container > .table .table-row{
	font-size: 14px; padding: 15px 0; border-bottom: 1px solid #547FC5; cursor: default; height: 24px; line-height: 24px;
}
.table-container > .table .table-row:hover{
	background-color: #5F8EC2;
}
.table-container > .table .table-group{
	display: none;
}
.main-text{
	font-size: 16px !important; color: #F7C992;
}
.second-text{
	font-size: 14px; color: #ffffff;
}
.third-text{
	font-size: 14px; color: #ffffff; text-decoration: underline; text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden;
}
.normal-text{
	font-size: 14px; color: #ffffff; text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden;
}
.clickable:after{
	content: ""; display: block; width: 20px; height: 20px; background-image: url("../images/arrow.png"); background-size: cover; position: relative; margin-top: -22px; margin-left: 15px;
}
.clicked:after{
	content: ""; display: block; width: 20px; height: 20px; background-image: url("../images/arrow.png"); background-size: cover; position: relative; margin-top: -22px; margin-left: 15px; transform: rotate(90deg);
}

.score-normal{
	font-size: 16px; font-weight: bolder; color: #B8E2FC;
}
.score-normal a{
	color: #B8E2FC;
}
.score-yellow{
	font-size: 16px; font-weight: bolder; color: #E5E6AA;
}
.score-yellow a{
	color: #E5E6AA;
}
.score-white{
	font-size: 16px; font-weight: bolder; color: #ffffff;
}
.score-white a{
	color: #ffffff;
}
.score-orange{
	font-size: 16px; font-weight: bolder; color: #F5DAC2;
}
.score-orange a{
	color: #F5DAC2;
}

.col{
	display: inline-block; vertical-align: middle;
}

.col-5{
	width: 4.7%;
}
.col-7{
	width: 6%;
}
.col-10{
	width: 10%;
}
.col-12{
	width: 8%;
}
.col-18{
	max-width: 19.3vw; min-width: 10vw; width: 11vw; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.col-20{
	max-width: 19.3vw; min-width: 10vw; width: 16%;
}
.col-30{
	width: 30%;
}
.col-70{
	width: 69%;
}
.col-50{
	width: 49.6%;
}
.col-100{
	width: 100%;
}
.text-bold{
	font-weight: bolder;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}
.text-center{
	text-align: center;
}
.border-bottom{
	border-bottom: 3px solid #8FEFF7;
}
.margin-10{
	margin-left: 10px;
}
.select{
	padding: 5px 10px; border:2px solid #535E7A; outline: none; border-radius: 20px; background: none; color: #A0ACC0;
}
.select > option{
	padding: 5px;
}
.input{
	border: 2px solid #535E7A; padding: 8px 10px; border-radius: 20px; background: none; color: #A0ACC0; outline: none;
}
.input::placeholder{
	color: #A0ACC0;
}
.first-button{
	background-color: #90DFFA; outline: 0; color: #ffffff; padding: 5px 20px; border-radius: 20px; border: 1px solid #535E7A; cursor: pointer; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.second-button{
	background-color: #444A60; outline: 0; color: #A0ACC0; padding: 5px 20px; border-radius: 20px; border: 1px solid #535E7A; cursor: pointer;
}
.second-button:hover{
	color: #ffffff; background-color: #90DFFA; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.checkbox{
	display: inline-block; font-size: 14px;
}
.checkbox > input{
	display: inline-block; vertical-align: middle; outline: none; width: 20px; height: 20px;
}
.checkbox > input:checked:before{
	content: ''; position: absolute; width: 20px; height: 20px; background-color: #4C6495; background-image: url("../images/check.png"); background-size: 80% 80%; border-radius: 2px; background-position: center; background-repeat: no-repeat;
}
.checkbox > span{
	display: inline-block; vertical-align: middle;
}
.title-link{
	color: #ffffff; text-decoration: none;
}
.title-link:hover{
	text-decoration: underline;
}

/*���⵼����*/
.special-search-container{
	margin: 0 10px; background: url(../images/navigation-bg.png); border-radius: 10px;
}
/*��ർ����*/
.left-container{
	display: inline-block; width: 275px; vertical-align: top; margin-top: 10px; height: 100%;
}
.left-container > .left-content{
	margin: 0 10px 10px 10px; padding: 10px; border-radius: 10px; background: url(../images/navigation-bg.png); height: calc(100% - 150px); overflow-x: hidden; overflow-y: auto;
}
.left-container > .left-content > .top-tips{
	line-height: 26px;
}
.icon{
	display: inline-block; width: 12px; height: 12px; border-radius: 12px; vertical-align: middle; margin-right: 5px;
}
.icon-red{
	background-color: red;
}
.icon-green{
	background-color: green;
}
.icon-arrow{
	background-image: url("../images/arrow.png"); background-size: 180% 180%; background-position: center center; margin-left: -20px;
}
.navigation-container{
	padding-top: 10px;
}
.navigation{
	width: 100%;
}
.navigation > li{
	width: 100%; line-height: 30px; padding-left: 20px; cursor: pointer;
}
.navigation > .fold{

}
.navigation > .fold > .navigation{
	display: none;
}
.navigation > .unfold > .icon-arrow{
	transform: rotate(90deg);
}
.navigation > li > .title{
	display: inline-block; vertical-align: middle; width: calc(100% - 80px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*�Ҳ�������*/
.right-container{
	display: inline-block; width: calc(100% - 285px); vertical-align: top; height: calc(100% - 130px); overflow-x: hidden; overflow-y: auto; margin-top: 10px;
}
.right-container > .table-container{
	margin-left: 0; width: calc(100% - 5px); height: auto;
}
.right-container > .table-container > .table{
	width: 100%;
}
.right-container > .table-container > .table > .table-header{
	position: relative; width: 100%;
}
.right-container > .table-container > .table > .table-header > .table-title{
	padding-left: 10px; font-size: 14px;
}
.right-container > .table-container > .table > .table-row{
	line-height: unset; height: auto;
}
.right-container > .table-container > .table > .table-row:hover{
	background: unset;
}
.grid{
	vertical-align: top;
}
.rank-container{
	 width: 100%; text-align: center; height: 170px;
}
.rank-container > .rank-icon{
	display: inline-block; width: 120px; height: 170px;
}
.rank-container > .rank-icon > .title{
	font-size: 20px; color: #B8E2FC; line-height: 50px;
}
.rank-container > .rank-icon > .content{
	font-size: 60px; color: #F7C992; font-weight: bolder; width: 100%; height: 120px; line-height: 120px;  background-image: url(../images/bredgay.png); background-size: 100%; background-repeat: no-repeat; background-position: center;
}
.rank-container > .rank-content{
	display: inline-block; text-align: left; padding-left: 20px; font-weight: bolder; line-height: 24px;
}
.chart-rank{
	width: 100%; height: 175px;
}
.chart-container{
	width: 100%; height: 100%; min-height: 375px;
}

.layui-layer-tips .layui-layer-content{
	opacity: 0.7;
}
.shadows{background-color: transparent !important;box-shadow: 0 0 0 rgba(0,0,0,0) !important;}

/*���ݴ���*/
@media screen and (max-width: 1024px) {
    .table-container > .table > .table-header, .table-container > .table > .table-header .header-font{
    	font-size: 12px !important;
    }
    .second-text{
    	font-size: 12px !important;
    }
    .third-text, .normal-text{
    	font-size: 12px !important;
    }
    .main-text{
    	font-size: 16px !important;
    }
    .col-12{
    	width: 11%;
    }
    .col-20{
    	width: 14vw;
    }
    .col-5{
    	width: 7.6%;
    }
    .clickable:after{
			margin-left: 4px;
		}
		.clicked:after{
			margin-left: 4px;
		}
}