html,body {margin:0; padding:0; overflow:auto; width:100%; height:100%; background-color:#F6F5F4; color:#000000; font-family:monospace; font-size:14px;}
body {display:grid; grid-template-areas:'header header header' 'menu main preview' 'footer footer footer'; grid-template-rows:50px auto 30px; grid-template-columns:200px auto 300px;}
h1 {display:block; margin:0; padding:0; border:0; font-size:30px;}
div {display:block; margin:0; padding:0; border:0; font-size:20px; gap:0px;}
div.header {grid-area:header; background-color:#E1DEDB;}
div.menu {grid-area:menu; background-color:#E1DEDB;}
div.main {grid-area:main; overflow-y:scroll;}
div.preview {grid-area:preview; background-color:#E1DEDB;}
div.footer {grid-area:footer; background-color:#E1DEDB;}
div.header h1 {margin-left:50px; line-height:50px;}
div.menu button {display:block; width:188px; height:30px; line-height:30px; font-size:16px; border-radius:0; border:none; background:#F6F5F4; color:#000000; text-align:center; margin:5px auto; padding:0 5px; cursor:pointer;}
div.menu hr {display:block; margin:10px; padding:0;}
div.main > div {display:none; width:100%; height:100%; overflow:auto;}
div.main div p {margin:10px; padding:0;}
div.main div#home {text-align:center;}
div.main div div.card {display:block; float:left; width:100px; height:200px; background:#FFFFFF; border:1px solid #000000; margin:5px; padding:5px; text-align:center; cursor:pointer;}
div.main div div.bill {display:block; float:left; width:100px; height:200px; background:#FFFFFF; border:1px solid #000000; margin:5px; padding:5px; text-align:center; cursor:pointer; font-size:12px;}
div.main div div.form {width:400px; margin:0 auto; display:grid; grid-template-areas:'left right'; grid-template-columns:200px 200px; grid-auto-rows:35px;}
div.main div div.form h3 {margin:0; padding:0; height:30px; line-height:30px; text-align:center; font-size:18px; font-weight:bold; grid-column:1 / span 2;}
div.main div div.form label {width:190px; display:block; grid-area:left; text-align:right; border:none; padding:5px; height:20px; line-height:20px;}
div.main div div.form input {width:190px; display:block; grid-area:right; margin:0; padding:4px; border:1px solid #000000; padding:5px; height:20px; line-height:20px; background:#FFFFFF; color:#000000; text-align:left;}
div.preview div.cp-card {width:250px; height:550px; margin:auto; padding:0; border:1px solid #000000; background:#FFFFFF; position:relative; font-family:serif;}
div.preview div.cp-card div {margin:5px; font-size:16px;}
div.preview div.cp-card div.cp-name {font-size:20px; min-height:25px; font-weight:bold;}
div.preview div.cp-card div.cp-number {float:right; font-size:16px; margin-right:5px; font-size:18px; font-weight:bold;}
div.preview div.cp-card div.cp-type {min-height:20px;}
div.preview div.cp-card div.cp-desc {min-height:20px;}
div.preview div.cp-card div.cp-retn-title {position:absolute; left:10px; right:10px; top:120px; margin:0; font-size:18px; font-weight:bold;}
div.preview div.cp-card div.cp-retn {position:absolute; left:10px; right:10px; top:150px; margin:0;}
div.preview div.cp-card div.cp-line {position:absolute; left:5px; right:5px; top:100px; margin:0; height:20px; border:none; border-top:1px solid #000000;}
div.preview div.cp-card div.cp-dot {position:absolute; left:5px; right:5px; top:250px; margin:0; height:20px; border:none; border-top:1px dotted #606060; font-size:12px; color:#606060; text-align:center; line-height:20px;}
div.preview div.cp-card div.cp-dash {position:absolute; left:5px; right:5px; top:400px; margin:0; height:20px; border:none; border-top:1px dashed #000000; font-size:12px; color:#606060; text-align:center; line-height:20px;}
div.preview div.bp-bill {width:200px; height:300px; margin:auto; padding:0; border:1px solid #000000; background:#FFFFFF; position:relative; font-family:serif;}
div.preview div.bp-bill div {margin:0px; font-size:16px; min-height:20px;}
div.preview div.bp-bill div.bp-type1 {position:absolute; left:5px; top:0px; height:20px; width:190px; line-height:18px; text-align:left; font-weight:bold;}
div.preview div.bp-bill div.bp-num1 {position:absolute; right:5px; top:0px; height:20px; width:20px; line-height:18px; text-align:right;}
div.preview div.bp-bill div.bp-line1 {position:absolute; left:5px; right:5px; top:20px; margin:0; height:20px; border:none; border-top:1px solid #000000;}
div.preview div.bp-bill div.bp-loc1 {position:absolute; left:5px; top:40px; width:190px; text-align:center; line-height:15px;}
div.preview div.bp-bill div.bp-ind1 {position:absolute; left:5px; top:70px; width:190px; text-align:center; line-height:15px; font-size:14px;}
div.preview div.bp-bill div.bp-load1 {position:absolute; left:5px; top:100px; height:20px; width:190px;}
div.preview div.bp-bill div.bp-centre {position:absolute; left:5px; right:5px; top:150px; margin:0; height:20px; border:none; border-top:1px solid #000000;}
div.preview div.bp-bill div.bp-load2 {position:absolute; right:5px; bottom:100px; height:20px; width:190px; rotate:180deg;}
div.preview div.bp-bill div.bp-ind2 {position:absolute; right:5px; bottom:70px; width:190px; text-align:center; line-height:15px; font-size:14px; rotate:180deg;}
div.preview div.bp-bill div.bp-loc2 {position:absolute; right:5px; bottom:40px; width:190px; text-align:center; line-height:15px; rotate:180deg;}
div.preview div.bp-bill div.bp-line2 {position:absolute; left:5px; right:5px; top:260px; margin:0; height:20px; border:none; border-bottom:1px solid #000000;}
div.preview div.bp-bill div.bp-num2 {position:absolute; left:5px; bottom:0px; height:20px; width:20px; line-height:18px; text-align:right; rotate:180deg;}
div.preview div.bp-bill div.bp-type2 {position:absolute; right:5px; bottom:0px; height:20px; width:190px; line-height:18px; text-align:left; font-weight:bold; rotate:180deg;}
div.preview iframe {visibility:hidden;}
div#print-preview > div {width:200mm; height:287mm; padding:5mm; margin:10mm; background:#FFFFFF; break-after:always;}
div#print-preview div.cp-card {width:2.5in; height:5.5in; margin:0; padding:0; border:1pt solid #000000; background:#FFFFFF; position:relative; float:left; font-family:serif;}
div#print-preview div.cp-card div {margin:0.05in; font-size:12pt;}
div#print-preview div.cp-card div.cp-name {font-size:20pt; min-height:0.25in; font-weight:bold;}
div#print-preview div.cp-card div.cp-number {float:right; font-size:14pt; margin-right:0.05in; font-size:18pt; font-weight:bold;}
div#print-preview div.cp-card div.cp-type {min-height:0.2in;}
div#print-preview div.cp-card div.cp-desc {min-height:0.2in;}
div#print-preview div.cp-card div.cp-retn-title {position:absolute; left:0.1in; right:0.1in; top:1.2in; margin:0; font-size:14pt; font-weight:bold;}
div#print-preview div.cp-card div.cp-retn {position:absolute; left:0.1in; right:0.1in; top:1.5in; margin:0;}
div#print-preview div.cp-card div.cp-line {position:absolute; left:0.05in; right:0.05in; top:1in; margin:0; height:0.2in; border:none; border-top:1pt solid #000000;}
div#print-preview div.cp-card div.cp-dot {position:absolute; left:0.05in; right:0.05in; top:2.5in; margin:0; height:0.2in; border:none; border-top:1pt dotted #606060; font-size:10pt; color:#606060; text-align:center; line-height:0.2in;}
div#print-preview div.cp-card div.cp-dash {position:absolute; left:0.05in; right:0.05in; top:4in; margin:0; height:0.2in; border:none; border-top:1pt dashed #000000; font-size:10pt; color:#606060; text-align:center; line-height:0.2in;}
div#print-preview div.bp-bill {width:2in; height:3in; margin:auto; padding:0; border:1pt solid #000000; background:#FFFFFF; position:relative; float:left; font-family:serif;}
div#print-preview div.bp-bill div {margin:0px; font-size:12pt; min-height:0.2in;}
div#print-preview div.bp-bill div.bp-type1 {position:absolute; left:0.05in; top:0in; height:0.2in; width:1.9in; line-height:0.18in; text-align:left; font-weight:bold;}
div#print-preview div.bp-bill div.bp-num1 {position:absolute; right:0.05in; top:0in; height:0.2in; width:0.2in; line-height:0.18in; text-align:right;}
div#print-preview div.bp-bill div.bp-line1 {position:absolute; left:0.05in; right:0.05in; top:0.2in; margin:0; height:0.2in; border:none; border-top:1pt solid #000000;}
div#print-preview div.bp-bill div.bp-loc1 {position:absolute; left:0.05in; top:0.4in; width:1.9in; text-align:center; line-height:15pt;}
div#print-preview div.bp-bill div.bp-ind1 {position:absolute; left:0.05in; top:0.7in; width:1.9in; text-align:center; line-height:0.15in; font-size:14pt;}
div#print-preview div.bp-bill div.bp-load1 {position:absolute; left:0.05in; top:1in; height:0.2in; width:1.9in;}
div#print-preview div.bp-bill div.bp-centre {position:absolute; left:0.05in; right:0.05in; top:1.5in; margin:0; height:0.2in; border:none; border-top:1pt solid #000000;}
div#print-preview div.bp-bill div.bp-load2 {position:absolute; right:0.05in; bottom:1in; height:0.2in; width:1.9in; rotate:180deg;}
div#print-preview div.bp-bill div.bp-ind2 {position:absolute; right:0.05in; bottom:0.7in; width:1.9in; text-align:center; line-height:0.15in; font-size:14pt; rotate:180deg;}
div#print-preview div.bp-bill div.bp-loc2 {position:absolute; right:0.05in; bottom:0.4in; width:1in; text-align:center; line-height:0.15in; rotate:180deg;}
div#print-preview div.bp-bill div.bp-line2 {position:absolute; left:0.05in; right:0.05in; top:2.6in; margin:0; height:0.2in; border:none; border-bottom:1pt solid #000000;}
div#print-preview div.bp-bill div.bp-num2 {position:absolute; left:0.05in; bottom:0in; height:0.2in; width:0.2in; line-height:0.18in; text-align:right; rotate:180deg;}
div#print-preview div.bp-bill div.bp-type2 {position:absolute; right:0.05px; bottom:0in; height:0.2in; width:1.9in; line-height:0.18in; text-align:left; font-weight:bold; rotate:180deg;}