@import url('../../css/style.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

:root {
	/* fonts */
	--brand-headline-font: 'Poppins', sans-serif !important;
	--brand-headline-font-size: 2rem !important;
	--brand-headline-font-weight: 500 !important;
	--brand-body-font: 'Poppins', 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: #fff !important;
	--brand-output-font-weight: 500 !important;
	--brand-btn-font-size: 1.2rem !important;
	--brand-btn-font-weight: 600 !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: #002c3d !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: 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: 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: #fff  !important;
	/* buttons*/
	--brand-button-background: #002c3d !important;
	 --brand-button-grad-background: linear-gradient(6deg, #002c3d 0%, #002c3d 35%, #002c3d 100%)!important; 
	--brand-button-background-hover: #307FE2 !important;
	--brand-button-shape: 35px !important;
	--brand-button-padding: .5rem 1rem !important;
	--brand-button-width: auto !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: #be1749 !important;
	--brand-callToActionButton1-background-hover: #307FE2 !important;
	--brand-callToActionButton1-shape: 35px !important;
	--brand-callToActionButton1-padding: .5rem 1rem !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: #307FE2 !important;
	--brand-callToActionButton2-background-hover: #001871 !important;
	--brand-callToActionButton2-shape: 35px !important;
	--brand-callToActionButton2-padding: .5rem 1rem !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: #036 !important; /* primary series / savings growth */
	--brand-chart-secondary: #377dff !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: #377dff !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;
}