:root {
  --fontPrimary: 'Lato';
  --fontSecondary: 'Roboto', sans-serif;
  --defBackground: #fafafa;
  --primaryColour: #01497c;
  --secondaryColour: #A33;
  --boxPaddingVer: 0.9rem;
  --defRadius: .4rem;
  --defShadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --defShadow1: 0 0.16rem 0.36rem 0 rgb(0 0 0 / 13%), 0 0.03rem 0.09rem 0 rgb(0 0 0 / 11%);
  --currentColor: #f33;
  --border-diver-color: #EAEAEA;
  --menuActiveBackgroundColor: #F3F3F3;
  --backgroundColorFillDark: #01497c;
  --fadedColor: #848484;
  --bannerHeight: 90px;
  --brandedLogoHeight: 60px;
  --profileImageSize: 110px;
  --sectionViewGapDistance: 80px;

  --textColorBlack: #000;
  --textColorGreyDark: #333;
  --textColorGreyLight: #5F5F5F;
}

/* @page {
   size: A4 portrait;
   margin: 0;
   padding: 0;
} */

/* ISO Paper Size */
/* @page {
  size: A4 landscape;
} */

/* Size in mm */    
/* @page {
  size: 100mm 200mm landscape;
} */

/* Size in inches */    
/* @page {
  size: 4in 6in landscape;
} */


.A4Page {
   margin: 0;
   padding: 0;
   border: initial;
   border-radius: initial;
   width: initial;
   min-height: initial;
   box-shadow: initial;
   background: initial;
   page-break-after: always;
}

.A4Page.portrait {
   size: letter portrait;
}
.A4Page.landscape {
   size: letter landscape;
}

.PreqPage {
   position: relative;
   width: 29.7cm;
   height: 21cm;
   overflow: hidden;
   /* margin: 0 auto; */
   margin: 0;
   background-position: center;
   background-size: contain;
   page-break-after: always;
}

.PreqPage .ProfileSection {
   position: absolute;
   display: flex;
   gap: 2.2rem;
}

.PreqPage .ProfileSection {
   position: absolute;
   display: flex;
   color: var(--textColor);
}
.PreqPage .ProfileSection .profileImage {
   display: flex;
   position: relative;
}
.PreqPage .ProfileSection .profileImage i {
   display: inline-block;
   background-position: center;
   background-size: contain;
   border-radius: 50%;
}
.PreqPage .ProfileSection label,
.PreqPage .ProfileSection p {
   display: block;
   margin-bottom: 4px;
}
.PreqPage .ProfileSection p {
   font-size: .9rem;
}
.PreqPage .ProfileSection .title {
   font-size: 1.2rem;
   font-weight: bold;
   letter-spacing: 0.2;
   margin-bottom: 10px;
}

.PreqPage .ProfileSection .profileImage > .img {
   width: 100px;
   height: 100px;
   border: solid 2px #f6f6f6;
   box-shadow: 0 1px 4px rgb(0, 0, 0, .2);
   -webkit-box-shadow: 0 1px 4px rgb(0, 0, 0, .2);
}
.PreqPage .ProfileSection .profileImage > .logo {
   position: absolute;
   width: 32px;
   height: 32px;
   top: 70px;
   right: -5px;
   border: solid 1px #f6f6f6;
   box-shadow: 0 1px 4px rgb(0, 0, 0, .2);
   -webkit-box-shadow: 0 1px 4px rgb(0, 0, 0, .2);
}

.PreqPage .DisclaimerNote {
   position: absolute;
   display: flex;
   color: #000;
}

/********************* CMA *********************/

.PreqPage .cma {
   --positionLeft: 80px;
   --fontSize1: 1.8rem;
   --fontSize2: 3.7rem;
   --fontSize3: 1.7rem;
   --textColor: #014282;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1;
}
.PreqPage .cma .DisclaimerNote {
   width: 450px;
   top: 640px;
   left: 600px;
   font-size: 13px;
}
.PreqPage .cma .ProfileSection {
   left: var(--positionLeft);
   top: 640px;
}
.PreqPage .cma > .floatingLabel {
   position: absolute;
   color: var(--textColor);
}
.PreqPage .cma > .labelCompanyName {
   display: none;
}
.PreqPage .cma > .labelName {
   left: var(--positionLeft);
   top: 315px;
   font-size: var(--fontSize1);
}
.PreqPage .cma > .labelPrice {
   font-size: var(--fontSize2);
   left: var(--positionLeft);
   top: 378px;
}
.PreqPage .cma > .labelDateIssue,
.PreqPage .cma > .labelDateValid {
   top: 495px;
   font-size: var(--fontSize3);
}
.PreqPage .cma > .labelDateIssue {
   left: var(--positionLeft);
}
.PreqPage .cma > .labelDateValid {
   left: calc(var(--positionLeft) + 362px);
}

/********************* DLC *********************/

.PreqPage .dlc {
   --positionLeft: 80px;
   --fontSize1: 1.8rem;
   --fontSize2: 3.7rem;
   --fontSize3: 1.7rem;
   --textColor: #014282;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1;
}
.PreqPage .dlc .DisclaimerNote {
   width: 450px;
   top: 640px;
   left: 600px;
   font-size: 13px;
}
.PreqPage .dlc .ProfileSection {
   left: var(--positionLeft);
   top: 640px;
}
.PreqPage .dlc > .floatingLabel {
   position: absolute;
   color: var(--textColor);
}
.PreqPage .dlc > .labelCompanyName {
   display: none;
}
.PreqPage .dlc > .labelName {
   left: var(--positionLeft);
   top: 315px;
   font-size: var(--fontSize1);
}
.PreqPage .dlc > .labelPrice {
   font-size: var(--fontSize2);
   left: var(--positionLeft);
   top: 378px;
}
.PreqPage .dlc > .labelDateIssue,
.PreqPage .dlc > .labelDateValid {
   top: 495px;
   font-size: var(--fontSize3);
}
.PreqPage .dlc > .labelDateIssue {
   left: var(--positionLeft);
}
.PreqPage .dlc > .labelDateValid {
   left: calc(var(--positionLeft) + 362px);
}

/********************* MA *********************/

.PreqPage .ma {
   --positionLeft: 97px;
   --fontSize1: 1.8rem;
   --fontSize2: 3.7rem;
   --fontSize3: 1.7rem;
   --textColor: #014282;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1;
}
.PreqPage .ma .DisclaimerNote {
   width: 450px;
   top: 640px;
   left: 600px;
   font-size: 13px;
}
.PreqPage .ma .ProfileSection {
   left: var(--positionLeft);
   top: 640px;
}
.PreqPage .ma > .floatingLabel {
   position: absolute;
   color: var(--textColor);
}
.PreqPage .ma > .labelCompanyName {
   display: none;
}
.PreqPage .ma > .labelName {
   left: var(--positionLeft);
   top: 300px;
   font-size: var(--fontSize1);
}
.PreqPage .ma > .labelPrice {
   font-size: var(--fontSize2);
   left: var(--positionLeft);
   top: 378px;
}
.PreqPage .ma > .labelDateIssue,
.PreqPage .ma > .labelDateValid {
   top: 501px;
   font-size: var(--fontSize3);
}
.PreqPage .ma > .labelDateIssue {
   left: var(--positionLeft);
}
.PreqPage .ma > .labelDateValid {
   left: calc(var(--positionLeft) + 362px);
}

/********************* MCC *********************/

.PreqPage .mcc {
   --positionLeft: 95px;
   --fontSize1: 1.8rem;
   --fontSize2: 3.7rem;
   --fontSize3: 1.7rem;
   --textColor: #014282;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1;
}
.PreqPage .mcc .DisclaimerNote {
   width: 450px;
   top: 570px;
   left: 600px;
   font-size: 13px;
}
.PreqPage .mcc .ProfileSection {
   left: var(--positionLeft);
   top: 570px;
}
.PreqPage .mcc > .floatingLabel {
   position: absolute;
   color: var(--textColor);
}
.PreqPage .mcc > .labelCompanyName {
   left: var(--positionLeft);
   font-size: var(--fontSize1);
   top: 166px;
}
.PreqPage .mcc > .labelName {
   left: var(--positionLeft);
   top: 265px;
   font-size: var(--fontSize1);
}
.PreqPage .mcc > .labelPrice {
   font-size: var(--fontSize2);
   left: var(--positionLeft);
   top: 326px;
}
.PreqPage .mcc > .labelDateIssue,
.PreqPage .mcc > .labelDateValid {
   top: 426px;
   font-size: var(--fontSize3);
}
.PreqPage .mcc > .labelDateIssue {
   left: var(--positionLeft);
}
.PreqPage .mcc > .labelDateValid {
   left: calc(var(--positionLeft) + 312px);
}

.newPdfButton {
  flex-shrink: 0;
  align-items: center;
  background: #dadaff;
  border: none;
  border-radius: 6px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  gap: 4px;
  height: 48px;
  margin: 0 0 0 auto;
  padding: 12px 16px;

  svg {
    height: 24px;
    width: 24px;
  }
}

.download-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.download-modal-content {
  background-color: #fff;
  padding: 36px;
  border-radius: 8px;
  text-align: center;
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 36px;
}

.download-modal.hidden {
  display: none;
}

.download-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;

  padding: 0;
  border: none;
  background: transparent;
}

.download-modal-title {
  font-family: Inter;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: #374151;

  margin: 0;
  text-align: left;
}

.download-modal-description {
  font-family: Inter;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #6b7280;

  margin: 8px 0 0;
  text-align: left;
}

.download-modal-options {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.download-modal-button {
  font-family: Inter;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: white;

  cursor: pointer;
  width: fit-content;
  margin: 0 0 0 auto;
  background: #545fdd;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
}

.download-modal-option {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 24px 24px;
  width: 256px;
  justify-content: space-between;

  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  border-radius: 12px;
  box-shadow: 0px 1px 2px 0px #0000000d;

  text-align: left;

  position: relative;
}

.download-modal-option-select-icon {
  position: absolute;
  top: 16px;
  right: 16px;

  width: 10px;
  height: 10px;

  background: white;
  border-radius: 50%;

  outline: 2px solid #545fdd;
  outline-offset: 3px;
}

.download-modal-option[data-selected='true'] {
  outline: 2px solid #545fdd;
  outline-offset: -2px;
}

.download-modal-option[data-selected='true'] .download-modal-option-select-icon {
  background: #545fdd;
}

.download-modal-option-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.download-modal-option-header h3 {
  font-family: Inter;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #374151;
  margin: 0;
}

.download-modal-option-header p {
  font-family: Inter;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #6b7280;
  margin: 0;
}

.download-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  height: 100%;
}

.download-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
  user-select: none;
}

.download-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.download-checkbox span {
  position: relative;
  padding-left: 28px;
  font-family: Inter;
  font-size: 14px;
  color: #374151;
}

.download-checkbox input + span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;

  margin-top: -2px;
}

.download-checkbox input:checked + span::before {
  background: #545fdd;
  border-color: #545fdd;
}

.download-checkbox input:checked + span::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.download-checkbox input:disabled + span {
  color: #6b7280;
}

.download-checkbox input:disabled + span::before {
  border-color: #545fdd;
  background: #545fdd;
}

.contact-footer {
  background: #eff1f3;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.contact-footer .content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.contact-footer .content.has-three-profiles {
  flex-wrap: wrap;
  row-gap: 64px;
}

.contact-footer .content.has-three-profiles .profile-card-wrapper,
.contact-footer .content.has-three-profiles .app-download-wrapper {
  flex: 1 1 100%;
  width: 100%;
}

.contact-footer .content.has-three-profiles .profile-card-wrapper {
  justify-content: center;
}

.contact-footer .content.has-three-profiles .app-download-wrapper {
  display: flex;
  justify-content: center;
}

.contact-footer .contact-information {
  display: flex;
  flex-direction: column;
  gap: 2px;

  p {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
  }

  a {
    color: #545fdc;
  }

  p.hidden,
  a.hidden {
    display: none !important;
  }
}

.contact-footer .profile-card-wrapper {
  display: flex;
  gap: 16px;
}

.contact-footer .app-download {
  display: flex;
  max-width: 400px;
  gap: 12px;

  img {
    width: 86px;
    height: 86px;
    aspect-ratio: 1 / 1;
  }

  .app-rating {
    margin-top: 12px;
    display: flex;
    gap: 6px;

    svg {
      aspect-ratio: 1/1;
      height: 16px;
      height: 16px;
      color: #fb923c;
    }
  }
}

.contact-footer .profile-card-wrapper .footer-profile-card {
  display: flex;
  gap: 24px;
  max-width: 388px;
  width: 100%;

  .profile-image {
    aspect-ratio: 1/1;
    height: 120px;
    width: 120px;
    background: black;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
  }
}

.contact-footer .profile-card-wrapper.co-branded .footer-profile-card {
  display: flex;
  gap: 24px;
  max-width: 388px;
  width: 100%;

  .profile-image {
    aspect-ratio: 1/1;
    height: 64px;
    width: 64px;
    background: black;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
  }
}

@media print {
  footer {
    bottom: -16px;
    margin: 6px 0 0;
    position: fixed;
    width: calc(100% - 55px - 55px);

    left: 50%;
    transform: translate(-50%, -50%);
  }
}


.breakPage {
  page-break-before: always;
}

main {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1100px;
  width: 1100px;
}

.titlePdf {
  display: none;
}

.qrCodePdf {
  display: none;
}

.hideOnWeb {
  display: none;
}

.hidden {
  display: none;
}

body.bodyV2 {
  min-width: 1130px;

  .header {
    background: var(--primaryColour);
    width: 100%;

    .headerInner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80px;
      padding: 0;
      max-width: 1100px;
      margin: 0 auto;
    }

    .personalDetails {
      display: flex;
      align-items: center;
      gap: 10px;

      .personalDetails_img {
        aspect-ratio: 1 / 1;
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }
    }
  }
}

@media print {
  .header {
    position: fixed;
    top: 0px;
  }

  .hideOnWeb {
    display: block;
  }

  .hideOnPdf {
    display: none;
  }

  main {
    max-width: none;
    width: 100%;
  }

  .titlePdf {
    align-items: center;
    color: white;
    display: flex;
    gap: 5px;
    margin: 0 0 0 auto;
  }

  .qrCodePdf {
    width: fit-content;
    margin: 0 0 0 auto;
    align-items: center;
    display: flex;
    gap: 8px;

    img {
      box-sizing: border-box;
      background: white;
      padding: 1px;
      height: 48px;
      width: 48px;
      aspect-ratio: 1 / 1;
    }

    .app-rating {
      margin-top: 2px;
      display: flex;
      gap: 6px;

      svg {
        aspect-ratio: 1/1;
        height: 16px;
        height: 16px;
        color: #fb923c;
      }
    }
  }

  body.bodyV2 {
    .header {
      .headerInner {
        padding: 0 55px;
        max-width: none;
      }
    }
  }
}



.header-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.header-section .title-qr-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--primaryColour);
}

.header-section .address-information {
  display: flex;
  height: 100px;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.header-section .app-download-information {
  display: flex;
  gap: 24px;

  .qr-code {
    aspect-ratio: 1/1;
    height: 100px;
    width: 100px;
  }

  .app-rating {
    margin-top: 12px;
    display: flex;
    gap: 6px;

    svg {
      aspect-ratio: 1/1;
      height: 16px;
      height: 16px;
      color: #fb923c;
    }
  }
}

.header-section .app-download-information.hidden {
  display: none;
}

.header-section .profiles-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.header-section .profiles-wrapper.with-cobranded {
  gap: 24px;
}

@media print {
  .header-section {
    padding: 112px 55px 0;
  }
}

.profileCard {
  border-radius: 8px;
  padding: 18px 24px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  box-shadow: 0px 1px 3px 0px #0000001a;
  height: fit-content;
  width: 100%;

  display: flex;
  gap: 32px;
  align-items: center;

  .profileImage {
    aspect-ratio: 1/1;
    height: 90px;
    width: 90px;
    border-radius: 50%;
  }

  .contactInformation {
    display: flex;
    flex-direction: column;

    a {
      color: #545fdc;
    }
  }
}

@media print {
  .profileCard {
    box-shadow: none;
  }
}

.notes-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.notes-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notes-container {
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #f9fafb;

  display: flex;
  flex-direction: column;
}

.note {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 12px;
}

.note.selected {
  outline: 2px solid var(--primaryColour);
  outline-offset: -1px;

  .micro14 {
    color: var(--primaryColour);
  }
}


.mortgage-terms-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.mortgage-terms {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mortgage-terms-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mortgage-terms .table {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  border-radius: 12px;
  box-shadow: 0px 1px 3px 0px #0000001a;
}

.mortgage-terms .table.transparent {
  border: none;
  background: transparent;
  border-radius: 0px;
  box-shadow: none;
}

.mortgage-terms .container .title {
  height: 40px;
  display: flex;
  gap: 8px;
}

.mortgage-terms .container .title .primary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.mortgage-terms .container .column {
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: var(--scenario-column-gap, 32px);
  width: 100%;
}

.mortgage-terms .container .cell {
  padding: 12px var(--cell-padding, 6px);
  height: 48px;
}

.mortgage-terms .table.transparent .container .column:first-child {
  padding-left: 0;
}

.mortgage-terms .table.transparent .container .column:last-child {
  padding-right: 0;
}

.mortgage-terms .container .cell p {
  white-space: nowrap;
}

.mortgage-terms .container.minimal .cell p {
  line-height: 24px;
}

.mortgage-terms .container .cell p:not(.no-truncate) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mortgage-terms .container .cell.underline {
  border-bottom: 1px solid var(--cell-underline, #d1d5db);
}

.mortgage-terms .container .cell.highlighted {
  background: #eff1f3;
  border-radius: 8px;
}

.mortgage-terms .container {
  width: 100%;
  display: grid;
  grid-template-columns: var(--columns);
}

/* Values */
.mortgage-terms .container .column.selected {
  outline: 2px solid var(--primaryColour);
  outline-offset: -2px;
  border-radius: 12px;
}

.mortgage-terms .container .column.selected .title {
  color: var(--primaryColour);
}

.mortgage-terms .column.values .cell {
  text-align: right;
}

.mortgage-terms .container .cell.summary {
  padding: 0;
  height: fit-content;
}

.mortgage-terms .column.values .summary .micro14 {
  color: #9da3af;

  display: flex;
  align-items: center;
  justify-content: end;
}

.mortgage-terms .column.values .summary .card {
  height: 48px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #374151;
  border-top: 1px solid #d1d5db;
}

.mortgage-terms .column.values .summary .h24,
.mortgage-terms .column.values .summary .h18 {
  color: white;
}

/* Minimal */
.mortgage-terms .container .column.minimal {
  gap: 8px;
}

.mortgage-terms .container .column.extended {
  gap: 16px;
  justify-content: space-between;
}

.mortgage-terms .column.minimal .cell.summary {
  padding: 0;
}

.mortgage-terms .container.minimal .cell {
  padding: 6px var(--cell-padding, 6px);
  height: 36px;
}

.mortgage-terms .column.values.minimal .summary .card {
  height: 36px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #374151;
  border-top: 1px solid #d1d5db;
}

.mortgage-terms .column.values .summary .h16 {
  color: white;
}

.mortgage-terms .container .cell-container {
  padding: 0 var(--cell-container-padding, 0);
  background-color: var(--cell-container-bg);
}

.mortgage-terms .container .cell-container.rounded-top {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.mortgage-terms .container .cell-container.rounded-bot {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.renewal-scenario-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media print {
  .mortgage-terms-group {
    padding-top: 112px;
  }

  .mortgage-terms .table {
    box-shadow: none;
  }

  .renewal-scenario-page {
    padding-top: 112px;
  }
}

.interestsPrincipal .table {
  width: 100%;
}

/* Common */
.interestsPrincipal .container {
  width: 100%;
  display: grid;
  grid-template-columns: var(--columns);
}

.interestsPrincipal .container .title {
  height: 40px;
  display: flex;
  gap: 8px;
}

.interestsPrincipal .container .title .primary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.renewal .interestsPrincipal .container .cell-with-change {
  height: 72px;
}

.renewal .interestsPrincipal .container .column {
  gap: 0px;
}

.renewal .interestsPrincipal .container .column .cell.fit {
  height: fit-content;
}

.interestsPrincipal .container .cell-with-change {
  padding: 12px var(--cell-padding, 6px);
  height: 96px;
}

.interestsPrincipal .container .cell-with-change.underline {
  border-bottom: 1px solid #d1d5db;
}

.interestsPrincipal .container .cell {
  padding: 12px var(--cell-padding, 6px);
  height: 64px;
}

.interestsPrincipal .container .cell p {
  white-space: nowrap;
}

.interestsPrincipal .container .cell p:not(.no-truncate) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.interestsPrincipal .container .cell-with-summary {
  height: 76px;
}

.interestsPrincipal .container .cell-container {
  background-color: var(--cell-container-bg);
}

.interestsPrincipal .container .column {
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 22px;
  width: 100%;
}

.interestsPrincipal .container .column:first-child {
  padding-left: 0;
}

.interestsPrincipal .container .column:last-child {
  padding-right: 0;
}

/* Values */
.interestsPrincipal .column.selected {
  outline: 2px solid var(--primaryColour);
  outline-offset: -2px;
  border-radius: 12px;
}

.interestsPrincipal .column.selected .title {
  color: var(--primaryColour);
}

.interestsPrincipal .column.values .cell,
.interestsPrincipal .column.values .cell-with-change,
.interestsPrincipal .column.values .cell-with-summary {
  text-align: right;
}

.interestsPrincipal .column.values .micro14.disabled {
  color: #9da3af;

  display: flex;
  align-items: center;
  justify-content: end;
}

.interestsPrincipal .column.values .cell-with-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.interestsPrincipal .column.values .cell-with-summary .card {
  height: 48px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #374151;
  border-top: 1px solid #d1d5db;
}

.interestsPrincipal .column.values .cell-with-summary .h24,
.interestsPrincipal .column.values .cell-with-summary .h18 {
  color: white;
}

.interest-chart-container,
.comparison-bar-chart-container,
.total-monthly-cost-chart-container,
.interest-savings-chart-container {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  border-radius: 12px;
  box-shadow: 0px 1px 3px 0px #0000001a;
  padding: 32px 32px 32px 32px;
}

.interest-chart-container {
  position: relative;
}

.interest-chart-container .compare-at-label {
  position: absolute;
  top: 42px;
  right: 36px;

  z-index: 1;
}

.renewal .section-title-with-compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 24px;
  border-bottom: 4px solid var(--primaryColour);
}

.renewal .section-title-with-compare-row > .sectionTitle {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  flex: 1;
  min-width: 0;
}

.renewal .section-title-with-compare-row .compare-at-label {
  position: static;
}

@media print {
  .interest-chart-container,
  .comparison-bar-chart-container,
  .total-monthly-cost-chart-container,
  .interest-savings-chart-container {
    box-shadow: none;
  }

  .mortgage-journey-map {
    box-shadow: none;
  }
}

.mortgage-journey-map {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  border-radius: 12px;
  box-shadow: 0px 1px 3px 0px #0000001a;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.mortgage-journey-map .labels-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 32px 0;
}

.mortgage-journey-map .chart-container {
  width: 100%;
  display: grid;
  grid-template-columns: var(--columns);
  height: 100%;
  gap: 8px;

  padding: 0 32px 32px 0;
}

.mortgage-journey-map .chart-container .scenario-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}

.mortgage-journey-map .chart-container .scenario-column .terms-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mortgage-journey-map .chart-container .scenario-column .scenario-title {
  font-family: Inter;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  color: #374151;

  width: 100%;
  margin-left: auto;
}

.mortgage-journey-map .chart-container .scenario-column[data-selected='true'] .scenario-title {
  color: var(--primaryColour);
}

.mortgage-journey-map .chart-container .scenario-column .term-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 32px;
  gap: 4px;
  background: #e5e5e5;

  font-family: Inter;

  height: 100%;
  border-radius: 6px;

  position: relative;

  outline-offset: -2px;
  outline: 2px dashed #d4d4d4;

  .rate-term {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    color: #374151;

    .break-event-month {
      color: #ef4444;
    }
  }

  .rate {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #525252;
  }
}

.mortgage-journey-map .chart-container .scenario-column[data-selected='true'] .term-item {
  outline-offset: -2px;
  outline: 2px solid var(--primaryColour);
  background-color: rgba(var(--primaryColourRgb), 0.2);
}

.mortgage-journey-map .chart-container .scenario-column .term-item[data-breakevent='true'] {
  ::after {
    content: '';
    position: absolute;
    left: 2px;
    bottom: 2px;
    border-radius: 0 0 4px 4px;
    pointer-events: none;
    height: 7px;
    width: calc(100% - 4px);
    background-color: #ef4444;
  }
}


.new-compare-wrapper {
  padding-top: 64px;
  padding-bottom: 80px;
}

.new-compare-section {
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media print {
  .new-compare-wrapper {
    padding: 0;
  }

  .new-compare-section {
    padding: 112px 55px 0;
  }

  .new-compare-section.same-page {
    padding: var(--new-compare-section-padding-top, 64px) 55px 0;
  }

  .new-compare-wrapper > .new-compare-section:nth-child(2) {
    padding: var(--new-compare-section-padding-top, 64px) 55px 0;
  }

  .new-compare-sectionTermsWrapper {
    gap: 12px;
  }
}

.current-situation-wrapper {
  border-top: 1px solid #d1d5db;
}

.current-situation-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 24px 0 0;
}

.current-situation-section .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.current-situation-section .item.underline {
  border-bottom: 1px solid #d1d5db;
}


.purchase-header-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 48px;
}

/* base = the "normal" case, so the image is sized on the first paint,
   before the ratio class is added */
.purchase-header-section .property-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purchase-header-section .property-image-wrapper .property-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 8px;
}

.purchase-header-section .property-image-wrapper.portrait .property-image {
  object-position: top;
}

.purchase-header-section .purchase-information-container {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.purchase-header-section .address-information {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primaryColour);
}

.purchase-header-section .profile-container.profile-container-three {
  gap: var(--profile-container-gap, 16px);
}

.purchase-header-section .profile-container {
  display: flex;
  flex-direction: column;
  gap: var(--profile-container-gap, 24px);
  padding-top: 24px;
}

.purchase-header-section .profile-container .app-download {
  display: flex;
  max-width: 400px;
  gap: 24px;

  img {
    width: 86px;
    height: 86px;
    aspect-ratio: 1 / 1;
  }

  .app-rating {
    margin-top: 12px;
    display: flex;
    gap: 6px;

    svg {
      aspect-ratio: 1/1;
      height: 16px;
      height: 16px;
      color: #fb923c;
    }
  }
}

@media print {
  .purchase-header-section {
    padding: 96px 55px 0;
    grid-template-columns: 4fr 5fr;
  }

  .purchase-header-section:has(.profile-container-three) {
    gap: 36px;
  }

  .purchase-header-section .address-information .h32 {
    font-size: 24px;
    line-height: 28px;
  }
}

.profile-card {
  height: fit-content;
  width: 100%;

  display: flex;
  gap: 24px;

  .profile-image {
    object-fit: cover;

    aspect-ratio: 1/1;
    height: 86px;
    width: 86px;
    border-radius: 50%;
  }

  .profile-title {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contact-information {
    display: flex;
    flex-direction: column;

    a {
      color: #545fdc;
    }
  }

  .contact-information.contact-information-inline {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  &.profile-card-compact {
    gap: 16px;

    .profile-image {
      height: 64px;
      width: 64px;
    }

    .contact-information-inline a,
    .contact-separator {
      white-space: nowrap;
    }

    .contact-separator {
      color: #374151;
    }
  }
}

@media print {
  .profile-card.profile-card-compact {
    .profile-image {
      height: 62px;
      width: 62px;
    }
  }
}



div {
  box-sizing: border-box;
}

p {
  margin: 0;
}

:root {
  --UI-50: #f9fafb;
  --UI-100: #eff1f3;
  --Text-Primary: #374151;
}

.sectionTitle {
  padding-bottom: 12px;
  margin-bottom: var(--section-title-margin-bottom, 24px);
  gap: 12px;

  border-bottom: 4px solid var(--primaryColour);

  display: flex;
  align-items: center;

  img {
    aspect-ratio: 1 / 1;
    height: 48px;
    width: 48px;
  }
}

@media print {
  .sectionTitle {
    img {
      aspect-ratio: 1 / 1;
      height: 32px;
      width: 32px;
    }
  }
}

.micro14 {
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.64px;
  line-height: 20px; /* 142.857% */
  text-transform: uppercase;
}

.micro {
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.64px;
  line-height: 16px; /* 145.455% */
  text-transform: uppercase;
}

.h16 {
  color: #374151;
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

.h18 {
  color: #374151;
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.h24 {
  color: #374151;
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 32px; /* 133.333% */
}

.h32 {
  color: #374151;
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 40px; /* 125% */
}

.h40 {
  font-family: IBM Plex Sans;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 40px; /* 100% */
}

.body1 {
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.24px;
  line-height: 24px; /* 150% */
}

.body2 {
  color: #374151;
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.body3 {
  color: #374151;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.body2Emp {
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px; /* 114.286% */
}

.caption {
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 133.333% */
}

.button {
  color: #374151;
  font-family: Inter;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
}

.secondary {
  color: #6b7280;
}

.titleColor {
  color: var(--primaryColour);
}



a {
  text-decoration: none;

  svg {
    height: 32px;
  }
}

svg {
  display: inline-block;
}