/*---	Identity Pages  |  New Resident Portal	 ---*/

:root {
	/*---	COLORS   ---*/
	/* Primary Action Colors (Blue) */
	--action-blue-600: #006bd0; /* --mud-palette-primary-darker */
	--action-blue-500: #0074E0; /* Primary action color */
	--action-blue-400: #0e8bff; /* Slightly lighter action color */
	--action-blue-300: #3fa2ff; /* Lighter action color */
	--action-blue-200: #9aceff; /* Even lighter action color */
	--action-blue-100: #e6f3ff; /* Lightest action color */
	/* Black and White */
	--black-500: #010206; /* Darkest black */
	--black-400: #51525b; /* Dark black */
	--black-300: #53586E; /* Medium black */
	--black-200: #d9d9d9; /* Light black */
	--black-100: #eaebef; /* Lighter black */
	--black-50: #fafafb; /* Lightest black */
	--white: #ffffff; /* Pure white */
	/* Success Colors (Green) */
	--green-500: #037536; /* Dark green */
	--green-400: #3ab170; /* Medium dark green */
	--green-300: #63ce93; /* Medium green */
	--green-200: #8cdeb1; /* Light green */
	--green-100: #def0e6; /* Lightest green */
	/* Error Colors (Red) */
	--red-600: #c80e0e; /* --mud-palette-error-darker */
	--red-500: #EA1010; /* Dark red */
	--red-400: #f76f6f; /* Medium dark red */
	--red-300: #ffa1a1; /* Medium red */
	--red-200: #ffcccc; /* Light red */
	--red-100: #fde3e3; /* Lightest red */
	/* Warning Colors (Yellow) */
	--yellow-500: #ffd600; /* Dark yellow */
	--yellow-100: #fff7cc; /* Light yellow */
	/* Secondary Colors (Purple) */
	--purple-500: #8254fe; /* Dark purple */
	--purple-300: #956efe; /* Medium purple */
	--purple-200: #b89eff; /* Light purple */
	--purple-100: #dccfff; /* Lightest purple */
	/* Accent Colors (Orange) */
	--orange-600: #a34500; /* --mud-palette-warning-darker */
	--orange-500: #f8842f; /* Dark orange */
	--orange-400: #f99d59; /* Medium dark orange */
	--orange-300: #fbb582; /* Medium orange */
	--orange-200: #fcceac; /* Light orange */
	--orange-100: #fee6d5; /* Lightest orange */
	--orange-alt: #ffefab; /* Alternate orange */
	/*---	TEXT STYLES   ---*/
	/*  Font  */
	--font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
	/* H1 */
	--h1-size: 1.5rem; /* 24px */
	--h1-weight: 500;
	--h1-weight-sb: 600;
	--h1-style: normal;
	--h1-line-height: 2rem; /* 32px */
	/* H2 */
	--h2-size: 1.125rem; /* 18px */
	--h2-weight: 500;
	--h2-style: normal;
	--h2-line-height: 2rem; /* 32px */
	/* H3 */
	--h3-size: 1rem; /* 16px */
	--h3-weight: 600;
	--h3-style: normal;
	--h3-line-height: 1.5rem; /* 24px */
	/* Big Text */
	--big-text-size: 2.5rem; /* 40px */
	--big-text-weight: 500;
	--big-text-style: normal;
	--big-text-line-height: 3rem; /* 48px */
	/* Body Text */
	--body-size: 1rem; /* 16px */
	--body-weight-regular: 400;
	--body-weight-medium: 500;
	--body-style: normal;
	--body-line-height: 1.5rem; /* 24px */
	/* Support Text */
	--support-text-size: 0.875rem; /* 14px */
	--support-text-weight: 500;
	--support-text-weight-r: 400;
	--support-text-weight-i: italic;
	--support-text-style: normal;
	--support-text-line-height: 1.25rem; /* 20px */
	--support-text-sm-size: 0.75rem; /* 12px */
	--support-text-sm-weight: 400;
	--support-text-sm-line-height: 1.125rem; /* 18px */
	/* Accent Text */
	--accent-size: 0.875rem; /* 14px */
	--accent-weight: 500;
	--accent-style: normal;
	--accent-line-height: 1.25rem; /* 20px */
	/*---  TREATMENTS	 ---*/
	/* Drop Shadow */
	--shadow-1: 0 2px 8px 0 rgba(0 0 0 / 0.1);
	/* Border Radius */
	--border-radius-small: 0.5rem;
	--border-radius-medium: 0.75rem;
	--border-radius-large: 1.5rem;
	--border-radius-max: 3rem;
	
	/*---   Whitespace	  ---*/
	--nav-padding-horizontal-desktop: 2.5rem;
	--nav-padding-horizontal-mobile: 1.5rem;
}


/*---  	TYPOGRAPHY    ---*/

/* H1 */
h1 {
	font-family: var(--font-family);
	font-size: var(--h1-size); /* 24px */
	font-weight: var(--h1-weight-sb); /* semibold */
	font-style: var(--h1-style);
	line-height: var(--h1-line-height); /* 32px */
}

/* H2 */
h2 {
	font-family: var(--font-family);
	font-size: var(--h2-size); /* 18px */
	font-weight: var(--h2-weight);
	font-style: var(--h2-style);
	line-height: var(--h2-line-height); /* 32px */
}

/* H3 */
h3 {
	font-family: var(--font-family);
	font-size: var(--h3-size); /* 16px */
	font-weight: var(--h3-weight);
	font-style: var(--h3-style);
	line-height: var(--h3-line-height); /* 24px */
}

/* Big Text */
.big-text {
	font-family: var(--font-family);
	font-size: var(--big-text-size); /* 40px */
	font-weight: var(--big-text-weight);
	font-style: var(--big-text-style);
	line-height: var(--big-text-line-height); /* 48px */
}

/* Body Text */
.body-m {
	font-family: var(--font-family);
	font-size: var(--body-size); /* 16px */
	font-weight: var(--body-weight-medium);
	font-style: var(--body-style);
	line-height: var(--body-line-height); /* 24px */
}

p,
.body-r {
	font-family: var(--font-family);
	font-size: var(--body-size); /* 16px */
	font-weight: var(--body-weight-regular);
	font-style: var(--body-style);
	line-height: var(--body-line-height); /* 24px */
}

/* Support Text */
.support-text-m {
	font-family: var(--font-family);
	font-size: var(--support-text-size); /* 14px */
	font-weight: var(--support-text-weight);
	font-style: var(--support-text-style);
	line-height: var(--support-text-line-height); /* 20px */
}

.support-text-r {
	font-family: var(--font-family);
	font-size: var(--support-text-size); /* 14px */
	font-weight: var(--support-text-weight-r);
	font-style: var(--support-text-style);
	line-height: var(--support-text-line-height); /* 20px */
}

.support-text-i {
	font-family: var(--font-family);
	font-size: var(--support-text-size); /* 14px */
	font-weight: var(--support-text-weight-r);
	font-style: var(--support-text-weight-i);
	line-height: var(--support-text-line-height); /* 20px */
}

.support-text-sm {
	font-family: var(--font-family);
	font-size: var(--support-text-sm-size); /* 12px */
	font-weight: var(--support-text-sm-weight);
	font-style: var(--support-text-style);
	line-height: var(--support-text-sm-line-height); /* 18px */
}

/* Accent Text */
.accent-text {
	font-family: var(--font-family);
	font-size: var(--accent-size); /* 14px */
	font-weight: var(--accent-weight);
	font-style: var(--accent-style);
	line-height: var(--accent-line-height); /* 20px */
}

/* Global Styles */
body {
	font-family: var(--font-family);
	background-color: var(--white);
	margin: 0;
	padding-top: 5rem; /* 80px */
	/* Prevent iOS Safari font auto-scaling and horizontal scroll */
	-webkit-text-size-adjust: 100%;
	overscroll-behavior-y: contain;
}

body:has(.user-profile-settings) {
	padding-top: 0 !important;
}
 
.resident-layout:not(.settings-page) .footer {
	display: none;
} 

/* Apply border-box globally to prevent width + padding overflow */
*, *::before, *::after {
	box-sizing: border-box;
}

h1 {
	font-size: var(--h1-size);
	font-weight: var(--h1-weight-sb);
	line-height: var(--h1-line-height);
	margin: 0;
	text-align: left;
	padding-bottom: 0.25rem;
}

p {
	color: var(--black-500);
	font-size: var(--body-r-size);
	font-weight: var(--body-r-weight);
	line-height: var(--body-line-height);
	margin: unset;
}

a,
.link {
	color: var(--action-blue-500);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5rem;
	text-decoration: none;
}

/* Header (Top Bar) */
.header {
	width: 100%;
	height: 5rem; /* 80px to rem */
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
 	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	border-bottom: 0.0625rem solid var(--black-100); /* 1px to rem */
	padding: 0 2.5rem;
}

.logo {
	height: 2rem;
	flex-shrink: 0;
	margin-right: unset;
}

.register-btn {
	display: flex;
	font-family: "Poppins", sans-serif;
	background-color: var(--black-100);
	color: var(--black-500);
	border: none;
	font-size: 1.125rem; /* 18px to rem */
	border-radius: var(--border-radius-max);
	cursor: pointer;
	padding: 0.375rem 1.5rem; /* 6px 24px to rem */
	font-weight: 500;
	line-height: 2rem;
	margin-right: unset;
	transition: all 120ms linear;
}

.register-btn:hover {
	color: var(--white);
	background-color: var(--action-blue-500);
}

/* Container Styles */
.content-container {
	width: 100%; 
	max-width: 30rem;  
	padding: 2.5rem;
	background-color: #fff;
	border-radius: var(--border-radius-small);
	margin: 2.5rem auto;
	display: flex;
	align-items: center;
	border: 1px solid var(--black-100);
}

/* Form Styles */
.form-card {
	width: 100%;
	max-width: 100%; 
	border-radius: var(--border-radius-small);
	margin: 0 auto;
}

.form-card__header {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.form-card__subtitle {
	color: var(--black-400);
}

.form-card__phone {
	font-weight: var(--body-weight-medium);
	color: var(--black-500);
}

.form-card__notification {
	display: block;
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--border-radius-medium);
	background-color: var(--action-blue-100);
	color: var(--action-blue-600);
	border: 1px solid var(--action-blue-200);
	font-size: var(--support-text-size);
	line-height: var(--support-text-line-height);
}

.form-card__form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 1.75rem;
}

.form-card__hint {
	display: block;
	margin-top: 0.5rem;
	color: var(--black-300);
	font-size: var(--support-text-size);
	line-height: var(--support-text-line-height);
}

.form-card__remember {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-top: 0.25rem;
}

.form-card__remember .form-check-input {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 0.35rem;
}

.form-card__remember .form-check-label {
	margin-bottom: 0;
	font-weight: var(--body-weight-medium);
	color: var(--black-400);
}

.form-card__actions {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-card__actions form {
	margin: 0;
}

.form-card__alt {
	text-align: center;
	color: var(--black-300);
	font-size: var(--support-text-size);
	line-height: var(--support-text-line-height);
}

.form-card__alt a {
	font-weight: var(--body-weight-medium);
}

.form-card:has(svg) * {
	text-align: center;
	margin: 0 auto;
}

.form-card svg {
	width: 100%;
}

/* Fine-grained mobile adjustments to eliminate horizontal scroll */
@media (max-width: 600px) {
	.header {
		height: 5rem;
		padding: 0 1.5rem;
	} 

	.register-btn {
 		font-size: 1rem;
		padding: 0.25rem 1.25rem;
	} 

	.content-container {
		border: unset;
		padding: 1.5rem 1.5rem;
		margin: 0 auto;
		margin-top: unset;
	}

	.form-card svg {
		width: auto;
		height: auto;
	}
	
}

@media (max-width: 400px) {
	.content-container {
		padding: 1.5rem 1.5rem;
		margin: unset;
		border: unset;
	}
	input, .button, .login-with-google-btn {
		height: 2.75rem;
	}
} 

label {
	display: block;
	font-family: var(--font-family);
	font-size: var(--support-text-size);
	font-weight: var(--support-text-weight);
	line-height: var(--support-text-line-height);
	padding-bottom: 0.25rem;
}

input {
	width: 100%;
	height: 3rem; /* 48px to rem */
	padding: 0 0.625rem; /* 10px to rem */
	box-sizing: border-box;
	border: 1px solid var(--black-100);
	border-radius: var(--border-radius-medium);
	color: var(--black-500);
	font-size: var(--body-size);
	font-family: var(--font-family);
	font-weight: var(--body-weight-regular);
	padding-left: 1rem;
	padding-right: 1rem;
}

.code-input {
	font-size: 1.5rem;
	font-family: var(--font-family);
	font-weight: var(--body-weight-medium);
	letter-spacing: 0.35rem;
	text-align: center;
	padding: 0.75rem 1rem;
	font-variant-numeric: tabular-nums;
}

.code-input::placeholder {
	letter-spacing: 0.35rem;
	color: var(--black-200);
}

.code-input:focus {
	letter-spacing: 0.35rem;
}

input::placeholder {
	font-size: var(--body-size);
	font-weight: var(--body-weight-regular);
	color: var(--black-300);
}

input:focus {
	border: 1px solid transparent;
	outline: 2px solid var(--action-blue-500);
}

.button {
	font-family: var(--font-family);
	font-size: var(--body-size);
	font-weight: var(--body-weight-medium);
	border-radius: var(--border-radius-max);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 3rem;
	width: 100%;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 140ms linear;
}

.button__primary {
	background-color: var(--action-blue-500);
	color: var(--white);
}

.button__primary:hover {
	background-color: var(--action-blue-500);
	color: var(--white);
	box-shadow: var(--shadow-1);
}

.button__link {
	background-color: transparent;
	color: var(--action-blue-500);
	border: 1px solid var(--black-100);
}

.button__link:hover {
	background-color: var(--black-50);
	color: var(--action-blue-600);
	box-shadow: var(--shadow-1);
}

.button__secondary {
	background-color: var(--black-100);
	color: var(--black-500);
	margin-top: 0.5rem;
}

.button__cancel {
	background-color: var(--white);
	color: var(--red-500);
	margin-top: 0.5rem;
}

.button__cancel:hover {
	background: var(--red-100);
}

.forgot-password {
	width: auto;
	margin-top: 0;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: right;
}

.forgot-password a {
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 140ms ease-out;
}

.forgot-password a:focus-visible {
	padding: 0 .75rem;
}

.link__secondary {
	color: var(--black-300);
	font-size: var(--support-text-size); /* 14px */
	font-weight: var(--support-text-weight-r);
	font-style: var(--support-text-style);
	line-height: var(--support-text-line-height); /* 20px */
}

.link__secondary:hover {
	color: var(--action-blue-500);
	font-weight: var(--support-text-style-m);
}

.form-card p a {
	font-weight: var(--support-text-weight-r);
}

/* Vertical Space */

.spacer__small {
	height: 1rem;
}

.spacer__medium {
	height: 1.5rem;
}

.spacer {
	height: 2.5rem;
}

.spacer__large {
	height: 3.25rem;
}


/*//	Validation Messages		//*/


/*  Summary  */

.text-danger.validation-summary-errors ul li {
	list-style: none;
	text-indent: -1rem;
}

.text-danger.validation-summary-errors {
	border: 1px solid var(--red-500);
	border-radius: var(--border-radius-medium);
	background-color: var(--red-100);
	color: var(--Black-500);
	font-weight: var(--body-weight-regular);
	margin: 1.5rem 0;
}

/*	Inline  */

.input-validation-error {
	border: 1px solid var(--red-500);
}

.field-validation-error {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: .025rem;
	display: flex;
	height: auto;
	align-items: center;
	margin-top: 0.75em;
	padding: 0 .25rem;
	color: var(--red-500);
}


/*--------------------------------

	Alert styles  

----------------------------------*/

.alert {
	display: flex;
	align-items: flex-start;
	padding: 1rem;
	border-radius: var(--border-radius-small);
	margin-bottom: 1.5rem;
	border: 1px solid var(--black-300);
	background-color: var(--black-100);
	font-size: 1rem;
}

.alert .material-icons-round {
	font-size: 1.5rem;
	margin-right: 0.75rem;
}

.alert .message {
	flex: 1;
	color: var(--black-500);
}

.alert .title {
	font-weight: var(--body-weight-medium);
	color: var(--black-500);
}

/*---	Alert Types 	---*/

.alert.error {
	border-color: var(--red-500);
	background-color: var(--red-100);
	color: var(--red-500);
}

.alert.warning {
	border-color: var(--orange-500);
	background-color: var(--orange-100);
	color: var(--orange-500);
}

.alert.success {
	border-color: var(--green-500);
	background-color: var(--green-100);
	color: var(--green-500);
}

.alert.info {
	border-color: var(--action-blue-400);
	background-color: var(--action-blue-100);
	color: var(--action-blue-400);
}

/*---	Validation Summary List  ---*/

.alert ul,
.list-with-svg {
	list-style: none;
	padding-left: unset;
	line-height: 1.5rem;
}

.list-with-svg li {
	font-size: 1rem;
	line-height: 2rem;
	display: flex;
	align-items: center;
}

.alert ul li:before,
.list-with-svg li::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	line-height: 1.5rem;
	display: inline-flex;
	align-items: center;
	background-image: url("https://assets.codepen.io/790592/Error.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	margin-right: 1rem;
}

.alert a {
	color: unset;
}

/*---	External Login		---*/

.or {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--black-300, #53586E);
	font-family: Poppins;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.5rem;
	padding: 1rem 0 1rem 0;
}

button.btn.btn-primary.external-login {
	width: 100%;
	font-size: 1rem;
	color: var(--black-500, #010206);
	font-family: Poppins;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	height: 3rem;
	border-radius: 3rem;
	border: 1px solid var(--black-100) !important;
	background: var(--white);
	cursor: pointer;
}

.login-with-google-btn {
	transition: background-color 0.3s, box-shadow 0.3s;
	height: 3rem;
	line-height: 1rem;
	display: flex;
	align-items: center;
	text-align: center;
	border-radius: 3rem;
	color: var(--black-500);
	font-size: 1rem;
	font-weight: 500;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: 3.25rem 14px;
	border: 1px solid var(--black-100);
	cursor: pointer;
	width: 100%;
	margin: 0 auto;
	justify-content: center;
}

.login-with-google-btn:hover {
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 0 11px rgba(0, 0, 0, 0.05);
}

.login-with-google-btn:active {
	background-color: #eeeeee;
}

.login-with-google-btn:focus {
	outline: none;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}


/*--------------------------------

	 Link Panel Styles  

----------------------------------*/

.settings-container {
	padding: 20px;
}

.settings-section h2 {
	color: var(--black-300, #53586E);
	font-family: Poppins;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.5rem;
	margin-top: 0;
	margin-bottom: .75rem;
}

.settings-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.settings-item {
	margin-bottom: 1rem;
}

.settings-item .settings-link * {
	transition: all 150ms linear;
}

.settings-item:hover .settings-link *,
.settings-item:focus .settings-link * {
	color: var(--action-blue-600);
}

.settings-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--white);
	padding: 1rem 1.5rem;
	border-radius: .5rem;
	text-decoration: none;
	color: var(--black-500);
	box-shadow: none;
	border: 1px solid var(--black-100);
	text-align: left;
	max-height: 3.5rem;
	line-height: 1rem;
}

.settings-link .icon {
	margin-right: .75rem;
	font-size: 1.5rem;
	color: var(--black-500);
}

.settings-link .text {
	flex: 1;
	font-size: 1rem;
	font-weight: 400;
}

.settings-link .arrow {
	font-size: 1.5rem;
	color: var(--black-500);
}


/*--------------------------------

    Breadcrumb Styles  

----------------------------------*/

.breadcrumbs {
	background-color: unset;
	line-height: 2.5rem;
	margin-bottom: unset;
	padding: 2.5rem 2.5rem 0 2.5rem;
}

.breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	height: 2.5rem;
	align-items: center;
}

.breadcrumbs li + li::before {
	content: "/";
	margin: 0 0.75rem;
	color: var(--black-300, #53586E);
}

.breadcrumb-link {
	font-family: Poppins, sans-serif;
	font-size: 1rem;
	font-style: normal;
	line-height: 1.5rem;
	text-decoration: none;
	color: var(--black-300, #53586E);
	font-weight: 400;
}

.breadcrumbs a.breadcrumb-link {
	min-height: 2.75rem;
	padding: .75rem 0;
	line-height: 2.75rem;
}

.breadcrumb-link[aria-current="page"] {
	font-weight: 500;
	color: var(--black-500, #010206);
	pointer-events: none;
}

.breadcrumb-link:hover:not([aria-current="page"]) {
	color: var(--action-blue-500, #0074E0);
}
 
.breadcrumb-link:focus {
	outline: 2px solid var(--action-blue-500, #0074E0);
	outline-offset: 0.25rem;
}

.breadcrumb-link:focus-visible {
	outline: 2px solid var(--action-blue-500, #0074E0);
	outline-offset: 0.25rem;
	border-radius: 0.25rem;
}

.breadcrumbs li + li {
	margin-left: 0.25rem;
}

@media (max-width: 768px) {
    .breadcrumbs {
        padding: unset;
        width: 100%;
        height: max-content;
    } 

	.breadcrumbs ol {
		display: grid;
		height: min-content;
		padding: 1.5rem 0.5rem;
		position: relative;
	}
	.breadcrumbs li {
        padding: 0 1.5rem;
        line-height: 1.5rem;
    }

    .breadcrumb-link {
        font-family: Poppins, sans-serif;
        font-size: var(--accent-size);
        line-height: 2rem;
        text-decoration: none;
        color: var(--black-300, #53586E);
        font-weight: 400;
    }

    .breadcrumbs ol li:not(:first-of-type) {
        margin-left: -.75rem;
    }

    .breadcrumbs li+li::before {
        content: ">";
        margin: 0 0.75rem;
        color: var(--black-300, #53586E);
    }

    .breadcrumbs li:has([aria-current="page"])::before {
        color: var(--black-400);
    }

	.card-container {
		max-width: 100dvw;
		border: 0px solid var(--black-100);
		padding: 2.5rem;
		border-radius: .5rem;
		margin: 0 auto 20rem auto;
	}  
}

@media (min-width: 770px) {
	.hide-on-desktop {
		display: none!important;
	}
}

/*--------------------------------

    Reference Panel Styles  

----------------------------------*/

.reference-panel {
	padding: 2.5rem;
}

.reference-panel .support-text-m {
	font-size: 1rem;  
	padding-bottom: .5rem;
	font-weight: 500;
} 

.reference-panel .support-text-m,
.reference-panel p {
	color: var(--black-500);
}

.reference-panel .body-r {
	color: var(--black-400);
}

/* compatibility changes for ported password forgot + reset pages */

.spacer-80{
	height: 80px;
}
.spacer-16 {
    height: 16px;
}

.control-label {
	margin-top: 0.5rem;
	margin-bottom: 0.2rem;
}

.field-indicator {
	background-color: transparent;
	width: 3em;
	height: calc(3em + 2px);
	display: flex;
	position: absolute;
	padding: 0.95em;
}

.field-icon {
	background-color: transparent;
	width: 3em;
	height: calc(3em + 2px);
	display: flex;
	position: absolute;
	right: 0;
	padding: 0.95em;
	align-items: center;
	justify-content: center;
	border-radius: 0.25em;
	cursor: pointer;
	z-index: 2;
}


.password-icon-input{
	padding-left: 2.5rem;
}

.password-toggle-input {
    padding-right: 2.5rem;
}

.form-group {
	position: relative;
}

.alert {
	flex-direction: column;
}

/* icons */

.fa-eye {
	content: url(/assets/eye-closed.png);
	opacity: .25;
}

.fa-eye-slash {
	content: url(/assets/eye-open.png);
	opacity: .25;
}

.password-icon {
	content: url(/assets/lock-icon.svg);
}


/* Manage page scoped styles moved to resident-manage.css */