canvas{
  display:block;
  vertical-align:bottom;
}

.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}


#particles-js{
	width: 100%;
	height: 100%;
	position: relative;
	background-image: url(../img/bg.jpg);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}


.loin_box{ width: 85%; margin: 0 auto;}
.login{z-index: 2;position:absolute;width: 400px;border-radius: 5px;height: 400px;background: white;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 60px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;margin-bottom: 30px;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 10px; margin-right: 10px;}
.login-center-img>img{width: 100%;}
.login-center-input{float: left;width: 305px;height: 30px;position: relative;}
.login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 35px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}
.login-center-input input:focus{border: 1px solid   #1b64b8;}
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color:   #1b64b8;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
.login.active{-webkit-animation: login-small 0.8s ; animation: login-small 0.8s ;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
.login-button{cursor: pointer;width: 100%;text-align: center;height: 40px;line-height: 40px;background-color:  #1b64b8;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}
.login-button:hover{background:#0a7cff ;}
.login_text { text-align: center; font-size: 14px; line-height: 30px; height: 30px; margin-top: 10px; }
.login_text a{color: #1b64b8;}


/* 导航条 */
.header{width: 100%; height: 66px; line-height: 66px; position: fixed;top: 0;box-shadow: 0 1px 4px 0 rgba(0,0,0,.08); background: #fff;}
.header_box{ width: 90%; margin: 0 auto;display: flex; justify-content: flex-end; flex-direction: row; }
.header_box a{ padding: 0 30px; height: 40px; line-height: 40px; margin-top: 10px;}
.header_box div:hover{ border-bottom: 2px solid #1b64b8;}

.active{border-bottom: 2px solid #1b64b8;}

/* 控制台 */
.console_center{margin: 0 auto; margin-top: 90px; width: 90%; }
.greetings-title {
    margin-bottom: 4px;
    font-size: 28px;
    font-weight: 600;
    color: #333;
	}
.greetings-message {
	margin-top: 10px;
    color: #555;
	font-size: 12px;
	}
.console_center_box{
	margin-top: 40px;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,.13);
	background: #fff;
	padding: 25px 0;
}	
.console_center_box_main{
	width: 98%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.console_center_box_main_list{
	width: 19%;
	background-color: #f9f9f9;
	height: 56px;
	line-height: 56px;
	text-indent: 25px;
	margin: 5px 8px;
}

/* 回调通知 */
.box-hd h3 {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}
.console_center_box_main_input{
	width: 90%;
    border: 1px solid #dedede;
    background-color: #fff;
}	
.box-input{
	align-items: center;
	margin-top: 20px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}
.console_center_box_main_input input{
	width: 100%;
    border: none;
	height: 35px;
	text-indent: 15px;
}
.button{	
	color: #FFFFFF;
	border-radius: 10px;
	width: 120px;
	height: 35px;
	line-height: 35px;
	background: #1b64b8;
	border: none;
	cursor:pointer;
}
.button:hover{	
background:#0a7cff ;
}

/* API */
.api_box{

	width: 90%;	
	margin: 0 auto;
	margin-top: 90px;
	padding: 10px 0;
	
}
.aip_box_l{
	width:20%;
	background: #fafafa;
	/* max-height: 900px; */
/* 	height: 100%; */
	overflow-y: auto;
}

.aip_box_l::-webkit-scrollbar
{
    width: 5px;
    height: 5px;
    background-color: #F5F5F5;
}
 
/*定义滚动条轨道 内阴影+圆角*/
.aip_box_l::-webkit-scrollbar-track
{
  
    background-color:#fff;
}
 
/*定义滑块 内阴影+圆角*/
.aip_box_l::-webkit-scrollbar-thumb
{
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #d7d8d9;
}


.aip_box_l ul{
	margin-top: 20px;
	
}



.aip_box_l ul li{
	height: 60px;
	line-height: 60px;
	font-size: 16px;
	text-indent: 35px;
}
.aip_box_l ul li:hover{
	background: #ebebeb;
}
.aip_box_r{
	width: 75%;
	height: calc(100vh - 110px)
}
.api_box_center{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 98%;
	margin: 0 auto;
}