﻿@import url('../../css/style.css');
/* Custom fonts */

@font-face {
    font-family: 'Massilia Light';
    src: url(fonts/Massilia-Light.woff) format("woff"), url(fonts/Massilia-Light.woff2) format("woff2")
}

@font-face {
    font-family: 'Massilia Regular';
    src: url(fonts/Massilia-Regular.woff) format("woff"), url(fonts/Massilia-Regular.woff2) format("woff2")
}

@font-face {
    font-family: 'Massilia Medium';
    src: url(fonts/Massilia-Medium.woff) format("woff"), url(fonts/Massilia-Medium.woff2) format("woff2")
}

@font-face {
    font-family: 'Massilia Bold';
    src: url(fonts/Massilia-Bold.woff) format("woff"), url(fonts/Massilia-Bold.woff2) format("woff2")
}
@font-face {
    font-family: 'Massilia Black';
    src: url(fonts/Massilia-Black.woff) format("woff"), url(fonts/Massilia-Black.woff2) format("woff2")
}

:root {
	/* fonts */
	--brand-headline-font: 'Massilia Bold', Arial, Helvetica, sans-serif !important;
	--brand-headline-font-size: 3rem !important;
	--brand-headline-font-weight: 400 !important;
	/* Body */
	--brand-body-font: 'Massilia Regular', Arial, Helvetica, sans-serif !important;
	--brand-body-font-size: 1rem !important;

	/* Inputs and outputs */
	--brand-input-font-size: 1rem !important;
	--brand-output-expression-font-size: 1.5rem !important;
	--brand-output-font-size: 1.2rem !important;
	--brand-output-font-weight: 400 !important;
	--brand-largeAnswerText-font-size: 2.5rem !important;
	--brand-largeAnswerText-font-weight: 500 !important;

	/*Heading sizes*/
	--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;

	/*Button fonts */
	--brand-btn-font: 'Massilia Bold', Arial, Helvetica, sans-serif !important;
	--brand-btn-font-transform: none !important;
	--brand-btn-font-weight: 400 !important;
	--brand-btn-font-size: 18px !important;

	/* Disclaimer fonts */
	--brand-disclaimer-heading-size: 1.0rem !important;
	--brand-disclaimer-heading-weight: 600 !important;
	--brand-disclaimer-size: 0.8rem !important;

	/* colors supplied by client */
	

	/* Colors - backgrounds */
	--brand-outer-background: #fff !important;
	--brand-calc-background: #fff !important;
	--brand-input-background: #fff!important;
	--brand-output-background: #fff !important;
	--brand-subtotal-background: #fff !important;
	--brand-results-summary-background: #fff !important;

	--brand-ai-coach-disclaimer-background: rgba(0, 0, 0, 0.03) !important;

	--brand-intro-font-color: #272420 !important;
	--brand-calc-color: #272420 !important;
	--brand-input-color: #272420 !important;
	--brand-output-color: #272420 !important;
	--brand-disclaimer-heading-color: #272420 !important;
	--brand-disclaimer-color: #272420 !important;
	--brand-call-to-action-color: #000 !important;
	--brand-subtotal-text-color: #272420 !important;
	--brand-results-summary-text-color: #272420 !important;
	--brand-intro-font-color: #272420 !important;
	--brand-calc-color: #272420 !important;
	--brand-input-color: #272420 !important;
	--brand-output-color: #272420 !important;
	--brand-disclaimer-heading-color: #272420 !important;
	--brand-disclaimer-color: #272420 !important;
	--brand-call-to-action-color: #000 !important;


	/* Shapes and effects */
	--brand-output-effect: 0 12px 15px rgba(140, 152, 164, .1) !important;
	--brand-tool-shape: 8px 8px 8px 8px !important;
	--brand-tool-effect: rgba(0, 0, 0, 0.35) 5px 5px 5px !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;


	/* buttons*/
	--brand-button-background: #551c25 !important;
	--brand-button-grad-background: linear-gradient(6deg, #551c25 0%, #551c25 35%, #551c25 100%) !important;
	--brand-button-background-hover: #465a72 !important;
	--brand-button-shape: 6px !important;
	--brand-button-padding: .5rem 1rem !important;
	--brand-button-width: auto !important;
	--brand-button-border-width: 0px !important;
	--brand-button-border-color: #551c25 !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.35) 0px 0px 0px !important;

	/* CTA buttons */
	--brand-callToActionButton1-background: #551c25 !important;
	--brand-callToActionButton1-background-hover: #0d2934 !important;
	--brand-callToActionButton1-shape: 6px !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: #194A5D !important;
	--brand-callToActionButton2-background-hover: #0d2934 !important;
	--brand-callToActionButton2-shape: 6px !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: #551c25 !important;
	/* primary series / savings growth */
	--brand-chart-secondary: #7188A8 !important;
	/* secondary bar (e.g. wants) */
	--brand-chart-tertiary: #551c25 !important;
	/* tertiary bar (e.g. savings) */
	--brand-chart-line: #333 !important;
	/* default line color for projections */
	--brand-chart-danger: #551c25 !important;
	/* warning/loan/debt color */

	/* sliders */
	--brand-slider-track-color: #7188A8 !important;
	--brand-slider-thumb-color: #551c25!important;

	/* tabs*/
	--brand-tab-background: #fff !important;
	--brand-tab-inactive-background: #7188A8 !important;
	--brand-tab-active-color: #000 !important;
	--brand-tab-hover-background: #fff !important;
	--brand-tab-hover-color: #272420 !important;
	--brand-tab-border-shape: 0px !important;
	--brand-tab-border-color: #7188A8 !important;
	--brand-tab-text-color: #fff !important;
	--brand-tab-font-size: 1.1rem !important;
	--brand-tab-font-weight: 600 !important;
	}
.TSBCcontainer section#navigation .nav:hover:not(.active) {border-bottom: 1px solid #7188A8 !important;}

/* AI coach form layout */
@media (min-width: 992px) {
	#coachArea .coach-form {
		max-width: 50%;
		margin-left: 0;
		margin-right: auto;
	}
}

