/* WordPress login in the dashboard's seller brand. Haley uses the navy hero and the reversed wordmark.
   Recruiters Websites uses the pale wash and the square mark. */

@font-face {
	font-display: swap;
	font-family: "HMG DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "HMG Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "HMG Lato";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/lato-latin-400.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "HMG Lato";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/lato-latin-700.woff2") format("woff2");
}

body.hmg-st-login {
	--hmg-login-deep: linear-gradient(150deg, #0b1a30 0%, #10233f 42%, #3a2a78 100%);
	--hmg-login-paper: #f6f4f0;
	--hmg-login-ink: #111827;
	--hmg-login-button: #c2410c;
	--hmg-login-button-hover: #fb6615;
	background: var(--hmg-login-paper);
	color: var(--hmg-login-ink);
	font-family: "HMG DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.hmg-st-login #login {
	isolation: isolate;
	max-width: calc(100% - 32px);
	padding-top: 8vh;
	position: relative;
	width: 400px;
}

/* One shadow for the whole box. Shadows on each piece would paint over the piece above. */
body.hmg-st-login #login::before {
	border-radius: 28px;
	bottom: 0;
	box-shadow: var(--hmg-login-shadow, 0 24px 60px -28px rgba(16, 35, 63, 0.45));
	content: "";
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 8vh;
	z-index: -1;
}

body.hmg-st-login #login h1 {
	background: var(--hmg-login-deep);
	border-radius: 28px 28px 0 0;
	margin: 0;
	padding: 32px 24px 24px;
}

body.hmg-st-login #login h1 a {
	background-image: var(--hmg-login-logo);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 52px;
	margin: 0 auto;
	width: 220px;
}

body.hmg-st-login--mark #login h1 a {
	border-radius: 8px;
	height: 72px;
	width: 72px;
}

body.hmg-st-login .pw-weak {
	display: none !important;
}

body.hmg-st-login #resetpassform {
	background: #fff;
	border: 0;
	border-radius: 0 0 28px 28px;
	box-shadow: none;
	margin-top: 0;
	padding: 26px 24px 22px;
}

body.hmg-st-login #login_error,
body.hmg-st-login .message,
body.hmg-st-login .notice,
body.hmg-st-login .success {
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--hmg-login-ink);
	margin: 0;
	padding: 22px 24px 8px;
}

body.hmg-st-login #login_error p,
body.hmg-st-login .message p,
body.hmg-st-login .notice p,
body.hmg-st-login .success p {
	margin: 0;
}

body.hmg-st-login.hmg-st-login-locked-out #loginform,
body.hmg-st-login.hmg-st-login-locked-out #login-message,
body.hmg-st-login.hmg-st-login-locked-out #nav,
body.hmg-st-login.hmg-st-login-locked-out #backtoblog {
	display: none;
}

/* WordPress core leaves 24px above and below forms; that reads as a gap after a notice. */
body.hmg-st-login #loginform,
body.hmg-st-login #registerform,
body.hmg-st-login #lostpasswordform {
	background: #fff;
	border: 0;
	box-shadow: none;
	margin: 0;
}

body.hmg-st-login label {
	color: var(--hmg-login-ink);
	font-weight: 600;
}

body.hmg-st-login .button-primary {
	background: var(--hmg-login-button);
	border-color: var(--hmg-login-button);
	border-radius: 999px;
	box-shadow: none;
	font-weight: 600;
	min-height: 40px;
	text-shadow: none;
}

body.hmg-st-login .button-primary:hover,
body.hmg-st-login .button-primary:focus {
	background: var(--hmg-login-button-hover);
	border-color: var(--hmg-login-button-hover);
	box-shadow: 0 4px 14px rgba(251, 102, 21, 0.35);
}

/* The links under the form are the box's footer, so the box closes on every step. */
body.hmg-st-login #nav,
body.hmg-st-login #backtoblog,
body.hmg-st-login .privacy-policy-page-link {
	background: var(--hmg-login-footer, #faf8f5);
	font-size: 13px;
	margin: 0;
	padding: 4px 24px;
	text-align: center;
}

body.hmg-st-login #nav,
body.hmg-st-login #backtoblog {
	border-top: 1px solid var(--hmg-login-line, #ece8e1);
	padding-top: 16px;
}

body.hmg-st-login #nav ~ #backtoblog {
	border-top: 0;
	padding-top: 4px;
}

body.hmg-st-login #backtoblog:last-child,
body.hmg-st-login .privacy-policy-page-link:last-child {
	border-radius: 0 0 28px 28px;
	padding-bottom: 18px;
}

body.hmg-st-login .privacy-policy-page-link a {
	margin: 0;
}

body.hmg-st-login #loginform:has(~ #nav, ~ #backtoblog),
body.hmg-st-login #registerform:has(~ #nav, ~ #backtoblog),
body.hmg-st-login #lostpasswordform:has(~ #nav, ~ #backtoblog),
body.hmg-st-login #resetpassform:has(~ #nav, ~ #backtoblog),
body.hmg-st-login .hmg-st-haley-oauth.is-placed:has(~ #nav, ~ #backtoblog) {
	border-radius: 0;
	margin-bottom: 0;
}

body.hmg-st-login #nav a,
body.hmg-st-login #backtoblog a,
body.hmg-st-login .privacy-policy-page-link a {
	color: var(--hmg-admin-accent, #332a86);
}

body.hmg-st-login--recruiters_websites {
	--hmg-login-paper: #f3f5f8;
	--hmg-login-ink: #333;
	--rw-blue: #3492c7;
	--rw-purple-deep: #63389a;
	--hmg-login-deep: linear-gradient(180deg, #fff 0%, #e6f2f8 100%);
	--hmg-login-shadow: 0 12px 32px -18px rgba(30, 45, 80, 0.18);
	background: var(--hmg-login-paper);
	color: var(--hmg-login-ink);
	font-family: "HMG Lato", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.hmg-st-login--recruiters_websites #login h1 {
	border: 1px solid #e2e8ee;
	border-bottom: 0;
	box-shadow: none;
}

body.hmg-st-login--recruiters_websites #login_error,
body.hmg-st-login--recruiters_websites .message,
body.hmg-st-login--recruiters_websites .notice,
body.hmg-st-login--recruiters_websites .success {
	border-left: 1px solid #e2e8ee;
	border-right: 1px solid #e2e8ee;
}

body.hmg-st-login--recruiters_websites #loginform,
body.hmg-st-login--recruiters_websites #registerform,
body.hmg-st-login--recruiters_websites #lostpasswordform,
body.hmg-st-login--recruiters_websites #resetpassform {
	border: 1px solid #e2e8ee;
	border-top: 0;
}

body.hmg-st-login--recruiters_websites .button-primary {
	background: linear-gradient(90deg, var(--rw-blue) 0%, var(--rw-purple-deep) 100%);
	border: 0;
	font-weight: 700;
}

body.hmg-st-login--recruiters_websites .button-primary:hover,
body.hmg-st-login--recruiters_websites .button-primary:focus {
	background: linear-gradient(90deg, var(--rw-blue) 0%, var(--rw-purple-deep) 100%);
	border: 0;
	box-shadow: 0 8px 18px -8px rgba(99, 56, 154, 0.6);
	filter: brightness(1.06);
}

body.hmg-st-login--recruiters_websites #nav,
body.hmg-st-login--recruiters_websites #backtoblog,
body.hmg-st-login--recruiters_websites .privacy-policy-page-link {
	--hmg-login-footer: #f7f9fb;
	--hmg-login-line: #e2e8ee;
	border-left: 1px solid #e2e8ee;
	border-right: 1px solid #e2e8ee;
}

body.hmg-st-login--recruiters_websites #backtoblog:last-child,
body.hmg-st-login--recruiters_websites .privacy-policy-page-link:last-child {
	border-bottom: 1px solid #e2e8ee;
}

body.hmg-st-login--recruiters_websites #loginform:has(~ #nav, ~ #backtoblog),
body.hmg-st-login--recruiters_websites #registerform:has(~ #nav, ~ #backtoblog),
body.hmg-st-login--recruiters_websites #lostpasswordform:has(~ #nav, ~ #backtoblog),
body.hmg-st-login--recruiters_websites #resetpassform:has(~ #nav, ~ #backtoblog),
body.hmg-st-login--recruiters_websites .hmg-st-haley-oauth.is-placed:has(~ #nav, ~ #backtoblog) {
	border-bottom: 0;
}

body.hmg-st-login--recruiters_websites #nav a,
body.hmg-st-login--recruiters_websites #backtoblog a,
body.hmg-st-login--recruiters_websites .privacy-policy-page-link a {
	color: #6a4c93;
}

/* One field, so the button is the next step, not a control floating at the right. */
body.hmg-st-login #lostpasswordform p.submit {
	clear: both;
	float: none;
	margin: 8px 0 0;
	padding: 0;
}

body.hmg-st-login #lostpasswordform .hmg-st-submit {
	display: block;
	float: none;
	font-size: inherit;
	line-height: inherit;
	width: 100%;
}

body.hmg-st-login #lostpasswordform #wp-submit {
	float: none;
	width: 100%;
}

body.hmg-st-login .hmg-st-submit {
	display: inline-block;
	float: right;
	font-size: 0;
	line-height: 0;
	position: relative;
}

body.hmg-st-login .hmg-st-submit .button-primary {
	float: none;
	vertical-align: top;
}

body.hmg-st-login .button-primary.is-pending,
body.hmg-st-login .button-primary.is-pending:hover,
body.hmg-st-login .button-primary.is-pending:focus {
	color: transparent;
	cursor: progress;
	pointer-events: none;
}

body.hmg-st-login button.button-primary.is-pending {
	position: relative;
}

body.hmg-st-login button.button-primary.is-pending .hmg-st-pending {
	top: 50%;
	left: 50%;
}

body.hmg-st-login .hmg-st-pending {
	box-sizing: border-box;
	position: absolute;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	pointer-events: none;
	animation: hmg-st-spin 0.7s linear infinite;
}

@keyframes hmg-st-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.hmg-st-login .hmg-st-pending {
		animation: none;
		border-color: #fff;
	}
}

.hmg-st-haley-oauth {
	display: none;
}

body.no-js .hmg-st-haley-oauth,
.hmg-st-haley-oauth.is-placed {
	display: block;
}

body.hmg-st-login #loginform.hmg-st-has-haley {
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	padding-bottom: 4px;
	position: relative;
	z-index: 1;
}

body.hmg-st-login--recruiters_websites #loginform.hmg-st-has-haley {
	border-bottom: 0;
}

.hmg-st-haley-oauth.is-placed {
	display: flow-root;
	background: #fff;
	border-radius: 0 0 28px 28px;
	margin: 0 0 16px;
	padding: 0 24px 22px;
}

body.hmg-st-login--recruiters_websites .hmg-st-haley-oauth.is-placed {
	border: 1px solid #e2e8ee;
	border-top: 0;
}

.hmg-st-haley-oauth__or {
	align-items: center;
	color: #6b7280;
	display: flex;
	font-size: 12px;
	gap: 12px;
	margin: 4px 0 14px;
	text-transform: lowercase;
}

.hmg-st-haley-oauth__or::before,
.hmg-st-haley-oauth__or::after {
	background: #e5e7eb;
	content: "";
	flex: 1;
	height: 1px;
}

.hmg-st-haley-oauth__button {
	align-items: center;
	background: #fff;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	box-shadow: none;
	box-sizing: border-box;
	color: #10233f;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	text-decoration: none;
	width: 100%;
}

.hmg-st-haley-oauth__button:hover,
.hmg-st-haley-oauth__button:focus {
	background: #f8fafc;
	border-color: #98a2b3;
	color: #10233f;
}

.hmg-st-haley-oauth__mark {
	display: block;
	flex: 0 0 auto;
	height: 24px;
	width: 24px;
}

body.hmg-st-email-code .hmg-st-haley-oauth,
body.hmg-st-password-upgrade .hmg-st-haley-oauth {
	display: none;
}

body.hmg-st-haley-popup #loginform,
body.hmg-st-haley-popup #nav,
body.hmg-st-haley-popup #backtoblog,
body.hmg-st-haley-popup .language-switcher,
body.hmg-st-haley-popup .privacy-policy-page-link {
	display: none;
}

body.hmg-st-haley-popup .hmg-st-haley-login {
	background: #fff;
	border-radius: 0 0 28px 28px;
	margin: 0;
	padding: 8px 24px 22px;
}

body.hmg-st-haley-popup .hmg-st-haley-login h2 {
	color: #10233f;
	font-size: 22px;
	line-height: 1.3;
	margin: 0 0 8px;
}

body.hmg-st-haley-popup .hmg-st-haley-login__lead {
	color: #4b5563;
	margin: 0 0 16px;
}

body.hmg-st-haley-popup .hmg-st-haley-login label {
	display: block;
	margin: 12px 0 6px;
}

body.hmg-st-haley-popup .hmg-st-haley-login__remember {
	font-weight: 500;
	margin-top: 14px;
}

body.hmg-st-haley-popup .hmg-st-haley-login__remember input {
	margin-right: 6px;
}

body.hmg-st-haley-popup .hmg-st-haley-login__error {
	background: #fff4f2;
	border-radius: 10px;
	color: #8a1f03;
	margin: 0 0 12px;
	padding: 10px 12px;
}

body.hmg-st-haley-popup .hmg-st-haley-login .submit {
	margin: 16px 0 0;
	padding: 0;
}

body.hmg-st-haley-popup .hmg-st-haley-login .button-primary {
	float: none;
	width: 100%;
}