@import url(//fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,700&display=swap);

#calculator-wrapper {
	font-family: "Open Sans", sans-serif;  
}

:root {
	--headline-text:  #0054A3;

	--button-background-color: #c92041;
	--button-hover-background-color: #007098;
	--button-text-color: #FFFFFF;
	--button-hover-text-color: #FFFFFF;
	--button-border-color: #FFFFFF;
	--button-hover-border-color: #FFFFFF;

	--cta-button-background-color: #c92041;
	--cta-button-hover-background-color: #FFFFFF;
	--cta-button-text-color: #FFFFFF;
	--cta-button-hover-text-color: #c92041;
	--cta-button-border-color: #c92041;
	--cta-button-hover-border-color: #c92041;

	--button-radius: 23.04px;
	--cta-button-radius: 23.04px;
	--button-font-size: 16.128px;
	--button-weight: 600;
	--button-collapse-radius: 7.68px 7.68px 0 0;
	--disabled-button: #636363;
	--form-border: #156d16;
}

#calculator-wrapper div, #calculator-wrapper span, #calculator-wrapper input {
	border-radius:  0 !important;
}

#calculator-report-header {
	color: var(--headline-text);
}

#calculator-report-header-bar {
	border: 1px solid var(--headline-text);
}

.btn-primary {
	background-color: var(--button-background-color) !important;
	color: var(--button-text-color) !important;
	border-color: var(--button-border-color) !important; 
	border-radius:  var(--button-radius) !important;
	font-size: var(--button-font-size) !important;
	font-weight: var(--button-weight) !important;
}

.btn-primary:hover {
	background-color: var(--button-hover-background-color) !important;
	color: var(--button-hover-text-color) !important;
	border-color: var(--button-hover-border-color) !important;
}

.btn-primary.focus, .btn-primary:focus {
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
	border-color: var(--button-hover-border-color);
	box-shadow: none;
}

.btn-primary.active, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
	border-color: var(--button-hover-border-color);
	box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {   
	box-shadow: none; 
}

.btn-collapse {
	border-radius:  var(--button-radius) !important;
}

.card {
	border-radius: 0 0 0.25rem 0.25rem;
}

.row {
	max-width: 100%; 
	margin: 0;
}

.cta-wrapper .btn-primary {
	background-color: var(--cta-button-background-color) !important;
	color: var(--cta-button-text-color) !important;
	border-color: var(--cta-button-border-color) !important; 
	border-radius:  var(--cta-button-radius) !important;
}

.cta-wrapper .btn-primary:hover {
	background-color: var(--cta-button-hover-background-color) !important;
	color: var(--cta-button-hover-text-color) !important;
	border-color: var(--cta-button-hover-border-color) !important;
}

.cta-wrapper .btn-primary.focus, .cta-wrapper .btn-primary:focus {
	background-color: var(--cta-button-hover-background-color);
	color: var(--cta-button-hover-text-color);
	border-color: var(--cta-button-hover-border-color);
}

.cta-wrapper .btn-primary.active, .btn-primary:active {
	background-color: var(--cta-button-hover-background-color);
	color: var(--cta-button-hover-text-color);
	border-color: var(--cta-button-hover-border-color);
}

.btn-primary.disabled, .btn-primary:disabled {
	background-color: var(--disabled-button) !important;
	border-color: var(--disabled-button) !important;
	opacity: 1 !important;
}

#amortization_schedule_chart th {
	background-color: var(--button-background-color) !important;
}

.form-control, .input-group-text {
	border: 1px solid var(--form-border);
}

.form-control.error {
	border-color: crimson;
}

label.error {
	color: crimson; 
}

@media screen and (max-width: 500px) {
	#calculator-wrapper > div {
		margin: 0; padding: 0;
	}
}

.btn-collapse {
	border-radius: var(--button-collapse-radius) !important; 
}

#emailform .form-group {
	margin-bottom: 10px;
}

@media screen and (min-width: 765px) and (max-width: 1024px) {
	#calculator-fields-panel + .row {
		display: grid;
		grid-template-columns: 1fr 35px 1fr;
		gap: 0.5rem;
	}

	#calculator-fields-panel + .row .col-3 { 
		max-width: 100%;
	}

	#calculator-fields-panel + .row .text-center { 
		padding: 0 !important; 
		margin: 0 !important;
	}
}