/*
 CSS ONLY FOR LOGIN PAGE
 */
body{
	min-height:100vh;
	background-color:#0b0f18;
	background-image:linear-gradient(120deg, rgba(12, 16, 24, 0.85), rgba(12, 16, 24, 0.55)), url("../img/home-quote.jpg");
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
	color:#f5f5f5;
	position:relative;
}
body::before{
	content:"";
	position:fixed;
	inset:0;
	background-image:radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 45%), radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.06), transparent 40%);
	pointer-events:none;
	z-index:0;
}

.login-background{
	min-height:100vh;
	background-size:cover;
	background-position:center;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:40px 0 60px;
	position:relative;
	z-index:1;
}
.login-background::before{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(11, 15, 24, 0.55);
}

.login-panel{
	width:100%;
	position:relative;
	z-index:1;
}

.login-shell{
	min-height:100vh;
	display:flex;
	align-items:center;
	padding:40px 0 60px;
	position:relative;
	z-index:1;
}
.login-shell__inner{
	width:100%;
}

/* login container */
.login-logo-container{
	padding:0;
	margin:0 0 12px 0;
}
.login-logo-container span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:72px;
	height:72px;
	background-color:rgba(255, 255, 255, 0.85);
	border-radius:18px;
	box-shadow:0 12px 25px rgba(12, 16, 24, 0.25);
}
.login-logo-container span img{
	width:52px;
}
.login-main-title{
	font-size:32px;
	color:#10131a;
	line-height:1.1;
	margin:0 0 18px 0;
	font-weight:700;
	letter-spacing:0.5px;
}
.login-container{
	background-color:rgba(255, 255, 255, 0.92);
	padding:40px 32px 32px;
	border-radius:22px;
	border:solid 1px rgba(255, 255, 255, 0.32);
	box-shadow:0 24px 60px rgba(8, 12, 20, 0.45);
	backdrop-filter:blur(8px);
	color:#1b1f2a;
	animation:loginCardIn 600ms ease-out both;
}
.login-header{
	margin-bottom:6px;
}
.login-logo img{
	max-width:140px;
	width:100%;
	height:auto;
}

/* login form */
.login-title{
	font-size:12px;
	line-height:16px;
	margin:8px 0 22px 0;
	color:#6b7481;
	letter-spacing:2px;
	text-transform:uppercase;
}
.login-input-row{
	margin:0 0 16px 0;
}
.login-input{
	border:solid 1px rgba(16, 20, 32, 0.15);
	padding:12px 14px;
	width:100%;
	font-size:15px;
	border-radius:12px;
	background-color:#fff;
	transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.login-input:focus{
	border-color:var(--secundary-color);
	box-shadow:0 0 0 3px rgba(0, 0, 0, 0.08);
	outline:none;
}
.login-input-row-checkbox{
	color:#555;
	margin:30px 0 0 0;
}
.login-input-row-checkbox label{
	font-size:14px;
}
.login-input-row .login-input-row{
	margin:10px 0 0 0;
}
.login-input-row label{
	color:#6b7481;
	font-size:13px;
}
.btn-login{
	background-color:var(--secundary-color);
	color:var(--secundary-color-contrast);
	padding:14px 18px;
	font-size:12px;
	text-transform:uppercase;
	border:none;
	border-radius:999px;
	width:100%;
	letter-spacing:2px;
	font-weight:600;
	transition:transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
.btn-login:hover{
	background-color:var(--secundary-color-hover);
	transform:translateY(-1px);
	box-shadow:0 12px 20px rgba(12, 16, 24, 0.2);
}
.login-actions{
	margin-top:22px;
}

/* forgot password */
.forgot-password a{
	color:#6b7481;
	font-size:12px;
	display:block;
	padding:10px 0 0;
}

.qr-row{
	margin:8px 0 14px;
}
.qr-wrap{
	display:inline-block;
	padding:12px;
	background-color:#fff;
	border-radius:12px;
	border:solid 1px rgba(16, 20, 32, 0.15);
	box-shadow:0 10px 24px rgba(12, 16, 24, 0.12);
}
.qr-desc{
	margin-top:10px;
	font-size:13px;
	color:#6b7481;
}

@keyframes loginCardIn{
	from{
		opacity:0;
		transform:translateY(18px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
}

@media(max-width:767px){
	.login-background{
		padding:30px 0 40px;
	}
	.login-shell{
		padding:30px 0 40px;
	}
	.login-logo img{
		max-width:120px;
	}
	.login-container{
		padding:24px 20px 22px;
	}
	.login-main-title{
		font-size:26px;
	}
}