{"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.6;\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    html {\n        width: 210mm;\n        height: 200mm;     \n    }\n\n    @page {\n        margin: -0.25cm !important;\n        size: $page_size $page_layout;\n        margin-top: 1rem;\n    }\n\n\n    p {\n        margin: 0;\n        padding: 0;\n    }\n\n    .header-wrapper {\n        display: flex;\n        justify-content: space-between;\n        gap: 20px;\n        padding: 1rem 0rem 0rem 2rem;\n    }\n\n    .header-wrapper .entity-details-wrapper {\n        background-color: var(--primary-color);\n        padding: 0.5rem;\n        border-radius: 10px;\n    }\n\n    #entity-details p { \n        margin-right: 20px; \n        white-space: nowrap;\n        --tw-space-y-reverse: 0;\n        margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));\n        margin-bottom: calc(.5rem * var(--tw-space-y-reverse));\n    }\n\n    .header-wrapper #entity-details {\n        width: 100%;\n        color: white;\n        text-align: left;\n    }\n\n    .header-wrapper #entity-details > tr,\n    .header-wrapper #entity-details th {\n        font-weight: normal;\n    }\n\n    .company-logo {\n\/*        max-width: 65%;*\/\n        max-width: $company_logo_size;\n    }\n\n    .contacts-wrapper {\n        display: grid;\n        gap: 20px;\n        padding: 1rem 0rem 0rem 2rem;\n        grid-template-columns: 1fr 1fr auto;\n        grid-template-areas: \"a b c\";\n        grid-auto-columns: minmax(0, 5fr);\n        grid-auto-flow: column;\n        justify-content: space-between;\n\n    }\n\n    .contacts-wrapper .contact-label {\n        font-weight: bold;\n        color: var(--primary-color);\n        margin-left: 1rem;\n    }\n\n    .contacts-wrapper .shipping-label {\n        font-weight: bold;\n        color: var(--primary-color);\n        margin-left: 1rem;\n        display: $show_shipping_address;\n    }\n\n    .contacts-wrapper #company-address,\n    .contacts-wrapper #company-details,\n    .contacts-wrapper #client-details {\n        display: flex;\n        flex-direction: column;\n        margin-bottom: 0.5rem;\n    }\n\n    .contacts-wrapper #shipping-details {\n        display: $show_shipping_address;\n        flex-direction: column;\n        margin-bottom: 0.5rem;\n    }\n\n    .contacts-wrapper .company-info {\n        margin-top: 1rem;\n        padding: 1rem;\n        border-top: 1px solid var(--primary-color);\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 10px;\n    }\n\n    .contacts-wrapper #client-details {\n        margin-top: 1rem;\n        padding: 1rem;\n        border-top: 1px solid var(--primary-color);\n    }\n\n    .contacts-wrapper #shipping-details {\n        margin-top: 1rem;\n        padding: 1rem;\n        border-top: 1px solid var(--primary-color);\n    }\n\n\n    .contact-wrapper-left-side,\n    .contact-wrapper-right-side {\n        border-bottom: 1px solid var(--primary-color);\n    }\n\n    .shipping-wrapper-right-side {\n        border-bottom: 1px solid var(--primary-color);\n        display: $show_shipping_address_block;\n    }\n\n    [data-ref=\"table\"] {\n        padding-left: 2rem;\n        padding-right: 0rem;\n        margin-top: 1rem;\n        margin-bottom: 5px;\n        min-width: 100%;\n        table-layout: fixed;\n        overflow-wrap: break-word;\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        font-size: 1.2rem;\n        padding: 1rem;\n        background: var(--primary-color);\n        color: white;\n    }\n\n    [data-ref=\"table\"] > thead tr > th:last-child {\n        text-align: right;\n    }\n\n    [data-ref=\"table\"] > thead tr > th:first-child {\n        border-top-left-radius: 10px;\n        border-bottom-left-radius: 10px;\n    }\n\n    [data-ref=\"table\"] > thead tr > th:last-child {\n        border-top-right-radius: 10px;\n        border-bottom-right-radius: 10px;\n    }\n\n    [data-ref=\"table\"] > tbody > tr > td {\n        background-color: #F7F7F7;\n        border-bottom: 1px solid var(--primary-color);\n        padding: 1rem;\n    }\n\n    [data-ref=\"table\"] > tbody > tr > td:first-child {\n        color: var(--primary-color);\n    }\n\n    [data-ref=\"table\"] > tbody > tr > td:last-child {\n        text-align: right;\n    }\n\n    #table-totals {\n        margin-top: 0.5rem;\n        display: grid;\n        grid-template-columns: 2fr 1fr;\n        gap: 80px;\n        padding-left: 2rem;\n        padding-right: 0rem;\n        break-inside: avoid;\n        overflow: visible !important;\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    }\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: 1rem;\n    }\n\n    #header {\n        position: fixed;\n        top: 0;\n        min-width: 100%;\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n        margin-left: -10px;\n    }\n\n    #header > * {\n        padding: 10px;\n    }\n\n    [data-ref=\"total_table-footer\"] {\n        text-align: left;\n        padding-left: 2rem;\n        padding-right: rem;\n    }\n\n    #footer {\n        margin-top: 1rem;\n        break-inside: avoid;\n        overflow: visible !important;\n    }\n\n    \/** Markdown-specific styles. **\/\n    [data-ref=\"table\"] h3 {\n        font-size: 1rem;\n        margin-bottom: 0;\n    }\n\n    #footer-colors {\n        position: fixed;\n        bottom: 0;\n        min-width: 100%;\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n        margin-left: -10px;\n   }\n\n   #footer-colors > * {\n        padding: 10px;\n    }\n\n    [data-ref=\"statement-totals\"] {\n        margin-top: 1rem;\n        text-align: right;\n        padding-left: 3rem;\n        padding-right: 3rem;\n    }\n\n    [data-ref*=\".line_total-td\"] {\n        white-space: nowrap;\n    }\n\n    .repeating-header,\n    .repeating-header-space {\n        height: 20px;\n        page-break-inside:avoid;\n        page-break-before:avoid;\n        page-break-after:avoid;\n    }\n\n    .repeating-footer,\n    .repeating-footer-space {\n        height: 20px;\n    }\n    .repeating-header {\n        position: fixed;\n        top: 0;\n    }\n    .repeating-footer {\n        position: fixed;\n        bottom: 0;\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    [data-ref=\"shipping_address-label\"] {\n        display: none;\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\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 style=\"background-color: #00968B\"><!-- 1 --><\/div>\n        <div style=\"background-color: #1D756E\"><!-- 2 --><\/div>\n        <div style=\"background-color: #FCB600\"><!-- 3 --><\/div>\n        <div style=\"background-color: #BA932F\"><!-- 4 --><\/div>\n        <div style=\"background-color: #A72A4E\"><!-- 5 --><\/div>\n        <div style=\"background-color: #E20041\"><!-- 6 --><\/div>\n        <div style=\"background-color: #F8B300\"><!-- 7 --><\/div>\n        <div style=\"background-color: #009B8F\"><!-- 8 --><\/div>\n    <\/div>\n","body":"<div id=\"body\">\n<table style=\"min-width: 100%\">\n   <thead>\n      <tr>\n         <td>\n            <div class=\"repeating-header-space\">&nbsp;<\/div>\n         <\/td>\n      <\/tr>\n   <\/thead>\n   <tbody>\n      <tr>\n         <td>\n            <div class=\"header-wrapper\">\n                <div>\n                    <img class=\"company-logo\" src=\"$company.logo\" alt=\"$company.name logo\">\n                <\/div>\n                <div class=\"entity-details-wrapper\">\n                    <table id=\"entity-details\" cellspacing=\"0\" dir=\"$dir\"><\/table>\n                <\/div>\n            <\/div>\n            <div class=\"contacts-wrapper\">\n                <div class=\"contact-wrapper-left-side\">\n                    <p class=\"contact-label\">$from_label:<\/p>\n                    <div class=\"company-info\">\n                    <div id=\"company-details\"><\/div>\n                    <div id=\"company-address\"><\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"contact-wrapper-right-side\">\n                    <p class=\"contact-label\">$to_label:<\/p>\n                    <div id=\"client-details\"><\/div>\n                    <div id=\"vendor-details\"><\/div>\n                <\/div>\n\n                <div class=\"shipping-wrapper-right-side\">\n                    <p class=\"shipping-label\">$shipping_label:<\/p>\n                    <div id=\"shipping-details\"><\/div>\n                <\/div>\n            <\/div>\n            <table id=\"product-table\" cellspacing=\"0\" data-ref=\"table\"><\/table>\n            <table id=\"task-table\" cellspacing=\"0\" data-ref=\"table\"><\/table>\n            <table id=\"delivery-note-table\" cellspacing=\"0\" data-ref=\"table\"><\/table>\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            <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 class=\"repeating-footer-space\">&nbsp;<\/div>\n         <\/td>\n      <\/tr>\n   <\/tfoot>\n<\/table>\n<\/div>\n","product":"","task":"","footer":"<div class=\"repeating-footerx\" id=\"footer\">\n    <p data-ref=\"total_table-footer\">$entity_footer<\/p>\n\n    <div id=\"footer-colors\">\n        <div style=\"background-color: #00968B\"><!-- 1 --><\/div>\n        <div style=\"background-color: #1D756E\"><!-- 2 --><\/div>\n        <div style=\"background-color: #FCB600\"><!-- 3 --><\/div>\n        <div style=\"background-color: #BA932F\"><!-- 4 --><\/div>\n        <div style=\"background-color: #A72A4E\"><!-- 5 --><\/div>\n        <div style=\"background-color: #E20041\"><!-- 6 --><\/div>\n        <div style=\"background-color: #F8B300\"><!-- 7 --><\/div>\n        <div style=\"background-color: #009B8F\"><!-- 8 --><\/div>\n    <\/div>\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"}