/* ================================================================================== */
/* == Simple Invoicer (https://simpleinvoicer.com) ================================== */
/* == Copyright 2025 CJ Doss ======================================================== */
/* == All rights reserved =========================================================== */
/* ================================================================================== */


/* ================================================================================== */
/* == Normalize.css v8.0.1 ========================================================== */
/* ================================================================================== */

html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

*,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none }

/* Viewport Sizing */
@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

:root {
	--text-lightest: oklch(.745 .046 257.417);
	--text-default: oklch(.554 .046 257.417);
	--text-darkest: oklch(.21 .034 264.665);

	--border-color: oklch(.922 0 0);
	--gray-box-bg: #f8f9fa;

	--text-lightest: oklch(.745 .027 264.364);
	--text-default: oklch(.551 .027 264.364);
	--border-color: oklch(.928 .006 264.531);
	--gray-box-bg:  oklch(0.985 0.002 247.839);
	
	/* oklch breaks PDF */
	--text-lightest: #a4adbe;
	--text-default: #6a7282;
	--text-darkest: #101828;
	
	--border-color: #ebe6e7;
	--gray-box-bg:  #fbf9fa;
}



/* ================================================================================== */
/* == General Styles ================================================================ */
/* ================================================================================== */

html,body { background: #eee; font-family: "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-default); line-height: 1.2; }
body { display: flex; flex-direction: row; min-height: 100dvh; }

.invoice-container { flex-grow: 1; padding: 0.7in 0.75in 0.8in; display: flex; justify-content: center; align-items: center; }


a { text-decoration: none; color: red;
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-ms-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s; }
a:hover { color: blue; }


h1, h2, h3, h4, th { color: var(--text-darkest); }



/* ================================================================================== */
/* == Sidebar ======================================================================= */
/* ================================================================================== */

.invoice-settings {
	width: 300px;
	min-width: 300px;
	padding: 1.5rem;
	background: #fff;
	overflow-y: auto;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.settings-header h1 { font-size: 1.75rem; margin-bottom: 15px; color: #3a66dd; }
.settings-header p { font-size: 0.8rem; font-weight: 300; line-height: 1.3; margin-bottom: 30px; }
.setting { margin-bottom: 1.25rem; }
.setting:after { content: ""; display: table; clear: both; }
.setting label { display: block; margin-bottom: 8px; font-weight: 550; font-size: 0.85rem; color: var(--text-darkest); }
.setting .switch { float: right; position: relative; display: inline-block; width: 44px; height: 22px; margin: 0; }
.setting .switch input { opacity: 0; width: 0; height: 0; }
.setting .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.setting .switch .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.setting .switch input:checked + .slider { background-color: #4870F6; }
.setting .switch input:checked + .slider:before { transform: translateX(22px); }
.setting.setting-switch { }
.setting.setting-switch label:last-child { margin: 0; padding-top: 3px; }

.switch-options { display: none; padding-top: 0.5em; }
.switch-options select,
.switch-options label { float: left; width: 50%; line-height: 2.75em; border-right: none; border-radius: 6px 0 0 6px; }
.switch-options label { border: 1px solid #eaeaea; border-right: none; font-size: 0.85rem; font-weight: 450; padding: 0 0.875em; background: var(--gray-box-bg); color: var(--text-default); }
.switch-options .switch-options-input { float: right; width: 50%; border: 1px solid #eaeaea; border-radius: 0 6px 6px 0; font-size: 0.85rem; font-weight: 450; line-height: 2.75em; padding: 0 0.875em; background: #fff; }
.switch-options .switch-options-input:hover { border-color: #d0d0d0; }
.switch-options .switch-options-input:focus { border-color: #4870F6; outline: none; box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1); }


.percent-input,
.money-input { border: 1px solid var(--border-color); text-align: right; }
.percent-input:after { content: "%"; }
.invoice-settings[data-currency="USD"] .money-input:before,
.invoice-settings[data-currency="CAD"] .money-input:before,
.invoice-settings[data-currency="AUD"] .money-input:before { content: "$-"; }
.invoice-settings[data-currency="EUR"] .money-input:before { content: "€-"; }
.invoice-settings[data-currency="GBP"] .money-input:before { content: "£-"; } 


.button {
	width: 100%;
	padding: 1em;
	background-color: #4870F6;
	color: white;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 500;
	transition: background-color 0.3s;
	text-align: left;
	padding-left: 3.1em;
	margin-bottom: 1rem;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	box-shado/w: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.button:hover { background-color: #2d58e9; }
.button:active { background-color: #1543dc; }

#print-invoice { background-image: url(img/print.svg); background-repeat: no-repeat; background-position: 1em center; background-size: 1.4em; }
#download-pdf { background-image: url(img/document-download.svg); background-repeat: no-repeat; background-position: 1em center; background-size: 1.4em; }
#reset-invoice { background-image: url(img/refresh.svg); background-repeat: no-repeat; background-position: 1em center; background-size: 1.4em; }

select {
	appearance: none;
	border: 1px solid #eaeaea;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 450;
	padding: 0 0.875em;
	line-height: 2.75em;
	width: 100%;
	background: var(--gray-box-bg) url(img/arrow-down.svg) no-repeat right 0.65em center;
	background-size: 1.375em;
	color: var(--text-default);
	box-sha//dow: inset rgba(50, 50, 93, 0.15) 0px 1px 5px -2px, inset rgba(0, 0, 0, 0.2) 0px 1px 3px -1px, inset rgba(50, 50, 93, 0.15) 0px 0px 2px -1px;
}
select:hover { border-color: #d0d0d0; }
select:focus { border-color: #4870F6; outline: none; box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1); }


.invoice-settings .ad { margin-top: 2.5rem; }
.invoice-settings .ad a { display: block; cursor: pointer; }
.invoice-settings .ad img { display: block; width: 100%; background: var(--gray-box-bg); border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
.invoice-settings .ad:after { content: "Sponsor Ad"; font-size: 10px; color: var(--text-lightest); display: block; margin: 3px; }



/* ================================================================================== */
/* == PAPER SIZES =================================================================== */
/* ================================================================================== */

/* Letter - 8.5in x 11in * 96dpi */
.invoice[data-paper-size="letter"] { width: 816px; height: 1056px; }

/* A4 - 210mm x 297mm in pixels */
.invoice[data-paper-size="a4"] { width: 794px; height: 1123px; }

/* Legal - 8.5in x 14in * 96dpi */
.invoice[data-paper-size="legal"] { width: 816px; height: 1344px; }



/* ================================================================================== */
/* == Invoice ======================================================================= */
/* ================================================================================== */

.invoice { 
	font-size: 14px;
	width: 8.5in; height: 11in; padding: 0.75in;
	background: white;
	display: flex; flex-direction: column;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.invoice h2 { font-size: 1em; font-weight: 750; margin-bottom: 0.25em; }


/* Header */
.invoice-header { border-bottom: 1px solid var(--border-color); ove//rflow: hidden; padding-bottom: 0.25in; margin-bottom: 0.5in; }
.invoice-header h1 { float: left; font-size: 3.25em; line-height: 0.5in; margin: 0 0 0.05in 0; }
.invoice-header .invoice-number { float: right; line-height: 0.5in; }
.invoice-header .invoice-number:before { content: "#"; }

.invoice-header .left { float: left; width: 20%; }
.invoice-header .center { float: left; width: 60%; text-align: center; }
.invoice-header .center h1,
.invoice-header .center .invoice-number { float: none; }
.invoice-header .right { float: right; width: 20%; text-align: right; }


/* Logo */
.logo { float: right; width: 3.5in; height: 0.5in; position: relative; display: flex; justify-content: flex-end; align-items: center; }
.logo-placeholder { float: right; line-height: calc(0.5in - 5px); font-size: 0.9em; width: 2.5in; height: 100%; border: 2px dashed var(--border-color); border-radius: 5px; background: url(img/image.svg) no-repeat 1em center; background-size: 20px; padding-left: 3.2em; font-style: italic; font-weight: 450; }
.logo:hover .logo-placeholder,
.logo.dragover .logo-placeholder { border-color: #4870F6; background-color: rgba(74, 144, 226, 0.1); }
.logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo .logo-delete { display: none; position: absolute; top: -0.75em; right: -0.75em; width: 1.5em; height: 1.5em; background: #f34a39 url(img/close.svg) no-repeat center; background-size: 1.1em; box-shadow: 0 1px 2px rgba(0,0,0,0.5); border: none; text-indent: -9999px; border-radius: 50%; cursor: pointer; }
.logo:has(img):hover .logo-delete { display: block; }


/* Subheader */
.invoice-subheader { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); overflow: hidden; padding: 0.25in 0; margin-bottom: 0.5in;; }
.invoice-subheader * { display: inline; margin: 0; }
.invoice-subheader h2 { font-size: 1em; font-w/eight: normal; co/lor: var(--text-default); }


/* Middle */
.invoice-middle { display: flex; justify-content: space-between; }
.invoice-middle .invoice-person { width: calc(50% - 0.25in); }
.invoice-middle .column { display: flex; flex-direction: column; justify-content: space-between; text-align: right; padding-bottom: 1px; }
.invoice-middle .column > div { display: inline; overflow: hidden; margin: 0; }
.invoice-middle .column > div > div { display: inline; }

.invoice-middle [contenteditable="true"] { padding: 2px 4px 1px; border-radius: 3px; margin-left: -4px; }
.invoice-middle .multiline { line-height: 1.3; margin-top: -2px; }


/* Table Items */
.invoice-items { margin: 0.5in 0; text-align: right; }

.items-header { display: grid; grid-template-columns: 80% 20%; padding: 1.35em 0; color: var(--text-darkest); font-weight: 750; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.items-main { position: relative; }
.items-main .description { text-align: left; }
.items-main .quantity,
.items-main .price { display: none; }
.items-main .items-toolbar { position: absolute; left: 0; bottom: -60px; width: 70%; height: 60px; text-align: left; opacity: 0; transition: all 0.218s; }
.items-main:hover .items-toolbar { opacity: 1; }
.items-main .add-item { background: #4870F6 url(img/add.svg) no-repeat 18px 16px; background-size: 1.2em; height: 50px; padding: 0 22px 0 37px; font-size: 0.85em; font-weight: 500; color: #fff; border: none; border-radius: 0 0 4px 4px; cursor: pointer; }
.items-main .add-item:hover { background-color: #2d58e9; }
.items-main .add-item:active { background-color: #1543dc; }
.items-body { }
.items-body .item-row { display: grid; grid-template-columns: 80% 20%; padding: 1.35em 0; border-bottom: 1px solid var(--border-color); position: relative; }
.items-body .item-row:hover .actions { opacity: 1; }
.items-body .actions { position: absolute; top: 0; right: -50px; height: 100%; padding: 10px; opacity: 0; transition: all 0.218s; }
.items-body .actions button { width: 30px; height: 100%; background: url(img/delete.svg) no-repeat center; background-size: 22px; border: none; text-indent: -9999px; opacity: 0.45; cursor: pointer; transition: all 0.218s; }
.items-body .actions button:hover { opacity: 1; background-size: 24px; }
.items-footer { margin-top: 1.35em; }
.items-footer .total-row { display: grid; grid-template-columns: 80% 20%; padding: 0.35em 0; }
.items-footer .total-row .label { text-align: right; font-weight: 750; color: var(--text-darkest); }
.items-footer .total-row .value { text-align: right; }
.items-footer .total-row.total { }

.invoice[data-currency="USD"] .money:before,
.invoice[data-currency="CAD"] .money:before,
.invoice[data-currency="AUD"] .money:before { content: "$"; }
.invoice[data-currency="EUR"] .money:before { content: "€"; }
.invoice[data-currency="GBP"] .money:before { content: "£"; } 

[contenteditable="true"] { border-radius: 3px; }
[contenteditable="true"]:hover { background: #fff3cd; }
[contenteditable="true"]:focus { background: #fff3cd; outline: 1px solid rgb(255, 230, 156); }

/* .invoice:hover [contenteditable="true"] { outline: 1px dashed rgba(0,0,0,0.1); } */


/* Notes */
.invoice-notes { margin-top: auto; }
.invoice-notes h2 { padding-bottom: 0.75em; margin-bottom: 0.75em; border-bottom: 1px solid var(--border-color); }


/* ================================================================================== */
/* == INVOICE STYLES ================================================================ */
/* ================================================================================== */

/* Simple */
.invoice[data-style="simple"] { }


/* Classic */
.invoice[data-style="classic"] .items-main {  }
.invoice[data-style="classic"] .items-header { border: 1px solid var(--border-color); border-radius: 0.5em 0.5em 0 0; border-bottom: none; background: var(--gray-box-bg); padding: 1.35em 1.5em; }
.invoice[data-style="classic"] .items-body { border: 1px solid var(--border-color); border-radius: 0 0 0.5em 0.5em; }
.invoice[data-style="classic"] .item-row { padding: 1.35em 1.5em; }
.invoice[data-style="classic"] .item-row:last-child { border: none; }
.invoice[data-style="classic"] .items-footer { padding-right: 1.5em; }
.invoice[data-style="classic"] .items-main .items-toolbar { padding-left: 0.75em; }
/* .invoice[data-style="classic"][data-color-mode="color"] .items-main { overflow: visible; } */
/* .invoice[data-style="classic"][data-color-mode="color"] .items-header { background: #4870F6; color: #fff; border-radius: 0.5rem 0.5rem 0 0; border-bottom: none; box-shadow: 0 0 0 1px #4870F6, inset 0 0 0 2px #4870F6; } */

.invoice[data-style="classic"] .invoice-person { border: 1px solid var(--border-color); background: var(--gray-box-bg); border-radius: 0.5em; padding: 1.5em; }


/* Modern */
.invoice[data-style="modern"] { border-bottom: 0.3in solid #4870F6; }
.invoice[data-style="modern"] .invoice-header { background: #4870F6; margin: -0.75in -0.75in 0.5in -0.75in; padding: 0.85in 0.75in; color: #fff; border: none; border-bottom: 0.3in solid #2b4dbd; }
.invoice[data-style="modern"] .invoice-header h1 { color: #fff; font-size: 0.7in; line-height: 0.7in; text-shadow: 0 1px 4px #2b4dbd; margin: 0; }
.invoice[data-style="modern"] .logo { height: 0.6in; margin-top: 0.05in; }
.invoice[data-style="modern"] .logo-placeholder { line-height: calc(0.6in - 6px); filter: brightness(0) invert(1); }

.invoice[data-style="modern"] .invoice-subheader { background: #2b4dbd; margin: 0 -0.75in 0.7in -0.75in; padding: 0.25in 0.75in; color: #b5dcff; border: none; }
.invoice[data-style="modern"] .invoice-subheader h2 { color: #d0e9ff; }

.invoice[data-style="modern"][data-color-mode="bw"] { border-bottom: 0.3in solid #e6e6e6; }
.invoice[data-style="modern"][data-color-mode="bw"] .invoice-header { background: #e6e6e6; border-bottom: 0.3in solid #ccc; }
.invoice[data-style="modern"][data-color-mode="bw"] .invoice-header h1 { color: #000; text-shadow: none; color: #1b1b1b !important; }

/* .invoice[data-style="modern"] .items-header { border: none; border-bottom: 3px solid #4870F6; padding-top: 0; } */


/* Minimal */
.invoice[data-style="minimal"] h1 { text-transform: uppercase; font-weight: 300; font-size: 2.5rem; letter-spacing: 0.05em; }
.invoice[data-style="minimal"] h2 { text-transform: uppercase; font-weight: 500; font-size: 0.85rem; color: var(--text-lightest); letter-spacing: 0.1em; }
.invoice[data-style="minimal"] .items-header { border-top: none; padding-top: 0;}
.invoice[data-style="minimal"] .invoice-subheader h2 { font-size: 1em; font-weight: normal; color: var(--text-default); text-transform: none; letter-spacing: normal }
.invoice[data-style="minimal"] .items-header,
.invoice[data-style="minimal"] .items-body { border-bottom: 2px solid var(--text-lightest); }
.invoice[data-style="minimal"] .items-header,
.invoice[data-style="minimal"] .items-footer .label { text-transform: uppercase; font-weight: 500; font-size: 0.85rem; color: var(--text-lightest); letter-spacing: 0.05em; }
.invoice[data-style="minimal"] .items-footer .total-row { padding: 0.5rem 0; }
.invoice[data-style="minimal"] .items-footer .total-row.total { margin-top: 1rem; font-size: 1.2rem; }
.invoice[data-style="minimal"] .invoice-notes { border-top: 1px solid var(--border-color); padding-top: 0.5in; }
.invoice[data-style="minimal"] .invoice-notes h2 { border: none; padding: 0; }


/* Elegant */
.invoice[data-style="elegant"] { font-family: Georgia; }


/* Monospace */
.invoice[data-style="monospace"] { font-family: monospace; color: #474747 !important; }
.invoice[data-style="monospace"] .invoice-header,
.invoice[data-style="monospace"] .invoice-subheader,
.invoice[data-style="monospace"] .items-header,
.invoice[data-style="monospace"] .items-body .item-row { border-bottom: 1px dashed var(--border-color); }
.invoice[data-style="monospace"] .items-header { border-top: 1px dashed var(--border-color); padding-top: 1.25em; }


/* Colorful */
.invoice[data-style="colorful"] { background: #4870F6; background: linear-gradient(22deg, #1543dc 0%, #4870F6 100%); }
.invoice[data-style="colorful"] h1 { color: #fff; font-size: 1in; line-height: 1in; text-shadow: 0 1px 4px #2b4dbd; }
.invoice[data-style="colorful"] .logo { width: 3in; height: 0.8in; line-height: 0.8in; margin-top: 0.1in; color: #fff; }
.invoice[data-style="colorful"] .logo-placeholder { line-height: calc(0.8in - 6px); filter: brightness(0) invert(1); }
.invoice[data-style="colorful"] .invoice-header { border: none; padding-bottom: 0.2in; }
.invoice[data-style="colorful"] .invoice-middle { background: #fff; margin: 0; padding: 0.5in; border-radius: 0.25in 0.25in 0 0; box-shadow: 0 1px 4px #2b4dbd; }
.invoice[data-style="colorful"] .invoice-items { background: #fff; margin: 5px 0 0 0;  padding: 0.5in; border-radius: 0 0 0.25in 0.25in; box-shadow: 0 1px 4px #2b4dbd; }
.invoice[data-style="colorful"] .items-header { border-top: none; padding-top: 0; }
.invoice[data-style="colorful"] .invoice-notes { color: #fff; color: rgba(255,255,255,0.75); text-shadow: 0 1px 4px #2b4dbd; }
.invoice[data-style="colorful"] .invoice-notes h2 { border: none; color: #fff; padding: 0; }

.invoice[data-style="colorful"][data-color-mode="bw"] { background: #2b2b2b; }
.invoice[data-style="colorful"][data-color-mode="bw"] .invoice-header h1,
.invoice[data-style="colorful"][data-color-mode="bw"] .invoice-notes h2,
.invoice[data-style="colorful"][data-color-mode="bw"] .invoice-notes { color: #fff !important; text-shadow: none; }
.invoice[data-style="colorful"][data-color-mode="bw"] .invoice-notes { color: #ababab !important; }



/* ================================================================================== */
/* == INVOICE LAYOUTS =============================================================== */
/* ================================================================================== */

/* Layout 1 */
.layout1 { font-siz//e: 15px; }
.layout1 .invoice-middle .invoice-person { width: auto; }

.layout1[data-style="classic"] .invoice-person { border: none; background: none; border-radius: none; padding: 0; }


/* Layout 2 */
.layout2 .invoice-header { margin-bottom: 0; }

.layout2[data-style="modern"] .invoice-header { margin-bottom: 0; border: none; }


/* Layout 3 */
.layout3 .invoice-number { color: var(--text-default); float: none; vertical-align: 0.0125em; font-size: 0.8em; font-weight: 400; line-height: 0.5in; }
.layout3 .invoice-middle h2:last-of-type { margin-top: 0.25in; }

.layout3[data-style="classic"] .invoice-header { margin: 0; border: none; }

.layout3[data-style="colorful"] .invoice-number { color: #d0e9ff; }
.layout3[data-style="colorful"].has-logo .invoice-number { display: none; }


/* Layout 4 */
.layout4 { font-size: 13px; }
.layout4 .invoice-header h1 { }
.layout4 .invoice-header .left,
.layout4 .invoice-header .right { margin-top: 0.6em; }
.layout4 .invoice-number { font-size: 0.85em; font-weight: 300; color: var(--text-default); }
.layout4 .invoice-header .invoice-number:before { content: "#"; font-size: 0.8em; vertical-align: 0.1em; font-weight: 400; }

.layout4[data-style="classic"] .invoice-header { margin: 0; border: none; }

.layout4[data-style="colorful"] .invoice-header { margin-bottom: 0; }
.layout4[data-style="colorful"] .invoice-header .left,
.layout4[data-style="colorful"] .invoice-header .right { margin-top: 3.75em; }
.layout4[data-style="colorful"] .invoice-header .left *,
.layout4[data-style="colorful"] .invoice-header .right * { color: #d0e9ff; }
.layout4[data-style="colorful"].has-logo .invoice-number { display: none; }

.layout4[data-style="modern"] .invoice-header .left *,
.layout4[data-style="modern"] .invoice-header .right *,
.layout4[data-style="modern"] .invoice-number { color: #d0e9ff; }
.layout4[data-style="modern"] .invoice-header .left,
.layout4[data-style="modern"] .invoice-header .right { margin-top: 2em; }


/* Layout 5 */
.layout5 .invoice-number { color: var(--text-default); float: none; vertical-align: 0.0125em; font-size: 0.8em; font-weight: 400; line-height: 0.5in; }
.layout5 .invoice-header .invoice-number:before { content: "#"; font-size: 0.8em; vertical-align: 0.1em; font-weight: 400; }
.layout5 .invoice-header .invoice-due,
.layout5 .invoice-header .invoice-date { float: right; padding-top: 0.35em; }
.layout5 .invoice-header .invoice-due { margin-left: 0.5in; }

.layout5[data-style="classic"] .invoice-head/er { margin: 0; border: none; }


/* Layout 5b */
.layout5b .invoice-header {  }
.layout5b .invoice-header h1 { font-size: 4.75em; line-height: 0.7in; }
.layout5b .invoice-header .right { width: auto; }
.layout5b .invoice-header .invoice-number { line-height: normal; display: none !important; }
.layout5b .invoice-header .invoice-number:before { display: none; }
.layout5b .invoice-header .right { display: flex; flex-direction: column; justify-content: space-between; text-align: right; padding-top: 1em; }
.layout5b .invoice-header .right > div { display: inline; overflow: hidden; margin: 0 0 0.5em 0; }
.layout5b .invoice-header .right > div > div { display: inline; margin: -2px 0 0 0em; }

.layout5b[data-style="classic"] .invoice-header { border: none; margin: 0; }

.layout5b[data-style="colorful"] .invoice-header { margin: 0; }
.layout5b[data-style="colorful"] .invoice-header .right * { color: #d0e9ff; }

.layout5b[data-style="modern"] .invoice-header { padding-bottom: 0.5in; border }
.layout5b[data-style="modern"] .invoice-header .right * { color: #d0e9ff; }


/* Layout 6 */
.layout6 { font-size: 13px; }
.layout6 .invoice-number { color: var(--text-default); vertical-align: 0.0125em; font-size: 2em; font-weight: 300; line-height: 0.5in; }
.layout6 .invoice-middle > div { width: auto; }

.layout6.has-logo .invoice-number { float: left; line-height: 0.55in; margin-left: 0.35em; font-size: 0.35in; font-weight: 300; color: var(--text-darkest); }

.layout6[data-style="classic"] .invoice-person { border: none; background: none; border-radius: none; padding: 0; }

.layout6[data-style="modern"] .invoice-number { font-size: 3.25em; line-height: 0.7in; margin-top: 0.2em; color: #d0e9ff; }
.layout6[data-style="modern"] .logo { width: 3in; }



/* ================================================================================== */
/* == COLOR MODES =================================================================== */
/* ================================================================================== */

/* Color Mode */
.invoice[data-color-mode="color"] { /* Default styles above already handle color mode */ }

/* Black & White Mode */
.invo///ice[data-color-mode="bw"] { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.invoice[data-color-mode="bw"] { color: #6E7F80; }
.invoice[data-color-mode="bw"] h1,
.invoice[data-color-mode="bw"] h2 { color: black !important; }



/* ================================================================================== */
/* == PRINT STLYES ================================================================== */
/* ================================================================================== */

@media print {
	body, html { background: white; }
	.invoice-container { padding: 0; }
	.invoice { margin: 0; box-shadow: none; }
	.invoice-settings,
	.logo-placeholder { display: none; }
}