{"includes":"<style id=\"style\">\n      @import url($font_url);\n\n      :root {\n        --primary-color: $primary_color;\n        --secondary-color: $secondary_color;\n      }\n\n      html {\n          width: 210mm;\n          height: 200mm;     \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      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          background-color: var(--primary-color);\n          color: white;\n          display: grid;\n          grid-template-columns: 1.5fr 1fr;\n          position:fixed;\n          top: 0;\n          width: 100%;\n      }\n\n      #header, #header-spacer {\n          height: 160px;\n          padding: 1rem;\n          margin-bottom: 1rem;\n      }\n\n      .company-name {\n        text-align: left;\n        margin-left: 1rem;\n      }\n\n      #header .company-name {\n          font-size: 2rem;\n      }\n\n      #entity-details {\n        text-align: left;\n        color: #fff4e9 !important;\n        line-height: 1.6;\n      }\n\n      #entity-details > tr,\n      #entity-details th {\n        font-weight: normal;\n      }\n\n      .logo-client-wrapper {\n        margin-left: 2rem;\n        display: grid;\n        grid-template-columns: 1fr auto auto;\n        margin-top: 1rem;\n        margin-bottom: 1rem;\n      }\n\n      .company-logo {\n          max-width: $company_logo_size;\n      }\n\n      #client-details {\n        display: flex;\n        flex-direction: column;\n        margin-left: 10px;\n        margin-right: 10px;\n\n      }\n\n      #shipping-details {\n          display: $show_shipping_address;\n          flex-direction: column;\n          margin-left: 10px;\n          margin-right: 10px;\n      }\n\n      #client-details > * {\n        margin-bottom: 0.5rem;\n      }\n\n      .table-wrapper {\n        margin: 0rem 2rem;\n      }\n\n      [data-ref=\"table\"] {\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        width: 100%;\n      }\n\n      [data-ref=\"table\"] th + th {\n        border-left: 2px solid white;\n      }\n\n      [data-ref=\"table\"] > thead > tr > th {\n        padding: 0.8rem;\n        background-color: var(--secondary-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\"] > tbody > tr > td {\n        border-bottom: 1px solid var(--secondary-color);\n        padding: 0.8rem;\n      }\n\n      [data-ref=\"table\"] > tbody > tr > td:first-child {\n        font-weight: bold;\n      }\n\n      [data-ref=\"table\"] > tbody > tr > td:last-child {\n        text-align: right;\n      }\n\n      #footer {\n          background-color: var(--primary-color);\n          width: 100%;\n          position: fixed;\n          bottom: 0;\n          padding-left: 1rem;\n      }\n\n\n      #footer, #footer-spacer {\n          height: 220px;\n          padding: 0rem 0rem;\n          margin-top: 0rem;\n      }\n\n      .footer-content {\n        display: flex;\n        gap: 10px;\n        width: 100%;\n        \/* grid-template-columns: 1fr 1fr 1fr; *\/\n        color: #fff4e9;\n        max-height: 140px;\n        justify-content: space-between;\n        margin-top: 0.5rem;\n        margin-left: 0.5rem;\n      }\n\n      .footer-company-details-address-wrapper {\n        display: flex;\n        gap: 0px;\n        margin-right: 60px;\n      }\n\n      #company-address,\n      #company-details {\n        display: flex;\n        flex-direction: column;\n        margin-top: 0.5rem;\n        margin-bottom: 0rem;\n      }\n\n      #company-address > *,\n      #company-details > * {\n        margin-bottom: 0.5rem;\n      }\n\n      #table-totals {\n        page-break-inside: avoid;\n      }\n\n      #table-totals {\n        display: grid;\n        grid-template-columns: 2fr 1fr;\n        padding-top: 0.5rem;\n        padding-left: 2.5rem;\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: \"left\";\n        margin-top: 0.75rem;\n      }\n\n      #table-totals\n        > .totals-table-right-side\n        > *\n        > :not([hidden])\n        ~ :not([hidden]) {\n        --tw-space-y-reverse: 0;\n        margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n        margin-bottom: calc(0.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 > * [data-element=\"product-table-balance-due-label\"],\n      #table-totals > * [data-element=\"product-table-balance-due\"] {\n        font-weight: bold;\n        font-size: 1.3rem;\n      }\n\n      [data-ref=\"total_table-footer\"] {\n          margin-top: 1rem;\n          margin-bottom: 1rem;\n      }\n\n      table {\n          width: 100%;\n      }\n\n      table[data-ref=\"table\"] th,\n      table[data-ref=\"table\"] td {\n          padding: 0.2rem 0.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          margin-bottom: 1rem;\n          text-align: right;\n          margin-right: .75rem;\n      }\n\n      [data-ref*=\".line_total-td\"] {\n        white-space: nowrap;\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\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      \/** 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    <h1 class=\"company-name\">$company.name<\/h1>\n    <table id=\"entity-details\" cellspacing=\"0\" cellpadding=\"0\" dir=\"$dir\"><\/table>\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=\"logo-client-wrapper\">\n                    <img class=\"company-logo\" src=\"$company.logo\" alt=\"$company.name logo\">\n                    <div id=\"client-details\"><\/div>\n                    <div id=\"vendor-details\"><\/div>\n                    <div id=\"shipping-details\"><\/div>\n                <\/div>\n                <div class=\"table-wrapper\">\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>\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 class=\"footer-content\">\n        <div style=\"width: 70%; margin-left: 2rem;\">\n            <p data-ref=\"total_table-footer\">$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            \n        <\/div>\n        <div class=\"footer-company-details-address-wrapper\">\n            <div id=\"company-details\"><\/div>\n            <div id=\"company-address\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n"}