@font-face {
    font-family: "Puhui-Medium";
    src: url(../../javascript/newUI/font/Alibaba-PuHuiTi-Medium.woff2);
}

@font-face {
    font-family: "Puhui-Regular";
    src: url(../../javascript/newUI/font/Alibaba-PuHuiTi-Regular.woff2);
}

:root {
	--svgpwh: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"/></svg>');
	--svgpwv: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"/></svg>');   
}

html, body { margin:0;padding:0;}
html, body, #wrap {height: 100%;}
	body > #wrap {height: auto; min-height: 100%;}
	#logo {outline:0;display: block;text-indent: -3000px;line-height:1;cursor:hand;
		padding-top:20px;
		margin: 0 auto 5px auto;
		height: 33px;
		width: 360px;
		background:url('7thonline_logo.svgz') no-repeat left 20px; 
		background-size: 200px 33px;
    	background: url('7thonline_logo.png') no-repeat left 20px\9;	 
	}
	#main { padding: 65px 20px 0 20px; }  /* must be same height as the footer */
	#footer {position:relative;text-align:center;height:20px;clear:both;margin-top:-20px;color:#fff;} /* negative value of footer height */ 

/* CLEAR FIX*/
	.clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}
	.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
	* html .clearfix { height: 1%;}
	.clearfix {display: block;}
/* End hide from IE-mac */

	body { margin:0;padding:0;color:#000;background-color:#036; }
	body * {font-family:arial,verdana,sans-serif;font-size:12px; }
	:lang(zh-CN) body * { font-family:'Microsoft Yahei','SimSun','宋体','FontAwesome', 'Arial', sans-serif;font-size:12px; }
	#newuserwrapper {padding-left:10px;margin:0 5px;height:400px;overflow-x:hidden;overflow-y:scroll;}
	a:visited, a:active, a:link { color:#69c; }
	.title1, .title2, tt, .hidepublic { display:none }
	h2 {color:#036;font-size:12px;font-weight:bold;display:inline;}
	h2 span {color:#390;}
	form { margin:0px;padding:0px; }
	h1 {display:inline;}
	.publicnone, .none { display:none; }
	.required, .red {color:#f00;font-weight:bold;} 
	div {padding:0;margin:0;}
	
	#errorpage {}
	#er1 {text-align:right;padding:15px 10px;width:620px;display:inline-block;}
	#er2 {padding:15px 10px;width:50px;display:inline-block;}
	.error {color:#f00;}
	.hbg {background-image:url('x.gif') !important;}
	.sb, .mb {
	background: #fff !important;
	    border: 1px solid #0b47aa !important;
	    border-radius: 5px;
	    color:#036;
	    cursor:pointer;
		font-size:11px;
		font-weight:400 !important;
		height:20px !important;
		min-height:20px !important;
		overflow:visible;
		padding:0 .6em;
		vertical-align: middle;
		position:relative;
		text-decoration:none !important;
		text-shadow:none !important;
	    width:auto; 
	    line-height: 0px;
    	box-shadow: none;
	}
.pbtn {background:#0b47aa !important;color: #fff;}	
.delbtn {background:#fff;border-color:#ff4d4e !important;color: #ff4d4e;}	
.pbtn.delbtn { background: #ff4d4e !important;color: #fff; }
.ddbtn, .fb { border-radius: 0 5px 5px 0 !important; }
.pw[disabled="disabled"], .pw[disabled="disabled"]:hover {
		background:#aaa url('../../images/zk/menu/dl-spinner-button-bg4.gif') center center no-repeat !important;
		cursor:wait;
		border-color:#aaa !important;
		}

	#cpasswordwrapper  { width:360px;background:#fff url('ChangePassword.gif') left top no-repeat;}
	#sorrywrapper { width:360px;background:#fff url('weresorry.gif') left top no-repeat;}
	#termswrapper { width:360px;background:#fff url('terms.gif') left top no-repeat;}
	#loginwrapper, #sorrywrapper, #termswrapper, #cpasswordwrapper,#retrievewrapper { padding-top:53px;margin:0 auto 30px auto;border:solid #ccc 1px;}
	#loginwrapper > div, #sorrywrapper > div, #termswrapper > div, #cpasswordwrapper > div{max-height:300px;overflow-x:auto;}
	#termswrapper { padding-top:40px;}
	#loginwrapper div, #sorrywrapper div, #termswrapper div, #cpasswordwrapper div {padding:0 12px 15px 12px;}
	#termswrapper .scroll {border-bottom:solid #ccc 1px;height:300px;overflow-x:hidden;overflow-y:scroll;}
	.split { height: 100%;width:50%;position: fixed;z-index: 1;top: 0;overflow-x: hidden; }
	.left { left:0; }
	.right { right:0; }
	.right iframe { width:100%;height:100%;overflow:hidden;border:none;float: right; }	
	@media only screen and (max-width: 1024px) {
		.left { width: 100%; }
		.right { display: none; }
	}
	
	input[type="text"], input[type="password"]{border: 1px solid #ccc;}
	#passwordviewer {
	    -webkit-appearance: none;
	    border: 1px solid #D9D9D9;
	    border-left: none;
	    border-radius: 0 4px 4px 0;
	    color: #D9D9D9;
	    cursor: pointer;
	    display: inline-block;
	    height: 20px;
	    margin: 0 0 0 -4px;
	    outline: none;
	    padding: 0;
	    position: relative;
	    vertical-align: bottom;
	    width: 26px;
	}
	#passwordviewer::after {
		position: absolute;
		background-color: #999;
		content: "";
	    /* display: block; */
	    right: 8px;
	    top: 10px;
	    width: 15px;
	    height: 15px;
	 	-webkit-mask: var(--svgpwh) no-repeat border-box; 
	    mask: var(--svgpwh) no-repeat;
	}
	#passwordviewer:checked::after {
		position: absolute;
		background-color: #999;
		content: "";
	    right: 8px;
	    top: 10px;
	    width: 15px;
	    height: 15px;
	 	-webkit-mask: var(--svgpwv) no-repeat border-box; 
	    mask: var(--svgpwv) no-repeat; 
	}
	#loginwrapper div.error {
	    color: #f00;
	    font-weight: bold;
	    padding: 5px 0 5px 0;
	}
#wrap {
	justify-content: center;
    align-items: center;
	display: flex;
}
#wrap #loginleft {
	background-repeat: no-repeat;
	background-size: cover;
}

#main{
	width: 600px !important;
	height: 50%;
	border-radius: 8px;
	box-sizing: border-box;
	background-color: #fff;
}

#logo{
	background: url(/images/newUI/7thonline.svg);
	height: 41px;
	width: 261px;
	padding: 0;
	margin-bottom: 32px;
}

#loginwrapper,#retrievewrapper{
	width: 415px;
	border: none;
	padding-top: 0;
}

#loginwrapper *,#retrievewrapper * {
	font-family: "Puhui-Regular", "Puhui-Medium", 'Microsoft Yahei', 'SimSun', '宋体', 'FontAwesome', 'Arial', sans-serif !important;
}

#notice, #notice *{
	font-size: 14px;
	color: #3D3D3D;
	padding: 0 !important;
	margin-bottom: 42px;
	font-family: "Puhui-Medium" !important;
}

#usnbox,#mailbox {
	padding: 0 !important;
	display: flex;
	border-bottom: 1px solid #D8D8D8;
	margin-bottom: 42px;
	align-items: center;
	position: relative;
}

#usernameIcon,#passwordIcon,#emailIcon{
	position: absolute;
	padding: 0 !important;
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-image: url(/images/newUI/sprite.svg);
}

#usernameIcon{ background-position: top -20px left -400px;}
#passwordIcon{ background-position: top -20px left -420px;}
#emailIcon{ background-position: top -40px left -620px;}

#login1, #username, #email {
	width: 100%;
	border: none;
	height: 30px;
	font-size: 14px;
	padding-left: 18px;
}

#password,#passwordviewer {
	border: none;
	height: 30px;
	font-size: 14px;
} 

#password {
	width: 100%;
	padding-left: 18px;
}

#passwordviewer{
	width: 15px;
	height: 33px;
	position: absolute;
	right: 0;
}

#psdbox {
	padding: 0 !important;
	border-bottom: 1px solid #D8D8D8;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	position: relative;
}

#forgetPsd {
	border: none !important;
	padding: 0;
	text-align: right;
	margin-bottom: 42px;
	font-size: 14px;
	background-color: #fff;
}

#loginConfirm,#retrieveConfirm,.confirmBtn{
	height: 53px !important;
	font-size: 20px;
	margin-bottom: 24px;
}

input:focus-visible{
	outline: none;
}