@import url("https://code.builderq.ca/static-modules/css/bq-common.css?id=v3");

:root {
  --mc-header-bg-color: rgb(0, 255, 179);
}

/* body {
  background-color: var(--header-bg-color);
  font-family: inherit !important;
  font-size: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
} */

.mortgage-calcualtor-container form {
  float: none !important;
}

.mortgage-calcualtor-container form > .calculator-row:nth-child(1){background-color: var(--mc-header-bg-color) !important;}

/* Hides */
.mortgage-calcualtor-container .calculator-chart,
.mortgage-calcualtor-container .calculator-title,
.mortgage-calcualtor-container .calculator-footer,
.mortgage-calcualtor-container .calculator-mortgage i,
.mortgage-calcualtor-container .calculator-affordability i,
.mortgage-calcualtor-container .calculator-ownership i,
.mortgage-calcualtor-container .calculator-amortization .input-type-years:nth-child(4),
.mortgage-calcualtor-container .calculator-mortgage-extension .calculator-row:nth-child(3),
.mortgage-calcualtor-container .calculator-mortgage-extension .calculator-row:nth-child(4),
.mortgage-calcualtor-container form .calculator-row:nth-child(3),
.mortgage-calcualtor-container form .calculator-row:nth-child(6),
.mortgage-calcualtor-container form .calculator-row:nth-child(7),
.mortgage-calcualtor-container form .calculator-row:nth-child(8),
.mortgage-calcualtor-container form .calculator-row:nth-child(9) {
  display: none !important;
}

.mortgage-calcualtor-container .calculator-mortgage,
.mortgage-calcualtor-container .calculator-ownership,
.mortgage-calcualtor-container .calculator-affordability,
.mortgage-calcualtor-container .calculator-mortgage form {
  max-width: inherit !important;
  width: 100% !important;
}

.mortgage-calcualtor-container .calculator-mortgage strong,
.mortgage-calcualtor-container .calculator-affordability strong,
.mortgage-calcualtor-container .calculator-ownership strong,
.mortgage-calcualtor-container .calculator-row label b {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mortgage-calcualtor-container select,
.mortgage-calcualtor-container input {
  border: 2px solid #bbbbbb !important;
  padding: 16px !important;
  font-family: inherit !important;
  font-size: 16px !important;
  text-align: left !important;
  border-radius: 6px !important;
  width: 100%;
}
.mortgage-calcualtor-container select,
.mortgage-calcualtor-container input:focus {
  border-color: #696969;
}
.mortgage-calcualtor-container label {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px;
  align-items: center !important;
  width: 100%;
  position: relative;
}

.mortgage-calcualtor-container label b,
.mortgage-calcualtor-container label strong {
  font-weight: bolder !important;
  width: 100%;
  float: none !important;
}

.mortgage-calcualtor-container #errMsg {
  color: red;
  font-size: 12px;
}

.mortgage-calcualtor-container .calculator-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  background-color: white;
  margin: 0 !important;
  min-height: 46px;
  padding: 20px 22px !important;
  overflow: hidden;
  text-align: left !important;
  border-bottom: 2px solid #cecece;
}

.mortgage-calcualtor-container .calculator-row:last-of-type {
  border-bottom: none !important;
}

.mortgage-calcualtor-container .saperator {
  width: 1px;
  height: 50px;
  background-color: #eee;
  display: inline-block;
  margin: 0 18px;
}

.mortgage-calcualtor-container .small-input {
  width: 50px !important;
}

/*Result*/
.mortgage-calcualtor-container #calculator-mortgage-result {
  color: inherit !important;
  font-family: inherit !important;
}

.mortgage-calcualtor-container select[name="frequency"] {
  padding: 10px 8px !important;
  border: none !important;
  width: auto !important;
  background-color: white !important;
  margin-left: 4px;
}

.mortgage-calcualtor-container form > .calculator-row:nth-child(1) {
  background-color: transparent !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
.mortgage-calcualtor-container form > .calculator-row:nth-child(1) > label {
  justify-content: center;
  text-align: center;
}

.mortgage-calcualtor-container .input-type-dollar,
.mortgage-calcualtor-container .input-type-years,
.mortgage-calcualtor-container .input-type-percentage {
  position: absolute;
}

.mortgage-calcualtor-container .input-type-percentage {
  left: 60px;
  top: 48px;
}

.mortgage-calcualtor-container .calculator-mortgage-extension .calculator-row:nth-child(2) .input-type-dollar {
  left: 110px;
  top: 48px;
}
.mortgage-calcualtor-container input#purchasePrice {
  padding-left: 30px !important;
}

.mortgage-calcualtor-container .calculator-mortgage-extension .calculator-row:nth-child(1) .input-type-dollar {
  left: 14px;
  top: 48px;
}
.mortgage-calcualtor-container input#downpayment {
  padding-left: 30px !important;
  width: calc(100% - 150px) !important;
}

.mortgage-calcualtor-container input[name="amount"] {
  margin-top: -24px;
  padding-left: 30px !important;
}
.mortgage-calcualtor-container input[name="amortization"] {
  margin-top: 3px;
  padding-right: 30px !important;
  width: calc(100% - 149px);
}
.mortgage-calcualtor-container input[name="amortization"] + .input-type-years {
  right: 20px !important;
  left: inherit;
  top: 51px;
}
.mortgage-calcualtor-container input[name="interest"] {
  margin-left: -51px;
}

.mortgage-calcualtor-container .calculator-amount .input-type-dollar {
  left: 15px;
  top: 54px;
}

.mortgage-calcualtor-container input#downpayment {
  width: calc(100% - 128px);
}

/*hiding floating text*/
.mortgage-calcualtor-container .calculator-amortization,
.mortgage-calcualtor-container .calculator-amount,
form .calculator-row:last-child {
  color: white;
}

.mortgage-calcualtor-container .calculator-amortization b,
.mortgage-calcualtor-container form .calculator-row:last-child b,
.calculator-amortization input,
.mortgage-calcualtor-container form .calculator-row:last-child input,
.calculator-amortization span,
.mortgage-calcualtor-container form .calculator-row:last-child span,
.mortgage-calcualtor-container .calculator-amount b,
.mortgage-calcualtor-container .calculator-amount input,
.mortgage-calcualtor-container .calculator-amount span {
  color: black !important;
}