@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;1,100;1,300;1,400;1,500;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,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);
	--accent: var(--primary);

	--p-primary-50:  #e9eff7;
	--p-primary-100: #ccd8ea;
	--p-primary-200: #9eb8d7;
	--p-primary-300: #7098c4;
	--p-primary-400: #4c7cb0;
	--p-primary-500: #2A4F86;
	--p-primary-600: #254575;
	--p-primary-700: #1f3b62;
	--p-primary-800: #1a314f;
	--p-primary-900: #152741;
	--p-primary-950: #0f1d30;

	--accent: #50A9D7;
	--cta: #42E2B8;
	--cta-hover: #7BE1C5;

	--body-text-font: 'Roboto';
	--body-text-color: var(--text-medium);
	--body-text-size: 19px;

	--bg-dark: var(--primary);
	--bg-medium: #DFF1FF;
	--bg-light: #F7F7F7;

	--border-light: #C0C0C0;

	--text-dark: #000;
	--text-medium: #434A4F;

	--text-header-font: 'Roboto';
	--text-header-size: clamp(24px, 2vw + 1rem, 36px);
	--text-header-weight: 500;
	--text-header-color: var(--primary);

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

	--header-bg: var(--body-bg);
	--header-color: var(--text-header-color);
	--header-main-nav-text-transform: uppercase;
	--header-main-links-xl-gap: 40px;
	--header-font-weight: 700;
	--header-main-nav-text-size: 16px;
	--header-main-nav-hover-color: var(--primary);
	--header-main-nav-underline-color: var(--accent);
	--header-logo-lg-height: 100px;
	--header-logo-md-height: 70px;
	--header-logo-height: 60px;
	--header-mobile-color: var(--primary);
	--header-mobile-size: 16px;
	--header-mobile-weight: 700;
	--header-mobile-hover-color: var(--text-inverse);
	--header-toggle-bg: var(--cta);
	--header-toggle-bg-hover: var(--cta-hover);

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

	--footer-bg: var(--primary);
	--footer-border-color: var(--bg-light);
	--footer-text-size: 16px;
	--footer-text-color: #E0F2FF;
	--footer-dso-logo-height: 88px;
	--page-header-max-height: 400px;

	--find-your-dentist-form-height: 42px;
	--find-your-dentist-form-y-padding: 0;
	--find-your-dentist-form-right-padding: 0;
	--find-your-dentist-form-btn-border-radius: 0;
	--find-your-dentist-form-max-width: auto;
	--find-your-dentist-form-border-radius: 10px;
	--find-your-dentist-form-text-size: 16px;
	--find-your-dentist-form-btn-text-size: 16px;
	--find-your-dentist-form-btn-font-weight: 400;
	--find-your-dentist-form-btn-bg: var(--primary);
	--find-your-dentist-form-btn-hover-bg: #0078AB;

	--home-main-banner-bg: var(--body-bg);
	--home-main-banner-title-text-size: clamp(36px, 4vw, 65px);
	--home-main-banner-subtitle-text-size: clamp(20px, 2vw, 25px);
	--home-main-banner-content-padding-y: 170px;
	--home-main-banner-form-bg: var(--bg-medium);
	--home-main-banner-form-padding: 20px;
	--home-main-banner-form-title-size: 15px;
	--home-main-banner-form-title-color: var(--text-medium);
	--home-title-size: clamp(24px, 4vw, 40px);
	--home-subtitle-size: 22px;
	--home-plans-bg: var(--primary);
	--home-plans-title-color: var(--text-inverse);
	--home-plans-card-price-bg: var(--bg-medium);
	--home-plans-card-text-color: var(--text-medium);
	--home-plans-card-amount-size: 56px;
	--home-plans-card-amount-weight: 600;
	--home-plans-card-sign-font: 'Poppins';
	--home-plans-card-sign-size: 17px;
	--home-plans-card-amount-font: 'Poppins';
	--home-plans-card-period-font: 'Poppins';
	--home-plans-card-period-size: 14px;
	--home-plans-card-perks-title-size: 24px;
	--home-plans-card-perks-title-weight: 600;
	--home-plans-perks-list-check-color: var(--accent);
	--home-why-card-bg: var(--bg-medium);
	--home-why-card-content-bg: var(--body-bg);
	--home-why-bg: var(--body-bg);
	--home-why-card-list-icon-color: var(--cta);
	--home-why-card-list-text-size: 16px;
	--home-how-title-color: white;
	--home-how-icon-color: var(--primary);
	--home-how-icon-bg: var(--bg-medium);
	--home-how-icon-border-width: 4px;
	--home-how-bg: var(--primary);
	--home-how-icon-size: 176px;
	--home-how-step-title-color: var(--text-inverse);
	--home-how-step-border-width: 0;
	--home-how-step-padding: 0;
	--home-how-step-box-shadow: none;
	--home-how-step-content-color: var(--text-inverse);
	--home-savings-bg: var(--body-bg);
	--home-savings-table-body-size: 16px;
	--home-savings-table-highlight-size: 16px;
	--home-savings-note-size: 15px;
	--home-savings-note-color: var(--text-light);
	--home-testimonials-title-color: var(--text-inverse);
	--home-testimonials-image-max-width: 700px;
	--home-testimonials-card-bg: white;
	--home-testimonials-card-color: var(--text-dark);
	--home-testimonials-card-title-color: var(--primary);
	--home-testimonials-card-title-size: 30px;
	--home-testimonials-card-title-weight: 500;
	--home-testimonials-card-accent-color: var(--accent);
	--home-testimonials-card-text-size: 15px;
	--home-testimonials-card-text-color: var(--text-medium);
	--p-carousel-indicator-active-background: var(--accent);
	--home-questions-bg: var(--bg-medium);
	--home-questions-text-size: 21px;
	--home-questions-separator-color: var(--body-text-color);

	--savings-summary-note-size: 15px;
	--savings-summary-note-color: var(--text-light);

	--find-form-search-btn-office-label-display: none;
	--find-wrapper-bg: rgba(42, 79, 134, 0.8);
	--find-steps-border-top-radius: 100px;
	--find-steps-border-top-mobile-radius: 40px;
	--find-steps-subtitle-weight: 300;
	--find-steps-icon-size: 100px;
	--find-steps-number-size: 31px;
	--find-steps-number-text-size: 17px;
	--find-steps-number-text-weight: 700;
	--find-steps-text-size: 20px;
	--find-steps-weight: 700;
	--find-form-label-color: var(--primary);
	--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-font-size: 16px;
	--find-office-details-title-size: 20px;
	--find-office-details-title-weight: 800;
	--find-office-details-content-size: 16px;
	--find-office-details-phone-weight: 700;
	--find-office-details-phone-color: var(--primary);
	--find-results-title-size: 20px;
	--find-results-title-weight: 400;
	--find-results-title-color: var(--body-text-color);
	--find-map-border-width: 1px;
	--find-steps-completed-bg: transparent;

	--faq-entry-border-color: transparent;
	--faq-entry-bg: var(--bg-medium);
	--faq-entry-title-color: var(--primary);
	--faq-entry-title-size: 18px;
	--faq-open-icon-bg: var(--primary);
	--faq-entry-title-weight: 700;
	--faq-answer-color: var(--primary);
	--faq-answer-size: 18px;
	--faq-contact-bg: var(--bg-dark);
	--faq-contact-info-title-color: var(--text-inverse);
	--faq-contact-info-text-color: var(--text-inverse);
	--faq-contact-info-text-size: 20px;

	--support-page-bg: var(--bg-light);
	--support-info-bg: var(--bg-dark);
	--support-wrapper-border-width: 0;
	--support-info-title-size: 24px;
	--support-info-text-size: 14px;
	--support-info-icon-color: var(--bg-medium);
	--support-form-label-color: var(--primary);
	--support-form-label-weight: 400;
	--support-form-label-size: 12px;
	--support-form-send-btn-text-transform: uppercase;

	--signup-content-bg: var(--bg-light);
	--find-steps-complete-check-bg: white;
	--join-now-title-text-align: center;
	--join-now-title-justify: center;
	--signup-summary-title-weight: 600;
	--signup-summary-body-entry-size: 17px;
	--signup-summary-body-entry-color: #5F6D79;
	--signup-summary-disclaimer-entry-size: 14px;
	--signup-summary-total-row-size: 16px;

	--login-form-subtitle-display: block;
	--login-form-subtitle-size: 14px;
	--login-form-label-size: 14px;
	--login-form-label-color: var(--primary);

	--custom-table-border-radius: 0;
	--custom-table-header-weight: 400;
	--custom-table-highlight-color: var(--cta);
	--custom-table-body-last-col-weight: 700;
	--custom-table-row-full-bg: var(--bg-medium);
	--custom-table-row-full-color: #002855;
	--custom-table-row-full-transform: uppercase;
	--custom-table-row-full-text-align: left;
	--custom-table-row-full-size: 20px;
	--custom-table-row-full-weight: 700;
	--custom-table-body-size: 20px;
	--custom-table-padding-y: 20px;

	--button-height: 44px;
	--button-text-size: 16px;
	--button-text-weight: 500;
	--button-border-radius: 1000px;
	--button-padding-x: 25px;
	--button-sm-height: 35px;
	--button-sm-text-size: 14px;
}

@layer components {
	/* CTA Button */
	.home-questions-faq-btn,
	.header-join-now-btn,
	.header-logout-btn,
	.home-savings-btn,
	.savings-summary-btn,
	.faq-contact-btn,
	.support-send-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);
		}
	}

	/* Primary Button */
	.add-dependent-btn,
	.find-select-office-btn,
	.find-form-search-btn,
	.home-questions-contact-btn,
	.find-your-dentist-form-btn {
		color: var(--text-inverse);
		background-color: var(--primary);
		border-color: var(--primary);

		&:hover:not(:disabled) {
			background-color: #0078AB;
			border-color: #0078AB;
		}
	}

	/* White / Soft Blue Button */
	.home-how-join-btn,
	.home-plans-join-btn {
		background-color: white;
		border-color: white;
		color: var(--primary);

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

	/* Outlined Primary */
	.find-form-clear-btn,
	.find-clear-filters-btn,
	.scheduleButton,
	.login-go-back-btn {
		color: var(--primary);
		background-color: transparent;
		border-width: 1px;
		border-radius: 8px;
		border-color: var(--primary);

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

	/** outlined white */
	.support-faq-link {
		color: var(--text-inverse);
		background-color: transparent;
		border-color: white;

		&:hover:not(:disabled) {
			background-color: white;
			color: var(--primary);
		}
	}

	.start-btn {
		height: 60px;
		font-size: 18px;
		font-weight: 500;
	}

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

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

	/* Squared buttons */
	.support-faq-link,
	.find-form-search-btn,
	.header-logout-btn,
	.header-join-now-btn,
	.savings-summary-btn,
	.find-select-office-btn,
	.add-dependent-btn,
	.start-btn,
	.checkout-success-btn,
	.submit-reset-btn,
	.login-forgot-submit-btn {
		border-radius: 10px;
	}
}

.home {
	--custom-table-margin-top: 32px;

	--header-fixed-bg: var(--primary);
	--header-fixed-color: var(--text-inverse);
	--header-fixed-hover-color: var(--text-inverse);
	--header-main-nav-fixed-hover-color: var(--text-inverse);
	--header-logo-alt-fixed-display: block;
	--header-logo-fixed-display: none;
	--header-logo-open-display: block;
	--header-logo-alt-open-display: none;

	tbody tr:last-of-type td:first-of-type {
		font-weight: 700;
	}
}