/* ===========================================================================
   form.css — pixel-exact replica of "RTGS of Mutual Trust Bank PLC.docx"

   Every coordinate below was measured from the PDF that Word itself produces
   from the source document, so the printed output overlays the original.
   Units are PostScript points (1pt = 1/72in), the same units Word uses.

   Geometry rules used throughout:
     - A4 = 595.28pt x 841.89pt, page margins 36pt (0.5in).
     - Table borders are 0.5pt (Word "sz=4"), drawn with border-top/left on the
       grid and border-right/bottom on each cell, so lines never double up.
     - Word puts a line's whole leading ABOVE the text; CSS splits it in half.
       Cells therefore carry --cpt (half a line's leading) as padding-top so
       the first baseline lands where Word puts it.
     - Rows have fixed heights (set inline in index.html, which keeps the row
       geometry next to the row) and clip their content, exactly like a printed
       form: a long value can never push the layout around.
   ========================================================================= */

:root {
  --ink: #000;
  --blue: #8eaadb;   /* Word accent1, 60% lighter — section bars   */
  --grey: #d9d9d9;   /* label column shading                       */
  --faint: #bfbfbf;  /* "Signature (1st Applicant)" placeholders   */
  --bd: 0.5pt solid var(--ink);
  --cpt: 0.45pt;     /* cell padding-top (Word's leading-above)    */
  --cpl: 4.9pt;      /* Word default cell margin, left/right       */
}

/* --- the sheet ----------------------------------------------------------- */

.page {
  position: relative;
  width: 595.28pt;
  height: 841.89pt;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: Calibri, Carlito, "Segoe UI", sans-serif;
  font-size: 11pt;
  line-height: 13.43pt;
  font-kerning: none;
  font-variant-ligatures: none;
}

.page * { box-sizing: border-box; }

.ab { position: absolute; white-space: pre-wrap; }

/* text size helpers — line-heights are Word's "single" spacing */
.s9  { font-size: 9pt;  line-height: 10.99pt; }
.s10 { font-size: 10pt; line-height: 12.21pt; }
.s11 { font-size: 11pt; line-height: 13.43pt; }
.s12 { font-size: 12pt; line-height: 14.65pt; }
.b   { font-weight: 700; }
.c   { text-align: center; }
.j   { text-align: justify; text-justify: inter-word; }

/* --- grids (the boxed tables) -------------------------------------------- */

.tbl { position: absolute; border-top: var(--bd); border-left: var(--bd); }
.tr  { display: flex; }
.td  {
  flex: 0 0 auto;
  border-right: var(--bd);
  border-bottom: var(--bd);
  padding: var(--cpt) var(--cpl) 0;
  overflow: hidden;
  white-space: pre-wrap;
  font-size: 10pt;
  line-height: 12.21pt;
}
.lb { background: var(--grey); }
.vl { background: #fff; }
.cbrow { line-height: 13.5pt; }          /* rows whose ballot boxes set the leading */

.bar {                                    /* blue section heading strip */
  background: var(--blue);
  font-size: 11pt;
  line-height: 13.43pt;
  font-weight: 700;
  padding-top: 0.5pt;
  text-align: center;
}
.bar.sm { font-size: 9pt; line-height: 10.99pt; text-align: center; color: #fff; padding-top: 0; }

.cb { font-family: "Segoe UI Symbol", "Segoe UI", Calibri, sans-serif; }
.bu { position: absolute; left: 0; font-family: "Courier New", monospace; line-height: 12.21pt; }

/* --- filled-in values ---------------------------------------------------- */

[data-f] { white-space: pre; }

/* A blank to write on: the original underscores / dots stay exactly where
   Word put them and the value is laid over them, the way a typed form looks. */
.slot { position: relative; }
.slot > i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.4pt;
  font-style: normal;
  text-align: center;
  white-space: pre;
  overflow: hidden;
  line-height: normal;
}

/* ===========================================================================
   PAGE 1
   ---------------------------------------------------------------------------
   Everything on both sheets shares one content box: 36pt (0.5in) from the
   left, 523.28pt wide, so the right edge lands 36pt from the paper edge too.
   The source .docx let its tables run 20pt past the right margin and pushed
   the page-2 signature table almost off the sheet; here every bar, grid,
   paragraph and rule starts and ends on the same two lines.
   ========================================================================= */

#p1 .logo     { left: 36pt; top: 14pt; width: 188.5pt; height: 38.5pt; }
#p1 .titlebox {
  left: 232.5pt; top: 11.5pt; width: 326.78pt; height: 41pt;
  background: var(--blue); border: var(--bd);
  font: 700 11.5pt/15.05pt Calibri, Carlito, sans-serif;
  text-align: center; padding: 4.2pt 5pt 0;
}

#p1 .to1 { left: 36pt;  top: 70.5pt; }
#p1 .to2 { left: 36pt;  top: 83.93pt; }
#p1 .to3 { left: 168pt; top: 83.93pt; }
#p1 .to4 { left: 36pt;  top: 97.36pt; }
#p1 .to5 { left: 36pt;  top: 110.79pt; }

#p1 .refgrid { left: 271.78pt; top: 81.68pt; }
#p1 .refgrid .td {
  width: 28.7pt; padding: 0; text-align: center;
  font-size: 11pt; line-height: 17.4pt; font-weight: 700;
}

#p1 .intro { left: 36pt; top: 131pt; width: 523.28pt; }

#p1 .bar1 { left: 36pt; top: 154.5pt; width: 523.28pt; }
#p1 .bar2 { left: 36pt; top: 335.6pt; width: 523.28pt; }
#p1 .bar1 .td, #p1 .bar2 .td { width: 522.78pt; }

#p1 .gapp { left: 36pt; top: 173.1pt; width: 523.28pt; }
#p1 .gben { left: 36pt; top: 354.2pt; width: 523.28pt; }
#p1 .gapp .lb, #p1 .gben .lb { width: 192pt; }     /* one divider line for both */
#p1 .gapp .vl, #p1 .gben .vl { width: 330.78pt; }

#p1 .declh { left: 36pt; top: 446.7pt; width: 523.28pt; }
#p1 .decl  { left: 36pt; top: 460.1pt; width: 523.28pt; word-spacing: -0.35pt; }
#p1 .decl2 { left: 36pt; top: 520.8pt; width: 523.28pt; word-spacing: -0.5pt;
             white-space: pre; }

#p1 .sigtbl { left: 36pt; top: 533.6pt; width: 523.28pt; }
#p1 .sigtbl .td { width: 174.26pt; }
#p1 .sigtbl .r1 .td { width: 522.78pt; }
#p1 .sigtbl .r2 .td,
#p1 .sigtbl .r3 .td { text-align: center; color: var(--faint); }
#p1 .sigtbl sup { font-size: 6.5pt; vertical-align: 3.5pt; line-height: 0; }

#p1 .banktbl { left: 36pt; top: 588.7pt; width: 523.28pt; }
#p1 .banktbl .r1 .td { width: 522.78pt; }
#p1 .banktbl .c1 { width: 345pt; padding-left: 7.5pt; position: relative; }
#p1 .banktbl .c2 { width: 67.78pt; text-align: center; }
#p1 .banktbl .c3 { width: 110pt; }

/* three equal signing columns, each with a centred rule and a centred caption */
#p1 .sline { border-top: 0.75pt solid var(--ink); height: 0; top: 661.5pt; width: 130pt; }
#p1 .sl1 { left: 58.2pt; }
#p1 .sl2 { left: 232.6pt; }
#p1 .sl3 { left: 407.1pt; }

#p1 .of  { top: 663.5pt; width: 174.43pt; text-align: center; }
#p1 .of1 { left: 36pt; }
#p1 .of2 { left: 210.43pt; }
#p1 .of3 { left: 384.85pt; }

#p1 .dotrule { left: 36pt; top: 691.4pt; width: 523.28pt; overflow: hidden; white-space: nowrap; }

#p1 .acktbl { left: 36pt; top: 703.9pt; width: 523.28pt; }
#p1 .acktbl .a1 { width: 243.4pt; position: relative; padding: 0; }
#p1 .acktbl .a2 { width: 279.38pt; background: var(--blue); text-align: center;
                  font-size: 12pt; line-height: 14.65pt; padding-top: 3.3pt; }
#p1 .acktbl .a3 { width: 522.78pt; padding: 0.99pt 4.9pt 0 4.9pt; }
#p1 .acktbl .a4 { width: 243.4pt; text-align: center; }
#p1 .acktbl .a5 { width: 279.38pt; text-align: center; }
/* the .docx squashed this logo out of shape — centred and back in proportion */
#p1 .acktbl .acklogo { position: absolute; left: 73.8pt; top: 0.95pt;
                       width: 95.8pt; height: 19.6pt; }

/* ===========================================================================
   PAGE 2
   ========================================================================= */

#p2 .t2h { left: 36pt; top: 50.4pt; width: 523.28pt; text-decoration: underline; }

#p2 .item   { left: 72pt; width: 487.28pt; }
#p2 .item b { position: absolute; left: -18pt; font-weight: 400; }
#p2 .i1 { top: 62.98pt; }
#p2 .i2 { top: 93.63pt; }
#p2 .i3 { top: 153.58pt; }
#p2 .i4 { top: 198.88pt; word-spacing: -0.7pt; }
#p2 .i5 { top: 244.18pt; }
#p2 .i6 { top: 333.43pt; word-spacing: -0.5pt; }
#p2 .i7 { top: 422.68pt; }

#p2 .sigtbl2 { left: 36pt; top: 476pt; width: 523.28pt; }
#p2 .sigtbl2 .td { width: 174.26pt; }
#p2 .sigtbl2 .r1 .td { width: 522.78pt; }
#p2 .sigtbl2 .r2 .td,
#p2 .sigtbl2 .r3 .td { text-align: center; color: var(--faint); }
#p2 .sigtbl2 sup { font-size: 6.5pt; vertical-align: 3.5pt; line-height: 0; }

/* ===========================================================================
   JAMUNA BANK PLC — "RTGS of Jamuna Bank PLC.docx"
   ---------------------------------------------------------------------------
   Measured the same way as the sheets above, and put on the same 36pt content
   box: the source ran its tables 12pt past the right margin and hung both
   REF# labels outside it.
   ========================================================================= */

:root {
  --jblue:  #00b0f0;   /* title panel                */
  --jpink:  #f79d9b;   /* SENDER / BENIFICIARY strip */
  --jpeach: #fbe4d5;   /* customs + declaration      */
  --jgrey:  #d9d9d9;   /* headings                   */
  --jdark:  #bfbfbf;   /* official-use strip         */
  --jlight: #f2f2f2;   /* label cells                */
  --jref:   #808080;   /* the REF# footnotes         */
}

.jp .tbl.jt .td { font-size: 11pt; line-height: 13.43pt; padding-left: 4.9pt; padding-right: 4.9pt; }
.jp .ab { font-size: 11pt; line-height: 13.43pt; }
.jcap { text-align: center; }
.jcw  { width: 522.78pt; }
.jgrey  { background: var(--jgrey); }
.jdark  { background: var(--jdark); }
.jpeach { background: var(--jpeach); }

/* --- page 1 --------------------------------------------------------------- */

#j1 .jref   { color: var(--jref); left: 36pt; }
#j1 .jref1  { top: 13.44pt; }
#j1 .jref2  { top: 745.44pt; }

#j1 .jlogo  { left: 36pt; top: 36.3pt; width: 261.2pt; height: 50pt; }
#j1 .jtitle {
  left: 324.98pt; top: 8.4pt; width: 234.3pt; height: 82pt;
  background: var(--jblue); color: #fff;
  font-size: 14pt; line-height: 18.44pt; text-align: center; padding-top: 19.28pt;
}

#j1 .jhdr { left: 36pt; top: 95.5pt; width: 523.28pt; }
#j1 .jhdr .td { background: var(--jgrey); }
#j1 .jh1 { width: 83.4pt; }
#j1 .jh2 { width: 140.8pt; }
#j1 .jh3 { width: 83.5pt; }
#j1 .jdt { width: 17.925pt; text-align: center; color: #fff; }
#j1 .jdt.on { color: #000; font-weight: 700; }

#j1 .jrtl    { left: 36.5pt; top: 123.24pt; width: 83.4pt; text-align: center; }
#j1 .jrt1    { left: 125.3pt; top: 112.24pt; }
#j1 .jrt2    { left: 125.3pt; top: 127.14pt; }
#j1 .jlegend { left: 36pt; top: 148.8pt; width: 523.28pt; text-align: center;
               font-size: 8pt; line-height: 9.77pt; }

#j1 .jdet { left: 36pt; top: 161.05pt; width: 523.28pt; }
#j1 .jsec { background: var(--jpink); text-align: center; }
#j1 .jw1  { width: 274pt; }
#j1 .jw2  { width: 248.78pt; }
#j1 .jl   { width: 96pt;  background: var(--jlight); }
#j1 .jv   { width: 178pt; }
#j1 .jl2  { width: 100pt; background: var(--jlight); }
#j1 .jv2  { width: 148.78pt; }
#j1 .jvw  { width: 426.78pt; }
#j1 .jbul { padding-left: 13.2pt; position: relative; }
#j1 .jbul, #j1 .jtwo { line-height: 13.9pt; }
#j1 .jbul .bl { position: absolute; left: 4.2pt; }
#j1 .jbul .b1 { top: 0.45pt; }
#j1 .jbul .b2 { top: 14.35pt; }

#j1 .jcus { left: 36pt; top: 376.55pt; width: 523.28pt; }
#j1 .jc1  { width: 140pt; }
#j1 .jc2  { width: 121.39pt; }
#j1 .jc3  { width: 382.78pt; }

#j1 .jdec   { left: 36pt; top: 454.25pt; width: 523.28pt; }
#j1 .jdtext { text-align: justify; }
#j1 .jd1 { width: 90pt; }
#j1 .jd2 { width: 340pt; }
#j1 .jd3 { width: 32.78pt; text-align: right; background: var(--jlight); }
#j1 .jd4 { width: 60pt; }
/* the label pair beside it runs to two lines — sit these level with it */
#j1 .jd3, #j1 .jd4 { display: flex; flex-direction: column; justify-content: center; }
#j1 .jd3 { align-items: flex-end; }
#j1 .je1 { width: 124pt; }
#j1 .je2 { width: 398.78pt; }
#j1 .jf1 { width: 124pt; }
#j1 .jf2 { width: 142.9pt; }
#j1 .jf3 { width: 121pt; }
#j1 .jf4 { width: 134.88pt; }

#j1 .jdash  { left: 36pt; width: 523.28pt; height: 0; border-top: 0.75pt dashed var(--ink); }
#j1 .jdash1 { top: 592.8pt; }
#j1 .jdash2 { top: 594.8pt; }

#j1 .jack { left: 36pt; top: 603.55pt; width: 523.28pt; }
#j1 .ja1  { width: 373.4pt; position: relative; }
#j1 .ja2  { width: 149.38pt; background: var(--jgrey); text-align: center;
            font-size: 12pt; line-height: 14.65pt; padding-top: 0.7pt; }
#j1 .ja3  { width: 522.78pt; background: var(--jlight); text-align: justify;
            padding-top: 2.2pt; }
#j1 .ja4  { width: 373.4pt; }
#j1 .ja5  { width: 149.38pt; }
#j1 .ja4, #j1 .ja5 { display: flex; flex-direction: column; justify-content: flex-end;
                     padding-bottom: 1.5pt; }
#j1 .jacklogo { position: absolute; left: 5.4pt; top: 5.35pt; width: 139.6pt; height: 19.9pt; }

/* --- page 2 --------------------------------------------------------------- */

#j2 .jt2h { left: 36pt; top: 36.94pt; width: 523.28pt; text-align: center; font-weight: 700; }
#j2 .jcol { top: 59.11pt; width: 251.64pt; font-size: 8pt; line-height: 9.8pt;
            text-align: justify; white-space: normal; }
#j2 .jcolA { left: 36pt; }
#j2 .jcolB { left: 307.64pt; }
#j2 .jcol p { margin: 0 0 9.8pt; }
#j2 .jcol p:last-child { margin-bottom: 0; }
#j2 .jsigbox { left: 342.7pt; top: 697.6pt; width: 181.5pt; height: 51.5pt;
               border: 0.75pt solid var(--ink); }
#j2 .jsigcap { left: 307.64pt; top: 762.74pt; width: 251.64pt; text-align: center; }

/* ===========================================================================
   MODHUMOTI BANK PLC — "RTGS of Modhumoti Bank Ltd PLC.docx"
   ---------------------------------------------------------------------------
   Same content box as the other two sheets. The source ran its tables 21pt
   past the right margin, and its date/time boxes were a dozen different
   widths; here they are one size and the columns line up down the table.
   ========================================================================= */

:root {
  --mgreen: #ccff33;   /* every heading strip on this form */
  --mdark:  #38572d;   /* the title panel                  */
}

.mp .tbl.mt .td { font-size: 11pt; line-height: 13.43pt; padding-left: 3.5pt; padding-right: 3.5pt; }
.mp .ab { font-size: 11pt; line-height: 13.43pt; }
.mg    { background: var(--mgreen); }
.msec  { text-align: center; }
.mfull { width: 522.78pt; }


/* --- page 1 --------------------------------------------------------------- */

#m1 .mlogo  { left: 36pt; top: 13.4pt; width: 213.7pt; height: 82pt; }
#m1 .mtitle {
  left: 324.98pt; top: 13.4pt; width: 234.3pt; height: 82pt;
  background: var(--mdark); color: #fff;
  font-size: 14pt; line-height: 18.2pt; text-align: center; padding-top: 22.8pt;
}

#m1 .mmain { left: 36pt; top: 109.95pt; width: 523.28pt; }
#m1 .ml    { width: 95pt; }
#m1 .mbv   { width: 166.39pt; }
#m1 .mdl   { width: 36pt; text-align: center; }
#m1 .mdt   { width: 15.78pt; text-align: center; font-weight: 700; padding: 0; }
#m1 .mmid  { display: flex; flex-direction: column; justify-content: center; }
#m1 .mreq  { width: 427.78pt; line-height: 14.9pt; padding-top: 1.65pt; }
#m1 .mlegend { font-size: 8pt; line-height: 9.77pt; text-align: center; padding-top: 0.7pt; }
#m1 .mw1   { width: 261.39pt; }
#m1 .mw2   { width: 261.39pt; }
#m1 .mv    { width: 166.39pt; }
/* these two cells carry fixed tick lists — a touch smaller so they clear the
   column instead of running past it, as they did in the source */
#m1 .mtick { font-size: 10.5pt; }
#m1 .mcur  { font-size: 9pt; }
#m1 .ml2   { width: 95pt; text-align: right; }
#m1 .mv2   { width: 166.39pt; }
#m1 .mvw   { width: 427.78pt; }

#m1 .mdec  { left: 36pt; top: 367.85pt; width: 523.28pt; }
#m1 .msig1 { width: 155pt; text-align: center; font-size: 10pt; }
#m1 .msig  { width: 95.26pt; text-align: center; font-size: 10pt; }
#m1 .msigv { width: 95.26pt; text-align: center; font-size: 10pt; }
#m1 .msigd { width: 82pt; text-align: center; }
#m1 .mo1   { width: 155pt; }
#m1 .mo2   { width: 123.3pt; }
#m1 .mo3   { width: 162.5pt; text-align: right; }
#m1 .mo4   { width: 82pt; }
#m1 .mo5   { width: 367.78pt; }

#m1 .mdash  { left: 36pt; width: 523.28pt; height: 0; border-top: 0.75pt dashed var(--ink); }
#m1 .mdash1 { top: 564.4pt; }
#m1 .mdash2 { top: 566.4pt; }

#m1 .mack { left: 36pt; top: 575.05pt; width: 523.28pt; }
#m1 .ma1  { width: 373.4pt; position: relative; }
#m1 .ma2  { width: 149.38pt; text-align: right; font-size: 12pt; line-height: 14.65pt;
            padding-top: 0.2pt; }
#m1 .ma3  { text-align: justify; padding-top: 0.1pt; }
/* Word sets this opening line a point smaller, which is what makes room
   for the long rule after "amount of" */
#m1 .ma3 .mfirst { font-size: 10pt; }
#m1 .ma4  { width: 373.4pt; }
#m1 .ma5  { width: 149.38pt; }
#m1 .ma4, #m1 .ma5 { display: flex; flex-direction: column; justify-content: flex-end;
                     padding-bottom: 1.5pt; }
#m1 .macklogo { position: absolute; left: 3.5pt; top: 1.75pt; width: 76.2pt; height: 26.3pt; }

/* this form rules its blanks instead of typing underscores, and the blank is
   a run of spaces — which would otherwise wrap in the middle of the rule */
.mp .slot { white-space: pre; }
.mp .slot.ul { border-bottom: 0.5pt solid var(--ink); }

/* --- page 2 --------------------------------------------------------------- */

#m2 .mt2h   { left: 36pt; top: 59.44pt; font-weight: 700; text-decoration: underline; }
#m2 .mterms { left: 36pt; top: 81.5pt; width: 523.28pt; text-align: justify;
              line-height: 14.49pt; white-space: normal; }
#m2 .mterms p { margin: 0 0 14.49pt; }
#m2 .mterms p:last-child { margin-bottom: 0; }

#m2 .msline { border-top: 0.5pt solid var(--ink); height: 0; top: 629pt; width: 190pt; }
#m2 .msl1   { left: 71.82pt; }
#m2 .msl2   { left: 333.46pt; }
#m2 .mscap  { top: 632.74pt; width: 261.64pt; text-align: center; font-weight: 700; }
#m2 .mscap1 { left: 36pt; }
#m2 .mscap2 { left: 297.64pt; }

/* ===========================================================================
   PRINTING — one sheet per page, colours kept
   ========================================================================= */

@page { size: A4; margin: 0; }

@media print {
  html, body { margin: 0; padding: 0; background: #fff; height: auto; }
  body > *, .topbar, .panel, #busy, #toasts, #barTip { display: none !important; }
  #viewForm { display: block !important; height: auto; }
  #viewForm > main, .preview, #paperWrap, #paper {
    display: block; margin: 0; padding: 0; overflow: visible; background: none;
  }
  /* !important: zoom() leaves an inline width/height on #paperWrap that is
     measured for the screen preview — on paper it would add a third sheet. */
  #paperWrap, #paper { transform: none !important; width: auto !important; height: auto !important; }
  .sheets.on { gap: 0; }
  .page { box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  .page:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}