* {font-family: 'Karla', sans-serif;}

body.login {
	background: #f1f1ff;
	display: flex;
	position: relative;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
}

body.login::before {
	content: '';
	position: absolute;
	display: block;
	width: 80%;
	height: 100%;
	background-image: url('../img/angers.png');
	background-size: cover;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	mix-blend-mode: overlay;
	animation: animBgLogin 1s;
}

@keyframes animBgLogin {
	0% {opacity: 0; transform: translateY(-50%) scale(1.2);}
	50% {opacity: 0; transform: translateY(-50%) scale(1.2);}
	100% {opacity: 1; transform: translateY(-50%) scale(1);}
}

body.login div#login {
	position: relative;
	display: flex;
	background: var(--white);
	width: 25%;
	min-width: 450px;
	height: 100vh;
	flex-direction: column;
	justify-content: center;
/*	box-shadow: var(--shadow-lg);*/
	margin: 0;
	padding: 0 var(--un-xl);
	border-radius: 0 var(--un-lg) var(--un-lg) 0;
}

body.login div#login h1 {
	display: flex;
	align-items: center;
	opacity: 1;
/*	min-height: var(--un-xxl);*/
	margin-bottom: 0 !important;
	border-bottom: var(--border);
	padding-bottom: var(--un);
	animation: animTitle 2s;
}

@keyframes animTitle {
	0% {opacity: 0; transform: translateX(var(--un-lg-n));}
	50% {opacity: 0; transform: translateX(var(--un-lg-n));}
	100% {opacity: 1; transform: translateY(0);}
}

body.login div#login h1 a {display: none;}

body.login div#login h1 #login-logo {
/*	background: var(--blue);*/
/*	width: var(--un-xl);*/
/*	min-width: var(--un-xl);*/
/*	height: var(--un-xl);*/
/*	border-radius: var(--un);*/
/*	padding: var(--un);*/
	margin-bottom: var(--un-xs);
}

body.login div#login h1 #login-logo > div {
	width: 300px;
/*	height: calc(100% - var(--un));*/
/*	padding: var(--un-sm);*/
	background-image: url('../img/logo-da.svg');
	background-size: 100%;
	margin: 0;
}

body.login div#login h1 #login-logo > div::after {
	content: '';
	display: block;
	padding-bottom: 29.7%;
}

body.login div#login h1 #login-title {
	text-align: left;
	margin-left: var(--un);
}

body.login div#login h1 #login-title span {
	display: block;
}

body.login div#login h1 #login-title span:first-child {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--black);
	margin: 0 !important;
}

body.login div#login h1 #login-title span:last-child {
	font-weight: 400;
	font-size: 1rem;
	margin: 0 !important;
	color: var(--blue);
}

body.login div#login form#loginform, #lostpasswordform, #resetpassform {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none !important;
	overflow: visible;
}

#resetpassform .description.indicator-hint {
	margin-bottom: 0 !important;
}

body.login div#login form#loginform p {}

body.login div#login .user-pass1-wrap p {margin-bottom: 0 !important;}

body.login div#login form#loginform p label, body.login div#login form#loginform label, #lostpasswordform label, #resetpassform label {
	color: var(--blue) !important;
	font-weight: 600 !important;
}

body.login div#login form#loginform input, #lostpasswordform input, #resetpassform input {
	padding: calc(var(--un-sm) + var(--un-xs)) var(--un-sm);
	border-radius: var(--un-sm);
	border: var(--border);
	border-width: 2px;
	margin-bottom: 0;
	font-size: 1rem;
	transition: .3s;
}

body.login div#login form#loginform input:not([type=checkbox]), #lostpasswordform input:not([type=checkbox]), #resetpassform input:not([type=checkbox]) {
	height: 50px;
}

#resetpassform input.strong, #resetpassform input.strong:active, #resetpassform input.strong:focus {
	border-color: var(--success) !important;
}

#resetpassform input.good, #resetpassform input.good:active, #resetpassform input.good:focus {
	border-color: var(--warning) !important;
}

#resetpassform input.bad, #resetpassform input.short, #resetpassform input.bad:active, #resetpassform input.short:focus, #resetpassform input.bad:active, #resetpassform input.short:focus {
	border-color: var(--error) !important;
}

body.login div#login form#loginform.shake input[aria-describedby=login_error], #lostpasswordform.shake input {
	border-color: var(--error) !important;
}

body.login div#login form#loginform input:active, body.login div#login form#loginform input:focus, #lostpasswordform input:active, #lostpasswordform input:focus, #resetpassform input:active, #resetpassform input:focus {
	border-color: var(--blue) !important;
	outline: none;
	box-shadow: var(--shadow) !important;
}

body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}

body.login div#login form#loginform p.submit, body.login div#login form#lostpasswordform p.submit, body.login div#login form#resetpassform p.submit {justify-content: flex-end;}

/*body.login div#login form#loginform p.submit input#wp-submit, body.login .button.button-blue, .login .reset-pass-submit .button {
	font-weight: 600 !important;
	padding: var(--un-sm) var(--un) !important;
	background: var(--blue) !important;
	display: inline-flex !important;
	align-items: center !important;
	border: 0 !important;
	font-size: 1rem;
	border-radius: var(--un-sm);
}

body.login div#login form#loginform p.submit input#wp-submit:disabled, body.login .button.button-blue:disabled, .login .reset-pass-submit .button:disabled, body.login div#login form#loginform p.submit input#wp-submit:disabled:hover, body.login .button.button-blue:disabled:hover, .login .reset-pass-submit .button:disabled:hover {
	cursor: not-allowed;
	color: var(--blue) !important;
	background: var(--background-normal) !important;
}*/

.btn#wp-submit {
	float: right;
	transition: background .3s !important;
}

.login .reset-pass-submit .button.wp-generate-pw {
	border: 2px solid var(--blue) !important;
	background: transparent !important;
	color: var(--blue);
	outline: none !important;
	box-shadow: none !important;
	transition: .3s;
}

/* .login .reset-pass-submit .button.wp-generate-pw:hover, .login .reset-pass-submit .button.wp-generate-pw:active, .login .reset-pass-submit .button.wp-generate-pw:focus {
	background: var(--blue-25) !important;
	border-color: var(--blue-25) !important;
}

body.login div#login form#loginform p.submit input#wp-submit:hover, body.login div#login form#loginform p.submit input#wp-submit:focus, body.login div#login form#loginform p.submit input#wp-submit:active, body.login .button.button-blue:hover, body.login .button.button-blue:focus, body.login .button.button-blue:active {
	text-decoration: none;
	background: var(--blue-190) !important;
	box-shadow: none !important;
}  */

#pass-strength-result {
	padding: var(--un-sm) !important;
	margin-top: var(--un-sm) !important;
	border-radius: var(--un-sm);
	border: 0 !important;
	font-weight: 600;
}

#pass-strength-result.short, #pass-strength-result.bad {
	color: var(--error) !important;
	background: var(--error-a);
}

#pass-strength-result.good {
	color: var(--warning) !important;
	background: var(--warning-a);
}

#pass-strength-result.strong {
	color: var(--success) !important;
	background: var(--success-a);
}

.wp-hide-pw {
	height: 54px !important;
	border: 0 !important;
	box-shadow: none !important;
	margin-right: var(--un-xs);
}

.wp-hide-pw .dashicons {
	right: var(--un-xs);
	color: var(--blue) !important;
	transition: .3s;
}

.wp-hide-pw .dashicons::before {
	content: '\F06D0';
	display: inline-block;
	font: normal normal normal 24px/1 "Material Design Icons" !important;
	font-size: inherit;
	text-rendering: auto;
	line-height: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: rotate(360deg);
	transition: var(--transition);
	margin-left: -12px;
	margin-top: -2px;
}

.wp-hide-pw .dashicons.dashicons-hidden::before {
	content: '\F06D1';
}

.wp-hide-pw:hover .dashicons {
	color: var(--blue) !important;
}

#rememberme::before, #pw-weak::before {
	display: none;
}

#rememberme:checked, #pw-weak:checked {
	background: var(--blue);
}

body.login div#login p#nav {
	padding: 0;
	text-align: right;
}

body.login div#login p#nav a {
	color: var(--blue);
}

body.login div#login p#nav a:hover {
	color: var(--blue);
	text-decoration: underline;
	box-shadow: none !important;
}

body.login div#login p#nav a::after {
	content: ' —';
}

body.login div.language-switcher {display: none;}

body.login div#login p#backtoblog {display: none;}

body.login div#login p#backtoblog a {}

p.message {
	background: var(--blue-a) !important;
	color: var(--blue) !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: var(--un-sm);
	padding: var(--un) !important;
	font-weight: 600;
	margin: 0 !important;
	margin-top: var(--un) !important;
}

.login #login_error {
	background: var(--error-a) !important;
	color: var(--error) !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: var(--un-sm);
	font-weight: 600;
	padding: var(--un) !important;
	margin: 0 !important;
	margin-top: var(--un) !important;
}

.login #login-message, .notice {
	background: var(--blue-a) !important;
	color: var(--blue) !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: var(--un-sm);
	font-weight: 600;
	padding: var(--un) !important;
	margin: 0 !important;
	margin-top: var(--un) !important;
}

.privacy-policy-page-link {
	margin: 0 !important;
}

.login .button.wp-hide-pw {
	line-height: 32px;
}

.login .button.wp-hide-pw .dashicons{
	color: var(--grey) !important;
}

.login .button.wp-hide-pw:hover .dashicons {
	color: var(--blue) !important;
}

@media (max-width: 991.98px) {
	body.login {overflow: auto; overflow-x: hidden;}
	body.login div#login {min-width: initial; justify-content: flex-start;width: 100%; border-radius: 0; min-height: 100vh; height: auto; padding-top: var(--un-xl); padding-bottom: var(--un-lg); overflow-x: hidden !important;}
}

@media (max-width: 575.98px) {
	body.login div#login {padding-left: var(--un-lg); padding-right: var(--un-lg);}
	body.login div#login #forgetmenot {display: block; width: 100%;}
}