@import url('../../css/style.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	/* fonts */
	--brand-headline-font: 'Montserrat', sans-serif !important;
	--brand-headline-font-size: 2rem !important;
	--brand-headline-font-weight: 700 !important;
	--brand-body-font: 'Montserrat', sans-serif !important;
	--brand-body-font-size: 1rem !important;
	--brand-input-font-size: 1rem !important;
	--brand-output-expression-font-size: 1.5rem !important;
	--brand-output-font-size: 1.2rem !important;
	--brand-h1-font-size: 20rem !important;
	--brand-h2-font-size: 1.6rem !important;
	--brand-h3-font-size: 1.2rem !important;
	--brand-h4-font-size: 1rem !important;
	--brand-h4-font-weight: 600 !important;
	--brand-intro-font-color: #00205b !important;
	--brand-output-font-weight: 500 !important;
	--brand-btn-font-size: 1.1rem !important;
	--brand-btn-font:  'Montserrat', sans-serif !important;
	--brand-btn-font-transform: uppercase !important;
	--brand-btn-font-weight: 600 !important;
	--brand-button-font-transform:  none !important;
	--brand-disclaimer-heading-size: 1.0rem !important;
	--brand-disclaimer-heading-weight: 600 !important;
	--brand-disclaimer-size: 0.8rem !important;
	--brand-largeAnswerText-font-size: 2.5rem !important;
	--brand-largeAnswerText-font-weight: 500 !important;

	/* backgrounds */
	--brand-outer-background: #f2fafc!important;
	--brand-calc-background: #fff !important;
	--brand-input-background: #fff !important;
	--brand-output-background:#fff !important;
	--brand-output-effect: 0 0px 0px rgba(255, 255, 255, 1) !important;
	--brand-tool-shape: 20px 20px 0px 0px !important;
	--brand-tool-effect: rgba(0, 0, 0, 0.35) 0px 0px 0px !important;
	--brand-subtotal-background: #036 !important;
	--brand-subtotal-text-color: #fff !important;
	--brand-results-summary-background: #f2fafc !important;
	--brand-results-summary-text-color: #036 !important;
	--brand-results-summary-border-radius: .5rem !important;
	--brand-results-summary-border-width: 1px !important;
	--brand-results-summary-border-style: solid !important;
	--brand-results-summary-border-color: rgba(0, 0, 0, 0.12) !important;
	/* text color */
	--brand-calc-color: #036 !important;
	--brand-input-color: #080808 !important;
	--brand-output-color: #036  !important;
	--brand-disclaimer-heading-color: #000 !important;
	--brand-disclaimer-color: #000  !important;
	--brand-call-to-action-color: #000  !important;
	/* buttons*/
	--brand-button-background: #1f5589 !important;
	 --brand-button-grad-background: linear-gradient(6deg, #1f5589 0%, #1f5589 35%, #1f5589 100%)!important; 
	--brand-button-background-hover: #0d2934 !important;
	--brand-button-shape: 7px !important;
	--brand-button-padding: .5rem 1rem !important;
	--brand-button-width: auto !important;
	--brand-button-border-width: 0px !important;
	--brand-button-border-color: transparent !important;
	--brand-button-text-color: #fff !important;
	--brand-button-text-hover-color: #fff !important;
	--brand-button-effect: rgba(0, 0, 0, 0) 0px 5px 15px !important;
	--brand-button-hover-effect: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;

	/* CTA buttons */
	--brand-callToActionButton1-background: #1f5589 !important;
	--brand-callToActionButton1-background-hover: #0d2934!important;
	--brand-callToActionButton1-shape: 7px !important;
	--brand-callToActionButton1-padding: .5rem 1rem !important;
	--brand-callToActionButton1-border-width: 0px !important;
	--brand-callToActionButton1-border-color: transparent !important;
	--brand-callToActionButton1-text-color: #fff !important;
	--brand-callToActionButton1-text-hover-color: #fff !important;
	--brand-callToActionButton1-effect: rgba(0, 0, 0, 0) 0px 5px 15px !important;
	--brand-callToActionButton1-hover-effect: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;

	--brand-callToActionButton2-background: #1f5589 !important;
	--brand-callToActionButton2-background-hover: #0d2934 !important;
	--brand-callToActionButton2-shape: 7px !important;
	--brand-callToActionButton2-padding: .5rem 1rem !important;
	--brand-callToActionButton2-border-width: 0px !important;
	--brand-callToActionButton2-border-color: transparent !important;
	--brand-callToActionButton2-text-color: #fff !important;
	--brand-callToActionButton2-text-hover-color: #fff !important;
	--brand-callToActionButton2-effect: rgba(0, 0, 0, 0) 0px 5px 15px !important;
	--brand-callToActionButton2-hover-effect: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;

	/* chart colors */
	--brand-chart-primary: #1f5589 !important; /* primary series / savings growth */
	--brand-chart-secondary: #efc025 !important; /* secondary bar (e.g. wants) */
	--brand-chart-tertiary: #efc025 !important; /* tertiary bar (e.g. savings) */
	--brand-chart-line: #001871 !important; /* default line color for projections */
	--brand-chart-danger: #766DB2 !important; /* warning/loan/debt color */

	/* sliders */
	--brand-slider-track-color: #d0d4e5 !important;
	--brand-slider-thumb-color: #001871 !important;

	/* tabs*/
	--brand-tab-background: #eee !important;
	--brand-tab-inactive-background: rgba(26, 70, 114, 0.1) !important;
	--brand-tab-active-color: #0e074b !important;
	--brand-tab-hover-background: rgba(26, 70, 114, 0.2) !important;
	--brand-tab-hover-color: #1f5589 !important;
	--brand-tab-border-shape: 16px !important;
	--brand-tab-border-color: #b8b7b7 !important;
	--brand-tab-text-color: #1f5589 !important;
	--brand-tab-font-size: 1.1rem !important;
	--brand-tab-font-weight: 600 !important;
}

/* AI coach form layout */
@media (min-width: 992px) {
	#coachArea .coach-form {
		max-width: 50%;
		margin-left: 0;
		margin-right: auto;
	}
}