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

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

:root {
    --headline-text:  #2A2623;
	
    --button-background-color: #ffc72c;
    --button-hover-background-color: #2A2623;
    --button-text-color: #2A2623;
	--button-hover-text-color: #FFFFFF;
	--button-border-color: #ffc72c;
	--button-hover-border-color: #2A2623;
	
	--cta-button-background-color: #2A2623;
    --cta-button-hover-background-color: #2A2623;
    --cta-button-text-color: #ffc72c;
	--cta-button-hover-text-color: #FFFFFF;
	--cta-button-border-color: #ffc72c;
	--cta-button-hover-border-color: #ffc72c;
	
    --button-radius: 20px;
	--cta-button-radius: 20px;
	--button-font-size: 12px;
	--button-weight: 800;
	--button-collapse-radius: 7.68px 7.68px 0 0;
    --disabled-button: #636363;
    --form-border: #ffc72c;
}

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

.btn-primary:focus-visible { outline: 2px solid black;}