/* The printable invoice (app/js/invoiceletter.js), as thankyou.php styled it: Arial
   throughout, rows ruled in #ddd, a thin rule above each sum row, a boxed note.
   Everything is scoped to .mjl-letter and resets what the app's and share page's own
   table and heading styles would otherwise add. */
.mjl-letter { font: 16px/1.25 Arial, Helvetica, sans-serif; color: #000; background: #fff; max-width: 210mm; margin: 0 auto; }
.mjl-letter * { font-family: Arial, Helvetica, sans-serif !important; }
.mjl-letter .mjl-logo { display: block; width: 300px; max-width: 100%; height: auto; margin: 2em auto 0; }
.mjl-letter h1 { display: block; font-size: 2em; font-weight: bold; margin: .67em 0; }
.mjl-letter hr { border: 0; border-top: 1px solid #aaa; margin: .5em 0; }
.mjl-letter table { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; }
.mjl-letter th, .mjl-letter td {
  padding: 8px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid #ddd;
  font-size: .875em; font-weight: normal; color: inherit; text-transform: none; letter-spacing: normal; background: none;
}
.mjl-letter th { font-weight: bold; background: #f2f2f2; }
.mjl-letter table.mjl-parties { display: table; width: 100%; }
.mjl-letter .mjl-parties td { width: 50%; }
.mjl-letter .info { font-size: .875em; margin: .25em 0 2.5em; }
.mjl-letter .num { text-align: right; font-variant-numeric: normal; white-space: nowrap; }
.mjl-letter .sum td { text-align: right; border-top: 1px solid #ddd; }
.mjl-letter .note { font-size: .875em; padding: 10px; border: 1px solid #000; margin-top: 3em; }
.mjl-letter .note p { margin: 1em 0; }
.mjl-letter .notes { white-space: pre-wrap; }

@media print {
  .mjl-letter { max-width: none; }
  /* Backgrounds don't print by default; the header row printed white on the old site too. */
  .mjl-letter, .mjl-letter * { -webkit-print-color-adjust: economy; print-color-adjust: economy; }
  .mjl-letter th { background: none; }
  .mjl-letter .mjl-logo { margin-top: 0; }
  .mjl-letter tr { break-inside: avoid; }
}
@page invoice { margin: 15mm 3cm; }
.mjl-letter { page: invoice; }