:root {
	/* client variables */
	/* client colors */
	--client-blue: #2a5fa6;
	--client-blue-light: #85cce6;
	--client-blue-dark: #255493;
	--client-navy-blue: #19226f;
	--client-teal: #0c7b97;
	--client-header-blue: #2880b9;
	--client-gray-medium: #e3e3e3;
	--client-gray-light: #f0f0f0;
	--client-gray-dark: #484848;
	--client-yellow: #e7b523;

	/* client font */
	--font-size: 14px;
	--font-family-pri: 'Open Sans', Arial, Calibri, sans-serif;
	--font-family-alt: 'Open Sans', Arial, Calibri, sans-serif;
	--font-family: var(--font-family-pri);
}

/*
    General Elements/Classes
*/

html,
body {
	font-family: var(--font-family);
	text-rendering: optimizeLegibility;
}

h1,
.h1 {
	font-size: 40px;
	line-height: 1.4;
	color: var(--client-header-blue);
	font-weight: 600;
	font-family: var(--font-family-h1);
}

h2,
.h2 {
	font-size: 24px;
	line-height: 1.4;
	color: var(--client-blue-dark);
	font-weight: 500;
	font-family: var(--font-family-h2);
}

h3,
.h3 {
	font-size: 20.8px;
	line-height: 1.4;
	color: var(--client-blue-dark);
	font-weight: 500;
	font-family: var(--font-family-h3);
}

h4,
.h4 {
	font-size: 19.2px;
	line-height: var(--font-lineheight-h4);
	color: var(--font-color-h4);
	font-weight: 500;
	font-family: var(--font-family-h4);
}

a {
	color: var(--client-blue-dark);
	font-weight: 600;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
		color: var(--client-teal);
	}
}

.divider::before {
	background-color: var(--client-blue-dark);
}

.horizontal-divider {
	border-color: var(--client-blue-dark);
}

.vertical-divider {
	border-color: var(--client-blue-dark);
}

.fiviMultiSeperator {
	height: 1px;
	width: 50%;
	align-self: center;
	&:after {
		background-color: var(--client-blue-dark);
	}
}

.page-text {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--client-gray-dark);
}

/*
    Layout
*/

.layout,
.layout:has(.status-center-page) {
	background-color: var(--client-gray-medium);
}

/*
    Header Styling
*/

.layout header,
.layout:has(.status-center-page) header {
	background-color: var(--client-gray-medium);
	padding: 0;
	& > .layout-container {
		background-color: white;
		padding-top: 10px;
		position: relative;
		height: 109px;
		width: 100vw;
		max-width: 1300px;
		display: flex;
		flex-wrap: wrap;

		& > .routing-container {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 10px;
			padding: 10px 30px 10px 0;
			& > a {
				color: var(--client-gray-dark);
				font-weight: 600;
				font-size: 13px;
				align-self: flex-start;
			}
			& > #routingCopy:before {
				font-family: FontAwesome;
				content: '\f0c5';
				font-style: normal;
				font-weight: 500;
			}
		}
		& > a:has(> img) {
			position: absolute;
			left: 0;
			top: 17px;
			& > img {
				max-width: 220px;
			}
		}
	}
}

/* 
    Main
*/

.layout main,
.layout:has(.status-center-page) main {
	& .layout-container,
	& .layout-container:has(.page-Default-Content) {
		background-color: var(--client-gray-light);
		max-width: 1300px;
		outline: none;
		& > div {
			display: flex;
			justify-content: center;
			& .page-container {
				max-width: var(--column-width-12);
				&:not(.page-Default-Content) {
					border-radius: 10px;
					background-color: white;
					max-width: calc(
						var(--column-width-12) + calc(var(--column-spacer) * 2)
					);
					padding: var(--column-spacer);
				}
				& > .page-container {
					padding: 0;
				}
			}
		}
	}
}

/*
    Footer Styling
*/

.layout footer,
.layout:has(.status-center-page) footer {
	background-color: var(--client-gray-medium);
	padding: 0;
	display: flex;
	& > .layout-container {
		width: 100vw;
		max-width: 1300px;
		background-color: var(--client-blue-dark);
		& > .footer-container {
			display: flex;
			justify-content: center;
			border-bottom: 3px solid #3ba9c5;
			width: 100%;
			justify-content: flex-end;

			& > .footer-contact {
				display: flex;
				flex-direction: column;
				gap: 30px;
				align-items: center;
				/* width: 100vw; */
				/* max-width: 30%; */
				padding: 70px 40px 30px 40px;
				border-right: 1px white solid;
				color: white;
				flex-basis: 25%;

				& > img {
					max-width: 200px;
				}
				& .footer-phone {
					font-size: 18px;
					font-weight: 600;
				}
				& .footer-address {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				& .footer-contact-links {
					display: flex;
					gap: 10px;
				}
				& .page-text {
					color: white;
					width: fit-content;
					font-size: 14.5px;
					line-height: 1.7;
				}
			}
			& .footer-company-logos {
				padding: 70px 40px 30px 40px;
				width: 100vw;
				max-width: 100%;
				display: flex;
				flex-direction: column;
				gap: 20px;
				flex-basis: 75%;

				& .footer-logo-container {
					display: flex;
					gap: 10px;
					justify-content: center;
					padding: 0 12px;
					& > img {
						height: 70px;
					}
				}
				& > .footer-copywrite {
					display: flex;
					flex-wrap: wrap;
					padding: 0 12px;
					gap: 5px;
					& > .page-text {
						color: white;
						width: fit-content;
						font-size: 14.5px;
						line-height: 1.7;
					}
					& > div:last-of-type {
						width: 100%;
					}
				}
				& > .footer-application-number {
					padding: 0 12px;
					color: white;
					font-size: 10px;
					line-height: 1.7;
					text-align: right;
					/* opacity: 0.25; */
				}
			}
		}
	}
}

@media all and (max-device-width: 1320px), all and (max-width: 1320px) {
	.layout header,
	.layout:has(.status-center-page) header {
		& > .layout-container {
			& > a:has(> img) {
				& > img {
					max-width: 150px;
				}
			}
		}
	}

	.layout footer,
	.layout:has(.status-center-page) footer {
		& > .layout-container {
			max-width: 100%;
		}
	}
}

@media (max-device-width: 1106px), (max-width: 1106px) {
	.layout main > .layout-container,
	.layout:has(.status-center-page) main > .layout-container {
		padding: var(--gap-vertical-150) 5px;
		max-width: 100%;
		& > div {
			& .page-container {
				&:not(.page-Default-Content) {
					padding-left: calc(calc(var(--column-spacer) * 0.5) - 5px);
					padding-right: calc(calc(var(--column-spacer) * 0.5) - 5px);
				}
			}
		}
	}
}

@media all and (max-device-width: 1000px), all and (max-width: 1000px) {
	.layout footer,
	.layout:has(.status-center-page) footer {
		& > .layout-container {
			& > .footer-container {
				flex-direction: column;
				& .footer-contact {
					padding-left: 12px;
					padding-right: 12px;
				}
				& .footer-company-logos {
					padding-left: 0;
					padding-right: 0;
				}
			}
		}
	}
}

@media all and (max-device-width: 650px), all and (max-width: 650px) {
	.layout footer,
	.layout:has(.status-center-page) footer {
		& > .layout-container {
			& > .footer-container {
				& .footer-company-logos {
					& .footer-logo-container {
						& > img {
							height: 50px;
						}
					}
				}
			}
		}
	}
}

@media all and (max-device-width: 500px), all and (max-width: 500px) {
	.layout footer,
	.layout:has(.status-center-page) footer {
		& > .layout-container {
			& > .footer-container {
				& .footer-company-logos {
					& .footer-logo-container {
						& > img {
							height: 40px;
						}
					}
				}
			}
		}
	}
}

@media (max-device-width: 475px), (max-width: 475px) {
	.layout header,
	.layout:has(.status-center-page) header,
	.layout main,
	.layout:has(.status-center-page) main,
	.layout footer,
	.layout:has(.status-center-page) footer {
		padding: 0 0;
	}
}

@media all and (max-device-width: 400px), all and (max-width: 400px) {
	.layout header,
	.layout:has(.status-center-page) header {
		& > .layout-container {
			& > .routing-container {
				display: none;
			}
		}
	}
	.layout footer,
	.layout:has(.status-center-page) footer {
		& > .layout-container {
			& > .footer-container {
				& .footer-company-logos {
					& .footer-logo-container {
						& > img {
							height: 30px;
						}
					}
				}
			}
		}
	}
}

/*
    Page General Containers
*/

.page-navigation-container {
	margin-top: 0;
	padding-top: var(--gap-vertical-200);
	border-top: solid 1px var(--client-blue-dark);
}

.section-header {
	&:after {
		background-color: var(--client-blue-dark);
	}
}

.funding-detail {
	& .section-header {
		justify-content: center;
		&:after {
			flex-shrink: unset;
		}
		&:before {
			background-color: var(--client-yellow);
		}
	}
}

/*
    Buttons
*/

.button-primary,
.status-center-page .button-primary {
	background-color: var(--client-blue-dark);
	border: 1px solid var(--client-blue-dark);
	color: white;
	border-radius: 30px;
	font-weight: 600;
	padding: 10px 25px;
	font-size: 16px;
	line-height: 1.5;
	min-width: unset;
	&:hover:not(:disabled),
	&:active:not(:disabled),
	&:focus:not(:disabled) {
		background-color: var(--client-blue-dark);
		color: white;
		color: var(--client-blue-dark);
		background-color: transparent;
	}
	&:visited {
		color: white;
	}
}

.button-other,
.status-center-page .button-other,
.status-center-page .btn-primary,
.status-center-page .btn-default {
	background-color: white !important;
	border-color: var(--client-blue-dark) !important;
	color: var(--client-blue-dark) !important;
	&:hover:not(:disabled),
	&:active:not(:disabled),
	&:focus:not(:disabled) {
		border-color: var(--client-yellow) !important;
		color: var(--client-yellow) !important;
		background-color: white !important;
	}
}

.status-center-page .btn-primary {
	box-shadow: none;
	text-shadow: none;
}

.button-link,
.status-center-page .button-link {
	color: var(--client-blue-dark);
	&:hover:not(:disabled),
	&:active:not(:disabled),
	&:focus:not(:disabled) {
		color: var(--client-teal);
	}
}

/*
    Inputs/Labels
*/

input.DefaultCBControlClassV3,
input.DefaultRBControlClassV3 {
	accent-color: var(--client-navy-blue);
	&:hover {
		accent-color: var(--client-blue-dark);
	}
	& + label {
		font-weight: 400;
	}
}

input.form-control,
select.form-control {
	color: var(--client-gray-dark);
	border-color: var(--client-gray-medium);
	font-family: var(--font-family-input);
	&:focus,
	&:active {
		border-color: var(--client-blue-dark);
	}
	&:disabled {
		background-color: var(--color-gray-light);
	}
}

.external-label {
	font-size: 18px;
}

.page-FundingMethod label[for='cbFundingDisclosure'] {
	color: red;
}

/*
    Components
*/

.fiviControl.fiviTextBox {
	& label.DefaultLabelClass {
		font-weight: 400;
	}
	& label.FocusLabelClass {
		font-weight: 600;
	}
	& .fiviWriteOnlyEditButton,
	& .fiviControlActionsContainer .fiviLinkButton {
		font-weight: 600;
		color: var(--color-secondary-dark);
		&:hover,
		&:active,
		&:focus {
			text-decoration: underline;
			border-color: transparent;
		}
	}
	& > .fiviValueLabelContainer {
		font-family: var(--font-family-input);
	}
}

.fiviControl.fiviDropDown {
	&:has(option[value='']:checked) {
		& label.DefaultLabelClass {
			font-weight: 400;
		}
	}
}

.fiviAddressControl .fiviBtnContainer {
	& .fiviBtnContainer {
		& button {
			font-weight: 600;
			color: var(--color-secondary-dark);
			&:active,
			&:hover,
			&:focus {
				text-decoration: underline;
				border-color: transparent;
			}
		}
	}
}

.fiviProductServices {
	& > .product-services-default-mode-container {
		& .fiviProdGroup,
		& .fiviServGroup {
			& > .fiviProductDisplay {
				border-color: #e1dfda;
				border-radius: 10px;
				&:has(> .fiviRadioButton input:checked) {
					background-color: var(--client-gray-light);
				}
			}
			& .fiviCheckBox {
				& > label {
					color: var(--client-navy-blue);
				}
			}
		}
	}
}

.fiviEmploymentHistory .fiviRemoveBtn {
	color: var(--client-blue-dark);
}

.fiviIndividualIncome > div {
	& .fiviIndividualIncomeRemoveButtonContainer:has(> button) {
		& > button,
		&:before,
		&:after {
			color: var(--client-blue-dark);
		}
	}
}

.fiviDisclosureList {
	& .DisclosureLinkV3 {
		color: var(--color-primary-dark);
	}
}

.fiviIDAuthentication {
	& .fiviIDAuthSubmitAnswerContainer {
		border-color: var(--client-blue-dark);
	}
}

.fiviCCInfo > span:nth-of-type(2) {
	&:before {
		color: var(--font-color-label);
	}
}

.fiviCCInfo > span:nth-of-type(4) {
	& > input.form-control {
		&:focus,
		&:active {
			border-left: 2px solid var(--client-blue-dark);
		}
	}
}

.fiviCCInfo > span:nth-of-type(2) {
	& > select.form-control {
		&:focus,
		&:active {
			border-right: 2px solid var(--client-blue-dark);
		}
	}
}

.fiviOTP {
	.fiviOTPButtonContainer {
		border-color: var(--client-blue-dark);
	}
}

.progress-container {
	padding: 10px 30px 10px 0;
}

.journey-bar {
	& .journey-bar-group.current-group:after {
		background-color: var(--client-yellow);
	}
	& .journey-bar-group.future-group:after {
		background-color: color-mix(
			in srgb,
			var(--client-blue) 10%,
			transparent
		);
	}
	& .journey-bar-group.previous-group:after {
		background-color: color-mix(
			in srgb,
			var(--client-blue) 66%,
			transparent
		);
	}
}

@media (max-device-width: 875px), (max-width: 875px) {
	.journey-bar-group > span {
		display: inline;
	}
}

@media all and (max-device-width: 836px), all and (max-width: 836px) {
	.journey-bar > table {
		justify-content: flex-end;
	}

	.journey-bar-group > span {
		display: inline;
	}
}

@media all and (max-device-width: 615px), all and (max-width: 615px) {
	.progress-container {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding-left: 5px;
		padding-right: 5px;
		& > .fiviProgressBar {
			width: 100%;
		}
	}

	.journey-bar > table {
		justify-content: center;
	}

	.journey-bar-group > span {
		display: none;
	}
}

@media (max-device-width: 475px), (max-width: 475px) {
	.progress-container {
		width: 100%;
		flex-grow: 1;
	}
}

.fiviDocumentList table > tbody > tr,
.fiviDocumentList table > thead > tr {
	border-color: var(--color-gray-dark);
}

.existing-list-container {
	gap: var(--gap-horizontal-75);
	justify-content: flex-start;
	align-items: flex-start;
	& .fiviLinkButton {
		color: var(--client-blue-dark);
		font-weight: 600;
		text-decoration: none;
		&:hover,
		&:active,
		&:hover {
			text-decoration: underline;
			color: var(--client-teal);
		}
	}
}

.fiviProductFunding {
	& .fiviProductFundingItem,
	& .fiviFundingAmount {
		border: none;
		& .fiviProductFundingProductLabel {
			gap: 10px;
			&:after {
				display: none;
			}
		}
		& label {
			border: none;
		}
	}
}

.fiviEmpHistInputContainer {
	& .fiviEmpHistIncomeContainer {
		order: unset;
		& .fiviDropDown {
			order: unset;
		}
	}
}

.fiviExistingAccountOwnerListContainer {
	& .fiviLabelContainer:has(.section-header) {
		width: 100%;
		margin-bottom: 0;
	}
	& .fiviEmailTextBox {
		display: none;
	}
}

.fiviBeneficiaries {
	/*
		NOTICE: if config requires another column, another class must be added.
	*/

	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: left;
	padding: 0 var(--gap-horizontal);

	.fiviControl.fiviDropDown select:has(option[value='']:checked) {
		color: inherit;
	}

	.fiviTableHead {
		display: none;
	}

	.table-striped > tbody > tr:nth-child(odd) > td,
	.table-striped > tbody > tr:nth-child(odd) > th {
		background-color: inherit;
	}

	.fiviTableRow td:nth-child(1)::before {
		content: 'Individual: ';
		font-weight: 600;
		font-size: 16px;
	}
	.fiviTableRow td:nth-child(2) {
		display: none;
	}
	.fiviTableRow td:nth-child(2)::before {
		content: 'Beneficiary Type: ';
		font-weight: 600;
		font-size: 16px;
	}
	.fiviTableRow td:nth-child(3)::before {
		content: 'Percentage: ';
		font-weight: 600;
		font-size: 16px;
	}
	.fiviTableRow td:nth-child(4)::before {
		content: 'Relationship to Applicant: ';
		font-weight: 600;
		font-size: 16px;
	}
	.fiviTableRow td::before {
		display: inline-block;
		width: 180px;
		color: #333;
	}
	.fiviTableRow td {
		display: block;
		border-bottom: 1px solid #eee;
		padding: 8px;
		font-size: 18px;
	}
	.fiviTableRow {
		display: block; /* Each row is a vertical group of cells */
		border: 1px solid #ddd;
		margin-bottom: var(--gap-horizontal);
	}
	.fiviTable {
		border-collapse: separate;
		width: fit-content;
		margin: 0 auto;
	}
	.fiviBtnContainer {
		display: none;
	}
}

/*
    Page Specific
*/

.page-Default-Overlay > .overlay {
	margin: 0 auto;
}

.page-Default-Content {
	& .h1 {
		font-weight: 600;
		color: var(--client-navy-blue);
	}
	& .lets-get-started-container {
		border-color: transparent;
		border-radius: 10px;
		background-color: white;
		gap: 12px;
		& > .what-you-need {
			color: var(--client-gray-dark);
			margin-top: 0;
		}
	}
	& .default-thumbnail-container {
		flex-direction: column;
		width: auto;
		max-width: var(--column-width-10);
		& > .thumbnail {
			border-color: transparent;
			border-radius: 10px;
			background-color: white;
		}
	}
	& .thumbnail-call-to-action {
		& .fiviBtnContainer:after,
		& .arrow-right:after {
			color: var(--client-blue-dark);
		}
		&:hover {
			& .fiviBtnContainer:after,
			& .arrow-right:after {
				color: var(--client-teal);
			}
		}
	}
}

.page-SelectAccount {
	& .product-services-container {
		& > .product-service-container {
			outline-color: var(--color-gray-dark);
			&:not(> .expanded):hover {
				background-color: var(--color-gray-light);
			}
			& > .product-service-heading {
				font-size: var(--font-size-h3);
				color: var(--font-color-h3);
				&:after {
					color: var(--font-color-h3);
				}
			}
		}
	}
}

.page-FundingMethod {
	& .funding-method-container {
		& > .fiviPanel {
			& .fiviRadioButton {
				& input {
					& + label {
						border-color: var(--client-gray-medium);
						&:hover,
						&:active,
						&:focus {
							color: var(--client-blue);
							border-color: var(--client-blue);
						}
					}
					&:checked + label {
						color: var(--client-blue);
						border-color: var(--client-blue);
						background-color: var(--client-gray-light);
					}
				}
			}
		}
	}
	& .funding-detail {
		border-color: var(--client-gray-medium);
		border-radius: 10px;
	}
}

.page-text.invalid-business-list {
	margin-top: 0;
	padding-left: 60px;
	font-size: calc(var(--font-size) -2px);
	& > li {
		margin: 0;
	}
}

@media (max-device-width: 475px), (max-width: 475px) {
	.page-text.invalid-business-list {
		padding-left: 20px;
	}
}

/*
    Status Center Overrides
*/

.status-center-page {
	--font-family: 'Open Sans', Arial, Calibri, sans-serif;

	& input.form-control,
	& select.form-control {
		color: var(--client-gray-dark);
		border-color: var(--client-gray-medium);
		font-family: var(--font-family-input);
		box-shadow: none;
	}
	& .DefaultLabelClassV3 {
		font-family: var(--font-family-label) !important;
		color: var(--font-color-label) !important;
		margin-left: 0 !important;
	}
	& .V3SummaryHeader > #topNav > ul > .nav-item > a {
		color: var(--client-navy-blue) !important;
		fill: var(--client-navy-blue) !important;
	}
	& .V3SummaryHeader > #topNav > ul > .nav-item.active {
		border-color: var(--client-blue-dark);

		& > a {
			color: var(--client-yellow) !important;
			fill: var(--client-yellow) !important;
		}
	}
	& .V3SummaryHeader > #topNav > ul > .nav-item .badge {
		background-color: var(--color-secondary-normal);
	}
	& .h1,
	& .h2,
	& .h3,
	& .h4,
	& h1,
	& h2,
	& h3,
	& h4 {
		color: var(--client-navy-blue);
		font-family: var(--font-family);
	}
	& .V3SummaryControl .container-fluid > div > .task {
		border-color: var(--client-gray-medium);
		border-radius: 10px;
	}
	& article .task:hover {
		background-color: var(--color-gray-light);
	}
	& .V3SummaryControl .container-fluid > div > .task .task-title {
		color: var(--client-header-blue);
	}
	& .V3SummaryControl .container-fluid > div > .task > .task-icon {
		fill: var(--client-header-blue);
	}
	& .V3SummaryControl > header {
		background-color: white;
	}
}

/* TruStage */

.TruStageProductPanel {
	display: flex;
	flex-direction: column;
	gap: var(--gap-horizontal-50);

	padding: var(--gap-horizontal);
	font-size: var(--font-size);
	line-height: var(--font-lineheight);
	font-weight: var(--font-weight);
	color: var(--font-color);
	width: 100%;
}

.TruStageOfferPanel {
	display: flex;
	flex-direction: column;
	gap: var(--gap-horizontal-75);
}

.TruStageOfferPanelClass-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--gap-vertical-150);
}

.TruStageProductName {
	font-size: calc(var(--font-size-label) + 4px);
	height: auto;
}

.TruStageInsuranceProductName {
	font-size: calc(var(--font-size-label) + 2px);
}

.TruStageLoanProductAnswerClass {
	display: flex;
	flex-direction: column;
	gap: var(--gap-horizontal-25);
}

.TruStageLongDescription {
	padding-top: 10px;
	border-top: 1px solid darkgray;
	margin-top: 10px;
}
.button-other {
	text-transform: none;
}