{"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    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 {\n        margin-top: 1rem;\n        min-width: 100%;\n        table-layout: fixed;\n        overflow-wrap: break-word;\n    }\n\n    .table-header>tr>th {\n        border-bottom: solid 1px #efefef;\n    }\n\n    .table-body>tr>td {\n        border-bottom: solid 1px #efefef;\n    }\n\n    .product-table>thead>tr>th {\n        text-align: left;\n        padding-right: 6px;\n        padding-top: 1.5rem;\n        padding-bottom: 1.5rem;\n        padding-left: 1rem;\n        font-size: 1.1rem;\n    }\n\n    .product-table>tbody>tr>td {\n        border-top: 1px solid #d8d8d8;\n        border-bottom: 1px solid #d8d8d8;\n        padding: 1rem 1rem;\n    }\n\n    .product-table>tbody > tr > td:first-child {\n        color: var(--primary-color);\n    }\n\n    .product-table>thead > tr > th:last-child,\n    .right-align>tbody > tr > td:last-child,\n    .product-table>tbody > tr > td:last-child {\n        text-align: right;\n    }\n\n    .product-table>thead > tr > th:last-child {\n        padding-right: 1rem;\n    }\n\n    .product-table>tbody>tr:nth-child(odd) {\n        background-color: #f5f5f5;\n    }\n\n    .item-row {\n        border-bottom: 1px #000 dotted;\n    }\n\n    .totals-row-label {\n        text-align: right;\n        white-space: nowrap;\n    }\n\n    .totals-row-value {\n        text-align: right;\n        white-space: nowrap;\n    }\n\n    .table-totals {\n        display: grid;\n        grid-template-columns: 2fr 1fr;\n    }\n\n    .centered {\n        text-align: center;\n    }\n\n    table tr td, table tr, th {\n        font-size: $font_size !important;\n    }\n\n    @page {\n        margin-left: 50px;\n        margin-right: 50px;\n        margin-top: 70px;\n        margin-bottom: 5;\n        size: $page_size $page_layout;\n    }\n\n\n    p {\n        margin: 0;\n        padding: 0;\n    }\n    \n    .infinit-company-details {\n        color: grey;\n    }\n    \n    #qr-bill {\n        width:100% !important;\n        box-sizing: border-box;\n        border-collapse: collapse;\n        color: #000;\n    }\n\n    #qr-bill td {\n        max-width: none;\n    }\n\n    .header-container {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        margin-bottom: 2rem;\n    }\n\n    .company-logo-container {\n        display: inline-block;\n        display: flex;\n        justify-content: flex-end;\n    }\n\n    .company-logo {\n        max-width: $company_logo_size;\n    }\n\n    #company-details {\n        display: flex;\n        flex-direction: column;\n        line-height: var(--line-height);\n    }\n\n    #company-details > p:first-child {\n        color: var(--primary-color);\n    }\n\n    #company-address {\n        display: flex;\n        flex-direction: column;\n        line-height: var(--line-height);\n    }\n\n    .entity-label {\n        font-size: 1.6rem;\n        margin-bottom: 1rem;\n        font-weight: bold;\n        color: var(--primary-color);\n    }\n\n    .project-name {\n        font-size: 1.2rem;\n        margin-bottom: 2rem;\n        color: black;\n    }\n\n    .client-and-entity-wrapper {\n/*        display: flex;*/\n        overflow: auto;\n        grid-template-columns: 1fr 1fr 1fr;\n        margin-bottom: 4rem;\n    }\n\n    #entity-details-custom {\n        float: right;\n        text-align: left;\n        line-height: var(--line-height) !important;\n    }\n\n    #entity-details-custom > tr,\n    #entity-details-custom td {\n        font-weight: normal;\n        padding-right: 15px;\n        line-height: var(--line-height) !important;\n    }\n\n    #entity-details-custom > tbody > tr > th:nth-child(2) {\n        text-align: right;\n    }\n\n    #entity-details {\n        float: right;\n        text-align: left;\n        line-height: var(--line-height) !important;\n    }\n\n    #entity-details > tr,\n    #entity-details th {\n        font-weight: normal;\n        padding-right: 15px;\n        line-height: var(--line-height) !important;\n    }\n\n    #entity-details > tbody > tr > th:nth-child(2) {\n        text-align: right;\n    }\n\n    #client-details {\n        float: left;\n        line-height: var(--line-height);\n        padding-right: 30px;\n    }\n\n    #client-details > :nth-child(1) {\n        font-weight: bold;\n    }\n\n    #shipping-details {\n        float: left;\n        display: $show_shipping_address;\n        line-height: var(--line-height);\n    }\n\n    [data-ref=\"table\"] {\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.1rem;\n        padding-bottom: 1.5rem;\n        padding-left: 1rem;\n    }\n\n    [data-ref=\"table\"] > tbody > tr > td {\n        border-top: 1px solid #d8d8d8;\n        border-bottom: 1px solid #d8d8d8;\n        padding: 1rem 1rem;\n    }\n\n    [data-ref=\"table\"] > tbody > tr > td:first-child {\n        color: var(--primary-color);\n    }\n\n    [data-ref=\"table\"] > thead > tr > th:last-child,\n    [data-ref=\"table\"] > tbody > tr > td:last-child {\n        text-align: right;\n    }\n\n    [data-ref=\"table\"] > thead > tr > th:last-child {\n        padding-right: 1rem;\n    }\n\n    [data-ref=\"table\"] > tbody > tr:nth-child(odd) {\n        background-color: #f5f5f5;\n    }\n\n    #table-totals {\n        margin-top: 0rem;\n        margin-bottom: 4rem;\n        display: grid;\n        grid-template-columns: 2fr 1fr;\n        padding-top: 0rem;\n        padding-right: 1rem;\n        padding-left: 1rem;\n        gap: 80px;\n        page-break-inside:avoid;\n        overflow: visible !important;\n    }\n\n    #table-totals .totals-table-right-side > div:nth-last-child(2) {\n        font-weight: bold;\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>*> :nth-child(2) {\n        text-align: right;\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\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: 0.5rem;\n    }\n\n    /** TODO PAY\n    #table-totals > div > div > img {\n        display: none;\n    } **/\n\n    #footer {\n        margin-top: 10px;\n        margin-left: 1rem;\n    }\n\n    #spacer-table{\n        width: 100%;\n    }\n\n    #footer-spacer {\n        height: 220px;\n        padding: 0rem 0rem;\n        margin-top: 0rem;\n    }\n\n    #footer-bottom {\n        width: 95%;\n        position: fixed;\n        bottom: 4rem;\n        padding-left: 1rem;\n    }\n\n    .footer-bottom-container {\n        display: flex;\n        justify-content: space-between;\n        font-family: Arial, sans-serif;\n        font-size: 14px;\n        color: #666;\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=\"total_table-public_notes\"] {\n        margin-top: 1rem;\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    /** .repeating-header,\n    .repeating-header-space, **/\n    .repeating-footer,\n    .repeating-footer-space {\n        height: 10px;\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    .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        float:right;\n\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>","header":"<div class=\"repeating-header\" id=\"header\"></div>","body":"<!-- Statement - TemplateID #infinit-auftragsbesaetigung ##statement##-->\n<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=\"header-container\">\n                        <div class=\"infinit-company-details\">$company.name | $company.address1, $company.postal_code $company.city, $company.country | $company.vat_number</div>\n                        <div class=\"company-logo-container\">\n                            <img class=\"company-logo\" src=\"$company.logo\" alt=\"$company.name logo\">\n                        </div>\n                    </div>\n                    <div class=\"client-and-entity-wrapper\">\n                        <div id=\"client-details\"></div>\n                        <div id=\"shipping-details\"></div>\n                        <div id=\"entity-details-custom\">\n                            <ninja><table class=\"right-align\" cellspacing=\"0\" cellpadding=\"0\">\n                                <tr>\n                                    <td>Auftragsdatum</td>\n                                    <td>{{ \"now\"|date('d.m.Y') }}</td>\n                                </tr>\n                                <tr>\n                                    <td>Angebotsnummer</td>\n                                    <td>$quote.number</td>\n                                </tr>\n                                <tr>\n                                    <td>Bestellnummer</td>\n                                    <td>$quote.po_number</td>\n                                </tr>\n                                <tr>\n                                    <td>Kundennummer</td>\n                                    <td>$client.number</td>\n                                </tr>\n                            </table></ninja>\n                        </div>\n                    </div>\n                    <p class=\"entity-label\">Auftragsbestätigung</p>\n                    <p class=\"project-name\">$invoice.custom2</p>\n                    <p>Wir bedanken uns für Ihren Auftrag. Gemäß unseres Angebots Nr.: $quote.number erbringen wir folgende Leistungen:</p>\n    <ninja>\n        {% set quote = quotes|first %}\n        <table width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" class=\"product-table\">\n            <thead class=\"table-header\">\n                <tr class=\"table-header primary-color-highlight\">\n                    <th class=\"\" width=\"15%\">$item_label</th>\n                    <th class=\"\" width=\"40%\">$description_label</th>\n                    <th class=\"\" width=\"7%\">$quantity_label</th>\n                    <th class=\"totals-row-label centered\" width=\"10%\">Einheit</th>\n                    <th class=\"totals-row-label centered\" width=\"10%\">Einzelpreis</th>\n                    <th class=\"totals-row-label centered\" width=\"10%\">Summe</th>\n                </tr>\n            </thead>\n            <tbody class=\"table-body\">\n                {% for item in quote.line_items|filter(item => item.type_id == 1) %}\n                <tr class=\"item-row\">\n                    <td class=\"\">{{ item.product_key }}</td>\n                    <td class=\"\">{{ item.notes }}</td>\n                    <td class=\"\">{{ item.quantity }}</td>\n                    <td class=\"\">{{ item.custom_value1 }}</td>\n                    <td class=\"\">{{ item.cost }}</td>\n                    <td class=\"\">{{ item.line_total }}</td>\n                </tr>\n                {% endfor %}\n            </tbody>\n        </table>\n        <table class=\"right-align\" cellspacing=\"0\" cellpadding=\"0\">\n            <tr>\n                <td>Zwischensumme</td>\n                <td>{{ quote.amount - quote.total_taxes + quote.discount }}</td>\n            </tr>\n            <tr>\n                <td>Rabatt</td>\n                <td>{{ quote.discount }}</td>\n            </tr>\n            <tr>\n                <td>Netto</td>\n                <td>{{ quote.amount - quote.total_taxes }}</td>\n            </tr>\n            <tr>\n                <td>{{ quote.tax_name1 }}</td>\n                <td>{{ quote.total_taxes }}</td>\n            </tr>\n            <tr>\n                <td>Gesamt</td>\n                <td>{{ quote.amount }}</td>\n            </tr>\n        </table>\n    </ninja>\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                    <p data-ref=\"total_table-footer\">$entity_footer</p>\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>","product":"","task":"","footer":"<div class=\"repeating-footerx\" id=\"footer\">\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 id=\"footer-bottom\">\n    <div class=\"footer-bottom-container\">\n        <div>\n            <p>Firma: $company.name</p>\n            <p>Firmenbuch-Nr.: $company.id_number</p>\n            <p>Firmengericht: $company1</p>\n        </div>\n        <div>\n            <p>Bank: $company2</p>\n            <p>IBAN: $company3</p>\n            <p>BIC: $company4</p>\n        </div>\n        <div>\n            <p>E-Mail: $company.email</p>\n            <p>Telefon: $company.phone</p>\n            <p>Web: <a href=\"$company.website\">$company.website</a></p>\n        </div>\n    </div>\n</div>"}