@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap);

#calculator-wrapper {
  font-family: "Roboto Condensed", sans-serif;  
}

:root {
    --headline-text:  #0054A3;
	
    --button-background-color: #add6ff;
    --button-hover-background-color: #0054a3;
    --button-text-color: #000000;
	--button-hover-text-color: #FFFFFF;
	--button-border-color: #add6ff;
	--button-hover-border-color: #add6ff;
	
	--cta-button-background-color: #add6ff;
    --cta-button-hover-background-color: #FFFFFF;
    --cta-button-text-color: #000000;
	--cta-button-hover-text-color: #000000;
	--cta-button-border-color: #add6ff;
	--cta-button-hover-border-color: #add6ff;
	
    --button-radius: 7.68px;
	--button-font-size: 15.36px;
	--button-weight: 800;
	--button-collapse-radius: 7.68px 7.68px 0 0;
    --disabled-button: #636363;
    --form-border: #949494;
}

#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;}
}

#response-text-wrapper {
text-align: center;
}