@font-face {
  font-family: "CairoStatementRegular";
  src: url("/fonts/cairo-statement-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: block;
}

.statement-text-size-control output {
  display: inline-block;
  direction: ltr;
  min-width: 3.5em;
}

.statement-text-size-control input[type="range"] {
  width: 170px;
  padding: 0;
  cursor: pointer;
}

@font-face {
  font-family: "CairoStatementSemiBold";
  src: url("/fonts/cairo-statement-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: block;
}

.statement-template-page {
  font-family: "CairoStatementRegular", sans-serif;
  position: relative;
  box-sizing: border-box;
  width: min(210mm, 100%);
  min-width: 0;
  height: auto;
  aspect-ratio: 210 / 297;
  margin: 0 auto 16px;
  padding: 0;
  background: #fff;
  color: #22272a;
  overflow: hidden;
  isolation: isolate;
}

.statement-template-bounds {
  position: absolute;
  margin: 0;
  padding: 0;
}

.statement-template-image,
.statement-template-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.statement-template-image {
  object-fit: contain;
}

.statement-template-overlay text {
  font-family: "CairoStatementRegular", sans-serif !important;
}

.statement-template-overlay text.statement-text-emphasized {
  font-family: "CairoStatementSemiBold", sans-serif !important;
  font-weight: 600;
}

@page customer-statement-template {
  size: A4 portrait;
  margin: 0;
}

@media print {
  html:has(body.printing-customer-statement),
  body.printing-customer-statement,
  body.printing-customer-statement #printArea {
    page: customer-statement-template;
    width: 210mm !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.printing-customer-statement #printArea .statement-template-page {
    page: customer-statement-template;
    display: block !important;
    width: 210mm !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 297mm !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    break-inside: avoid;
    break-after: page;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body.printing-customer-statement #printArea .statement-template-page:last-child {
    break-after: auto;
  }
}