/* Loaded only on WordPress login, registration and password reset screens. */
body.login {
	background: #f5f7f4;
	color: #102637;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	color-scheme: light;
}

body.login #login {
	width: min(380px, calc(100% - 40px));
	padding: clamp(32px, 8vh, 80px) 0 24px;
}

body.login #login h1 a {
	background-image: url("../images/flyttdrift-logo.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 232px;
	max-width: 100%;
	height: 52px;
	margin: 0 auto 30px;
}

body.login #login form {
	padding: 28px;
	border: 1px solid #dbe4e4;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(7, 26, 43, .08);
}

body.login label { color: #102637; }
body.login .input {
	border-color: #7c919b;
	border-radius: 8px;
	background: #fff;
	color: #102637;
}
body.login .input::placeholder { color: #526977; opacity: 1; }
body.login .input:focus {
	border-color: #087e6c;
	box-shadow: 0 0 0 1px #087e6c;
}

body.login .button-primary {
	background: #1dc7ad;
	border-color: #1dc7ad;
	border-radius: 8px;
	color: #071a2b;
	font-weight: 600;
	text-shadow: none;
	box-shadow: none;
}
body.login .button-primary:hover,
body.login .button-primary:focus {
	background: #c8f56b;
	border-color: #071a2b;
	color: #071a2b;
}
body.login .button-secondary { color: #087466; border-color: #087466; background: #fff; }
body.login .button-secondary:hover { color: #05574d; border-color: #05574d; background: #e8f8f4; }
body.login :is(.button-primary, .button-secondary):disabled {
	color: #455e6b !important;
	background: #edf1f2 !important;
	border-color: #7c919b !important;
	opacity: 1;
}
body.login #login :is(.message, .success, .notice, #login_error) { background: #fff; color: #102637; }
body.login #login_error { border-left-color: #a82727; }
body.login .message a, body.login #login_error a { color: #087466; text-decoration: underline; }
body.login #login .message,
body.login #login .success { border-left-color: #087e6c; border-radius: 0 8px 8px 0; }
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-link { color: #345463; }
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-link:hover { color: #087466; text-decoration: underline; }
body.login #pass-strength-result { color: #102637; }
body.login .language-switcher select { color: #102637; background-color: #fff; border-color: #7c919b; }
body.login .wp-hide-pw { color: #087466; }
body.login #login :is(label, .description, .indicator-hint, #reg_passmail) { color: #455e6b; }
body.login a:focus-visible,
body.login button:focus-visible,
body.login .button:focus-visible { outline: 2px solid #071a2b; outline-offset: 3px; }

@media (max-width: 400px) {
	body.login #login form { padding: 20px; }
}

/* Native reset fields stay visible and empty without JavaScript as well.
   Core owns pass1/pass2, the reset key and form submission. */
body.login.fd-password-reset #resetpassform :is(.user-pass1-wrap, .user-pass2-wrap) {
	display: block !important;
	visibility: visible !important;
}
body.login.fd-password-reset #resetpassform :is(.wp-generate-pw, .wp-hide-pw, .pw-weak, #pass-strength-result, .indicator-hint) { display: none !important; }
body.login.fd-password-reset #resetpassform .wp-pwd { display: block !important; }
body.login.fd-password-reset #resetpassform :is(#pass1, #pass2) {
	display: block !important;
	width: 100%;
	min-height: 48px;
	margin: 8px 0 20px;
	padding: 10px 12px;
	font-size: 20px;
	color: #102637;
	background: #fff;
}
body.login.fd-password-reset #resetpassform label { color: #102637; font-weight: 600; }
body.login.fd-password-reset #resetpassform .fd-reset-password-help { color: #455e6b; font-size: 13px; line-height: 1.6; }
body.login.fd-password-reset #resetpassform .fd-reset-password-error { margin: 14px 0; padding: 12px; background: #fff0f0; color: #a82727; border-radius: 8px; }
body.login.fd-password-reset #resetpassform .fd-reset-password-error[hidden] { display: none !important; }
body.login.fd-password-reset #resetpassform [aria-invalid="true"] { border: 2px solid #a82727; }
body.login.fd-password-reset #resetpassform .reset-pass-submit { display: block; }
body.login.fd-password-reset #resetpassform #wp-submit { width: 100%; min-height: 46px; }

/* Theme-independent portal entrance. Core and the MFA provider own all form fields. */
body.login { background: #f6f8f9; min-height: 100vh; }
body.login #login { width: min(430px, calc(100% - 32px)); box-sizing: border-box; margin: 0 auto; padding-top: clamp(28px, 7vh, 72px); }
body.login #login h1 a { width: 190px; height: 46px; margin: 0 auto 28px; background-position: center; }
body.login #login .fd-login-heading { margin-bottom: 20px; }
body.login #login .fd-login-heading h2 { color: #122f3d; font-size: 28px; letter-spacing: -.7px; margin: 0 0 10px; font-weight: 650; }
body.login #login .fd-login-heading p { color: #506976; font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
body.login #login form { padding: 28px; border-radius: 14px; border-color: #dce5e8; box-shadow: 0 6px 24px rgba(16, 45, 60, .04); }
body.login #login form p { line-height: 1.6; }
body.login #login label { font-size: 14px; font-weight: 600; }
body.login #login .input { min-height: 48px; padding: 10px 12px; font-size: 18px; border-color: #a2b4bd; margin-top: 8px; }
body.login #login .input.authcode { text-align: center; letter-spacing: .14em; font-size: 26px; }
body.login #login .submit { margin-top: 18px; float: none; }
body.login #login .button-primary { min-height: 46px; width: 100%; float: none; background: #087e6c; border-color: #087e6c; color: #fff; font-size: 15px; }
body.login #login .button-primary:hover { background: #056958; border-color: #056958; }
body.login #login .forgetmenot { float: none; margin: 10px 0 18px; }
body.login #login .forgetmenot label { font-weight: 400; }
body.login #login .two-factor-prompt { margin: 0 0 18px; color: #405e6d; }
body.login .language-switcher { width: 100%; margin: 0 auto; padding-bottom: 24px; }
body.login #loginform #nav { clear: both; margin: 14px 0 0; padding: 0; text-align: center; }
body.login #loginform #nav a { display: inline-block; padding: 7px 2px; }
body.login #backtoblog { text-align: center; }
body.login #login .fd-login-tabs { display: flex; gap: 24px; align-items: baseline; border-bottom: 1px solid #dce5e8; }
body.login #login .fd-login-tabs h2 { margin: 0; }
body.login #login .fd-login-tabs :is(a,span) { display: inline-block; padding: 0 0 13px; font-size: 24px; font-weight: 600; line-height: 1.3; text-decoration: none; color: #506976; }
body.login #login .fd-login-tabs [aria-current="page"] { color: #122f3d; border-bottom: 3px solid #087e6c; }
body.login #login .fd-login-tabs a:hover { color: #087e6c; }
body.login #loginform .fd-forgot-password { clear: both; margin: 12px 0 0; text-align: left; }
body.login #loginform .fd-forgot-password a { display: inline-flex; min-height: 34px; align-items: center; font-size: 14px; font-weight: 400; color: #455e6b; text-decoration: none; }
body.login #loginform .fd-forgot-password a:hover { color: #087466; text-decoration: underline; }
body.login.interim-login #login { width: min(430px, calc(100% - 32px)); margin: auto; }
@media (max-width: 820px) {
 body.login #login { width: min(430px, calc(100% - 32px)); margin: 0 auto; padding-top: 32px; }
 body.login .language-switcher { width: 100%; margin-left: 0; }
 body.login #login h1 a { margin-bottom: 28px; }
}
@media (max-width: 400px) {
 body.login #login form { padding: 20px; }
 body.login #login .fd-login-heading h2 { font-size: 26px; }
}