:root{
	--primary:#0F5BA7;
	--secondary:#23B6D6;
	--accent:#F4C542;
	--dark:#23354d;
	--border:#E7EDF5;
	--radius:18px;
}

.wrap-login100{
	width:470px;
	background:rgba(255,255,255,.90);
	backdrop-filter:blur(20px);
	border-radius:28px;
	box-shadow:
	0 25px 60px rgba(0,0,0,.15);
	padding:45px;
}

.login100-more{
	position:relative;
}

.login100-form{
	width:100%;
}

.login100-form-title img{
	width:110px;
	transition:.4s;
}

.login100-form-title img:hover{
	transform:scale(1.05);
}

.label-input100{
	font-size:14px;
	font-weight:600;
	color:#52637b;
	margin-bottom:8px;
	display:block;
}

.wrap-input100{
	margin-bottom:22px;
	border:none;
}

.input100{
	height:58px;
	border-radius:16px;
	border:1px solid var(--border);
	background:#f8fafc;
	padding-left:55px;
	padding-right:20px;
	font-size:15px;
	transition:.3s;
}

.input100:focus{
	border-color:var(--primary);
	background:white;
	box-shadow:0 0 0 4px rgba(15,91,167,.12);
}

.glyphicon,
.bi{
	color:#6b7b92;
}

.login100-form-btn{
	height:58px;
	border-radius:16px;
	background:linear-gradient(
		135deg,
		var(--primary),
		var(--secondary)
	);
	font-size:16px;
	font-weight:600;
	transition:.35s;
	border:none;
}

.login100-form-btn:hover{
	transform:translateY(-2px);
	box-shadow:0 15px 25px rgba(15,91,167,.35);
}

.login100-form-bgbtn{
	display:none;
}

@media(max-width:768px){
	.login100-more{
		display:none;
	}

	.wrap-login100{
		width:95%;
		margin:auto;
		padding:30px;
	}
}

.logo-login{
	width:95px;
	margin-bottom:15px;
}

.login-title{
	font-weight:700;
	font-size:34px;
	color:#163b69;
	margin:0;
}

.login-subtitle{
	margin-top:8px;
	font-size:15px;
	color:#666;
}

.login-school{
	font-size:13px;
	color:#0F5BA7;
	font-weight:600;
	margin-top:4px;
	margin-bottom:30px;
}

.modern-group{
	margin-bottom:22px;
}

.modern-group label{
	font-weight:600;
	font-size:14px;
	margin-bottom:8px;
	display:block;
	color:#4d5f75;
}

.input-icon{
	position:relative;
}

.input-icon .bi:first-child{
	position:absolute;
	left:18px;
	top:18px;
	font-size:18px;
	color:#7a8ba3;
	z-index:3;
}

.password-toggle{
	position:absolute;
	right:18px;
	top:18px;
	cursor:pointer;
	font-size:18px;
	color:#6d7b8c;
}

.captcha-box{
	display:flex;
	align-items:center;
	gap:10px;
}

.captcha-number{
	flex:1;
	height:55px;
	background:#f6f8fb;
	border-radius:14px;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:22px;
	font-weight:bold;
	border:1px solid #dce5ef;
	letter-spacing:4px;
}

.reload-btn{
	width:55px;
	height:55px;
	border:none;
	border-radius:14px;
	background:#0F5BA7;
	color:white;
	transition:.3s;
}

.reload-btn:hover{
	transform:rotate(180deg);
	background:#23B6D6;
}

.back-home{
	text-decoration:none;
	font-weight:500;
	color:#0F5BA7;
}

.login-footer{
	margin-top:30px;
	text-align:center;
	font-size:13px;
	color:#888;
	line-height:22px;
}

.background-pattern{

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

background-image:

radial-gradient(circle at 25% 25%,rgba(255,255,255,.12) 2px,transparent 2px);

background-size:45px 45px;

opacity:.45;

z-index:5;

}

.background-gradient{

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

background:

linear-gradient(

120deg,

rgba(6,43,87,.45),

rgba(0,0,0,.10),

rgba(32,170,214,.30)

);

z-index:4;

}

@keyframes loginCard{

0%{

opacity:0;

transform:

translateX(40px)

scale(.95);

}

100%{

opacity:1;

transform:

translateX(0)

scale(1);

}

}

.wrap-login100{

animation:

loginCard .8s ease;

}

.wrap-login100:hover{

transform:translateY(-3px);

transition:.35s;

box-shadow:

0 40px 80px rgba(0,0,0,.18);

}

.system-status{

margin-top:10px;

margin-bottom:30px;

font-size:13px;

color:#667;

}

.status-dot{

display:inline-block;

width:10px;

height:10px;

border-radius:50%;

background:#29c76f;

margin-right:8px;

box-shadow:

0 0 10px #29c76f;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(41,199,111,.6);

}

100%{

box-shadow:0 0 0 12px rgba(41,199,111,0);

}

}

.input-icon:focus-within{

transform:translateY(-2px);

transition:.25s;

}

.login100-form-btn{

overflow:hidden;

position:relative;

}

.login100-form-btn:after{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

rgba(255,255,255,.25);

transform:skewX(-30deg);

transition:.6s;

}

.login100-form-btn:hover:after{

left:130%;

}

#clock-login{

font-size:28px;

font-weight:600;

margin:12px 0;

color:#0F5BA7;

}