@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');

@import "nx/nx.css";
@import "nx/nx_buttons.css";
@import "nx/nx_privacy_1.css";

:root {
	/*Colors*/
	--primary: var(--p-primary-500);

	--p-primary-50:  #edf7ec;
	--p-primary-100: #d2ecd0;
	--p-primary-200: #abd9a7;
	--p-primary-300: #83c67e;
	--p-primary-400: #65b662;
	--p-primary-500: #57A74F;
	--p-primary-600: #4d9445;
	--p-primary-700: #427f3b;
	--p-primary-800: #386b31;
	--p-primary-900: #2e5728;
	--p-primary-950: #213f1d;

	--accent: #21BDCB;
	--cta: var(--primary);
	--cta-hover: #0A9666;

	--body-text-font: 'Nunito', sans-serif;
	--body-text-color: var(--text-medium);
	--body-text-size: 16px;

	--bg-dark: #0A4CA1;
	--bg-medium: var(--p-primary-50);
	--bg-light: #F7F7F7;

	--border-light: #E6E6E6;

	--text-dark: #1e1e1e;
	--text-medium: #808080;
	--text-light: #D6D6D6;
	--link-color: var(--cta);

	--text-header-font: 'Nunito', sans-serif;
	--text-header-size: clamp(24px, 4vw, 40px);
	--text-header-weight: 700;
	--text-header-color: var(--bg-dark);

	--text-subheader-size: clamp(16px, 2vw, 24px);
	--text-subheader-weight: 400;
	--text-subheader-font: var(--body-text-font);
	--text-subheader-color: var(--body-text-color);

	--page-header-border-radius: 60px;
	--header-bg: var(--body-bg);
	--header-padding-y: 10px;
	--header-mobile-padding-y: 10px;
	--header-fixed-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
	--header-font-weight: 600;
	--header-color: var(--text-header-color);
	--header-main-nav-text-size: 16px;
	--header-main-nav-hover-color: var(--text-header-color);
	--header-main-nav-underline-color: var(--text-header-color);
	--header-active-color: var(--text-header-color);
	--header-logo-height: 43px;
	--header-mobile-color: var(--text-header-color);
	--header-mobile-size: 16px;
	--header-mobile-weight: 700;
	--header-mobile-hover-color: var(--text-inverse);
	--header-mobile-hover-bg-color: var(--cta);
	--header-toggle-bg: var(--cta);
	--header-toggle-bg-hover: var(--cta-hover);
	--top-header-text-size: 14px;
	--top-header-hover: var(--primary);

	--terms-section-bg: var(--bg-light);

	--footer-text-size: 16px;
	--footer-dso-logo-height: 40px;
	--footer-text-hover: var(--primary-bg);
	--footer-nav-bg: var(--bg-light);
	--footer-text-hover: var(--bg-dark);

	--page-header-max-height: 375px;
	--p-carousel-indicator-active-background: var(--bg-dark);

	--savings-summary-note-size: 16px;
	--savings-summary-note-weight: 500;

	--find-wrapper-bg: rgba(11, 77, 162, 0.8);
	--find-steps-title-size: clamp(25px, 4vw, 40px);
	--find-form-search-btn-office-label-display: none;
	--find-form-border-color: var(--bg-dark);
	--find-steps-border-top-radius: 100px;
	--find-steps-border-top-mobile-radius: 40px;
	--find-steps-icon-size: 100px;
	--find-steps-active-icon-color: var(--accent-bg);
	--find-steps-inactive-icon-color: var(--accent-bg);
	--find-steps-completed-icon-color: var(--accent-bg);
	--find-steps-subtitle-size: clamp(19px, 2vw, 24px);
	--find-steps-subtitle-weight: 400;
	--find-steps-completed-bg: transparent;
	--find-steps-complete-check-bg: var(--accent-bg);
	--find-steps-number-size: 40px;
	--find-steps-number-mobile-size: 32px;
	--find-steps-number-text-color: #444;
	--find-steps-number-text-weight: 700;
	--find-steps-number-text-size: clamp(17px, 2vw, 20px);
	--find-steps-text-size: clamp(15px, 2vw, 20px);
	--find-steps-weight: 700;
	--find-form-label-color: var(--text-dark);
	--find-content-border-radius: 50px;
	--find-content-border-color: transparent;
	--find-content-border-mobile-radius: 10px;
	--find-content-bg: var(--bg-light);
	--find-office-select-btn-height: 42px;
	--find-office-select-btn-border-radius: 10px;
	--find-office-select-btn-font-size: 18px;
	--find-office-details-title-size: 20px;
	--find-office-details-title-weight: 700;
	--find-office-details-title-font:var(--text-header-font);
	--find-office-details-title-color: var(--text-header-color);
	--find-office-details-icon-color: var(--accent-bg);
	--find-office-details-content-size: 16px;
	--find-office-details-content-color: var(--text-dark);
	--find-results-title-size: 20px;
	--find-office-details-phone-weight: 600;
	--find-office-details-phone-color: var(--text-header-color);
	--find-results-title-weight: 600;
	--find-results-title-color: var(--text-dark);
	--find-map-border-color: var(--bg-dark);
	--find-map-border-width: 1px;

	--faq-entry-border-color: transparent;
	--faq-entry-title-color: var(--text-header-color);
	--faq-entry-title-size: clamp(17px, 2vw, 20px);
	--faq-contact-info-title-align: left;
	--faq-contact-info-title-text-align: left;
	--faq-contact-info-title-md-align: left;
	--faq-contact-info-title-md-text-alight: left;
	--faq-open-icon-bg: var(--primary);
	--faq-entry-title-weight: 700;
	--faq-answer-size: 18px;
	--faq-answer-weight: 600;
	--faq-contact-bg: var(--accent);
	--faq-image-bg: transparent;
	--faq-contact-radius: 82px;
	--faq-contact-info-title-color: var(--text-inverse);
	--faq-contact-info-text-color: var(--text-inverse);
	--faq-contact-info-text-size: 20px;
	--faq-contact-info-text-weight: 600;
	--faq-contact-margin-top: clamp(60px, 8vw, 160px);
	--faq-padding-bottom: clamp(20px, 4vw, 80px);

	--support-page-bg: var(--bg-light);
	--support-wrapper-border-width: 0;
	--support-info-bg: var(--bg-dark);
	--support-info-title-size: clamp(20px, 2vw, 24px);
	--support-info-text-size: 14px;
	--support-form-label-font: var(--text-header-font);
	--support-form-label-weight: 400;
	--support-form-label-color: var(--text-header-color);
	--support-form-label-size: 12px;

	--signup-label-color: var(--text-header-color);
	--signup-content-bg: var(--bg-light);
	--join-now-title-text-align: center;
	--join-now-title-justify: center;
	--signup-summary-title-size: 18px;
	--signup-summary-title-weight: 700;
	--signup-summary-title-font: var(--body-text-font);
	--signup-summary-body-entry-size: 17px;
	--signup-summary-body-entry-color: var(--text-medium);
	--signup-summary-disclaimer-entry-size: 14px;
	--signup-summary-total-row-size: 14px;
	--signup-summary-totals-border-color: var(--bg-dark);
	--signup-summary-link-color: var(--text-header-color);
	--signup-summary-annual-cost-bg: #E9EFFF;
	--signup-summary-due-now-bg: var(--bg-dark);
	--signup-summary-due-now-color: var(--text-inverse);

	--login-form-subtitle-display: block;
	--login-form-subtitle-size: 14px;
	--login-form-label-size: 14px;

	--custom-table-header-bg: #E9E9E9;
	--custom-table-header-color: var(--text-medium);
	--custom-table-header-font: var(--body-text-font);
	--custom-table-header-size: 18px;
	--custom-table-header-weight: 700;
	--custom-table-row-full-text-align: left;
	--custom-table-row-full-color: var(--text-inverse);
	--custom-table-row-full-bg: var(--accent);
	--custom-table-row-full-size: clamp(16px, 2vw, 20px);
	--custom-table-row-full-weight: 700;
	--custom-table-body-bg: var(--bg-light);
	--custom-table-body-size: clamp(16px, 2vw, 20px);
	--custom-table-body-last-border-width: 1px;
	--custom-table-footer-full-bg: #FFFAF0;
	--custom-table-footer-full-color: var(--text-medium);
	--custom-table-footer-full-size: 16px;
	--custom-table-footer-full-padding-y: clamp(10px, 2vw, 30px);
	--custom-table-footer-full-padding-x: clamp(10px, 2vw, 30px);
	--custom-table-padding-y: clamp(10px, 2vw, 30px);
	--custom-table-padding-x: clamp(10px, 2vw, 30px);

	--button-height: clamp(44px, 4vw ,54px);
	--button-text-size: 19px;
	--button-text-weight: 700;
	--button-border-radius: 1000px;
	--button-padding-x: 25px;
	--button-sm-height: 35px;
	--button-sm-text-size: 14px;
}

@layer components {
	/* CTA Button */
	.find-your-dentist-form-btn,
	.find-select-office-btn,
	.find-form-search-btn,
	.home-banner-btn,
	.home-cta-btn,
	.home-how-btn,
	.header-join-now-btn,
	.header-logout-btn,
	.savings-summary-btn,
	.start-btn,
	.checkout-success-btn,
	.login-btn,
	.submit-reset-btn,
	.login-forgot-submit-btn {
		color: var(--text-inverse);
		background-color: var(--cta);
		border-color: var(--cta);

		&:hover:not(:disabled) {
			background-color: var(--cta-hover);
			border-color: var(--cta-hover);
		}
	}

	/* Dark Button */
	.support-send-btn {
		color: var(--text-inverse);
		background-color: var(--bg-dark);
		border-color: var(--bg-dark);
	}

	/* Outlined Dark */
	.add-dependent-btn,
	.find-form-clear-btn,
	.find-clear-filters-btn,
	.scheduleButton,
	.login-go-back-btn {
		color: var(--text-header-color);
		background-color: transparent;
		border-width: 1px;
		border-color: var(--bg-dark);

		&:hover:not(:disabled) {
			background-color: var(--bg-dark);
			color: var(--text-inverse);
		}
	}

	/* White Btn */
	.faq-contact-btn,
	.home-questions-faq-btn {
		color: var(--accent);
		background-color: white;

		&:hover:not(:disabled) {
			background-color: var(--bg-light);
		}
	}

	/** White Outlined */
	.faq-contact-additional-btn,
	.home-questions-contact-btn,
	.support-faq-link {
		color: var(--text-inverse);
		background-color: transparent;
		border-color: white;

		&:hover:not(:disabled) {
			background-color: rgba(255, 255, 255, 0.2);
		}
	}

	.start-btn {
		font-size: 18px;
		border-radius: 10px;
		height: 61px;
	}

	.support-link {
		border-radius: 8px;
		border-color: var(--border-light);
		background-color: var(--body-bg);
		height: 32px !important;
		font-size: 12px !important;
		font-weight: 700;
		color: var(--text-dark);

		&:hover {
			color: #004a43;
		}
	}
}

.top-header,
.header {
	--container-max-width: 100%;
}

.home {
	--header-position: fixed;
	--header-bg: transparent;
	--header-fixed-bg: var(--bg-dark);
	--header-open-bg: var(--bg-dark);
	--header-mobile-nav-bg: var(--bg-dark);
	--header-mobile-color: var(--text-inverse);
	--header-fixed-color: var(--text-inverse);
	--header-main-nav-fixed-hover-color: var(--text-inverse);
	--header-hover-color: var(--text-inverse);
	--header-main-nav-hover-color: var(--text-inverse);
	--header-main-nav-underline-color: var(--text-inverse);
	--header-active-color: var(--text-inverse);
	--header-color: var(--text-inverse);
	--header-logo-alt-fixed-display: block;
	--header-logo-fixed-display: none;
	--header-logo-open-display: none;
	--header-logo-alt-open-display: block;

	--custom-table-margin-top: 32px;
	--custom-table-body-last-col-color: var(--text-dark);

	tbody tr.row-highlight td:nth-child(2) {
		font-weight: var(--text-header-weight);
	}
}

.faq {
	--page-image-header-stacked-image-align-self: start;
	 .stacked-image {
		 margin-top: -40px;
	 }

	.contact-info {
		width: 100%;
		padding-top: 120px;
		padding-bottom: 120px;

		.btn {
			min-width: 180px;
		}
	}

	.or-separator {
		display: none;
	}

	.faq-content-left-container {
		display: flex;
		justify-content: end;
	}

	.faq-contact-img-wrapper {
		max-width: 380px;
		top: unset;
		bottom: 0;
		display: flex;
		align-items: end;

		img {
			height: auto;
			object-fit: contain;
		}
	}
}

.support .main-content {
	--button-height: 40px;
	--button-text-size: 12px;
}

.custom-table {
	th:first-child,
	th:last-child,
	td:first-child,
	td:last-child {
		text-align: center !important;
	}

	td:last-child {
		background-color: #F3FEFF;
	}
	td:not(:last-child) {
		border-right: 1px solid var(--border-light) !important;
	}


	th:nth-child(3) {
		background-color: var(--bg-dark);
		color: var(--text-inverse) !important;
	}
}