@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: 2.2rem !important;
	--brand-h2-font-size: 1.8rem !important;
	--brand-h3-font-size: 1.6rem !important;
	--brand-h4-font-size: 1.2rem !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.2rem !important;
	--brand-disclaimer-heading-weight: 600 !important;
	--brand-disclaimer-size: 0.9rem !important;
	--brand-largeAnswerText-font-size: 2.5rem !important;
	--brand-largeAnswerText-font-weight: 500 !important;

	/* backgrounds */
	--brand-outer-background: #fff !important;
	--brand-calc-background: #fcfcfe !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 !important;
	--brand-tool-effect: rgba(0, 0, 0, 0.35) 0px 5px 15px !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: #036  !important;
	--brand-disclaimer-color: #036  !important;
	--brand-call-to-action-color: #036  !important;
	/* buttons*/
	--brand-button-background: #001871 !important;
	 --brand-button-grad-background: linear-gradient(6deg, #001871 0%, #001871 35%, #001871 100%)!important; 
	--brand-button-background-hover: #307FE2 !important;
	--brand-button-shape: .25rem !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;

	/* 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-active-background: #fff !important;
	--brand-tab-active-color: #0e074b !important;
	--brand-tab-hover-background: #09265c !important;
	--brand-tab-border-shape: 4px !important;
	--brand-tab-border-color: #b8b7b7 !important;
	--brand-tab-text-color: #000000 !important;
}

.needs-dropdown-menu {
	min-width: 100%;
}

.wants-dropdown-menu {
	min-width: 100%;
}

.savings-dropdown-menu {
	min-width: 100%;
}

/* Range slider styling */
input[type='range'].form-range {
	accent-color: var(--brand-slider-thumb-color);
}

input[type='range'].form-range::-webkit-slider-runnable-track {
	background-color: var(--brand-slider-track-color);
}

input[type='range'].form-range::-webkit-slider-thumb {
	background-color: var(--brand-slider-thumb-color);
}

input[type='range'].form-range::-moz-range-track {
	background-color: var(--brand-slider-track-color);
}

input[type='range'].form-range::-moz-range-thumb {
	background-color: var(--brand-slider-thumb-color);
}