/*css for account login client css*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*{
	box-sizing:border-box;
}

body{
	margin: 0px;
	font-family: 'Inter', sans-serif;
}

header{
	width:100%;
	height:auto;
	min-height:70px;
	border-bottom:1px solid #e8e8e8;
	background:#fff;
	padding:10px 16px;
}

header article{
	width:auto !important;
}

header article img{
	max-width:140px;
	height:auto;
}

section.form-container{
	width: 100%;
	min-height:calc(100vh - 70px);
	border:0;
	background:linear-gradient(135deg,#f8faf9 0%,#e8f5ec 100%);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px 16px;
}

section.form-container img{
	display:none;
}

section.form-container>div{
	width:100%;
	max-width:460px;
	display:flex;
	flex-direction:column;
	align-items:center;
}

section.form-container div h4{
	color:#1a1a1a;
	font-weight:700;
}

section.form-container div label{
	color:#333;
	font-weight:600;
}

section.form-container div p{
	color:#666;
}

form.form-login{
	width:100%;
	height:auto;
	border:0px;
	margin:0 auto;
	background:#fff;
	padding:32px 28px;
	border-radius:16px;
	box-shadow:0 8px 30px rgba(0,0,0,0.08);
}

form.form-login>label{
	width: 100%;
	height:auto;
	border:0px;
	margin:14px 0px 4px 0px;
	font-size:14px;
	color:#333;
	font-weight:600;
	display:block;
}

form.form-login input[type="text"],
form.form-login input[type="email"],
form.form-login input[type="password"] {
	width:100%;
	height:46px;
	margin:4px 0px;
	outline: 0px;
	padding:0 14px;
	border-radius:10px;
	border:2px solid #e0e0e0;
	font-size:15px;
	background:#fafafa;
	transition:border-color 0.2s,background 0.2s;
	box-sizing:border-box;
	font-family:inherit;
}

form.form-login input[type="text"]:focus,
form.form-login input[type="email"]:focus,
form.form-login input[type="password"]:focus {
	border-color:#0A7D3F;
	background:#fff;
	box-shadow:0 0 0 3px rgba(10,125,63,0.06);
}

form.form-login>input[type='submit']{
	background:linear-gradient(135deg,#0A7D3F,#0D9E4F);
	border:0px;
	color:#fff;
	margin:20px 0px 0;
	width:100%;
	height:48px;
	outline: 0px;
	border-radius:12px;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
	letter-spacing:0.5px;
	transition:opacity 0.2s;
}

form.form-login>input[type='submit']:hover{
	opacity:0.9;
}

form.form-login>input[type='submit']:disabled{
	background: #bbbbbb;
	opacity:1;
}

.password-wrapper{
	position:relative;
	width:100%;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"]{
	padding-right:44px !important;
}

.toggle-password{
	position:absolute;
	right:14px;
	top:50%;
	transform:translateY(-50%);
	cursor:pointer;
	color:#999;
	font-size:18px;
	z-index:2;
	background:none;
	border:none;
	padding:0;
	line-height:1;
	user-select:none;
}

.toggle-password:hover{
	color:#0A7D3F;
}

@media(max-width:480px){
	header{
		min-height:60px;
		padding:8px 12px;
	}
	header article img{
		max-width:120px;
	}
	section.form-container{
		padding:16px 12px;
		min-height:calc(100vh - 60px);
	}
	form.form-login{
		padding:24px 18px;
		border-radius:14px;
	}
	form.form-login>label{
		font-size:13px;
	}
	form.form-login input[type="text"],
	form.form-login input[type="email"],
	form.form-login input[type="password"]{
		height:44px;
		font-size:14px;
		padding:0 12px;
	}
	form.form-login>input[type='submit']{
		height:46px;
		font-size:15px;
	}
}