/*  CUSTOM PROPERTIES
------------------------------  */

:root {

	/* Fluid spacing */

	--space-3xs: clamp(0.38rem, calc(0.36rem + 0.09vw), 0.44rem);
	--space-2xs: clamp(0.56rem, calc(0.54rem + 0.09vw), 0.63rem);
	--space-xs: clamp(0.75rem, calc(0.71rem + 0.18vw), 0.88rem);
	--space-s: clamp(1.00rem, calc(0.96rem + 0.18vw), 1.13rem);
	--space-m: clamp(1.25rem, calc(1.20rem + 0.27vw), 1.44rem);
	--space-l: clamp(1.50rem, calc(1.45rem + 0.27vw), 1.69rem);
	--space-xl: clamp(2.25rem, calc(2.16rem + 0.45vw), 2.56rem);
	--space-2xl: clamp(3.00rem, calc(2.89rem + 0.54vw), 3.38rem);
	--space-3xl: clamp(4.50rem, calc(4.34rem + 0.80vw), 5.06rem);
	--space-4xl: clamp(6.00rem, calc(5.79rem + 1.07vw), 6.75rem);

	--space-3xs-2xs: clamp(0.38rem, calc(0.30rem + 0.36vw), 0.63rem);
	--space-2xs-xs: clamp(0.56rem, calc(0.47rem + 0.45vw), 0.88rem);
	--space-xs-s: clamp(0.75rem, calc(0.64rem + 0.54vw), 1.13rem);
	--space-s-m: clamp(1.00rem, calc(0.88rem + 0.63vw), 1.44rem);
	--space-m-l: clamp(1.25rem, calc(1.13rem + 0.63vw), 1.69rem);
	--space-m-xl: clamp(1.25rem, calc(0.88rem + 1.88vw), 2.56rem);
	--space-m-2xl: clamp(1.25rem, calc(0.64rem + 3.04vw), 3.38rem);
	--space-m-3xl: clamp(1.25rem, calc(0.16rem + 5.45vw), 5.06rem);
	--space-l-xl: clamp(1.50rem, calc(1.20rem + 1.52vw), 2.56rem);
	--space-xl-2xl: clamp(2.25rem, calc(1.93rem + 1.61vw), 3.38rem);
	--space-2xl-3xl: clamp(3.00rem, calc(2.41rem + 2.95vw), 5.06rem);
	--space-3xl-4xl: clamp(4.50rem, calc(3.86rem + 3.21vw), 6.75rem);

	/* Fluid typographical scale */
	/* @link https://utopia.fyi/type/calculator?c=320,16,1.151,1440,18,1.151,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--step--3: clamp(0.66rem, calc(0.63rem + 0.12vw), 0.74rem);
	--step--2: clamp(0.76rem, calc(0.73rem + 0.13vw), 0.85rem);
	--step--1: clamp(0.87rem, calc(0.84rem + 0.16vw), 0.98rem);
	--step-0: clamp(1.00rem, calc(0.96rem + 0.18vw), 1.13rem);
	--step-1: clamp(1.15rem, calc(1.11rem + 0.21vw), 1.30rem);
	--step-2: clamp(1.33rem, calc(1.28rem + 0.24vw), 1.49rem);
	--step-3: clamp(1.53rem, calc(1.47rem + 0.27vw), 1.72rem);
	--step-4: clamp(1.76rem, calc(1.69rem + 0.31vw), 1.97rem);
	--step-5: clamp(2.02rem, calc(1.95rem + 0.36vw), 2.27rem);
	--step-6: clamp(2.33rem, calc(2.24rem + 0.42vw), 2.62rem);
	--step-7: clamp(2.68rem, calc(2.58rem + 0.48vw), 3.01rem);
	--step-8: clamp(3.08rem, calc(2.97rem + 0.55vw), 3.47rem);
	--step-9: clamp(3.55rem, calc(3.42rem + 0.63vw), 3.99rem);
	--step-10: clamp(4.08rem, calc(3.93rem + 0.73vw), 4.59rem);
	--step-11: clamp(4.70rem, calc(4.53rem + 0.84vw), 5.29rem);
	--step-12: clamp(5.41rem, calc(5.21rem + 0.97vw), 6.08rem);
	--step-13: clamp(6.22rem, calc(6.00rem + 1.11vw), 7.00rem);
	--step-14: clamp(7.16rem, calc(6.91rem + 1.28vw), 8.06rem);
	--step-15: clamp(8.24rem, calc(7.95rem + 1.47vw), 9.28rem);

	/* Light theme primary colours */
	--base-text-color: #111;
	--base-bg-color: #FFF6F1;
	--base-text-color-rgb: 17, 17, 17;
	--base-bg-color-rgb: 255, 246, 241;

	/* Secondary/accent colours */
	--white: #fff;
	--white-rgb: 255, 255, 255;
	--vivid-tangelo: #FF5800;
	--vivid-tangelo-rgb: 255, 88, 0;
	--dark-onyx: #25272D;
	--dark-onyx-rgb: 37, 39, 45;
	--apricot: #FFE4D6;
	--apricot-rgb: 255, 228, 214;

	--amarinth-pink: #DF9DAB;
	--amarinth-pink-rgb: 223, 157, 171;
	--earth-yellow: #EAAA59;
	--earth-yellow-rgb: 234, 170, 89;
	--persian-green: #1B998B;
	--persian-green-rgb: 27, 153, 139;

	--light-night: #acacac;
	--light-night-rgb: 172, 172, 172;
	--chrome-yellow: #FBA919;
	--chrome-yellow-rgb: 251, 169, 25;
	--chrome-yellow-light: #FBB73F;
	--chrome-yellow-light-rgb: 251, 183, 63;
	--chrome-yellow-25: #fbe6c6;
	--chrome-yellow-25-rgb: 251, 183, 63;
	--tropical-indigo: #A5AAFF;
	--tropical-indigo-rgb: 165, 170, 255;
	--tropical-indigo-light: #CCCFFF;
	--tropical-indigo-light-rgb: 237, 20, 100;
	--turquoise: #4DCCBD;
	--turquoise-rgb: 77, 204, 189;
	--turquoise-light: #6CCCC1;
	--turquoise-light-rgb: 173, 47, 80;

	--success-green: #1ea871;
	--success-green-rgb: 30, 168, 113;
	--success-green-10: #eaf5f1;
	--success-green--10-rgb: 234, 245, 241;
	--success-green-50: #9dd1b9;
	--success-green-50-rgb: 157, 209, 185;
	--fail-red: #FF8484;
	--fail-red-rgb: 255, 132, 132;
	--fail-red-10: #f8d7d6;
	--fail-red-10-rgb: 248, 215, 214;

}


/*  RESETS
    ------------------------------  */

	*,
	*:before,
	*:after {
		-moz-box-sizing: border-box !important;
		-webkit-box-sizing: border-box !important;
		box-sizing: border-box !important;
	}


/*  DEFAULT HIDDEN
    ------------------------------  */

	#backtoblog,
	.language-switcher,
	#resetpassform .indicator-hint {
		display: none !important;
	}


/*  TYPOGRAPHY
    ------------------------------  */

	/* Set Base Font Styles */

	html {
		font-size: 100% !important;
		background: none !important;
	}

	body {
		font-family: 'instrument-sans-variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-size: 1rem !important;
		font-weight: normal;
		font-variation-settings: 'wght' 400;
		background-color: var(--base-bg-color) !important;
		color: var(--base-text-color) !important;
	}

	#login a,
	.frm_forms a {
		color: var(--base-text-color) !important;
		transition-duration: .3s !important;
	}

	/* footer a {
		color: var(--white) !important;
	}

	footer a:hover,
	footer a:focus {
		color: #2A419A !important;
	} */


/*  LOST PASSWORD LINK
    ------------------------------  */

	.login #nav {
		margin-top: var(--space-l) !important;
		padding: 0;
		font-size: 0 !important;
	}

	.wp-login-register {
		display: none !important;
	}

/*  VERTICAL RHYTHM
    ------------------------------  */

	/* Logo & Form */

	#login {
		width: 100%;
		max-width: 33rem;
		padding: var(--space-m);
	}

	/* Form fields */

	#loginform > * + *,
	#lostpasswordform > * + * {
		margin-top: var(--space-xl) !important;
	}

	/* "Remember Me" Checkbox */

	#loginform > * + .forgetmenot {
		margin-top: var(--space-xl) !important;
	}

	/* Submit button */

	#loginform > * + .submit {
		margin-top: var(--space-2xl) !important;
	}

	/* Lost password link */

	#nav {
		margin-top: var(--space-l) !important;
	}


/*  POSITION LOGIN
    ------------------------------  */

	/* Make body flex container */

	body {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


/*  LOGO
    ------------------------------  */

	#login h1 a {
		/* width: auto;
		margin-bottom: var(--space-xl);
		padding: 0 !important; */
		display: none !important;
	}

	#login h1 {
		height: 7rem !important; /* Adjust this value to change size of logo */
		margin-bottom: var(--space-xl);
		background-size: contain !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
		border: 0 !important;
	}

	@media (min-width: 37.5em) {

		#login h1 {
			height: 12rem !important;
		}

	}


/*  FORMS
    ------------------------------  */

	.login form {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		overflow: visible !important;
		margin: 0;
		padding: 0;
		border: 0 !important;
		background: none !important;
	}

	/* Labels */

	.login label {
		display: block !important;
		margin-bottom: 0 !important;
		margin-left: 5px !important;
		padding-bottom: var(--space-xs);
		font-family: 'fraunces-variable', Georgia, 'Times New Roman', Times, serif !important;
		font-size: var(--step-2);
		font-variation-settings: 'SOFT' 100, 'WONK' 0, 'wght' 450;
		line-height: 1.25;
		letter-spacing: -.015em;
	}

	.login input[type="checkbox"] {
		color: #111 !important;
	}

	.login [type="checkbox"]:focus {
		outline: 2px dashed #2A419A !important;
		outline-offset: 4px !important;
	}

	.login [type="checkbox"] + label {
		padding: 0 !important;
		font-family: 'instrument-sans-variable', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		font-size: var(--step-0) !important;
		font-weight: normal !important;
		font-variation-settings: 'wght' 450 !important;
		color: var(--base-text-color) !important;
	}

	.forgetmenot label {
		margin-bottom: 0;
	}

	/* Inputs */

	.login form .input, .login input[type=password], .login input[type=text] {
		min-height: 30px;
		margin: 0;
		font-size: 16px;
	}

	input:not([type="submit"]):not([type="checkbox"]) {
		height: auto !important;
		width: 100% !important;
		padding: var(--space-xs) var(--space-s) !important;
		font-family: 'instrument-sans-variable', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		font-size: var(--step-2) !important;
		font-weight: normal;
		font-variation-settings: 'wght' 400;
		line-height: 1.25 !important;
		background-color: var(--white) !important;
		color: var(--base-text-color) !important;
		border: 1.5px solid var(--base-text-color) !important;
		border-radius: 10px !important;
		box-shadow: 0 4px 17px 4px rgba(var(--base-text-color-rgb), 0.1) !important;
	}

	label input:not([type="checkbox"]) {
		margin-top: .375rem !important;
	}

	.login .button.wp-hide-pw {
		height: auto !important;
		width: auto !important;
		margin-top: 0 !important;
		padding: var(--space-xs) var(--space-s) !important;
	}

	.login .button.wp-hide-pw .dashicons {
		top: 0 !important;
		height: auto !important;
		width: auto !important;
		font-size: var(--step-2) !important;
		line-height: 1.25 !important;
		color: var(--base-text-color) !important;
	}

	/* Checkbox */

	.forgetmenot {
		display: flex;
		align-items: center;
	}

	input[type="checkbox"] {
		position: relative !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		flex-shrink: 0 !important;
		height: 2em !important;
		width: 2em !important;
		vertical-align: top !important;
		margin-right: 4px !important;
		line-height: 1 !important;
		background-color: var(--white) !important;
		border: 1.5px solid var(--base-text-color) !important;
		border-radius: 5px !important;
		box-shadow: 0 !important;
		outline: none !important;
		-moz-appearance: none !important;
		-webkit-appearance: none !important;
	}

	input[type=checkbox]:checked:before {
		content: "";
		height: 100% !important;
		width: 100% !important;
		margin: auto;
		background-color: var(--base-text-color) !important;
		background-image: url('images/check-white.svg') !important;
		background-repeat: no-repeat !important;
  		background-size: 56.25% !important;
		background-position: center !important;
		border-radius: 0 !important;
	}

	[for="rememberme"] {
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
	}

	/* Reset password */

	.login #pass-strength-result {
		display: inline-flex !important;
		gap: 6px !important;
		width: auto !important;
		margin: var(--space-2xs) 0 var(--space-2xs) 10px !important;
		padding: 0 !important;
		font-family: 'instrument-sans-variable', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		font-size: var(--step--1) !important;
		font-weight: normal;
		font-variation-settings: 'wght' 500;
		background-color: transparent;
		border: 0 !important;
		border-radius: 0;
		box-shadow: none;
	}

	.login #pass-strength-result::before {
		content: '';
		height: 1em;
		width: 1em;
		margin-top: 1px;
		border-radius: 50px;
		background-color: var(--base-text-color);
	}

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

	.login #pass-strength-result.good::before {
		background-color: var(--chrome-yellow) !important;
	}

	.login #pass-strength-result.bad::before,
	.login #pass-strength-result.short::before {
		background-color: var(--fail-red) !important;
	}

	.wp-core-ui .button.wp-generate-pw {
		height: auto;
		margin: -36px 0 var(--space-2xl) auto !important;
		padding: 0 !important;
		font-size: var(--step--1) !important;
		font-weight: normal !important;
		font-variation-settings: 'wght' 500;
		line-height: 1.5 !important;
		text-decoration: underline !important;
  		text-decoration-thickness: 2px !important;
  		text-underline-offset: 4px !important;
		background-color: transparent !important;
		color: var(--base-text-color) !important;
		border: 0 !important;
		border-radius: 0 !important;
		transition: color .3s ease, border-color .3s ease !important;
	}

	.login .pw-weak {
		display: none !important;
		margin-bottom: 1.5rem;
	}

	/* #pw-weak {
		margin-left: .375rem;
	} */

	/* Submit Button */

	.button-primary {
		min-height: auto !important;
		height: auto !important;
		width: 100% !important;
		margin: 0 !important;
		padding: var(--space-m) var(--space-l) var(--space-s) !important;
		font-family: 'instrument-sans-variable', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		font-size: var(--step-2) !important;
		font-weight: normal !important;
		font-variation-settings: 'wght' 500 !important;
		line-height: 1.25 !important;
		background:
		url('images/arrow-right-black.svg'),
		linear-gradient(
			to right,
			var(--chrome-yellow) 0%,
			var(--chrome-yellow) 90%,
			var(--chrome-yellow-light) 100%
		),
		linear-gradient(
			to right,
			var(--chrome-yellow-light) 0%,
			var(--chrome-yellow-light) 100%
		) !important;
		background-position:
			right var(--space-m) center,
			0 100%,
			0 100% !important;
		background-repeat: no-repeat !important;
		background-size:
			auto var(--step-0),
			0,
			100% !important;
		color: var(--base-text-color) !important;
		border: 2px solid var(--chrome-yellow-light) !important;
		border-radius: 10px !important;
		box-shadow: 5px 5px 10px 0px rgba(var(--base-text-color-rgb), 0.15) !important;
		transition: background-size .5s cubic-bezier(.55,.06,.68,.19), background-position .3s ease-in .1s, border-color .3s ease !important;
	}

	.button-primary:hover,
	.button-primary:focus {
		background-size:
			auto var(--step-0),
			110%,
			100% !important;
		background-position:
			right var(--space-xs) center,
			0 100%,
			0 100% !important;
		border-color: var(--base-text-color) !important;
	}

	.wp-core-ui .button-primary-disabled,
	.wp-core-ui .button-primary.disabled,
	.wp-core-ui .button-primary:disabled,
	.wp-core-ui .button-primary[disabled] {
		background-color: transparent !important;
		color: #2a419a !important;
		border: 3px solid #2a419a !important;
	}


/*  LINKS
    ------------------------------  */

	.login #nav a {
		font-family: 'instrument-sans-variable', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		font-size: var(--step-0) !important;
		font-weight: normal !important;
		font-variation-settings: 'wght' 450 !important;
		text-decoration: underline !important;
  		text-decoration-thickness: 1.5px !important;
  		text-underline-offset: 2px !important;
		color: var(--base-text-color) !important;
	}

	.login h1 a:hover,
	.login h1 a:focus {
		background-color: transparent !important;
	}


/*  NOTICES
    ------------------------------  */

	.login #login_error,
	.login .message,
	.login .success {
		position: relative;
		display: flex !important;
  		gap: var(--space-2xs) !important;
		margin: var(--space-m) 0 var(--space-xl) !important;
		padding: var(--space-l) var(--space-m) !important;
		color: var(--base-text-color);
		border: 2px solid rgba(var(--base-text-color-rgb), 0.25) !important;
		border-radius: 10px;
		box-shadow: 5px 5px 10px 0 rgba(var(--base-text-color-rgb), 0.15);
	}

	.login #login_error {
		border-color: var(--fail-red) !important;
	}

	.login #login_error::before,
	.login .message::before,
	.login .success {
		content: "";
		height: 2.25em;
		width: 2.25em;
		flex-shrink: 0 !important;
		margin-top: -.375em;
	}

	.login #login_error::before {
		-webkit-mask: url('images/alert-circle.svg') center no-repeat;
		mask: url('images/alert-circle.svg') center no-repeat;
		background-color: var(--fail-red);
	}

	.login .message::before,
	.login .success::before {
		background-image: url('images/info.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.login #login_error p,
	.login .message p,
	.login .success p {
		font-size: var(--step-1) !important;
  		font-variation-settings: 'wght' 500 !important;
		line-height: 1.375 !important;
	}

	.login #login_error a,
	.login .message a,
	.login .success a {
		text-decoration-thickness: 2px !important;
  		text-underline-offset: 2px !important;
	}


/*  LD GROUP CODE REGISTRATION FORM
    -------------------------------  */

	/* #ldgr-group-code-registration-form > * {
		width: 100% !important;
		margin-right: 0 !important;
	}

	#ldgr-group-code-registration-form > * + * {
		margin-top: var(--space-xl) !important;
	}

	#ldgr-group-code-registration-form > * + .ldgr-eg-actions {
		margin-top: var(--space-2xl) !important;
	}

	#ldgr-group-code-registration-form > :nth-child(7) {
		position: relative !important;
		margin-top: var(--space-2xl) !important;
		padding-top: var(--space-xl) !important;
	}

	#ldgr-group-code-registration-form > :nth-child(7)::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		border-top: 1.5px solid var(--apricot);
	}

	.ldgr-create-new-sg .ldgr-field,
	.ldgr-edit-sg .ldgr-field,
	.ldgr-group-code-setting .ldgr-field,
	.ldgr-cabgc .ldgr-field {
		padding: 0 !important;
	}

	.ldgr-create-new-sg .ldgr-field label,
	.ldgr-edit-sg .ldgr-field label,
	.ldgr-group-code-setting .ldgr-field label,
	.ldgr-cabgc .ldgr-field label {
		display: block !important;
		margin-bottom: 0 !important;
		margin-left: 5px !important;
		padding-bottom: var(--space-2xs);
		font-family: 'fraunces-variable', Georgia, 'Times New Roman', Times, serif !important;
		font-size: var(--step-2) !important;
		font-weight: normal !important;
		font-variation-settings: 'SOFT' 100, 'WONK' 0, 'wght' 450;
		line-height: 1.25 !important;
		text-transform: none !important;
		letter-spacing: -.015em;
		color: var(--base-text-color) !important;
	}

	#ldgr-group-code-registration-form > p label {
		display: flex;
	}

	#ldgr-user-gdpr-check {
		margin-right: var(--space-2xs) !important;
	}

	#ldgr-group-code-registration-form .ldgr-eg-actions .ldgr-btn:first-of-type {
		display: none !important;
	}

	#ldgr-user-reg-form-submit {
		width: 100% !important;
		margin: 0 !important;
		padding: var(--space-m) var(--space-l) var(--space-s) !important;
		font-family: 'instrument-sans-variable', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		font-size: var(--step-2) !important;
		font-weight: normal !important;
		font-variation-settings: 'wght' 500 !important;
		line-height: 1.25 !important;
		background-color: var(--chrome-yellow-light) !important;
		color: var(--base-text-color) !important;
		border: 2px solid var(--chrome-yellow-light) !important;
		border-radius: 10px !important;
		box-shadow: 5px 5px 10px 0px rgba(var(--base-text-color-rgb), 0.15) !important;
		transition: background-color .3s ease, border-color .3s ease !important;
	}

	#ldgr-user-reg-form-submit:hover,
	#ldgr-user-reg-form-submit:hover {
		background-color: var(--chrome-yellow) !important;
  		border-color: var(--base-text-color) !important;
	} */