@import url('../../css/style.css');

/* Custom fonts */
@font-face {
    font-family: 'Whitney Book';
    src: url(fonts/whitney-book-webfont.woff) format("woff"), url(fonts/whitney-book-webfont.eot) format("eot"), url(fonts/whitney-book-webfont.svg) format("svg"), url(/fonts/whitney-book-webfont.ttf) format("ttf")
}

@font-face {
    font-family: 'Whitney Semibold';
    src: url(fonts/whitney-semibold-webfont.woff) format("woff"), url(fonts/whitney-semibold-webfont.eot) format("eot"), url(fonts/whitney-semibold-webfont.svg) format("svg"), url(/fonts/whitney-semibold-webfont.ttf) format("ttf")
}

@font-face {
    font-family: 'Whitney Medium';
    src: url(fonts/whitney-medium-webfont.woff) format("woff"), url(fonts/whitney-medium-webfont.eot) format("eot"), url(fonts/whitney-medium-webfont.svg) format("svg"), url(/fonts/whitney-medium-webfont.ttf) format("ttf")
}

@font-face {
    font-family: 'Whitney Bold';
    src: url(fonts/whitney-bold-webfont.woff) format("woff"), url(fonts/whitney-bold-webfont.eot) format("eot"), url(fonts/whitney-bold-webfont.svg) format("svg"), url(/fonts/whitney-bold-webfont.ttf) format("ttf")
}

@font-face {
    font-family: 'Whitney Black';
    src: url(fonts/whitney-black-webfont.woff) format("woff"), url(fonts/whitney-black-webfont.eot) format("eot"), url(fonts/whitney-black-webfont.svg) format("svg"), url(/fonts/whitney-black-webfont.ttf) format("ttf")
}




:root {
	/* fonts */
	--brand-headline-font: 'Whitney Semibold', Arial, Helvetica, sans-serif !important;
	--brand-headline-font-size: 2rem !important;
	--brand-headline-font-weight: 400 !important;
	--brand-body-font: 'Whitney', Arial, Helvetica, sans-serif !important;
	--brand-body-font-size: 18px !important;
	--brand-input-font-size: 1rem !important;
	--brand-output-expression-font-size: 1.5rem !important;
	--brand-output-font-size: 18px !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: #fff !important;
	--brand-output-font-weight: 500 !important;
	--brand-btn-font: 'Whitney Semibold', Arial, Helvetica, sans-serif !important;
	--brand-btn-font-size: 18px !important;
		--brand-btn-font-weight: 400 !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: #001f5f !important;
	--brand-calc-background: #fefefe !important;
	--brand-input-background: #eee !important;
	--brand-output-background: rgba(113, 134, 157, .1) !important;
	--brand-output-effect: 0 12px 15px rgba(140, 152, 164, .1) !important;
	--brand-tool-shape: 0px 0px 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: rgba(0, 0, 0, 0.1) !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: #fff !important;
	--brand-disclaimer-color: #fff  !important;
	--brand-call-to-action-color: #000  !important;
	/* buttons*/
	--brand-button-background: #001f5f !important;
	 --brand-button-grad-background: linear-gradient(6deg, #001f5f 0%, #001f5f 35%, #001f5f 100%)!important; 
	--brand-button-background-hover: #007fad !important;
	--brand-button-shape: 0px !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 0px 0px !important;
	--brand-button-hover-effect: rgba(0, 0, 0, 0) 0px 0px 0px !important;

	/* CTA buttons */
	--brand-callToActionButton1-background: #001f5f !important;
	--brand-callToActionButton1-background-hover: #007fad !important;
	--brand-callToActionButton1-shape: 0px !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 0px 0px !important;
	--brand-callToActionButton1-hover-effect: rgba(0, 0, 0, 0) 0px 0px 0px !important;

	--brand-callToActionButton2-background: #001f5f !important;
	--brand-callToActionButton2-background-hover: #007fad !important;
	--brand-callToActionButton2-shape: 0px !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 0px 0px !important;
	--brand-callToActionButton2-hover-effect: rgba(0, 0, 0, 0) 0px 0px 0px !important;

	/* chart colors */
	--brand-chart-primary: #53A598 !important; /* primary series / savings growth */
	--brand-chart-secondary: #766DB2 !important; /* secondary bar (e.g. wants) */
	--brand-chart-tertiary: #4caf50 !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: hsla(0, 0%, 100%, 0.1) !important;
	--brand-tab-active-color: #0e074b !important;
	--brand-tab-hover-background: hsla(0, 0%, 100%, 0.2) !important;
	--brand-tab-hover-color: #fff !important;
	--brand-tab-border-shape: 16px !important;
	--brand-tab-border-color: #b8b7b7 !important;
	--brand-tab-text-color: #fff !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;
	}
}

