:root {
	--bg: #f3f6f9;
	--primary: #777;
	--promary-lite: #77777730;
}


* { color: var(--primary); }
body { background: url(/public/assets/img/auth-bg.png) var(--bg); }

.login.login-3 .login-forgot,
.login.login-3 .login-signin,
.login.login-3 .login-signup { display: none; }
.login.login-3.login-signin-on .login-signup { display: none; }
.login.login-3.login-signin-on .login-signin { display: block; }
.login.login-3.login-signin-on .login-forgot { display: none; }
.login.login-3.login-signup-on .login-signup { display: block; }
.login.login-3.login-signup-on .login-signin { display: none; }
.login.login-3.login-signup-on .login-forgot { display: none; }
.login.login-3.login-forgot-on .login-signup { display: none; }
.login.login-3.login-forgot-on .login-signin { display: none; }
.login.login-3.login-forgot-on .login-forgot { display: block; }
.login.login-3 .login-form { width: 100%; max-width: 450px; }
.auth--repair,
.auth--repair-ok { width: 100%; text-align: center; }
/*.bg-dark-o-70 { background-color: rgba(254, 254, 254, 0.28) !important; }*/

.login-form {
	border: 1px solid var(--primary-lite);
  box-shadow: 3px 3px 5px 0px rgb(0 0 0 / 30%);
	background-color: #fff;
}
input.form-control {
	border: none !important;
}
input.form-control {
	color: #777 !important;
	border-radius: unset;
	border-bottom: 1px solid var(--promary-lite) !important;
}
#kt_login_signin_submit {
	border: 1px solid var(--primary-lite);
	box-shadow: 3px 3px 5px 0px rgb(0 0 0 / 30%);
	width: 70%;
}
div.errors { width: 100%; }
div.errors ul { padding: 0; }
div.errors li { list-style: none; color: #dc3545; }


@media (max-width: 575.98px) {
	.login-form {
		border: unset;
		box-shadow: unset;
	}

	.login.login-3 .login-form {
		width: 100%;
		max-width: 100%;
	}
}