/*
 CSS ONLY FOR LOGIN PAGE
 */
body{
	background-color:var(--primary-color);
	background-image:none;
}

.login-background{
	min-height:100vh;
	background-image:
		linear-gradient(140deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.45) 100%),
		url('../login/bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display:flex;
	align-items:center;
}
.login-panel{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:32px 18px 40px;
}
.login-panel .row{
	width:100%;
}
.login-logo img{
	max-width:180px;
	width:100%;
	height:auto;
	margin-bottom:16px;
}

/* login container */
.login-logo-container{
	padding:15px;
	margin-top:30px;
}
.login-logo-container span{
	display:inline-block;
	padding:20px;
	background-color:var(--secundary-color);
	border-radius:50%;
}
.login-logo-container span img{
	width:70px;
}
.login-main-title{
	font-size:40px;
	color:var(--primary-color-contrast);
	line-height:40px;
	margin:0 0 30px 0;
	font-weight:bold;
}
.login-container{
	background-color:#fff;
	padding:28px 22px 24px;
	border-radius:16px;
	border:solid 1px rgba(0,0,0,0.07);
	box-shadow:0 16px 36px rgba(0,0,0,0.16);
	max-width:440px;
	width:100%;
}
.remember-row{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:14px;
	color:#555;
}
.login-panel .alert-box{
	margin-top:15px;
}
@media(max-width:767.98px){
	.login-panel{
		justify-content:center;
		padding:28px 16px 36px;
	}
	.login-panel .row{
		justify-content:center !important;
	}
}
@media(min-width:768px){
	.login-panel{
		padding:60px 30px;
	}
	.login-container{
		padding:36px 34px 30px;
	}
	.login-logo img{
		max-width:210px;
	}
}

/* login form */
.login-title{
	font-size:20px;
	line-height:1.3;
	margin:0 0 18px 0;
	color:#333;
}
.login-input-row{
	margin:0 0 12px 0;
}
.login-input{
	border:solid 1px #d7d7d7;
	padding:12px 14px;
	width:100%;
	font-size:16px;
	border-radius:10px;
	background-color:#fff;
}
.login-input:focus{
	outline:none;
	border-color:var(--primary-color);
	box-shadow:0 0 0 3px rgba(0,0,0,0.06);
}
.login-input-row-checkbox{
	color:#555;
	margin:30px 0 0 0;
}
.login-input-row-checkbox label{
	font-size:14px;
}
.btn-login{
	background-color:var(--secundary-color);
	color:var(--secundary-color-contrast);
	padding:14px 16px;
	font-size:14px;
	text-transform:uppercase;
	border:none;
	border-radius:10px;
	width:100%;
	letter-spacing:0.5px;
	box-shadow:0 8px 18px rgba(0,0,0,0.12);
}
.btn-login:hover{
	background-color:var(--secundary-color-hover);
}
.login-input-row.text-right{
	text-align:left;
}

.qr-row{
	margin:10px 0 14px;
}
.qr-wrap{
	display:inline-block;
	background-color:#fff;
	border:1px solid #e2e2e2;
	border-radius:12px;
	padding:12px;
	box-shadow:0 8px 18px rgba(0,0,0,0.08);
}
.qr-wrap img{
	width:160px;
	max-width:60vw;
	height:auto;
}
.qr-desc{
	font-size:13px;
	color:#555;
	line-height:1.4;
	margin-top:10px;
}

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