/* Getting paid: Invoices, the invoice opened, Record payment, the Ledger. */
.app-paid > * { position: absolute; left: 0; top: 0; }
.pa-list, .pa-ed, .pa-ledger { width: 393px; height: 886px; }
.pa-list > *, .pa-ed > *, .pa-ledger > * { position: absolute; left: 0; top: 0; }
.pa-mesh { inset: 0; width: 393px; height: 886px; }
.pa-sb { width: 393px; height: 50px; }
.pa-brand { left: 20px; top: 60px; width: 36px; height: 36px; border-radius: 10px; }
.pa-title { left: 64px; top: 57px; }
.pa-sub { left: 65px; top: 86px; }
.pa-gear { left: 290px; top: 58px; width: 40px; height: 40px; border-radius: 20px; }
.pa-moon { left: 337px; top: 58px; width: 40px; height: 40px; border-radius: 20px; }
.pa-dots { left: 172px; top: 110px; width: 49px; height: 12px; border-radius: 6px; }
.pa-hero { left: 16px; top: 126px; width: 361px; height: 238px; border-radius: 26px; overflow: hidden; }
.pa-hero .qh-bar i:nth-child(1) { width: 66%; } .pa-hero .qh-bar i:nth-child(2) { width: 14%; }
.pa-rail { left: 16px; top: 376px; width: 361px; height: 44px; }
.pa-c1 { left: 16px; width: 361px; height: 164px; border-radius: 26px; overflow: hidden; transform-origin: 50% 50%; }
.pa-c2, .pa-c3 { left: 16px; width: 361px; height: 106px; border-radius: 26px; overflow: hidden; }
.pa-new { left: 20px; top: 738px; width: 353px; height: 52px; border-radius: 26px; }

.pa-ed { visibility: hidden; }
.pa-back { left: 10px; top: 60px; }
.pa-navt { left: 0; top: 62px; width: 393px; }
.pa-pvw { left: 339px; top: 54px; width: 40px; height: 40px; border-radius: 20px; }
.pa-paper { width: 400px; height: 518px; transform-origin: 0 0; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 30px rgba(0, 0, 0, 0.08); }
.pa-paper .pp { border-radius: 20px; }
.pa-shr { left: 16px; top: 588px; width: 174px; height: 48px; border-radius: 24px; }
.pa-rec { left: 203px; top: 588px; width: 174px; height: 48px; border-radius: 24px; }
.pa-rec .sg { width: 19px; height: 19px; }
.pa-foot { left: 16px; top: 652px; width: 361px; height: 66px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.08); }
.pa-foot > span { position: absolute; left: 18px; top: 15px; display: flex; flex-direction: column; gap: 3px; }
.pa-foot small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-muted); }
.pa-foot em { font-style: normal; font-size: 12px; color: var(--q-faint); white-space: nowrap; }
.pa-famt { position: absolute; right: 18px; top: 13px; font-family: var(--q-serif); font-size: 29px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-fc { font-size: 0.55em; vertical-align: 0.7em; }

/* Record payment */
.pa-dim { width: 393px; height: 886px; background: #000; opacity: 0; }
.pa-pay { top: 330px; width: 393px; height: 556px; border-radius: 12px 12px 0 0; visibility: hidden; }
.pa-pay > * { position: absolute; }
.pa-confirm { color: var(--q-em); }
.pa-f1 { left: 16px; top: 62px; width: 361px; height: 132px; }
.pa-f1 b { font-weight: 600; }
.pa-s2 { top: 212px; }
.pa-f2 { left: 16px; top: 236px; width: 361px; height: 112px; }
.pa-amount { position: absolute; left: 16px; top: 10px; display: flex; align-items: center; gap: 2px; font-family: var(--serif); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-caret { width: 2px; height: 30px; border-radius: 1px; background: var(--q-em); }
.pa-chips { position: absolute; left: 16px; top: 64px; display: flex; gap: 8px; }
.pa-chips .qchip { transform-origin: 50% 50%; }
.pa-ft { top: 356px; }

/* the Ledger */
.pa-ledger { visibility: hidden; }
.pa-chiprow { left: 0; top: 112px; width: 393px; height: 34px; overflow: hidden; }
.pa-chiprow span { position: absolute; top: 2px; height: 30px; display: grid; place-items: center; padding: 0 12px; border-radius: 15px; font-size: 13px; font-weight: 600; color: var(--q-mid); white-space: nowrap; background: rgba(32, 37, 42, 0.05); }
.pa-chiprow span:nth-of-type(1) { left: 16px; } .pa-chiprow span:nth-of-type(2) { left: 104px; } .pa-chiprow span:nth-of-type(3) { left: 194px; } .pa-chiprow span:nth-of-type(4) { left: 274px; } .pa-chiprow span:nth-of-type(5) { left: 346px; }
.pa-chiprow span.on { color: #fff; background: transparent; z-index: 1; }
.pa-chth { position: absolute; left: 0; top: 2px; width: 86px; height: 30px; border-radius: 15px; background: var(--q-em); }
.pa-coll { left: 16px; top: 158px; width: 361px; height: 180px; border-radius: 26px; background: linear-gradient(150deg, #0e1114 0%, #122421 52%, #235a4b 100%); color: #fff; overflow: hidden; }
.pa-coll > * { position: absolute; }
.pa-coll small { left: 20px; top: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--q-em2); }
.pa-cv { left: 18px; top: 40px; font-family: var(--q-serif); font-size: 40px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa-cc { font-size: 0.52em; vertical-align: 0.74em; margin-left: 1px; }
.pa-coll p { left: 20px; top: 92px; font-size: 13px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.pa-coll p b { color: #fff; font-weight: 650; }
.pa-ring { right: 20px; top: 26px; width: 72px; height: 72px; transform: rotate(-90deg); }
.pa-ring circle { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 7; }
.pa-ring .pa-arc { stroke: var(--q-em2); stroke-linecap: round; }
.pa-pct { right: 20px; top: 26px; width: 72px; height: 72px; display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.pa-cbar { left: 20px; right: 20px; top: 142px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.pa-cbar i { position: absolute; inset: 0; border-radius: 4px; background: var(--q-em2); transform-origin: 0 50%; }
.pa-tile { width: 177px; height: 66px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.08); padding: 12px 14px; }
.pa-tile small { display: block; font-size: 11px; font-weight: 650; color: var(--q-muted); }
.pa-tile b { display: block; margin-top: 4px; font-family: var(--q-serif); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-tile.em b { color: var(--q-em); } .pa-tile.owe b { color: var(--q-owing); }
.pa-expn { left: 20px; top: 510px; font-size: 12px; color: var(--q-muted); white-space: nowrap; }
.pa-chart { left: 16px; top: 534px; width: 361px; height: 160px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.08); overflow: hidden; }
.pa-chl { position: absolute; left: 16px; top: 14px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-muted); }
.pa-bar { position: absolute; left: calc(var(--x, 0) * 1px + 14px); bottom: 30px; width: calc(var(--w, 52) * 1px); height: calc(var(--v, 0) * 96px + 2px); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #6bb894, #258566); }
.pa-wk, .pa-mo { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 14px; font-size: 9.5px; color: var(--q-faint); }
.pa-wk em { position: absolute; font-style: normal; width: 52px; text-align: center; }
.pa-wk em:nth-child(1) { left: 12px; } .pa-wk em:nth-child(2) { left: 92px; } .pa-wk em:nth-child(3) { left: 172px; } .pa-wk em:nth-child(4) { left: 252px; }
.pa-mo { display: grid; grid-template-columns: repeat(12, 26.5px); padding-left: 6px; }
.pa-mo em { font-style: normal; width: 18px; text-align: center; }
.pa-tch { left: 20px; top: 700px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-muted); }
.pa-top { left: 16px; width: 361px; height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 4px; font-size: 13.5px; }
.pa-top i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--q-em); }
.pa-top b { font-weight: 650; }
.pa-top small { font-size: 11.5px; color: var(--q-faint); }
.pa-top em { margin-left: auto; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-dock { left: 18px; top: 806px; width: 357px; height: 64px; border-radius: 32px; }
.pa-lens { left: 0; top: 812px; width: 75px; height: 52px; border-radius: 26px; }
.pa-tab { top: 808px !important; width: 85px; height: 60px; }

/* the invoice in the air, and the stamp coming down onto it */
.pa-air { position: absolute; left: 0; top: 0; width: 400px; height: 518px; transform-origin: 0 0; visibility: hidden; }
.pa-sheet { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 calc(16px + var(--lift, 0) * 28px) calc(40px + var(--lift, 0) * 40px) rgba(0, 0, 0, calc(0.26 + var(--lift, 0) * 0.16)); }
.pa-stamp { position: absolute; left: 0; top: 0; width: 128px; height: 42px; transform-origin: 0 0; visibility: hidden; display: grid; place-items: center; border-radius: 3px; border: 2px solid #1f734d; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), inset 0 0 0 3px #1f734d, 0 10px 24px rgba(0, 0, 0, 0.3); background: rgba(31, 115, 77, 0.08); font-family: var(--sf); font-size: 23px; font-weight: 900; letter-spacing: 3.8px; color: #1f734d; padding-left: 4px; }