/* Kindred calculator migration stylesheet
   Lightweight replacement for the calculator-specific parts of:
   - bootstrap.min.css
   - theme.min.css
   - brand.min.css
   Intended for the Central 1/OpenText calculator pages only.
*/

/* ===== Brand + calculator tokens ===== */
:root {
  --brand-turquoise: #32b9c8;
  --brand-turquoise-light: #d3f1f3;
  --brand-turquoise-dark: #24828d;
  --brand-turquoise-heading: #20747e;
  --brand-persimmon: #d44427;
  --brand-persimmon-light: #f26647;
  --brand-slate: #3b3a3e;
  --brand-navy: #00416b;
  --brand-putty: #6b696e;
  --brand-white: #ffffff;
  --brand-driftwood-light: #f4f2ee;
  --font-family-base: Roboto, Arial, Helvetica, sans-serif;
  --font-size-base: 16px;

  --calculators-label-color: #00416b;
  --calculators-text-label-color: #3b3a3e;
  --calculators-input-font-color: #10004d;
  --calculators-input-background-color: transparent;
  --calculators-select-arrow-color: #f26647;
  --calculators-help-tooltip-color: #f26647;
  --calculators-help-hint-border-color: #3b3a3e;
  --calculators-help-hint-font-color: #3b3a3e;
  --calculators-right-panel-background-color: rgba(255, 255, 255, 0);
  --calculators-right-panel-label-color: #00416b;
  --calculators-tabs-border-bottom-color: #10004d;
  --calculators-tabs-font-color: #00416b;
  --calculators-tabs-active-link-border-bottom-color: #31b3c2;
  --calculators-actions-row-border-top-color: #10004d;
  --calculators-mortgage-next-step-link-color: #31b3c2;
  --calculators-mortgage-next-step-border-top-color: #10004d;
  --calculators-comparison-table-summary-font-color: #00416b;
  --calculators-comparison-table-summary-background-color: transparent;
  --calculators-load-spinner-icon-color: #32b9c8;
}

/* ===== Minimal reset / structure ===== */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--brand-slate);
  background: #fff;
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 1.42857143;
}

main,
section,
article,
aside,
footer,
header,
nav,
figure {
  display: block;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: transparent;
}

td,
th {
  padding: 0;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

/* ===== Minimal Bootstrap 2 fluid grid used by calculator host pages ===== */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.row-fluid {
  width: 100%;
}

.row-fluid:before,
.row-fluid:after {
  display: table;
  content: "";
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class*="span"] {
  display: block;
  float: left;
  min-height: 1px;
  width: 100%;
  margin-left: 2.127659574%;
}

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

.row-fluid .span12 { width: 99.99999999%; }
.row-fluid .span11 { width: 91.489361693%; }
.row-fluid .span10 { width: 82.978723396%; }
.row-fluid .span9  { width: 74.468085099%; }
.row-fluid .span8  { width: 65.957446802%; }
.row-fluid .span7  { width: 57.446808505%; }
.row-fluid .span6  { width: 48.936170208%; }
.row-fluid .span5  { width: 40.425531911%; }
.row-fluid .span4  { width: 31.914893614%; }
.row-fluid .span3  { width: 23.404255317%; }
.row-fluid .span2  { width: 14.893617020%; }
.row-fluid .span1  { width: 6.382978723%; }

@media (max-width: 767px) {
  .row-fluid [class*="span"] {
    float: none;
    width: auto;
    margin-left: 0;
  }
}

/* ===== Host shell ===== */
.kindred-calc-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

@media (min-width: 1281px) {
  .kindred-calc-shell {
    padding: 24px 10px;
  }
}

/* ===== Loader ===== */
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid var(--calculators-load-spinner-icon-color);
  width: 120px;
  height: 120px;
  margin: 10px auto;
  animation: kindredSpin 2s linear infinite;
}

@keyframes kindredSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== Calculator root ===== */
.opentext {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.opentext,
.calcJS {
  background-color: transparent;
}

.opentext {
  line-height: 1.2;
}

.opentext a {
  color: inherit;
}

/* ===== Tabs ===== */
.opentext #calcJS-tabs {
  height: 28px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--calculators-tabs-border-bottom-color);
}

.opentext #calcJS-tabs ul {
  display: flex;
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.opentext #calcJS-tabs ul li {
  display: inline-block;
  width: 120px;
  text-align: center;
}

.opentext #calcJS-tabs ul li a {
  display: block;
  color: var(--calculators-tabs-font-color);
  text-decoration: none;
}

.opentext #calcJS-tabs ul li.activeLink a {
  border-bottom: 5px solid var(--calculators-tabs-active-link-border-bottom-color);
}

@media (max-width: 425px) {
  .opentext #calcJS-tabs ul li { width: 90px; }
}
@media (max-width: 375px) {
  .opentext #calcJS-tabs ul li { width: 65px; font-size: 10px; }
}
@media (max-width: 320px) {
  .opentext #calcJS-tabs ul li { width: 60px; font-size: 10px; }
}

/* ===== General layout ===== */
.opentext #calcJSPanels {
  margin-top: 35px;
}

.opentext .calcJS .inline-form {
  display: flex;
}

.opentext .calcJS .inline-formbox,
.opentext .calcJS .inline-formbox-right {
  flex-basis: 50%;
}

.opentext .calcJS .inline-formbox-right {
  display: block;
  background-color: var(--calculators-right-panel-background-color);
  padding: 50px;
  margin-left: 25px;
  max-height: 550px;
  height: 100%;
}

.opentext .calcJS .inline-formbox-right label {
  font-size: 16px;
  line-height: 19px;
  color: var(--calculators-right-panel-label-color);
  font-weight: 400;
}

.opentext .calcJS .inline-formbox-right span {
  display: block;
  margin: 10px 0;
  font-weight: bold;
  font-size: 32px;
  line-height: 37px;
  color: var(--calculators-right-panel-label-color);
}

@media (max-width: 769px) {
  .opentext .calcJS .inline-formbox-right {
    max-height: none;
  }
}

@media (max-width: 641px) {
  .opentext .calcJS .inline-form {
    flex-direction: column;
  }

  .opentext .calcJS .inline-formbox-right {
    margin-left: 0;
  }
}

/* ===== Form rows ===== */
.opentext .calcJS .calc-entry {
  position: relative;
}

.opentext .calcJS .calc-entry label {
  display: block;
  color: var(--calculators-label-color);
}

.opentext .cell.label {
  font-size: 100%;
  color: var(--calculators-comparison-table-summary-font-color);
}

.opentext .calcJS .calc-entry label .calcJSTooltip {
  position: relative;
}

.opentext .calcJS .calc-entry label .calcJSTooltip:before {
  content: "?";
  color: var(--calculators-help-tooltip-color);
  padding-left: 5px;
  font-weight: 700;
}

.opentext div.helpHint {
  position: absolute;
  top: -60px !important;
  z-index: 9999;
  display: none;
  min-width: 300px;
  margin-left: 20px;
  padding: 20px;
  color: var(--calculators-help-hint-font-color);
  font-size: 14px !important;
  font-weight: 400;
  text-wrap: wrap;
  background: #fff;
  border: 1px solid var(--calculators-help-hint-border-color);
  border-radius: 5px;
}

.opentext div.helpHint:after {
  content: "" !important;
}

.opentext .calcJS .calc-entry input,
.opentext .calcJS .calc-entry select,
.opentext .calcJS.fxCalc input,
.opentext .calcJS.fxCalc select {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 40px;
  margin: 15px 0 23px;
  padding: 12px 20px 12px 12px;
  color: var(--calculators-input-font-color);
  text-align: left !important;
  background-color: var(--calculators-input-background-color);
  border: 1px solid var(--calculators-text-label-color);
  border-radius: 4px;
}

.opentext .calcJS .calc-entry input[type="radio"],
.opentext .calcJS .calc-entry input[type="checkbox"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
}

.opentext .calcJS div.calc-entry label.calcJS-radio-inline {
  display: inline-flex;
  line-height: 1.5;
  margin-right: 12px;
}

.opentext .calcJS div.calc-entry label.calcJS-radio-inline input[type="radio"] {
  margin-right: 4px;
}

.opentext .calcJS.mortgageCalc div.calc-entry > span.calcRadioGroup {
  display: block;
  width: 100%;
  margin: 15px 0 23px;
}

/* custom select arrow without icon font */
.opentext .calcJS .calc-entry select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.opentext .calcJS .calc-entry span:not(.calcJSTooltip, .calcRadioGroup) {
  position: relative;
}

.opentext .calcJS .calc-entry span:not(.calcJSTooltip, .calcRadioGroup):after,
.opentext-calculators-mortgage #mortgageCalcTab2Content .calc-entry label:after,
.opentext-calculators-mortgage #mortgageCalcTab4Content .calc-entry label:after {
  content: "▼";
  position: absolute;
  right: 10px;
  top: 44px;
  color: var(--calculators-select-arrow-color);
  font-size: 12px;
  font-weight: 700;
}

.opentext-calculators-mortgage #mortgageCalcTab2Content .calc-entry span:after,
.opentext-calculators-mortgage #mortgageCalcTab2Content #calcJS-calc-mortgage-amount.calc-entry label:after,
.opentext-calculators-mortgage #mortgageCalcTab4Content .calc-entry span:after,
.opentext-calculators-mortgage #mortgageCalcTab4Content #calcJS-calc-mortgage-Amortization.calc-entry label:after,
.opentext-calculators-mortgage #mortgageCalcTab4Content #calcJS-calc-payment-amount.calc-entry label:after,
.opentext-calculators-mortgage #mortgageCalcTab1Content .form-section .inline-formbox > div:nth-child(6) div::after {
  content: "";
}

/* special percentage rows */
.opentext .calcJS div.calc-entry:nth-child(5) {
  font-size: 0;
}
.opentext .calcJS div.calc-entry:nth-child(5) label,
.opentext .calcJS div.calc-entry:nth-child(5) input,
.opentext .calcJS div.calc-entry:nth-child(5) select {
  font-size: 14px;
}

.opentext-calculators-mortgage #mortgageCalcTab1Content .inline-formbox > div:nth-child(5) div,
.opentext-calculators-mortgage #mortgageCalcTab1Content .inline-formbox > div:nth-child(6) div {
  font-size: 0;
}

.opentext-calculators-mortgage #mortgageCalcTab1Content .inline-formbox > div:nth-child(5) div input,
.opentext-calculators-mortgage #mortgageCalcTab1Content .inline-formbox > div:nth-child(6) div input {
  font-size: 14px;
}

.opentext-calculators-mortgage #mortgageCalcTab1Content .inline-formbox > div:nth-child(6) div:after {
  content: "%";
  position: absolute;
  right: 10px;
  top: 43px;
  color: var(--calculators-select-arrow-color);
  font-size: 14px;
  font-weight: 700;
}

/* stress test / radios */
.opentext .calcJS div.calc-entry label#stressTestOn,
.opentext .calcJS div.calc-entry label#stressTestOff {
  display: inline-flex;
  line-height: 1.5;
}

.opentext .calcJS div.calc-entry label#stressTestOn {
  margin-right: 12px;
}

.opentext .calcJS div.calc-entry label#stressTestOn input[type="radio"],
.opentext .calcJS div.calc-entry label#stressTestOff input[type="radio"] {
  margin-right: 4px;
}

/* ===== Actions row ===== */
.calcActionsRow {
  margin-bottom: 25px !important;
}

.opentext ul.calcActionsRow {
  border-top: 1px solid var(--calculators-actions-row-border-top-color);
}

.opentext ul.calcActionsRow li a,
.opentext .calcJS .calc-entry label,
.opentext .calcJS .calcExpenseClass,
.opentext #calcJS-tabs ul li a,
.opentext #calcJS-tabs ul li.activeLink a {
  color: #00416b;
  font-weight: 400;
}

.opentext ul.calcActionsRow li.calcIconHideSection a,
.opentext #calcJS-tabs ul li.activeLink a {
  border-bottom: 5px solid #31b3c2;
}

.opentext ul.calcActionsRow li.calcIconSave a,
.opentext ul.calcActionsRow li.calcIconPrint a {
  color: #3b3a3e;
}

.opentext ul.calcActionsRow li.calcIconSave a:before {
  content: "↓";
  color: #f26647;
  margin-right: 0.35em;
}

.opentext ul.calcActionsRow li.calcIconPrint a:before {
  content: "⎙";
  color: #f26647;
  margin-right: 0.35em;
}

/* ===== Result styling ===== */
#calcJS-mortgage-payment,
#calcJS-aff-max-monthly-payment-result,
#calcJS-aff-max-mortgage-result,
#calcJS-aff-insurance-result,
#calcJS-aff-net-mortgage-result,
#calcJS-aff-max-houseprice-result,
#calcJS-interestCostForTerm,
#calcJS-balanceOwningAtTerm,
#calcJS-interestCostAtAmortation,
#calcJS-amortization-mortgage-amortization,
#calcJS-amortization-interestCostForTerm,
#calcJS-amortization-balanceOwningAtTerm,
#calcJS-amortization-interestCostAtAmortation,
#calcJSLoanResult1,
#calcJSLoanResult2,
#calcJSPaymentInterestCostForTerm,
#calcJSPaymentBalanceOwningAtTerm,
#calcJSAmountInterestCostForTerm,
#calcJSAmountBalanceOwningAtTerm,
#calcJSTfsaResult1,
#calcJSTaxableTotal,
#calcJSTfsaTotal,
#calcJSSavingsInterestEarned,
#calcJSSavingsContribTotal,
#calcJSSavingsTotal,
.resultBalance #yourContribution,
.resultBalance #governmentContribution,
.resultBalance #projectedEarning,
.resultBalance #respTotal,
.resultBalance #respProjectedEducationCosts,
.resultBalance #respSurplus,
.opentext-calculators-rrif .inline-formbox-right #rrifResult,
.opentext-calculators-rrif .inline-formbox-right .calcResultDetail .resultBalance #rrifAgeAtLastPayment,
.opentext-calculators-rrif .inline-formbox-right .calcResultDetail .resultBalance #rrifInterestEarned,
.opentext-calculators-rrif .inline-formbox-right .calcResultDetail .resultBalance #rrifTotalPayments,
.opentext-calculators-fx .inline-form .fxSmallText,
.opentext-calculators-mortgage #mortgageCalcTab2Content .inline-formbox-right .mortgage-calc-result-group .calc-result,
.opentext-calculators-mortgage #mortgageCalcTab4Content .inline-formbox-right .mortgage-calc-result-group .calc-result {
  color: #31b3c2;
  font-family: Avenir, Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 400;
}

.opentext-calculators-mortgage .inline-formbox-right .mortgage-calc-result-group .h2title,
.opentext-calculators-mortgage .inline-formbox-right #calcJS-affordabilityCompareBtn i,
.opentext-calculators-mortgage .inline-formbox-right .preapprove-button i,
.opentext-calculators-mortgage #mortgageCalcTab3Content #comparison-table .cell.label span {
  color: #00416b;
  font-weight: 400;
}

/* ===== Mortgage CTA / compare links ===== */
.opentext-calculators-mortgage .inline-formbox-right #calcJS-affordabilityCompareBtn a,
.opentext-calculators-mortgage .inline-formbox-right .preapprove-button a,
.opentext-calculators-mortgage #mortgageCalcTab2Content .inline-formbox-right #calcJS-compare-link a,
.opentext-calculators-mortgage #mortgageCalcTab4Content .inline-formbox-right #calcJS-amortization-compare-link a {
  color: var(--calculators-mortgage-next-step-link-color);
  font-weight: normal;
  text-decoration: none;
}

.opentext-calculators-mortgage #mortgageCalcTab2Content .inline-formbox-right #calcJS-compare-link,
.opentext-calculators-mortgage #mortgageCalcTab4Content .inline-formbox-right #calcJS-amortization-compare-link {
  grid-column: 1 / 3;
  margin-top: 22px;
  padding: 22px 0 12px;
  border-top: 2px solid var(--calculators-mortgage-next-step-border-top-color);
}

.opentext-calculators-mortgage #mortgageCalcTab2Content .inline-formbox-right #calcJS-compare-link i {
  display: block;
  padding-bottom: 11px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
}

.opentext-calculators-mortgage #mortgageCalcTab2Content .inline-formbox-right #calcJS-compare-link a,
.opentext-calculators-mortgage #mortgageCalcTab3Content #calcJS-inline-form #mortgageCompPreApproveBtn a {
  font-size: 18px;
  line-height: 21px;
  font-weight: 700;
}

.opentext-calculators-mortgage #mortgageCalcTab3Content #calcJS-inline-form #mortgageCompPreApproveBtn {
  display: flex;
  justify-content: flex-end;
  padding: 30px 20px 50px 30px;
  line-height: 21px;
  color: var(--calculators-comparison-table-summary-font-color);
  background-color: var(--calculators-comparison-table-summary-background-color);
}

.opentext-calculators-mortgage #mortgageCalcTab3Content #calcJS-inline-form #mortgageCompPreApproveBtn a:after {
  content: "→";
  padding-left: 10px;
  color: var(--calculators-mortgage-next-step-link-color);
  font-weight: 700;
}

/* ===== Prepayment toggles ===== */
.opentext-calculators-mortgage #mortgageCalcTab2Content .prepayment-toggle,
.opentext-calculators-mortgage #mortgageCalcTab3Content .prepayment-toggle,
.opentext-calculators-mortgage #mortgageCalcTab4Content .prepayment-toggle {
  height: 60px;
  line-height: 74px;
  border-top: 1px solid var(--calculators-actions-row-border-top-color);
}

.opentext-calculators-mortgage #mortgageCalcTab2Content .prepayment-toggle a,
.opentext-calculators-mortgage #mortgageCalcTab3Content .prepayment-toggle a,
.opentext-calculators-mortgage #mortgageCalcTab4Content .prepayment-toggle a,
.opentext-calculators-mortgage #mortgageCalcTab3Content .prepayment-toggle,
.opentext-calculators-mortgage #mortgageCalcTab3Content .prepayment-toggle.prepayment-hide-toggle {
  color: var(--calculators-mortgage-next-step-link-color);
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
}

.opentext-calculators-mortgage #mortgageCalcTab2Content .prepayment-toggle a:after,
.opentext-calculators-mortgage #mortgageCalcTab3Content .prepayment-toggle:after,
.opentext-calculators-mortgage #mortgageCalcTab4Content .prepayment-toggle a:after {
  content: "+";
  padding-left: 5px;
  color: var(--calculators-help-tooltip-color);
  font-size: 18px;
  font-weight: 700;
}

.opentext-calculators-mortgage #mortgageCalcTab3Content .prepayment-toggle.prepayment-hide-toggle:after {
  content: "−";
}

/* ===== Comparison table ===== */
.opentext-calculators-mortgage #mortgageCalcTab3Content #comparison-table .mortgageComparisonScenarioRow span.cell {
  font-size: 16px;
}

#mortgageComparisonPrepayments .row.calc-entry {
  height: inherit !important;
}

#mortgageComparisonPrepayments .cell.label {
  color: var(--calculators-comparison-table-summary-font-color);
}

.opentext-calculators-mortgage #mortgageCalcTab3Content #mortgageComparisonPrepayments .hidden {
  display: none !important;
}

/* ===== Tables ===== */
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}

.table-bordered {
  border: 1px solid #ddd;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}

/* ===== Buttons if calculator uses generic bootstrap/hs buttons ===== */
.button,
.hs-button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  color: #fff;
  background: #00416b;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8em;
  text-decoration: none;
  white-space: normal;
}

.button:hover,
.hs-button:hover,
button:hover {
  background: #185f8c;
  color: #fff;
  text-decoration: none;
}

/* ===== Mobile tweaks ===== */
@media (max-width: 970px) {
  .opentext-calculators-mortgage #mortgageCalcTab2Content .inline-formbox-right {
    display: block;
  }
}

@media (max-width: 768px) {
  .opentext .calcJS .inline-formbox-right {
    padding: 24px;
  }
}

@media (max-width: 640px) {
  .opentext-calculators-mortgage #mortgageCalcTab3Content #comparison-table .mortgageComparisonScenarioRow span.cell,
  .opentext .calcJS .inline-formbox-right label {
    font-size: 15px;
  }
}

/* =====================================
   FINAL OVERRIDES (post-migration fixes)
   ===================================== */

/* report tables */
.opentext table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}

.opentext table th,
.opentext table td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid #e1e5ea;
  white-space: nowrap;
}

.opentext table th:first-child,
.opentext table td:first-child {
  text-align: left;
}

.opentext table thead th {
  color: #00416b;
  font-weight: 700;
  border-bottom: 2px solid #cfd6db;
}

.opentext table tbody tr:nth-child(even) {
  background: #f9fbfc;
}

.opentext table td {
  font-variant-numeric: tabular-nums;
}

/* save/share cleanup across calculators */
#calcJS-save-dialog,
#calcJS-save-url,
.save-url-input,
.close-popup,
#calcJS-close-popup,
#calcJS-block,
#calcJS-save-button,
.calcActionsRow li.calcIconSave,
[data-test-id*="save-modal"],
[data-test-id*="Save-modal"],
[data-test-id*="save-modal-heading"],
[data-test-id*="save-modal-content"],
[data-test-id*="SaveModal"],
.popup-header,
.popup-content {
  display: none !important;
  visibility: hidden !important;
}

div.close-popup,
div.close-popup > a#calcJS-close-popup,
a#calcJS-close-popup[data-test-id="mortgage-save-modal-close"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* modern action buttons */
.opentext ul.calcActionsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 18px 0 0;
  margin: 24px 0 0 !important;
  border-top: 1px solid #d9dde2;
  list-style: none;
}

.opentext ul.calcActionsRow li {
  margin: 0 !important;
  padding: 0 !important;
}

.opentext ul.calcActionsRow li::before,
.opentext ul.calcActionsRow li::after,
.opentext ul.calcActionsRow a::before,
.opentext ul.calcActionsRow a::after {
  content: none !important;
}

.opentext ul.calcActionsRow li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid #d9dde2;
  border-radius: 999px;
  background: #ffffff;
  color: #00416b;
  font-family: Avenir, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.opentext ul.calcActionsRow li a:hover,
.opentext ul.calcActionsRow li a:focus {
  background: #e9f8f9;
  border-color: #32b9c8;
  color: #00416b;
  text-decoration: none;
}

.opentext ul.calcActionsRow li.calcIconHideSection a {
  border-color: #32b9c8;
  background: #e9f8f9;
}

@media (max-width: 640px) {
  .opentext ul.calcActionsRow {
    gap: 10px;
  }

  .opentext ul.calcActionsRow li a {
    width: 100%;
  }
}

/* remove fake dropdown arrows and keep one clean chevron on real selects */
.opentext .calcJS .calc-entry span::after,
.opentext .calcJS .calc-entry label::after,
.opentext .calcJS .calc-entry div::after,
.opentext-calculators-mortgage .calc-entry span::after,
.opentext-calculators-mortgage .calc-entry label::after,
.opentext-calculators-mortgage .calc-entry div::after {
  content: "" !important;
  display: none !important;
}

.opentext .calcJS .calc-entry select,
.opentext .calcJS.fxCalc select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'><path d='M2 2.5L7 7.5L12 2.5' fill='none' stroke='%23f26647' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 10px !important;
  padding-right: 40px !important;
}

.opentext .calcJS .calc-entry select::-ms-expand,
.opentext .calcJS.fxCalc select::-ms-expand {
  display: none !important;
}

/* retirement savings calculator - percentage fields */
.opentext-calculators-retirement input#Component-CalculatorRetirement_retirement__Component-CalculatorInput_rateBeforeRetirement,
.opentext-calculators-retirement input#Component-CalculatorRetirement_retirement__Component-CalculatorInput_rateAfterRetirement,
.opentext-calculators-retirement input#Component-CalculatorRetirement_retirement__Component-CalculatorInput_rateOfInflation {
  width: 60px !important;
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'><text x='0' y='12' font-size='14' font-weight='700' fill='%23f26647' font-family='Arial, Helvetica, sans-serif'>%</text></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 14px !important;
  color: #000 !important;
}

.opentext-calculators-retirement [data-test-id="retirement-rateBeforeRetirement-input-container"],
.opentext-calculators-retirement [data-test-id="retirement-rateAfterRetirement-input-container"],
.opentext-calculators-retirement [data-test-id="retirement-rateOfInflation-input-container"] {
  color: transparent !important;
}

.opentext-calculators-retirement [data-test-id="retirement-rateBeforeRetirement-input-container"] input,
.opentext-calculators-retirement [data-test-id="retirement-rateAfterRetirement-input-container"] input,
.opentext-calculators-retirement [data-test-id="retirement-rateOfInflation-input-container"] input,
.opentext-calculators-retirement [data-test-id="retirement-rateBeforeRetirement-input-container"] label,
.opentext-calculators-retirement [data-test-id="retirement-rateAfterRetirement-input-container"] label,
.opentext-calculators-retirement [data-test-id="retirement-rateOfInflation-input-container"] label,
.opentext-calculators-retirement [data-test-id="retirement-rateBeforeRetirement-input-container"] label span,
.opentext-calculators-retirement [data-test-id="retirement-rateAfterRetirement-input-container"] label span,
.opentext-calculators-retirement [data-test-id="retirement-rateOfInflation-input-container"] label span,
.opentext-calculators-retirement [data-test-id="retirement-rateBeforeRetirement-input-container"] .helpHint,
.opentext-calculators-retirement [data-test-id="retirement-rateAfterRetirement-input-container"] .helpHint,
.opentext-calculators-retirement [data-test-id="retirement-rateOfInflation-input-container"] .helpHint {
  color: #3b3a3e !important;
}

/* RRIF calculator - expected rate of return */
.opentext-calculators-rrif input#calcJSRateOfReturn,
.opentext-calculators-rrif input[data-test-id="rrif-ExpectedRateReturn-input"] {
  width: 60px !important;
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'><text x='0' y='12' font-size='14' font-weight='700' fill='%23f26647' font-family='Arial, Helvetica, sans-serif'>%</text></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 14px !important;
  color: #000 !important;
}

.opentext-calculators-rrif [data-test-id="rrif-ExpectedRateReturn-field"] {
  color: transparent !important;
}

.opentext-calculators-rrif [data-test-id="rrif-ExpectedRateReturn-field"] label,
.opentext-calculators-rrif [data-test-id="rrif-ExpectedRateReturn-field"] label span,
.opentext-calculators-rrif [data-test-id="rrif-ExpectedRateReturn-field"] input,
.opentext-calculators-rrif [data-test-id="rrif-ExpectedRateReturn-field"] .helpHint {
  color: #3b3a3e !important;
}

/* RESP calculator - two percentage fields */
.opentext-calculators-resp .calc-entry:has(#calcJSInflation),
.opentext-calculators-resp .calc-entry:has(#annualRateOfReturn) {
  font-size: 0 !important;
}

.opentext-calculators-resp .calc-entry:has(#calcJSInflation) label,
.opentext-calculators-resp .calc-entry:has(#calcJSInflation) label span,
.opentext-calculators-resp .calc-entry:has(#calcJSInflation) .helpHint,
.opentext-calculators-resp .calc-entry:has(#annualRateOfReturn) label,
.opentext-calculators-resp .calc-entry:has(#annualRateOfReturn) label span,
.opentext-calculators-resp .calc-entry:has(#annualRateOfReturn) .helpHint {
  font-size: 14px !important;
}

.opentext-calculators-resp input#calcJSInflation,
.opentext-calculators-resp input#annualRateOfReturn {
  font-size: 14px !important;
  width: 60px !important;
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'><text x='0' y='12' font-size='14' font-weight='700' fill='%23f26647' font-family='Arial, Helvetica, sans-serif'>%</text></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 14px !important;
  color: #000 !important;
}

/* FX calculator */
.opentext-calculators-fx .inline-form > ul,
.opentext-calculators-fx .inline-form > ul > li,
.opentext-calculators-fx .inline-form > ul > li > ul,
.opentext-calculators-fx .inline-form > ul > li > ul > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.opentext-calculators-fx .inline-form > ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
}

.opentext-calculators-fx .inline-form > ul > li.threeColumnSide {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
}

.opentext-calculators-fx .inline-form > ul > li.threeColumnCenter {
  flex: 0 0 auto !important;
  width: auto !important;
  align-self: center !important;
}

.opentext-calculators-fx .inline-form > ul > li.threeColumnSide > ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

@media (max-width: 768px) {
  .opentext-calculators-fx .inline-form > ul {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .opentext-calculators-fx .inline-form > ul > li.threeColumnSide {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .opentext-calculators-fx .inline-form > ul > li.threeColumnCenter {
    flex: 0 0 100% !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* GLOBAL FONT OVERRIDE */
.opentext,
.opentext * {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}