/*
 * sn-auth forms: sign in, sign up, forgot password, check your email, set a
 * new password. Scoped to .sn-auth-ui, which only the plugin's auth templates
 * print, so nothing here reaches My Account or the rest of a site.
 *
 * Why !important and the :not(#sn-auth-N) chains: the themes still carry
 * User Registration's styles, many of them !important and keyed on one or two
 * ids (body #user-registration .ur-frontend-form, #loginModal ... input), which
 * a class selector cannot outrank. Each :not(#sn-auth-N) counts as an id in
 * specificity without the element needing one, so every rule here carries
 * three and wins; the rules still only match inside .sn-auth-ui.
 *
 * Colours and type come from the custom properties on .sn-auth-ui; a theme
 * changes the look by redefining them. The defaults are SurvivorNet's
 * (themes/survivornet/assets/styles/common/_variables.scss).
 */

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) {
	--sn-auth-font: CircularStd, "CircularStd-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sn-auth-ink: #292c45;
	--sn-auth-accent: #41477b;
	--sn-auth-text: #3a3d57;
	--sn-auth-muted: #5f6175;
	--sn-auth-border: #878897;
	--sn-auth-line: #d9dae3;
	--sn-auth-rule: #e1e1e2;
	--sn-auth-surface: #fff;
	--sn-auth-error: #df6e6e;
	--sn-auth-error-text: #a63636;
	--sn-auth-error-bg: #fdf3f3;
	--sn-auth-success: #4d9ba0;
	--sn-auth-success-text: #1f4f52;
	--sn-auth-success-bg: #f0f7f7;
	--sn-auth-focus: 0 0 0 3px rgba(65, 71, 123, 0.25);

	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 480px !important;
	margin: 56px auto 64px !important;
	padding: 40px !important;
	float: none !important;
	background: var(--sn-auth-surface) !important;
	border: 0 !important;
	border-radius: 16px !important;
	color: var(--sn-auth-ink) !important;
	font-family: var(--sn-auth-font) !important;
	font-size: 16px !important;
	line-height: 24px !important;
	text-align: left !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) *,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) *::before,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) *::after {
	box-sizing: border-box !important;
}

/* The UR wrappers the markup keeps for compatibility carry no layout. */
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ur-frontend-form,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .user-registration,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) form,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ur-form-row,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ur-form-grid,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ur-field-item,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .input-wrapper,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .password-input-group,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .user-registration-social-connect-networks {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Dividers the themes and Social Connect add with generated content. */
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ur-frontend-form::before,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ur-frontend-form::after,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-network-lists::before,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-network-lists::after,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .user-registration-social-connect-networks::before,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .user-registration-social-connect-networks::after {
	content: none !important;
	display: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) p {
	margin: 0 !important;
	padding: 0 !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) a {
	color: var(--sn-auth-accent) !important;
	font-family: var(--sn-auth-font) !important;
	font-style: normal !important;
	border: 0 !important;
	box-shadow: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) a:hover {
	color: var(--sn-auth-ink) !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) a:focus-visible,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) button:focus-visible,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--sn-auth-accent) !important;
	outline-offset: 2px !important;
}

/* ------------------------------------------------------------ heading */

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-heading {
	display: block !important;
	margin: 0 0 24px !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-title {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--sn-auth-ink) !important;
	font-family: var(--sn-auth-font) !important;
	font-size: 36px !important;
	font-weight: 700 !important;
	line-height: 44px !important;
	letter-spacing: -0.8px !important;
	text-align: left !important;
	text-transform: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-intro {
	margin: 8px 0 0 !important;
	color: var(--sn-auth-muted) !important;
	font-size: 17px !important;
	line-height: 26px !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-back {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	min-height: 24px !important;
	margin: 0 0 20px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	text-decoration: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-back::before {
	content: "" !important;
	width: 16px !important;
	height: 16px !important;
	background: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* ------------------------------------------------------------ social */

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-social {
	margin: 0 0 24px !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-network-lists {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-login-media {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border: 0 !important;
	background: none !important;
	list-style: none !important;
}

/* Google first: about 25,600 accounts use it, against 741 on Facebook. */
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-login-media--google {
	order: -1 !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-login-media > a {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 48px !important;
	border: 1px solid var(--sn-auth-border) !important;
	border-radius: 8px !important;
	background: var(--sn-auth-surface) !important;
	color: var(--sn-auth-ink) !important;
	font-family: var(--sn-auth-font) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-login-media > a:hover {
	border-color: var(--sn-auth-ink) !important;
	background: #f5f6f9 !important;
	color: var(--sn-auth-ink) !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-login-media .ursc-login-text {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font: inherit !important;
}

/* The logo is pinned 16px from the left so both buttons line up whatever the label length. */
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-login-media .ursc-icon-block {
	position: absolute !important;
	top: 50% !important;
	left: 16px !important;
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	margin: -10px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: center / contain no-repeat !important;
	font-size: 0 !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-login-media .ursc-icon-block::before,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-login-media .ursc-icon-block::after {
	content: none !important;
	display: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-login-media--google .ursc-icon-block {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FBBC05' d='M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z'/%3E%3Cpath fill='%23EA4335' d='M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z'/%3E%3Cpath fill='%2334A853' d='M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z'/%3E%3Cpath fill='%234285F4' d='M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z'/%3E%3C/svg%3E") !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .ursc-login-media--facebook .ursc-icon-block {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877F2' d='M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z'/%3E%3C/svg%3E") !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-divider {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 0 24px !important;
	color: var(--sn-auth-muted) !important;
	font-size: 14px !important;
	line-height: 20px !important;
	text-align: center !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-divider::before,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-divider::after {
	content: "" !important;
	flex: 1 1 0 !important;
	height: 1px !important;
	background: var(--sn-auth-line) !important;
}

/* ------------------------------------------------------------ fields */

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-field {
	display: block !important;
	width: 100% !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	float: none !important;
}

/* The username is filled from the email address and stays hidden, as before. */
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .field-user_login {
	display: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-field__label,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-field > label {
	position: static !important;
	display: block !important;
	width: auto !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	color: var(--sn-auth-ink) !important;
	font-family: var(--sn-auth-font) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	transform: none !important;
	opacity: 1 !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-field__label .required,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-field__label abbr {
	display: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-field__control {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) input.sn-auth-field__input {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 48px !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid var(--sn-auth-border) !important;
	border-radius: 8px !important;
	background: var(--sn-auth-surface) !important;
	box-shadow: none !important;
	color: var(--sn-auth-ink) !important;
	font-family: var(--sn-auth-font) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-field__control input.sn-auth-field__input {
	padding-right: 72px !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) input.sn-auth-field__input:focus {
	border-color: var(--sn-auth-accent) !important;
	box-shadow: var(--sn-auth-focus) !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) input.sn-auth-field__input[aria-invalid="true"] {
	border-color: var(--sn-auth-error) !important;
	box-shadow: 0 0 0 3px rgba(223, 110, 110, 0.2) !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-toggle {
	position: absolute !important;
	top: 4px !important;
	right: 4px !important;
	width: auto !important;
	height: 40px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sn-auth-accent) !important;
	font-family: var(--sn-auth-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	cursor: pointer !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-toggle:hover {
	background: #f5f6f9 !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-field__error {
	position: relative !important;
	display: block !important;
	margin: 6px 0 0 !important;
	padding: 0 0 0 22px !important;
	color: var(--sn-auth-error-text) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-field__error::before {
	content: "" !important;
	position: absolute !important;
	top: 2px !important;
	left: 0 !important;
	width: 16px !important;
	height: 16px !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23DF6E6E' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4' stroke='%23DF6E6E' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='.9' fill='%23DF6E6E'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* ------------------------------------------------------------ password rules */

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-rules {
	display: block !important;
	margin: 10px 0 0 !important;
	color: var(--sn-auth-muted) !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-rule {
	position: relative !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 0 0 24px !important;
	color: var(--sn-auth-muted) !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

/* A hollow circle, which becomes a teal tick once the requirement is met. */
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-rule::before {
	content: "" !important;
	position: absolute !important;
	top: 3px !important;
	left: 1px !important;
	display: block !important;
	width: 14px !important;
	height: 14px !important;
	border: 1.5px solid var(--sn-auth-border) !important;
	border-radius: 50% !important;
	background: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-rule.is-met {
	color: var(--sn-auth-ink) !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-rule.is-met::before {
	top: 2px !important;
	left: 0 !important;
	width: 16px !important;
	height: 16px !important;
	border: 0 !important;
	background: var(--sn-auth-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-rule.is-error {
	color: var(--sn-auth-error-text) !important;
	font-weight: 500 !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-rule.is-error::before {
	top: 2px !important;
	left: 0 !important;
	width: 16px !important;
	height: 16px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23DF6E6E' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4' stroke='%23DF6E6E' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='.9' fill='%23DF6E6E'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* ------------------------------------------------------------ remember me / forgot */

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: 0 0 24px !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-check {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: auto !important;
	min-height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--sn-auth-ink) !important;
	font-family: var(--sn-auth-font) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	cursor: pointer !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-check input[type="checkbox"] {
	position: static !important;
	flex: 0 0 20px !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	opacity: 1 !important;
	accent-color: var(--sn-auth-ink) !important;
	-webkit-appearance: checkbox !important;
	appearance: auto !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-row__link a {
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	text-decoration: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-checklist {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* ------------------------------------------------------------ buttons */

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-submit {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	text-align: left !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: none !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 24px !important;
	float: none !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--sn-auth-ink) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: var(--sn-auth-font) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 20px !important;
	letter-spacing: normal !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button > span:empty {
	display: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button:hover {
	background: var(--sn-auth-accent) !important;
	color: #fff !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sn-auth-accent) !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button:disabled,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-busy .sn-auth-button {
	opacity: 0.7 !important;
	cursor: progress !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button--secondary {
	border: 1px solid var(--sn-auth-ink) !important;
	background: var(--sn-auth-surface) !important;
	color: var(--sn-auth-ink) !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button--secondary:hover {
	background: #f5f6f9 !important;
	color: var(--sn-auth-ink) !important;
}

/* Loading: the label changes to data-busy-label and an 18px spinner sits
   10px to its left. The spinner is positioned off the label's box, so the
   label stays centred and the button keeps its width. */
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button__label {
	position: relative !important;
	display: inline-block !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button.is-loading,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button.is-loading:hover {
	background: #6a6d86 !important;
	opacity: 1 !important;
	cursor: progress !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button.is-loading .sn-auth-button__label::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	right: 100% !important;
	width: 18px !important;
	height: 18px !important;
	margin: -9px 10px 0 0 !important;
	box-sizing: border-box !important;
	border: 2px solid rgba(255, 255, 255, 0.35) !important;
	border-top-color: #fff !important;
	border-radius: 50% !important;
	animation: sn-auth-spin 0.8s linear infinite !important;
}

@keyframes sn-auth-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button.is-loading .sn-auth-button__label::before {
		animation-duration: 2.4s !important;
	}
}

/* The consent line a theme prints after the submit button. */
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-submit p,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-submit .small {
	display: block !important;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	color: var(--sn-auth-muted) !important;
	font-family: var(--sn-auth-font) !important;
	font-size: 14px !important;
	font-style: normal !important;
	line-height: 20px !important;
	text-align: left !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-submit p a {
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-switch {
	display: block !important;
	margin: 24px 0 0 !important;
	padding: 20px 0 0 !important;
	border-top: 1px solid var(--sn-auth-rule) !important;
	color: var(--sn-auth-text) !important;
	font-size: 15px !important;
	line-height: 20px !important;
	text-align: center !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-switch a {
	font-weight: 700 !important;
	text-decoration: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-note {
	margin: 20px 0 0 !important;
	color: var(--sn-auth-muted) !important;
	font-size: 14px !important;
	line-height: 20px !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-badge {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	margin: 0 0 20px !important;
	border-radius: 50% !important;
	background: #e8f3f3 !important;
	color: var(--sn-auth-success) !important;
}

.sn-auth-ui--confirmation:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button {
	margin-top: 0 !important;
}

/* ------------------------------------------------------------ alerts */

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-notices:empty {
	display: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert {
	position: relative !important;
	display: block !important;
	margin: 0 0 20px !important;
	padding: 14px 16px 14px 46px !important;
	border: 1px solid !important;
	border-radius: 8px !important;
	font-family: var(--sn-auth-font) !important;
	font-size: 15px !important;
	line-height: 22px !important;
	list-style: none !important;
	text-align: left !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert li {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	list-style: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert li::before,
.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert li::marker {
	content: none !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert li + li {
	margin-top: 6px !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert a {
	color: inherit !important;
	text-decoration: underline !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 15px !important;
	left: 16px !important;
	width: 20px !important;
	height: 20px !important;
	background: center / contain no-repeat !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert--error {
	border-color: var(--sn-auth-error) !important;
	background: var(--sn-auth-error-bg) !important;
	color: var(--sn-auth-error-text) !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert--error::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23DF6E6E' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4' stroke='%23DF6E6E' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='.9' fill='%23DF6E6E'/%3E%3C/svg%3E") !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert--success {
	border-color: var(--sn-auth-success) !important;
	background: var(--sn-auth-success-bg) !important;
	color: var(--sn-auth-success-text) !important;
}

.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-alert--success::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%234D9BA0'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ------------------------------------------------------------ inside a modal */

/* The modal is the card, and it supplies the title and the links that switch
   between its sign-in and sign-up screens. */
.modal .sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.modal .sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-heading,
.modal .sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-switch {
	display: none !important;
}

/* The modal on phones and small tablets: tighter vertical rhythm so the whole
   sign-up form, down to its button, fits an iPhone screen with Safari's bars
   showing (390 x 664). */
@media (max-width: 768px) {
	.modal .sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-social,
	.modal .sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-divider,
	.modal .sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-field {
		margin-bottom: 16px !important;
	}
}

/* ------------------------------------------------------------ phones */

@media (max-width: 599px) {
	.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) {
		max-width: none !important;
		margin: 0 !important;
		padding: 28px 24px 40px !important;
		border-radius: 0 !important;
	}

	.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-title {
		font-size: 30px !important;
		line-height: 38px !important;
		letter-spacing: -0.6px !important;
	}

	.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-intro {
		font-size: 16px !important;
		line-height: 24px !important;
	}

	.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-button {
		height: 52px !important;
		font-size: 17px !important;
	}

	.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-check,
	.sn-auth-ui:not(#sn-auth-0):not(#sn-auth-1):not(#sn-auth-2) .sn-auth-row__link a {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
	}
}