body {
	height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	background-color:#cacaca;
}
.TSBCcontainer {
	font-family: var(--brand-body-font);
	font-size: var(--brand-base-font-size);
	color: var(--brand-calc-color);
	max-width: 1080px;
	margin: 1rem auto;
	padding: 1rem;
	background-color: var(--brand-outer-background);
	border-radius: var(--brand-tool-shape);
	box-shadow: var(--brand-tool-effect);
}
.TSBCcontainer h1 {
	font-size: var(--brand-h1-font-size);
}
.TSBCcontainer h2 {
	font-size: var(--brand-h2-font-size);
}
.TSBCcontainer h3 {
	font-size: var(--brand-h3-font-size);
}
.TSBCcontainer h4 {
	font-size: var(--brand-h4-font-size);
}

#calculatorArea,
#actionsArea,
#helpArea {background-color: var(--brand-calc-background);
	padding: 1rem;border-left: 1px solid var(--brand-tab-border-color);
	border-bottom: 1px solid var(--brand-tab-border-color);
	border-right: 1px solid var(--brand-tab-border-color);
}

/* When tabs are hidden, add a top border to the main content area */
.no-tabs-top-border {
	border-top: 1px solid var(--brand-tab-border-color);
	margin-top: 0.5rem;
}

#calculatorArea #calculatorInnerArea {
	border-radius: var(--brand-tool-shape);
	display: flex;
	flex-wrap: wrap;
}

  
section#header,
section#navigation,
section#disclaimer {
	display: flex;
	flex-wrap: wrap;
	flex: 1;
}
section#disclaimer {
	flex-direction: column;
}
section#header {
	flex-direction: column;
}
section#input,
section#output {
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

.subtotal-row {
	background-color: var(--brand-subtotal-background, rgba(255, 255, 255, 0.6));
	border-radius: 0.25rem;
	padding: 0.35rem 0.5rem;
	margin-top: 0.35rem;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 0.95rem !important;
	font-weight: 600;
	color: var(--brand-subtotal-text-color, var(--brand-calc-color));
}

.improved-result {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--brand-output-color);
}

.results-summary-container {
	background-color: var(--brand-results-summary-background, rgba(255, 255, 255, 0.6));
	color: var(--brand-results-summary-text-color, var(--brand-output-color));
	border: var(--brand-results-summary-border-width, 1px) var(--brand-results-summary-border-style, solid)
		var(--brand-results-summary-border-color, rgba(0, 0, 0, 0.12));
	border-radius: var(--brand-results-summary-border-radius, 0.25rem);
	overflow: hidden;
}

.results-summary-item {
	padding: 0.5rem 0.75rem;
	font-weight: 600;
}

section#header h3 {
	font-size: var(--brand-headline-font-size);
	font-weight: var(--brand-headline-font-weight);
	margin-bottom: 1rem;
	color: var(--brand-calc-color);
}
section#input {
	font-size: var(--brand-input-font-size);
	background-color: var(--brand-input-background);
	color: var(--brand-input-color);
	flex: 99;
}

section#output {
	color: var(--brand-output-color) !important;
		background-color: var(--brand-output-background);
	
}
section#output h3 {
	color: var(--brand-output-color) !important;
}
section#output .card {
	box-shadow: var(--brand-output-effect);
	border-top-left-radius: var(--brand-results-summary-border-radius, 0.25rem) !important;
	border-top-right-radius: var(--brand-results-summary-border-radius, 0.25rem) !important;
}
section#output .largeAnswerText {
	font-size: var(--brand-largeAnswerText-font-size) !important;
	font-weight: var(--brand-largeAnswerText-font-weight) !important;
}
section#output #expression {
	font-size: var(--brand-output-expression-font-size);
	font-weight: var(--brand-output-font-weight);
}
section#output #result {
	font-size: var(--brand-output-font-size);
	font-weight: var(--brand-output-font-weight);
}

section#disclaimer h5 {
	font-size: var(--brand-disclaimer-heading-size);
	font-weight: var(--brand-disclaimer-heading-weight);
	color: var(--brand-disclaimer-heading-color);
}
section#disclaimer p {
	font-size: var(--brand-disclaimer-size);
	color: var(--brand-disclaimer-color);
}
section#callToAction {
	color: var(--brand-call-to-action-color);
}

section#navigation {
	justify-content: space-around;
	padding: 0;
	margin-bottom: 0;
}
section#navigation .nav {
	font-size: var(--brand-btn-font-size);
	font-weight: var(--brand-btn-font-weight);
	color: var(--brand-tab-text-color);
	padding: .5rem 0.6rem;
	flex-grow: 1;
	background-color: var(--brand-tab-background);
	border-left: 1px solid var(--brand-tab-border-color);
	border-top: 1px solid var(--brand-tab-border-color);
	border-right: 1px solid var(--brand-tab-border-color);
	border-bottom: 0px;
	cursor: pointer;
	border-radius: var(--brand-tab-border-shape) var(--brand-tab-border-shape) 0 0;
	margin-right:.2rem;
}section#navigation .nav:last-child {margin-right: 0px;}
section#navigation .nav.active {
	background-color: var(--brand-tab-active-background);
	color: var(--brand-tab-active-color);
}
section#navigation .nav:hover {
	background-color: var(--brand-tab-active-background);
}
.calcBtn {
	font-family: var(--brand-body-font);
	/* flex-basis: calc(25% - 10px); */
	margin: 5px;
	font-size: var(--brand-btn-font-size);
	font-weight: var(--brand-btn-font-weight);
	padding: var(--brand-button-padding);
	width: var(--brand-button-width); 
	border: 0;
	border-radius: var(--brand-button-shape);
	cursor: pointer;
	background: var(--brand-button-background);
	background: var(--brand-button-grad-background); 
	color: var(--brand-button-text-color);
	box-shadow: var(--brand-button-effect);
}
.calcBtn:hover,
.calcBtn:focus {
	background-color: var(--brand-button-background-hover);
	color: var(--brand-button-text-hover-color);
	box-shadow: var(--brand-button-hover-effect);
}

.action,
.action:focus {
	background-color: var(--brand-button-background);
}

.action:hover {
	background-color: var(--brand-button-hover);
}