{"includes":"<style id=\"style\">\n    @import url($font_url);\n\n    :root {\n        --primary-color: $primary_color;\n        --secondary-color: $secondary_color;\n        --line-height: 1.4;\n    }\n\n    body {\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        font-family: $font_name, Helvetica, sans-serif;\n        font-size: $font_size !important;\n        zoom: 80%;\n    }\n\n    table tr td, table tr, th {\n        font-size: $font_size !important;\n    }\n\n\n    body, html {\n        margin: 0;\n        padding: 0;\n    }\n\n    @page {\n        margin: 0 !important;\n        size: $page_size $page_layout;\n    }\n\n    p {\n        margin: 0;\n        padding: 0;\n    }\n\n    #spacer-table > * > tr > td {\n        padding: 0;\n    }\n\n    #spacer-table{\n        width: 100%;\n    }\n\n    #header {\n        display: grid;\n        grid-template-columns: 1.5fr 1fr 1fr;\n        gap: 20px;\n        background-color: #2d2c2a;\n        color: white;\n        line-height: var(--line-height);\n        position: fixed;\n        top: 0;\n        width: 100%;\n    }\n\n\n    #header, #header-spacer {\n        height: 160px;\n        padding: 2rem;\n        margin-bottom: 1rem;\n    }\n    .company-logo {\n\/*        height: 100%;*\/\n\/*        max-width: 100%;*\/\n        max-width: $company_logo_size;\n        object-fit: contain;\n        object-position: left center;\n    }\n\n    #company-details,\n    #company-address {\n        display: flex;\n        flex-direction: column;\n    }\n\n    #company-details,\n    #company-address,\n    .logo-container {\n        max-height: 160px;\n    }\n\n    #client-details {\n        padding-right:1rem;\n        display: flex;\n        flex-direction: column;\n        line-height: var(--line-height) !important;\n        padding-left: 2rem;\n    }\n\n    #shipping-details {\n        display: $show_shipping_address;\n        flex-direction: column;\n        line-height: var(--line-height) !important;\n    }\n\n    #client-details > :first-child {\n        font-weight: bold;\n    }\n\n    .client-entity-wrapper {\n        display: grid;\n        grid-template-columns: 2fr 1fr;\n        padding-left: 1rem;\n    }\n    \n    .client-wrapper-left-side {\n        display: flex;\n    }\n\n    .entity-details-wrapper {\n        background-color: var(--primary-color);\n        padding: 1rem;\n    }\n\n    #entity-details {\n        width: 100%;\n        text-align: left;\n        color: white !important;\n    }\n\n    #entity-details > tr,\n    #entity-details th {\n        font-weight: normal;\n        line-height: var(--line-height) !important;\n    }\n\n    [data-ref=\"table\"] {\n        min-width: 100%;\n        table-layout: fixed;\n        overflow-wrap: break-word;\n        margin-top: 0rem;\n        margin-bottom: 0px;\n    }\n\n    [data-ref=\"table\"]:last-child{\n        margin-bottom:0;\n    }\n\n    .task-time-details {\n        display: block;\n        margin-top: 5px;\n        color: grey;\n    }\n\n    [data-ref=\"table\"] > thead {\n        text-align: left;\n    }\n\n    [data-ref=\"table\"] > thead > tr > th {\n        padding: 1.5rem 3rem;\n        font-size: 1rem;\n    }\n\n    [data-ref=\"table\"] > thead > tr > th:last-child {\n        text-align: right;\n    }\n\n    [data-ref=\"table\"] > tbody > tr > td {\n        padding: 1.5rem 3rem;\n    }\n\n    [data-ref=\"table\"] > tbody > tr > td:last-child {\n        text-align: right;\n    }\n\n    [data-ref=\"table\"] > tbody > tr > td:first-child {\n        font-weight: bold;\n    }\n\n    [data-ref=\"table\"] > tbody > tr:nth-child(odd) {\n        background-color: #ebebeb;\n    }\n\n    #table-totals {\n        page-break-inside: avoid;\n    }\n\n    #table-totals {\n        margin-top: 0rem;\n        display: grid;\n        grid-template-columns: 2fr 1fr;\n        padding-top: .5rem;\n        padding-left: 3rem;\n        padding-right: 3rem;\n        gap: 80px;\n    }\n\n    #table-totals .totals-table-right-side > * {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n    }\n\n    #table-totals > .totals-table-right-side > * > :nth-child(1) {\n        text-align: $dir_text_align;\n        margin-top: .75rem;\n    }\n\n    #table-totals > .totals-table-right-side > * > :not([hidden]) ~ :not([hidden]) {\n        --tw-space-y-reverse: 0;\n        margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));\n        margin-bottom: calc(.75rem * var(--tw-space-y-reverse));\n    }\n\n    #table-totals > .totals-table-right-side > * > :nth-child(2) {\n        text-align: right;\n    }\n\n    #table-totals\n    > *\n    [data-element='product-table-balance-due-label'],\n    #table-totals\n    > *\n    [data-element='product-table-balance-due'] {\n        font-weight: bold;\n        font-size: 1.4rem;\n    }\n\n    #table-totals\n    > *\n    [data-element='product-table-balance-due'] {\n        color: var(--primary-color);\n    }\n\n    #table-totals > * > :last-child {\n        text-align: right;\n        padding-right: 1.5rem;\n    }\n\n    .entity-label {\n        text-transform: uppercase;\n        color: var(--primary-color);\n        padding-left: 2rem;\n        font-size: 1.5rem;\n    }\n\n    #footer {\n        margin-top: 1rem;\n        background-color: #2d2c2a;\n        min-width: 100%;\n        position: fixed;\n        bottom: 0;\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 15px;\n        color: white;\n    }\n\n    #footer, #footer-spacer {\n        height: 160px;\n        padding: 1rem 3rem;\n        margin-top: 1rem;\n    }\n\n    [data-ref=\"total_table-footer\"] {\n        padding-top: 0.5rem\n    }\n\n    [data-ref=\"footer_content\"]{\n        padding-right: 2rem;\n        margin-right: 2rem;\n    }\n\n    table {\n        width: 100%;\n    }\n\n    table[data-ref=\"table\"] th,\n    table[data-ref=\"table\"] td {\n        padding: .2rem .4rem;\n        text-align: left;\n        vertical-align: top;\n        border-top: 1px solid #dee2e6;\n    }\n\n    \/** Markdown-specific styles. **\/\n    #product-table h3,\n    #task-table h3,\n    #delivery-note-table h3 {\n        font-size: 1rem;\n        margin-bottom: 0;\n    }\n\n    [data-ref=\"product_table-product.description-th\"] {\n        width: 23%;\n    }\n\n    [data-ref=\"statement-totals\"] {\n        margin-top: 1rem;\n        text-align: right;\n        margin-right: .75rem;\n    }\n\n    [data-ref*=\".line_total-td\"] {\n        white-space: nowrap;\n    }\n\n    #statement-invoice-table-totals > p {\n        margin-right: 2rem;\n        margin-top: 1rem;\n    }\n\n\n    [data-element='product_table-product.description-td'], td {\n        min-width:100%;\n        max-width: 300px;\n        overflow-wrap: break-word; \n    }\n\n    .stamp {\n      transform: rotate(12deg);\n        color: #555;\n        font-size: 3rem;\n        font-weight: 700;\n        border: 0.25rem solid #555;\n        display: inline-block;\n        padding: 0.25rem 1rem;\n        text-transform: uppercase;\n        border-radius: 1rem;\n        font-family: 'Courier';\n        mix-blend-mode: multiply;\n        z-index:200 !important;\n        position:  fixed;\n        text-align: center;\n    }\n\n    .is-paid {\n        color:  #D23;\n        border: 1rem double  #D23;\n        transform: rotate(-5deg);\n        font-size: 6rem;\n        font-family: \"Open sans\", Helvetica, Arial, sans-serif;\n        border-radius: 0;\n        padding: 0.5rem;\n        opacity: 0.2;\n        z-index:200 !important;\n        position:  fixed;\n        display: $show_paid_stamp;\n    } \n\n    .project-header {\n        font-size: 1.2em;\n        margin-top: 0.1em;\n        margin-bottom: 0;\n        padding-bottom: 0;\n        margin-left: 0;\n        margin-right: 0;\n        font-weight: bold;\n        color: #505050;\n    } \n\n    .pqrcode {\n        \n    }\n\n    \/** Useful snippets, uncomment to enable. **\/\n\n    \/** Hide company logo **\/\n    \/* .company-logo { display: none } *\/\n\n    \/* Hide company details *\/\n    \/* #company-details > * { display: none } *\/\n\n    \/* Hide company address *\/\n    \/* #company-address > * { display: none } *\/\n\n    \/* Hide public notes *\/\n    \/* [data-ref=\"total_table-public_notes\"] { display: none } *\/\n\n    \/* Hide terms label *\/\n    \/* [data-ref=\"total_table-terms-label\"] { display: none } *\/\n\n    \/* Hide totals table *\/\n    \/* #table-totals { display: none } *\/\n\n    \/* Hide totals table left side *\/\n    \/* #table-totals div:first-child > * { display: none !important } *\/\n\n    \/* Hide totals table right side *\/\n    \/* .totals-table-right-side { display: none } *\/\n\n    \/** For more info, please check our docs: https:\/\/invoiceninja.github.io **\/\n    \/** To find out selectors on your own: https:\/\/invoiceninja.github.io\/docs\/custom-fields\/#snippets **\/\n<\/style>\n","header":"<div id=\"header\">\n    <div class=\"logo-container\">\n        <img class=\"company-logo\" src=\"$company.logo\" alt=\"$company.name logo\">\n    <\/div>\n    <div id=\"company-details\"><\/div>\n    <div id=\"company-address\"><\/div>\n<\/div>\n","body":"<div id=\"body\">\n    <table id=\"spacer-table\" cellspacing=\"0\">\n        <thead>\n        <tr>\n            <td>\n                <div id=\"header-spacer\"><\/div>\n            <\/td>\n        <\/tr>\n        <\/thead>\n        <tbody>\n        <tr>\n            <td>\n                <div class=\"client-entity-wrapper\">\n                    <div class=\"client-wrapper-left-side\">\n                        <div>                    \n                            <h4 class=\"entity-label\" style=\"margin-top:0px; margin-bottom:10px;\">$entity_label<\/h4>\n                            <div id=\"client-details\" cellspacing=\"0\" cellpadding=\"0\"><\/div>\n                            <div id=\"vendor-details\" cellspacing=\"0\" cellpadding=\"0\"><\/div>\n                        <\/div>\n                        <div>\n                            <h4 class=\"entity-label\" style=\"opacity: 0; margin-top:0px; margin-bottom:10px;\">&amp;<\/h4>\n                            <div id=\"shipping-details\" cellspacing=\"0\" cellpadding=\"0\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"entity-details-wrapper-right-side\">\n                        <h4 class=\"entity-label\" style=\"margin-top:0px; margin-bottom:10px; color:transparent;\">$entity_label<\/h4>\n                        <div class=\"entity-details-wrapper\">\n                            <table id=\"entity-details\" dir=\"$dir\" cellspacing=\"0\" cellpadding=\"0\"><\/table>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <table id=\"product-table\" cellspacing=\"0\" data-ref=\"table\"><\/table>\n\n                <table id=\"task-table\" cellspacing=\"0\" data-ref=\"table\"><\/table>\n\n                <table id=\"delivery-note-table\" cellspacing=\"0\" data-ref=\"table\"><\/table>\n\n                <table id=\"statement-invoice-table\" cellspacing=\"0\" data-ref=\"table\"><\/table>\n                <div id=\"statement-invoice-table-totals\" data-ref=\"statement-totals\"><\/div>\n\n                <table id=\"statement-payment-table\" cellspacing=\"0\" data-ref=\"table\"><\/table>\n                <div id=\"statement-payment-table-totals\" data-ref=\"statement-totals\"><\/div>\n                <table id=\"statement-credit-table\" cellspacing=\"0\" data-ref=\"table\"><\/table>\n                <div id=\"statement-credit-table-totals\" data-ref=\"statement-totals\"><\/div>\n                <table id=\"statement-aging-table\" cellspacing=\"0\" data-ref=\"table\"><\/table>\n                <div id=\"statement-aging-table-totals\" data-ref=\"statement-totals\"><\/div>\n                <div id=\"table-totals\" cellspacing=\"0\">$status_logo<\/div>\n            <\/td>\n        <\/tr>\n        <\/tbody>\n        <tfoot>\n        <tr>\n            <td>\n                <div id=\"footer-spacer\"><\/div>\n            <\/td>\n        <\/tr>\n        <\/tfoot>\n    <\/table>\n<\/div>\n","product":"","task":"","footer":"<div id=\"footer\">\n    <div style=\"width: 100%;\">\n        <p data-ref=\"footer_content\">$entity_footer<\/p>\n\n        <script>\n            \/\/ Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.\n            document.addEventListener('DOMContentLoaded', () => {\n                let tables = [\n                    'product-table', 'task-table', 'delivery-note-table',\n                    'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals',\n                    'statement-invoice-table-totals', 'statement-payment-table-totals', 'statement-aging-table',\n                    'client-details', 'vendor-details', 'swiss-qr', 'shipping-details', 'statement-credit-table', 'statement-credit-table-totals',\n                ];\n\n                tables.forEach((tableIdentifier) => {\n                    console.log(document.getElementById(tableIdentifier));\n\n                    document.getElementById(tableIdentifier)?.childElementCount === 0\n                        ? document.getElementById(tableIdentifier).style.setProperty('display', 'none', 'important')\n                        : '';\n                });\n            });\n        <\/script>\n    <\/div>\n<\/div>\n"}