html,body{height:100%;font-size:0}body{background:#f0f0f0;overflow:auto}a,.m .ah a{color:#467edd}.ah a:hover{text-decoration:underline}svg{max-width:100%;max-height:100%;fill:grey}
iframe{margin:0}

/* BASIC */
.n,main{position:relative;max-width:1000px;margin:0 auto;min-height:100%}main{padding-top:68px;padding-bottom:20px;text-align:center}

.c{
	margin:15px auto;
	width:60%;
	min-height:300px
}

.e{
	position:relative;
	background:#fff;
	color:#353535;
	padding:18px;
	margin-bottom:18px;
	text-align:left;
	font-size:15px;
	border-radius:16px;
	box-shadow:0 2px 4px 0 rgb(0 0 0/10%);
	overflow:hidden
}
.e2{
	padding:8px 15px
}

/* HEADER */
header{position:fixed;left:0;right:0;background:#467edd;height:50px;z-index:5;transition:transform 0.5s}
header .n{padding:0 60px;width:100%;height:100%}
header .i{position:absolute;left:50%;transform:translateX(-50%);height:100%;background-repeat:no-repeat;background-position:center;width:155px;background-size:contain}
header .t{width:120px;background-size:auto 45%;background-position:left}
header a:hover{opacity:0.98}
header[class=hh]{transform:translateY(-100%)}

/* Btn */
button{
	background:#467edd;
	color:#fff;
	padding:10px 25px;
	border-radius:10px;
	font-weight:600;
	cursor:pointer;
	overflow:hidden
}
button:hover{
	background:#1d4da1
}
button:active,.sbrw:active{
	transform:scale(0.99)
}

.btnC{
	background:rgba(75,189,92,.1);
	color:#4bbd5c;
	border:none;
	padding:8px 25px
}
.btnC:hover{
	background:rgba(75,189,92,.2)
}

.rgbtn{
	position:absolute;
	right:15px;
	top:15px;
	font-size:14px;
	padding:5px 10px
}

.cancel{
	position:absolute;
	right:0;
	background:#f5f5f5;
	border:1px solid #dcdcdc;
	color:#353535
}
.cancel:hover{
	background:#e8e8e8;
	border-color:#d3d3d3
}

/* inp */
input,textarea,select{
	width:100%;
	padding:15px;
	border:1px solid #d3d3d3;
	margin-bottom:15px;
	border-radius:16px;
	outline:none
}
textarea{
	max-width:100%;
	min-width:100%;
	min-height:150px;
	resize: none
}
input:focus,textarea:focus,select:focus{
	border-color:#bababa
}

/* MAIN */
.h1,.h1big{margin:0;font-size:18px}
.h1big{font-size:30px}

.sb{
	position:relative;
	padding:13px 15px;
	background:rgba(0,0,0,.01);
	border-radius:16px;
	border:1px solid #e8e8e8
}
.si{
	position:absolute;
	left:15px;
	top:50%;
	transform:translateY(-50%);
	width:30px;
	height:30px;
	background-color:#f2f2f2;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	border-radius:100%
}
.sb .st{
	padding-left:50px;
	font-size:16px
}
.siu{
	position:absolute;
	bottom:-2px;
	right:-2px;
	width:20px;
	height:20px;
	border-radius:100%;
	background-color:#fff;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	box-shadow:0 0 3px rgba(0,0,0,.3)
}

.sb2 .si{
	width:30px;
	height:30px
}
.sb2 .st{
	padding-left:45px;
}
.clk:hover{
	cursor:pointer;
	border-color:#d3d3d3
}
.clk:active{
	transform:scale(0.98)
}
.sb2 .si{
	background-color:transparent;
	border-radius:5px
}
.sb .rgt{
	position:absolute;
	right:15px;
	top:50%;
	transform:translateY(-50%)
}
.sb .argt{
	text-align:right
}
.sb .arw{
	width:20px;
	height:20px
}

.rght{
	position:absolute;
	right:15px;top:50%;transform:translateY(-50%);
}

/* PUSH */
.psh{
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:100%;
	max-width:600px;
	overflow-y:auto;
	max-height:100%;
	padding:15px 0;
	z-index:10
}
.psh .e{
	max-width:600px;
	min-height:200px;
	margin:15px auto
}
.psh::-webkit-scrollbar{
    display:none;width:0;height:0
}
.psh #cpsh{
	position:absolute;
	width:35px;height:35px;
	top:50%;transform:translateY(-50%);
	right:15px;
	right:-5px;
	padding:5px;
	background:#fafafa;
	border:1px solid #e8e8e8;
	border-radius:100%;
	z-index:1;
	cursor:pointer
}
.psh #cpsh:hover{
	background:#f2f2f2
}
.psh #psh{
	display:none
}
.psh .ln{
	height:18px
}
.pozc{
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%,-50%)
}
#pshf{
	position:relative;
	width:56px;
	height:56px;
	border:3px solid #e8e8e8;
	border-radius:50%;
	display:inline-block;
	box-sizing:border-box;
	animation:rotation 1s linear infinite
}
#pshf::after{
  content:'';  
  box-sizing:border-box;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  border:3px solid transparent;
  border-bottom-color:#467edd
}
@keyframes rotation{
	0%{
		transform:rotate(0deg)
	}
	100%{
		transform:rotate(360deg)
	}
} 

/* FORM */
.w{position:relative}.w .i{position:absolute;top:2px;right:5px;bottom:0;width:40px;height:46px;cursor:pointer}.w .i svg{position:relative;top:50%;transform:translateY(-50%);width:30px;height:30px;fill:#bababa}.w .i:hover svg{fill:grey}.w input{padding-right:60px}.w2 input{padding-right:100px}.w2 .i2{right:48px}.w .psw{width:50px}.psw .s2,.psw2 .s1{display:none}.psw2 .s2{display:block}.btn_left_mrg{margin-left:15px}

/* INFO */
.out div{background:#fafafa;border:1px solid #fff;max-width:500px;padding:15px 18px;margin-bottom:15px;border-radius:16px;font-weight:600}
.out .tru{background:rgba(75,189,92,.1);border-color:rgba(75,189,92,.2)}
.out .err{background:rgba(237,72,72,.1);border-color:rgba(237,72,72,.2)}

/* LOAD */
.ld{
	position:relative;
	color:transparent
}
.ld:after{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:8px;
	height:8px;
	border-radius:50%;
	background-color:#fff;
	box-shadow:16px 0 #fff,-16px 0 #fff;
	animation:flash 0.5s ease-out infinite alternate;
	z-index:2
}
.ld:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:inherit;
	z-index:1
}

.lds .ld:after{width:28px;height:28px;background-size:contain;background-image:url("../img/spin/d.svg");background-color:transparent;box-shadow:none;animation:none}.lds button{background:rgba(255,165,0,.1)}.lds svg{fill:#ffa500}.lds .ld svg{opacity:0}

.ldmore,.ldmore:hover{
	width:70px;height:30px;margin-top:15px;background:rgba(0,0,0,.4);border:none
}

@keyframes flash{
	0%{
		background-color:#FFF2;
		box-shadow:16px 0 #FFF2,-16px 0 #FFF;
	}
	50%{
		background-color:#FFF;
		box-shadow:16px 0 #FFF2,-16px 0 #FFF2;
	}
	100%{
		background-color:#FFF2;
		box-shadow:16px 0 #FFF,-16px 0 #FFF2;
	}
}

/* FONE */
.fn,.fn2{
	display:none;
	position:fixed;
	top:0;left:0;right:0;bottom:0;
	background:rgba(0,0,0,.7);
	z-index:6
}

/* 2 */
.line{
	margin:15px 0;
	height:2px;
	background:#e8e8e8
}

/* 3 */
.btn_top{
	position:absolute;
	top:0;
	right:0;
	border-radius:0 16px 0 16px;
	background:#f2f2f2;
	color:grey;
	padding:8px 14px;
	fint-size:14px;
	z-index:1;
	border:1px solid #e8e8e8;
	cursor:pointer
}
.btn_top:hover{
	color:#353535;
	background:rgba(0,0,0,.08)
}
.btn_top svg{
	width:20px;
	height:20px;
	fill:#696969
}
.btn_svg{
	padding:5px 10px 2px 10px
}

.text_mono{
	font-family:monospace
}

/* table */
.boxtb{
	width:calc(100% + 36px);
	overflow:auto;
	margin:0 -18px;
}
.boxtb table{
	border-collapse:collapse;
	min-width:100%;
	font-size:14px
}
.boxtb table tr{
	border-top:1px solid #d3d3d3
}
.boxtb table tr:hover{
	background:#fafafa
}
.boxtb table tr:first-child:hover{
	background:transparent
}
	
.boxtb table td{
	padding:4px 6px;
	min-width:20px
}
.boxtb table .htr{
	font-weight:600;
	border:none;
	font-size:12px
}

tr td:first-child{
	padding-left:18px
}

tr td:last-child{
	padding-right:18px
}

.navpage{
	min-height:1px;
	margin-bottom:-15px;
	text-align:center
}
.navpage a{
	display:inline-block
}
.navpage .t{
	padding-right:70px
}
.navpage .e{
	display:inline-block
}
.navpage .e:hover{
	transform:scale(1.02)
}

.ntfpg{
	position:fixed;
	bottom:20px;left:0;right:0;
	text-align:center;
	z-index:13
}
.ntfpg .ntf{
	display:inline-block;
	padding:10px 18px;
	color:#fff;
	background:#000;
	border-radius:10px;
	font-size:14px;
	box-shadow:0 0 0 1px rgba(256,256,256,.1),0 10px 20px rgba(0,0,0,.2);
}

.back_navpage{
	position:relative;
	width:38px;
	height:38px;
	border-radius:100%;
	margin-right:8px
}
.back_navpage svg{
	position:absolute;
	width:20px;
	height:20px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	fill:#696969;
	z-index:1
}

.sbr{
	display:inline-block;
	padding:7px 13px;
	font-size:13px;
	font-weight:500;
	background:rgba(100,217,119,.1);
	border-color:rgba(100,217,119,.4)
}

.sbrw{
	background:rgba(70,126,221,.2);
	border-color:rgba(70,126,221,.4);
	cursor:pointer;
	overflow:hidden
}
.sbrw:hover{
	background:rgba(70,126,221,.3)
}

.upinp{
	margin-bottom:10px
}

.infosearch .sb{
    margin:2px 5px 2px 0
}

.listsel .sbr{
	background:rgba(139,0,255,.1);
	border-color:rgba(139,0,255,.1);
	cursor:pointer
}
.listsel .sbr:active{
	transform:scale(.96)
}
.listsel .sbr:hover{
	background:rgba(139,0,255,.15);
}

.listsel .active{
	box-shadow:0 0 0 2px rgba(139,0,255,.5)
}