From 2bae9bfc3110869eea2eef702e5aa4ca8b5363e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20Beganovi=C4=87?= <k1pstabug@gmail.com>
Date: Wed, 7 Oct 2020 18:35:30 +0200
Subject: [PATCH] Update designs: - Remove <head>, <body>, <html> tags - Unify
 padding/margin variables

---
 resources/views/pdf-designs/bold.html     | 321 +++++++++--------
 resources/views/pdf-designs/business.html | 384 ++++++++++----------
 resources/views/pdf-designs/clean.html    | 297 +++++++--------
 resources/views/pdf-designs/creative.html | 324 +++++++++--------
 resources/views/pdf-designs/elegant.html  | 340 +++++++++---------
 resources/views/pdf-designs/hipster.html  | 358 +++++++++---------
 resources/views/pdf-designs/modern.html   | 419 +++++++++++-----------
 resources/views/pdf-designs/plain.html    | 250 ++++++-------
 resources/views/pdf-designs/playful.html  | 360 ++++++++++---------
 9 files changed, 1561 insertions(+), 1492 deletions(-)
diff --git a/resources/views/pdf-designs/bold.html b/resources/views/pdf-designs/bold.html
index 0fe697d0c0c1..9ba2e78d4d2b 100644
--- a/resources/views/pdf-designs/bold.html
+++ b/resources/views/pdf-designs/bold.html
@@ -1,179 +1,184 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<style id="style">
+    :root {
+        --primary-color: $primary_color;
+        --secondary-color: $secondary_color;
+    }
 
-        <style id="style">
-            :root {
-                --primary-color: $primary_color;
-                --secondary-color: $secondary_color;
-            }
+    * {
+        margin: 0;
+        padding: 0;
+        font-size: "$font_size";
+    }
 
-            * {
-                margin: 0;
-                padding: 0;
-                font-size: '$font_size';
-            }
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
+    }
 
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-            }
+    p {
+        margin: 0;
+        padding: 0;
+        page-break-after: always;
+    }
 
-            p {
-                margin: 0;
-                padding: 0;
-                page-break-after: always;
-            }
+    @media print {
+        body {
+            margin-top: 0;
+            margin-right: 0;
+        }
+    }
 
-            @media print {
-                body {
-                    margin-top: 0;
-                    margin-right: 0;
-                }
-            }
-            .header-wrapper {
-                display: grid;
-                grid-template-columns: 1.5fr 1fr 1fr;
-                background-color: #2d2c2a;
-                padding: 3rem;
-                color: white;
-            }
+    .header-wrapper {
+        display: grid;
+        grid-template-columns: 1.5fr 1fr 1fr;
+        background-color: #2d2c2a;
+        padding: 3rem;
+        color: white;
+    }
 
-            .company-logo {
-                height: 6rem;
-                padding: 2rem;
-                background-color: white;
-                margin: 2rem;
-                margin-top: -4rem;
-            }
+    .company-logo {
+        height: 6rem;
+        padding: 2rem;
+        background-color: white;
+        margin: -4rem 2rem 2rem;
+    }
 
-            #company-details,
-            #company-address {
-                display: flex;
-                flex-direction: column;
-            }
+    #company-details,
+    #company-address {
+        display: flex;
+        flex-direction: column;
+    }
 
-            #client-details {
-                margin: 2rem;
-                display: flex;
-                flex-direction: column;
-            }
-            #client-details > :first-child {
-                font-weight: bold;
-            }
+    #client-details {
+        margin: 2rem;
+        display: flex;
+        flex-direction: column;
+    }
 
-            .client-entity-wrapper {
-                display: grid;
-                grid-template-columns: 1.5fr 1fr;
-            }
+    #client-details > :first-child {
+        font-weight: bold;
+    }
 
-            .entity-details-wrapper {
-                background-color: var(--primary-color);
-                padding: 1rem;
-            }
+    .client-entity-wrapper {
+        display: grid;
+        grid-template-columns: 1.5fr 1fr;
+    }
 
-            #entity-details {
-                width: 100%;
-                text-align: left;
-                color: white !important;
-            }
-            #entity-details > tr,
-            #entity-details th {
-                font-weight: normal;
-                padding-bottom: 0.5rem;
-            }
+    .entity-details-wrapper {
+        background-color: var(--primary-color);
+        padding: 1rem;
+    }
 
-            #product-table {
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-                margin-top: 3rem;
-                margin-bottom: 200px;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                padding: 2rem;
-                font-size: 1.5rem;
-            }
-            #product-table > thead > tr > th:last-child {
-                text-align: right;
-            }
-            #product-table > tbody > tr > td {
-                padding: 1.5rem;
-            }
-            #product-table > tbody > tr > td:last-child {
-                text-align: right;
-            }
-            #product-table > tbody > tr > td:first-child {
-                font-weight: bold;
-            }
-            #product-table > tbody > tr:nth-child(odd) {
-                background-color: #ebebeb;
-            }
+    #entity-details {
+        width: 100%;
+        text-align: left;
+        color: white !important;
+    }
 
-            #product-table-footer {
-                page-break-inside: avoid;
-            }
+    #entity-details > tr,
+    #entity-details th {
+        font-weight: normal;
+        padding-bottom: 0.5rem;
+    }
 
-            #product-table-footer > * {
-                display: grid;
-                grid-template-columns: 3fr 1fr 1fr;
-                padding-top: .5rem;
-                padding-left: 1.2rem;
-                gap: 20px;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due-label'],
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                font-weight: bold;
-                font-size: 1.4rem;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                color: var(--primary-color);
-            }
-            #product-table-footer > * > :last-child {
-                text-align: right;
-                padding-right: 1.5rem;
-            }
-        </style>
-    </head>
+    #product-table {
+        min-width: 100%;
+        table-layout: fixed;
+        overflow-wrap: break-word;
+        margin-top: 3rem;
+        margin-bottom: 200px;
+    }
 
-    <div class="header-wrapper" id="header">
-        <div></div>
+    #product-table > thead {
+        text-align: left;
+    }
 
-        <div id="company-details"></div>
-        <div id="company-address"></div>
+    #product-table > thead > tr > th {
+        padding: 2rem;
+        font-size: 1.5rem;
+    }
+
+    #product-table > thead > tr > th:last-child {
+        text-align: right;
+    }
+
+    #product-table > tbody > tr > td {
+        padding: 1.5rem;
+    }
+
+    #product-table > tbody > tr > td:last-child {
+        text-align: right;
+    }
+
+    #product-table > tbody > tr > td:first-child {
+        font-weight: bold;
+    }
+
+    #product-table > tbody > tr:nth-child(odd) {
+        background-color: #ebebeb;
+    }
+
+    #product-table-footer {
+        page-break-inside: avoid;
+    }
+
+    #product-table-footer > * {
+        display: grid;
+        grid-template-columns: 3fr 1fr 1fr;
+        padding-top: .5rem;
+        padding-left: 1.2rem;
+        gap: 20px;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due-label'],
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        font-weight: bold;
+        font-size: 1.4rem;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        color: var(--primary-color);
+    }
+
+    #product-table-footer > * > :last-child {
+        text-align: right;
+        padding-right: 1.5rem;
+    }
+</style>
+
+<div class="header-wrapper" id="header">
+    <div></div>
+
+    <div id="company-details"></div>
+    <div id="company-address"></div>
+</div>
+
+<div id="body">
+    <img
+        class="company-logo"
+        src="$company.logo"
+        alt="$company.name logo"
+    />
+
+    <div class="client-entity-wrapper">
+        <div id="client-details" cellspacing="0"></div>
+
+        <div class="entity-details-wrapper">
+            <table id="entity-details"></table>
+        </div>
     </div>
 
-    <body id="body">
-        <img
-            class="company-logo"
-            src="$company.logo"
-            alt="$company.name logo"
-        />
+    <table id="product-table" cellspacing="0"></table>
 
-        <div class="client-entity-wrapper">
-            <div id="client-details" cellspacing="0"></div>
+    <div id="product-table-footer" cellspacing="0"></div>
+</div>
 
-            <div class="entity-details-wrapper">
-                <table id="entity-details"></table>
-            </div>
-        </div>
+<div id="footer"></div>
 
-        <table id="product-table" cellspacing="0"></table>
-
-        <div id="product-table-footer" cellspacing="0"></div>
-    </body>
-
-    <div id="footer"></div>
-</html>
diff --git a/resources/views/pdf-designs/business.html b/resources/views/pdf-designs/business.html
index 4d0c35860654..66424603c21d 100644
--- a/resources/views/pdf-designs/business.html
+++ b/resources/views/pdf-designs/business.html
@@ -1,211 +1,221 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<style id="style">
+    :root {
+        --primary-color: $primary_color;
+        --secondary-color: $secondary_color;
+    }
 
-        <style id="style">
-            :root {
-                --primary-color: $primary_color;
-                --secondary-color: $secondary_color;
-            }
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: "$font_size";
+    }
 
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-                font-size: '$font_size';
-            }
+    @page {
+        margin: 1cm;
+    }
 
-            @page {
-                margin: 1cm;
-            }
+    p {
+        margin: 0;
+        padding: 0;
+    }
 
-            p {
-                margin: 0;
-                padding: 0;
-            }
+    .header-container {
+        display: grid;
+        grid-template-columns: 1.8fr 1fr 1fr;
+        grid-gap: 20px;
+    }
 
-            .header-container {
-                display: grid;
-                grid-template-columns: 1.8fr 1fr 1fr;
-                grid-gap: 20px;
-            }
-            .header-container > span {
-                display: block;
-            }
+    .header-container > span {
+        display: block;
+    }
 
-            .company-logo {
-                height: 4rem;
-            }
+    .company-logo {
+        height: 4rem;
+    }
 
-            #company-details {
-                display: flex;
-                flex-direction: column;
-                color: #b1b1b1;
-            }
-            #company-details > * {
-                margin-bottom: 0.8rem;
-            }
+    #company-details {
+        display: flex;
+        flex-direction: column;
+        color: #b1b1b1;
+    }
 
-            #company-address {
-                display: flex;
-                flex-direction: column;
-                color: #b1b1b1;
-            }
-            #company-address > * {
-                margin-bottom: 0.8rem;
-            }
+    #company-details > * {
+        margin-bottom: 0.8rem;
+    }
 
-            .entity-issued-to {
-                margin-top: 3rem;
-                font-weight: bold;
-            }
+    #company-address {
+        display: flex;
+        flex-direction: column;
+        color: #b1b1b1;
+    }
 
-            .client-and-entity-wrapper {
-                display: grid;
-                grid-template-columns: 2fr 1.5fr;
-                gap: 20px;
-            }
+    #company-address > * {
+        margin-bottom: 0.8rem;
+    }
 
-            #client-details {
-                display: flex;
-                flex-direction: column;
-                color: var(--primary-color);
-            }
-            #client-details > * {
-                margin-bottom: 0.5rem;
-            }
-            #client-details > span:nth-child(1) {
-                font-weight: bold;
-            }
+    .entity-issued-to {
+        margin-top: 3rem;
+        font-weight: bold;
+    }
 
-            #entity-details {
-                background-color: var(--primary-color);
-                padding: 0.8rem;
-                border-radius: 1rem;
-                width: 100%;
-                color: white;
-                text-align: left;
-            }
-            #entity-details th {
-                font-weight: normal;
-            }
+    .client-and-entity-wrapper {
+        display: grid;
+        grid-template-columns: 2fr 1.5fr;
+        gap: 20px;
+    }
 
-            #product-table {
-                margin-top: 3.5rem;
-                margin-bottom: 200px;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-                background: var(--secondary-color);
-            }
-            #product-table > thead > tr > th {
-                padding: 1rem;
-                color: white;
-                font-weight: semibold;
-            }
-            #product-table > thead > tr > th:first-child {
-                border-top-left-radius: 1rem;
-            }
-            #product-table > thead > tr > th:last-child {
-                border-top-right-radius: 1rem;
-                text-align: right;
-            }
-            #product-table > tbody > tr > td {
-                padding: 1rem;
-            }
-            #product-table > tbody > tr > td:last-child {
-                text-align: right;
-            }
-            #product-table > tbody > tr:nth-child(odd) > td {
-                background: #e8e8e8;
-            }
-            #product-table > tbody > tr:nth-child(even) > td {
-                background: #f7f7f7;
-            }
+    #client-details {
+        display: flex;
+        flex-direction: column;
+        color: var(--primary-color);
+    }
 
-            [data-element='product-table-balance-due-label'],
-            [data-element='product-table-balance-due'] {
-                color: var(--secondary-color) !important;
-                font-weight: bold !important;
-            }
+    #client-details > * {
+        margin-bottom: 0.5rem;
+    }
 
-            @media print {
-                body {
-                    margin-top: 0;
-                    margin-right: 0;
-                }
-            }
+    #client-details > span:nth-child(1) {
+        font-weight: bold;
+    }
 
-            #product-table-footer {
-                page-break-inside: avoid;
-            }
+    #entity-details {
+        background-color: var(--primary-color);
+        padding: 0.8rem;
+        border-radius: 1rem;
+        width: 100%;
+        color: white;
+        text-align: left;
+    }
 
-            #product-table-footer > *:last-child {
-                border-bottom-left-radius: 1rem;
-                border-bottom-right-radius: 1rem;
-            }
-            #product-table-footer > * {
-                background-color: #f7f7f7;
-                display: grid;
-                grid-template-columns: 3fr 1fr 1fr;
-                gap: 20px;
-                padding-left: 1rem;
-                padding-top: 0.5rem;
-                padding-bottom: 0.8rem;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due-label'],
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                font-weight: bold;
-                font-size: 1.2rem;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                color: red;
-            }
-            #product-table-footer > * > :last-child {
-                text-align: right;
-                padding-right: 1rem;
-            }
-        </style>
-    </head>
+    #entity-details th {
+        font-weight: normal;
+    }
 
-    <div id="header"></div>
+    #product-table {
+        margin-top: 3.5rem;
+        margin-bottom: 200px;
+        min-width: 100%;
+        table-layout: fixed;
+        overflow-wrap: break-word;
+    }
 
-    <body id="body">
-        <div class="header-container">
-            <img
-                src="$company.logo"
-                class="company-logo"
-                alt="$company.name logo"
-            />
+    #product-table > thead {
+        text-align: left;
+        background: var(--secondary-color);
+    }
 
-            <div id="company-details"></div>
-            <div id="company-address"></div>
+    #product-table > thead > tr > th {
+        padding: 1rem;
+        color: white;
+        font-weight: semibold;
+    }
+
+    #product-table > thead > tr > th:first-child {
+        border-top-left-radius: 1rem;
+    }
+
+    #product-table > thead > tr > th:last-child {
+        border-top-right-radius: 1rem;
+        text-align: right;
+    }
+
+    #product-table > tbody > tr > td {
+        padding: 1rem;
+    }
+
+    #product-table > tbody > tr > td:last-child {
+        text-align: right;
+    }
+
+    #product-table > tbody > tr:nth-child(odd) > td {
+        background: #e8e8e8;
+    }
+
+    #product-table > tbody > tr:nth-child(even) > td {
+        background: #f7f7f7;
+    }
+
+    [data-element='product-table-balance-due-label'],
+    [data-element='product-table-balance-due'] {
+        color: var(--secondary-color) !important;
+        font-weight: bold !important;
+    }
+
+    @media print {
+        body {
+            margin-top: 0;
+            margin-right: 0;
+        }
+    }
+
+    #product-table-footer {
+        page-break-inside: avoid;
+    }
+
+    #product-table-footer > *:last-child {
+        border-bottom-left-radius: 1rem;
+        border-bottom-right-radius: 1rem;
+    }
+
+    #product-table-footer > * {
+        background-color: #f7f7f7;
+        display: grid;
+        grid-template-columns: 3fr 1fr 1fr;
+        gap: 20px;
+        padding-left: 1rem;
+        padding-top: 0.5rem;
+        padding-bottom: 0.8rem;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due-label'],
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        font-weight: bold;
+        font-size: 1.2rem;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        color: red;
+    }
+
+    #product-table-footer > * > :last-child {
+        text-align: right;
+        padding-right: 1rem;
+    }
+</style>
+
+<div id="header"></div>
+
+<div id="body">
+    <div class="header-container">
+        <img
+            src="$company.logo"
+            class="company-logo"
+            alt="$company.name logo"
+        />
+
+        <div id="company-details"></div>
+        <div id="company-address"></div>
+    </div>
+
+    <p class="entity-issued-to">$entity_issued_to_label:</p>
+    <div class="client-and-entity-wrapper">
+        <div id="client-details"></div>
+
+        <div class="entity-details-wrapper">
+            <table id="entity-details" cellspacing="0"></table>
         </div>
+    </div>
 
-        <p class="entity-issued-to">$entity_issued_to_label:</p>
-        <div class="client-and-entity-wrapper">
-            <div id="client-details"></div>
+    <table id="product-table" cellspacing="0"></table>
 
-            <div class="entity-details-wrapper">
-                <table id="entity-details" cellspacing="0"></table>
-            </div>
-        </div>
+    <div id="product-table-footer" cellspacing="0"></div>
+</div>
 
-        <table id="product-table" cellspacing="0"></table>
-
-        <div id="product-table-footer" cellspacing="0"></div>
-    </body>
-
-    <div id="footer"></div>
-</html>
+<div id="footer"></div>
diff --git a/resources/views/pdf-designs/clean.html b/resources/views/pdf-designs/clean.html
index d745a450e910..d460689533f1 100644
--- a/resources/views/pdf-designs/clean.html
+++ b/resources/views/pdf-designs/clean.html
@@ -1,168 +1,169 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<style id="style">
+    :root {
+        --primary-color: $primary_color;
+        --secondary-color: $secondary_color;
+    }
 
-        <style id="style">
-            :root {
-                --primary-color: $primary_color;
-                --secondary-color: $secondary_color;
-            }
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: "$font_size";
+        margin: 1cm;
+    }
 
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-                font-size: '$font_size';
-                margin: 1cm;
-            }
+    p {
+        margin: 0;
+        padding: 0;
+    }
 
-            p {
-                margin: 0;
-                padding: 0;
-            }
+    .header-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 20px;
+    }
 
-            .header-container {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-                gap: 20px;
-            }
-            .header-container .company-logo {
-                height: 4rem;
-            }
+    .header-container .company-logo {
+        height: 4rem;
+    }
 
-            #company-details {
-                display: flex;
-                flex-direction: column;
-                color: #9f9f9f;
-            }
-            #company-details > span:first-child {
-                color: var(--primary-color);
-            }
+    #company-details {
+        display: flex;
+        flex-direction: column;
+        color: #9f9f9f;
+    }
 
-            #company-address {
-                display: flex;
-                flex-direction: column;
-                color: #9f9f9f;
-            }
+    #company-details > span:first-child {
+        color: var(--primary-color);
+    }
 
-            .entity-label {
-                text-transform: uppercase;
-                margin-top: 3.5rem;
-                margin-bottom: 1rem;
-                font-weight: semibold;
-                color: var(--primary-color);
-            }
+    #company-address {
+        display: flex;
+        flex-direction: column;
+        color: #9f9f9f;
+    }
 
-            .client-and-entity-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                padding-left: 1rem;
-                padding-right: 1rem;
-                padding-top: 1rem;
-                padding-bottom: 1rem;
-                border-top: 1px solid #9f9f9f;
-                border-bottom: 1px solid #9f9f9f;
-            }
+    .entity-label {
+        text-transform: uppercase;
+        margin-top: 3.5rem;
+        margin-bottom: 1rem;
+        font-weight: bold;
+        color: var(--primary-color);
+    }
 
-            #entity-details {
-                text-align: left;
-            }
-            #entity-details > tr,
-            #entity-details th {
-                font-weight: normal;
-            }
+    .client-and-entity-wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        padding: 1rem;
+        border-top: 1px solid #9f9f9f;
+        border-bottom: 1px solid #9f9f9f;
+    }
 
-            #client-details {
-                display: flex;
-                flex-direction: column;
-            }
-            #client-details > :first-child {
-                font-weight: bold;
-            }
+    #entity-details {
+        text-align: left;
+    }
 
-            #product-table {
-                margin-top: 3rem;
-                margin-bottom: 200px;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                font-size: 1.1rem;
-                padding-bottom: 1.5rem;
-                padding-left: 1rem;
-            }
-            #product-table > tbody > tr > td {
-                border-bottom: 1px solid #9f9f9f;
-                padding: 1rem;
-            }
-            #product-table > tbody > tr > td:first-child {
-                color: var(--primary-color);
-            }
-            #product-table > tbody > tr:nth-child(odd) {
-                background-color: #f5f5f5;
-            }
+    #entity-details > tr,
+    #entity-details th {
+        font-weight: normal;
+    }
 
-            #product-table-footer {
-                page-break-inside: avoid;
-            }
+    #client-details {
+        display: flex;
+        flex-direction: column;
+    }
 
-            #product-table-footer > * {
-                display: grid;
-                grid-template-columns: 3fr 1fr 1fr;
-                padding-top: .5rem;
-                padding-left: 1rem;
-                gap: 20px;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due-label'],
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                font-weight: bold;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                color: var(--primary-color);
-            }
-            #product-table-footer > * > :last-child {
-                text-align: right;
-                padding-right: 1rem;
-            }
-        </style>
-    </head>
+    #client-details > :first-child {
+        font-weight: bold;
+    }
 
-    <div id="header"></div>
+    #product-table {
+        margin-top: 3rem;
+        margin-bottom: 200px;
+        min-width: 100%;
+        table-layout: fixed;
+        overflow-wrap: break-word;
+    }
 
-    <body id="body">
-        <div class="header-container">
-            <img
-                class="company-logo"
-                src="$company.logo"
-                alt="$company.name logo"
-            />
+    #product-table > thead {
+        text-align: left;
+    }
 
-            <div id="company-details"></div>
-            <div id="company-address"></div>
-        </div>
+    #product-table > thead > tr > th {
+        font-size: 1.1rem;
+        padding-bottom: 1.5rem;
+        padding-left: 1rem;
+    }
 
-        <p class="entity-label">$entity_label</p>
-        <div class="client-and-entity-wrapper">
-            <table id="entity-details" cellspacing="0"></table>
+    #product-table > tbody > tr > td {
+        border-bottom: 1px solid #9f9f9f;
+        padding: 1rem;
+    }
 
-            <div id="client-details"></div>
-        </div>
+    #product-table > tbody > tr > td:first-child {
+        color: var(--primary-color);
+    }
 
-        <table id="product-table" cellspacing="0"></table>
-        <div id="product-table-footer" cellspacing="0"></div>
-    </body>
+    #product-table > tbody > tr:nth-child(odd) {
+        background-color: #f5f5f5;
+    }
 
-    <div id="footer"></div>
-</html>
+    #product-table-footer {
+        page-break-inside: avoid;
+    }
+
+    #product-table-footer > * {
+        display: grid;
+        grid-template-columns: 3fr 1fr 1fr;
+        padding-top: .5rem;
+        padding-left: 1rem;
+        gap: 20px;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due-label'],
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        font-weight: bold;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        color: var(--primary-color);
+    }
+
+    #product-table-footer > * > :last-child {
+        text-align: right;
+        padding-right: 1rem;
+    }
+</style>
+
+<div id="header"></div>
+
+<div id="body">
+    <div class="header-container">
+        <img
+            class="company-logo"
+            src="$company.logo"
+            alt="$company.name logo"
+        />
+
+        <div id="company-details"></div>
+        <div id="company-address"></div>
+    </div>
+
+    <p class="entity-label">$entity_label</p>
+    <div class="client-and-entity-wrapper">
+        <table id="entity-details" cellspacing="0"></table>
+
+        <div id="client-details"></div>
+    </div>
+
+    <table id="product-table" cellspacing="0"></table>
+    <div id="product-table-footer" cellspacing="0"></div>
+</div>
+
+<div id="footer"></div>
diff --git a/resources/views/pdf-designs/creative.html b/resources/views/pdf-designs/creative.html
index 1dcc67f8cd8f..cebdbfb2fe22 100644
--- a/resources/views/pdf-designs/creative.html
+++ b/resources/views/pdf-designs/creative.html
@@ -1,175 +1,187 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<style id="style">
+    :root {
+        --primary-color: $primary_color;
+        --secondary-color: $secondary_color;
+    }
 
-        <style id="style">
-            :root {
-                --primary-color: $primary_color;
-                --secondary-color: $secondary_color;
-            }
+    * {
+        font-size: "$font_size";
+    }
 
-            * {
-                font-size: '$font_size';
-            }
+    p {
+        margin: 0;
+        padding: 0;
+        page-break-after: always;
+    }
 
-            p {
-                margin: 0;
-                padding: 0;
-                page-break-after: always;
-            }
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
+        margin-top: 1cm;
+        margin-bottom: 1cm;
+    }
 
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-                margin-top: 1cm;
-                margin-bottom: 1cm;
-            }
+    @media print {
+        body {
+            margin: 0;
+            padding: 0;
+        }
+    }
 
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
+    body {
+        margin: 2rem;
+    }
 
-            .header-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-                gap: 20px;
-            }
-            .header-wrapper .company-logo {
-                height: 5rem;
-            }
-            .header-wrapper #client-details,
-            .header-wrapper #company-details,
-            .header-wrapper #company-address {
-                display: flex;
-                flex-direction: column;
-            }
-            .header-wrapper #client-details > *:first-child {
-                font-weight: bold;
-            }
-            .header-wrapper .company-info-wrapper > * {
-                margin-bottom: 1rem;
-            }
+    .header-wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 20px;
+    }
 
-            .entity-label-wrapper {
-                display: grid;
-                grid-template-columns: 2fr 1fr;
-                margin-top: 3rem;
-            }
-            .entity-label-wrapper .entity-label > * {
-                font-size: 3rem;
-            }
-            .entity-label-wrapper .entity-label > *:first-child {
-                text-transform: uppercase;
-            }
-            .entity-label-wrapper .entity-label > *:last-child {
-                color: var(--primary-color);
-                font-style: italic;
-            }
-            .entity-label-wrapper #entity-details {
-                text-align: left;
-            }
-            .entity-label-wrapper #entity-details > tr,
-            .entity-label-wrapper #entity-details th {
-                font-weight: normal;
-            }
+    .header-wrapper .company-logo {
+        height: 5rem;
+    }
 
-            #product-table {
-                margin-top: 3rem;
-                margin-bottom: 200px;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-                border-top: 5px solid var(--primary-color);
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                font-size: 1.1rem;
-                padding: 1rem;
-            }
-            #product-table > thead > tr > th:last-child {
-                text-align: right;
-            }
-            #product-table > tbody > tr > td:last-child {
-                text-align: right;
-            }
-            #product-table > tbody > tr > td {
-                padding: 1rem;
-            }
-            #product-table > tbody > tr:nth-child(odd) {
-                background-color: #e8e8e8;
-            }
+    .header-wrapper #client-details,
+    .header-wrapper #company-details,
+    .header-wrapper #company-address {
+        display: flex;
+        flex-direction: column;
+    }
 
-            #product-table-footer {
-                page-break-inside: avoid;
-            }
-            
-            #product-table-footer > * {
-                display: grid;
-                grid-template-columns: 3fr 1fr 1fr;
-                padding-top: 1rem;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                font-weight: bold;
-                color: var(--primary-color);
-            }
-            #product-table-footer > * > * {
-                padding-left: 1rem;
-            }
-            #product-table-footer > *:last-child > * {
-                border-top: 5px solid var(--primary-color);
-                padding-top: 1rem;
-            }
-            #product-table-footer > * > :last-child {
-                text-align: right;
-                padding-right: 1rem;
-            }
-        </style>
-    </head>
+    .header-wrapper #client-details > *:first-child {
+        font-weight: bold;
+    }
 
-    <div id="header"></div>
+    .header-wrapper .company-info-wrapper > * {
+        margin-bottom: 1rem;
+    }
 
-    <body id="body">
-        <div class="header-wrapper">
-            <div id="client-details"></div>
+    .entity-label-wrapper {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        margin-top: 3rem;
+    }
 
-            <div class="company-info-wrapper">
-                <div id="company-details"></div>
-                <div id="company-address"></div>
-            </div>
+    .entity-label-wrapper .entity-label > * {
+        font-size: 3rem;
+    }
 
-            <img
-                class="company-logo"
-                src="$company.logo"
-                alt="$company.name logo"
-            />
+    .entity-label-wrapper .entity-label > *:first-child {
+        text-transform: uppercase;
+    }
+
+    .entity-label-wrapper .entity-label > *:last-child {
+        color: var(--primary-color);
+        font-style: italic;
+    }
+
+    .entity-label-wrapper #entity-details {
+        text-align: left;
+    }
+
+    .entity-label-wrapper #entity-details > tr,
+    .entity-label-wrapper #entity-details th {
+        font-weight: normal;
+    }
+
+    #product-table {
+        margin-top: 3rem;
+        margin-bottom: 200px;
+        min-width: 100%;
+        table-layout: fixed;
+        overflow-wrap: break-word;
+        border-top: 5px solid var(--primary-color);
+    }
+
+    #product-table > thead {
+        text-align: left;
+    }
+
+    #product-table > thead > tr > th {
+        font-size: 1.1rem;
+        padding: 1rem;
+    }
+
+    #product-table > thead > tr > th:last-child {
+        text-align: right;
+    }
+
+    #product-table > tbody > tr > td:last-child {
+        text-align: right;
+    }
+
+    #product-table > tbody > tr > td {
+        padding: 1rem;
+    }
+
+    #product-table > tbody > tr:nth-child(odd) {
+        background-color: #e8e8e8;
+    }
+
+    #product-table-footer {
+        page-break-inside: avoid;
+    }
+
+    #product-table-footer > * {
+        display: grid;
+        grid-template-columns: 3fr 1fr 1fr;
+        padding-top: 1rem;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        font-weight: bold;
+        color: var(--primary-color);
+    }
+
+    #product-table-footer > * > * {
+        padding-left: 1rem;
+    }
+
+    #product-table-footer > *:last-child > * {
+        border-top: 5px solid var(--primary-color);
+        padding-top: 1rem;
+    }
+
+    #product-table-footer > * > :last-child {
+        text-align: right;
+        padding-right: 1rem;
+    }
+</style>
+
+<div id="header"></div>
+
+<div id="body">
+    <div class="header-wrapper">
+        <div id="client-details"></div>
+
+        <div class="company-info-wrapper">
+            <div id="company-details"></div>
+            <div id="company-address"></div>
         </div>
 
-        <div class="entity-label-wrapper">
-            <h1 class="entity-label">
-                <span>$entity_label</span>&nbsp;
-                <span>#$entity_number</span>
-            </h1>
+        <img
+            class="company-logo"
+            src="$company.logo"
+            alt="$company.name logo"
+        />
+    </div>
 
-            <table id="entity-details" cellspacing="0"></table>
-        </div>
+    <div class="entity-label-wrapper">
+        <h1 class="entity-label">
+            <span>$entity_label</span>&nbsp;
+            <span>#$entity_number</span>
+        </h1>
 
-        <table id="product-table" cellspacing="0"></table>
+        <table id="entity-details" cellspacing="0"></table>
+    </div>
 
-        <div id="product-table-footer" cellspacing="0"></div>
-    </body>
+    <table id="product-table" cellspacing="0"></table>
 
-    <div id="footer"></div>
-</html>
+    <div id="product-table-footer" cellspacing="0"></div>
+</div>
+
+<div id="footer"></div>
diff --git a/resources/views/pdf-designs/elegant.html b/resources/views/pdf-designs/elegant.html
index dcc635d8e66a..167805e5f150 100644
--- a/resources/views/pdf-designs/elegant.html
+++ b/resources/views/pdf-designs/elegant.html
@@ -1,191 +1,199 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<style id="style">
+    :root {
+        --primary-color: $primary_color;
+        --secondary-color: $secondary_color;
+    }
 
-        <style id="style">
-            :root {
-                --primary-color: $primary_color;
-                --secondary-color: $secondary_color;
-            }
+    * {
+        font-size: "$font_size";
+    }
 
-            * {
-                font-size: '$font_size';
-            }
+    p {
+        margin: 0;
+        padding: 0;
+    }
 
-            p {
-                margin: 0;
-                padding: 0;
-            }
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
+        margin: 1cm;
+    }
 
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-                margin: 1cm;
-            }
+    .company-logo-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        padding-bottom: 2.5rem;
+        border-bottom: 4px solid;
+    }
 
-            .company-logo-wrapper {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                padding-bottom: 2.5rem;
-                border-bottom: 4px solid;
-            }
-            .company-logo-wrapper .company-logo {
-                height: 5rem;
-            }
+    .company-logo-wrapper .company-logo {
+        height: 5rem;
+    }
 
-            .double-border {
-                margin-top: 3px;
-                border-color: black;
-            }
+    .double-border {
+        margin-top: 3px;
+        border-color: black;
+    }
 
-            .client-entity-wrapper {
-                display: grid;
-                grid-template-columns: 1.8fr 1.2fr;
-                margin-top: 3rem;
-                gap: 10px;
-            }
-            .client-entity-wrapper .wrapper-info-text {
-                display: block;
-                font-size: 1.5rem;
-                font-weight: normal;
-            }
-            .client-entity-wrapper .wrapper-left-side {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-            }
-            .client-entity-wrapper .wrapper-left-side #client-details,
-            .client-entity-wrapper .wrapper-left-side #company-details,
-            .client-entity-wrapper .wrapper-left-side #company-address {
-                display: flex;
-                flex-direction: column;
-                margin-top: 0.5rem;
-            }
-            .client-entity-wrapper .wrapper-left-side .company-info {
-                border-left: 1px solid;
-                padding-left: 1rem;
-            }
-            .client-entity-wrapper #entity-details {
-                text-align: left;
-                margin-top: 0.5rem;
-                min-width: 100%;
-            }
-            .client-entity-wrapper #entity-details > tr,
-            .client-entity-wrapper #entity-details th {
-                font-weight: normal;
-            }
+    .client-entity-wrapper {
+        display: grid;
+        grid-template-columns: 1.8fr 1.2fr;
+        margin-top: 3rem;
+        gap: 10px;
+    }
 
-            #product-table {
-                margin-top: 3rem;
-                margin-bottom: 200px;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                font-size: 1.1rem;
-                padding-bottom: 1.5rem;
-                padding-left: 1rem;
-                color: var(--primary-color);
-                font-weight: medium;
-            }
-            #product-table > thead > tr > th:last-child {
-                text-align: right;
-            }
-            #product-table > tbody > tr > td {
-                border-bottom: 1px solid;
-                padding: 1rem;
-            }
-            #product-table > tbody > tr > td:last-child {
-                text-align: right;
-            }
+    .client-entity-wrapper .wrapper-info-text {
+        display: block;
+        font-size: 1.5rem;
+        font-weight: normal;
+    }
 
-            .thanks-label {
-                text-align: center;
-                margin-top: 6rem;
-                font-size: 1.5rem;
-                font-weight: bold;
-                padding-bottom: 1rem;
-                border-bottom: 4px solid;
-            }
+    .client-entity-wrapper .wrapper-left-side {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
 
-            #product-table-footer {
-                page-break-inside: avoid;
-            }
+    .client-entity-wrapper .wrapper-left-side #client-details,
+    .client-entity-wrapper .wrapper-left-side #company-details,
+    .client-entity-wrapper .wrapper-left-side #company-address {
+        display: flex;
+        flex-direction: column;
+        margin-top: 0.5rem;
+    }
 
-            #product-table-footer > * {
-                display: grid;
-                grid-template-columns: 3fr 1fr 1fr;
-                padding-top: 0.5rem;
-                padding-left: 1rem;
-                gap: 20px;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due-label'],
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                font-weight: bold;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                color: var(--primary-color);
-            }
-            #product-table-footer > * > :last-child {
-                text-align: right;
-                padding-right: 0.5rem;
-            }
-        </style>
-    </head>
+    .client-entity-wrapper .wrapper-left-side .company-info {
+        border-left: 1px solid;
+        padding-left: 1rem;
+    }
 
-    <div id="header"></div>
+    .client-entity-wrapper #entity-details {
+        text-align: left;
+        margin-top: 0.5rem;
+        min-width: 100%;
+    }
 
-    <body id="body">
-        <div class="company-logo-wrapper">
-            <img
-                class="company-logo"
-                src="$company.logo"
-                alt="$company.name logo"
-            />
-        </div>
+    .client-entity-wrapper #entity-details > tr,
+    .client-entity-wrapper #entity-details th {
+        font-weight: normal;
+    }
 
-        <hr class="double-border" />
+    #product-table {
+        margin-top: 3rem;
+        margin-bottom: 200px;
+        min-width: 100%;
+        table-layout: fixed;
+        overflow-wrap: break-word;
+    }
 
-        <div class="client-entity-wrapper">
-            <div class="wrapper-left-side">
-                <div class="text-with-client">
-                    <h2 class="wrapper-info-text">$balance_due_label</h2>
+    #product-table > thead {
+        text-align: left;
+    }
 
-                    <div id="client-details"></div>
-                </div>
+    #product-table > thead > tr > th {
+        font-size: 1.1rem;
+        padding-bottom: 1.5rem;
+        padding-left: 1rem;
+        color: var(--primary-color);
+        font-weight: bold;
+    }
 
-                <div class="company-info">
-                    <div id="company-details"></div>
-                    <div id="company-address"></div>
-                </div>
+    #product-table > thead > tr > th:last-child {
+        text-align: right;
+    }
+
+    #product-table > tbody > tr > td {
+        border-bottom: 1px solid;
+        padding: 1rem;
+    }
+
+    #product-table > tbody > tr > td:last-child {
+        text-align: right;
+    }
+
+    .thanks-label {
+        text-align: center;
+        margin-top: 6rem;
+        font-size: 1.5rem;
+        font-weight: bold;
+        padding-bottom: 1rem;
+        border-bottom: 4px solid;
+    }
+
+    #product-table-footer {
+        page-break-inside: avoid;
+    }
+
+    #product-table-footer > * {
+        display: grid;
+        grid-template-columns: 3fr 1fr 1fr;
+        padding-top: 0.5rem;
+        padding-left: 1rem;
+        gap: 20px;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due-label'],
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        font-weight: bold;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        color: var(--primary-color);
+    }
+
+    #product-table-footer > * > :last-child {
+        text-align: right;
+        padding-right: 0.5rem;
+    }
+</style>
+
+<div id="header"></div>
+
+<div id="body">
+    <div class="company-logo-wrapper">
+        <img
+            class="company-logo"
+            src="$company.logo"
+            alt="$company.name logo"
+        />
+    </div>
+
+    <hr class="double-border"/>
+
+    <div class="client-entity-wrapper">
+        <div class="wrapper-left-side">
+            <div class="text-with-client">
+                <h2 class="wrapper-info-text">$balance_due_label</h2>
+
+                <div id="client-details"></div>
             </div>
 
-            <div class="wrapper-right-side">
-                <h2 class="wrapper-info-text">$details_label</h2>
-                <table id="entity-details" cellspacing="0"></table>
+            <div class="company-info">
+                <div id="company-details"></div>
+                <div id="company-address"></div>
             </div>
         </div>
 
-        <table id="product-table" cellspacing="0"></table>
+        <div class="wrapper-right-side">
+            <h2 class="wrapper-info-text">$details_label</h2>
+            <table id="entity-details" cellspacing="0"></table>
+        </div>
+    </div>
 
-        <div id="product-table-footer" cellspacing="0"></div>
-    </body>
+    <table id="product-table" cellspacing="0"></table>
 
-    <p class="thanks-label">$thanks_label!</p>
-    <hr class="double-border" />
+    <div id="product-table-footer" cellspacing="0"></div>
+</div>
+
+<p class="thanks-label">$thanks_label!</p>
+<hr class="double-border"/>
+
+<div id="footer"></div>
 
-    <div id="footer"></div>
-</html>
diff --git a/resources/views/pdf-designs/hipster.html b/resources/views/pdf-designs/hipster.html
index d064c7df09a1..18aba9e22fc0 100644
--- a/resources/views/pdf-designs/hipster.html
+++ b/resources/views/pdf-designs/hipster.html
@@ -1,214 +1,224 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<style id="style">
+    :root {
+        --primary-color: $primary_color;
+        --secondary-color: $secondary_color;
+    }
 
-        <style id="style">
-            :root {
-                --primary-color: $primary_color;
-                --secondary-color: $secondary_color;
-            }
+    * {
+        font-size: "$font_size";
+    }
 
-            * {
-                font-size: '$font_size';
-            }
+    p {
+        margin: 0;
+        padding: 0;
+    }
 
-            p {
-                margin: 0;
-                padding: 0;
-            }
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
+    }
 
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-            }
+    @page {
+        margin: 1cm;
+    }
 
-            @page { margin: 1cm; }
+    .header-wrapper {
+        display: grid;
+        grid-template-columns: 1.2fr 1.8fr;
+        gap: 20px;
+    }
 
-            .header-wrapper {
-                display: grid;
-                grid-template-columns: 1.2fr 1.8fr;
-                gap: 20px;
-            }
-            
-            .header-wrapper .header-text-label {
-                font-size: 1.1rem;
-                color: var(--primary-color);
-                text-transform: uppercase;
-                font-weight: bold;
-            }
-            .header-wrapper .header-left-side-wrapper {
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
-                border-left: 1px solid #303030;
-                padding-left: 1rem;
-            }
-            .header-wrapper .header-left-side-wrapper > * {
-                margin-bottom: 0.8rem;
-            }
-            .header-wrapper .header-left-side-wrapper #company-details,
-            .header-wrapper .header-left-side-wrapper #company-address {
-                display: flex;
-                flex-direction: column;
-            }
-            .header-wrapper .header-right-side-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
-                border-left: 1px solid #303030;
-                padding-left: 1rem;
-            }
-            .header-wrapper .header-right-side-wrapper #client-details {
-                display: flex;
-                flex-direction: column;
-                margin-top: 0.8rem;
-            }
-            .header-wrapper .company-logo {
-                height: 5rem;
-            }
+    .header-wrapper .header-text-label {
+        font-size: 1.1rem;
+        color: var(--primary-color);
+        text-transform: uppercase;
+        font-weight: bold;
+    }
 
-            .entity-label {
-                font-size: 3rem;
-                text-transform: uppercase;
-                margin: 2rem 1rem;
-            }
+    .header-wrapper .header-left-side-wrapper {
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+        border-left: 1px solid #303030;
+        padding-left: 1rem;
+    }
 
-            .entity-details-wrapper {
-                margin: 1rem;
-            }
-            .entity-details-wrapper > * {
-                margin-right: 1.5rem;
-            }
-            .entity-details-wrapper .entity-property-label {
-                text-transform: uppercase;
-            }
-            .entity-details-wrapper
-                [data-element='entity-details-wrapper-invoice-number-label'],
-            .entity-details-wrapper
-                [data-element='entity-details-wrapper-amount-due'] {
-                color: var(--primary-color);
-                font-weight: bold;
-            }
+    .header-wrapper .header-left-side-wrapper > * {
+        margin-bottom: 0.8rem;
+    }
 
-            #product-table {
-                margin-top: 3rem;
-                margin-bottom: 200px;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-                text-transform: uppercase;
-                font-weight: bold;
-            }
-            #product-table > thead > tr > th {
-                font-size: 1.1rem;
-                padding-bottom: 1.5rem;
-                padding-left: 1rem;
-                border-left: 1px solid;
-            }
-            #product-table > thead > tr > th:last-child {
-                text-align: right;
-            }
-            #product-table > tbody > tr > td {
-                padding: 1rem;
-                border-left: 1px solid;
-            }
-            #product-table > tbody > tr td:last-child {
-                text-align: right;
-            }
+    .header-wrapper .header-left-side-wrapper #company-details,
+    .header-wrapper .header-left-side-wrapper #company-address {
+        display: flex;
+        flex-direction: column;
+    }
 
-            #product-table-footer {
-                page-break-inside: avoid;
-            }
+    .header-wrapper .header-right-side-wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+        border-left: 1px solid #303030;
+        padding-left: 1rem;
+    }
 
-            #product-table-footer > * {
-                display: grid;
-                grid-template-columns: 3fr 1fr 1fr;
-                padding-top: 0.5rem;
-                padding-left: 1rem;
-                gap: 20px;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due-label'],
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                font-weight: bold;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                color: var(--primary-color);
-            }
-            #product-table-footer > * > :last-child {
-                text-align: right;
-                padding-right: 1rem;
-            }
-        </style>
-    </head>
+    .header-wrapper .header-right-side-wrapper #client-details {
+        display: flex;
+        flex-direction: column;
+        margin-top: 0.8rem;
+    }
 
-    <div id="header"></div>
+    .header-wrapper .company-logo {
+        height: 5rem;
+    }
 
-    <body id="body">
-        <div class="header-wrapper">
-            <div class="header-left-side-wrapper">
-                <p class="header-text-label">$from_label:</p>
+    .entity-label {
+        font-size: 3rem;
+        text-transform: uppercase;
+        margin: 2rem 1rem;
+    }
 
-                <div id="company-details"></div>
-                <div id="company-address"></div>
-            </div>
+    .entity-details-wrapper {
+        margin: 1rem;
+    }
 
-            <div class="header-right-side-wrapper">
-                <div>
-                    <p class="header-text-label">$to_label:</p>
-                    <div id="client-details"></div>
-                </div>
+    .entity-details-wrapper > * {
+        margin-right: 1.5rem;
+    }
 
-                <img
-                    class="company-logo"
-                    src="$company.logo"
-                    alt="$company.name logo"
-                />
-            </div>
+    .entity-details-wrapper .entity-property-label {
+        text-transform: uppercase;
+    }
+
+    .entity-details-wrapper
+    [data-element='entity-details-wrapper-invoice-number-label'],
+    .entity-details-wrapper
+    [data-element='entity-details-wrapper-amount-due'] {
+        color: var(--primary-color);
+        font-weight: bold;
+    }
+
+    #product-table {
+        margin-top: 3rem;
+        margin-bottom: 200px;
+        min-width: 100%;
+        table-layout: fixed;
+        overflow-wrap: break-word;
+    }
+
+    #product-table > thead {
+        text-align: left;
+        text-transform: uppercase;
+        font-weight: bold;
+    }
+
+    #product-table > thead > tr > th {
+        font-size: 1.1rem;
+        padding-bottom: 1.5rem;
+        padding-left: 1rem;
+        border-left: 1px solid;
+    }
+
+    #product-table > thead > tr > th:last-child {
+        text-align: right;
+    }
+
+    #product-table > tbody > tr > td {
+        padding: 1rem;
+        border-left: 1px solid;
+    }
+
+    #product-table > tbody > tr td:last-child {
+        text-align: right;
+    }
+
+    #product-table-footer {
+        page-break-inside: avoid;
+    }
+
+    #product-table-footer > * {
+        display: grid;
+        grid-template-columns: 3fr 1fr 1fr;
+        padding-top: 0.5rem;
+        padding-left: 1rem;
+        gap: 20px;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due-label'],
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        font-weight: bold;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        color: var(--primary-color);
+    }
+
+    #product-table-footer > * > :last-child {
+        text-align: right;
+        padding-right: 1rem;
+    }
+</style>
+<div id="header"></div>
+
+<div id="body">
+    <div class="header-wrapper">
+        <div class="header-left-side-wrapper">
+            <p class="header-text-label">$from_label:</p>
+
+            <div id="company-details"></div>
+            <div id="company-address"></div>
         </div>
 
-        <h1 class="entity-label">$entity_label</h1>
-        <div class="entity-details-wrapper">
+        <div class="header-right-side-wrapper">
+            <div>
+                <p class="header-text-label">$to_label:</p>
+                <div id="client-details"></div>
+            </div>
+
+            <img
+                class="company-logo"
+                src="$company.logo"
+                alt="$company.name logo"
+            />
+        </div>
+    </div>
+
+    <h1 class="entity-label">$entity_label</h1>
+    <div class="entity-details-wrapper">
             <span>
                 <span
                     class="entity-property-label"
                     data-element="entity-details-wrapper-invoice-number-label"
-                    >$entity_number_label:</span
+                >$entity_number_label:</span
                 >
                 <span class="entity-property-value">$entity_number</span>
             </span>
-            <span>
+        <span>
                 <span class="entity-property-label">$date_label:</span>
                 <span class="entity-property-value">$date</span>
             </span>
-            <span>
+        <span>
                 <span class="entity-property-label">$payment_due_label:</span>
                 <span class="entity-property-value">$payment_due</span>
             </span>
-            <span>
+        <span>
                 <span class="entity-property-label">$amount_due_label:</span>
                 <span
                     class="entity-property-value"
                     data-element="entity-details-wrapper-amount-due"
-                    >$amount_due</span
+                >$amount_due</span
                 >
             </span>
-        </div>
+    </div>
 
-        <table id="product-table" cellspacing="0"></table>
+    <table id="product-table" cellspacing="0"></table>
 
-        <div id="product-table-footer" cellspacing="0"></div>
-    </body>
+    <div id="product-table-footer" cellspacing="0"></div>
+</div>
 
-    <div id="footer"></div>
-</html>
+<div id="footer"></div>
diff --git a/resources/views/pdf-designs/modern.html b/resources/views/pdf-designs/modern.html
index cfe057ec30b1..b29aa6ec53d9 100644
--- a/resources/views/pdf-designs/modern.html
+++ b/resources/views/pdf-designs/modern.html
@@ -1,229 +1,236 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<style id="style">
+    :root {
+        --primary-color: $primary_color;
+        --secondary-color: $secondary_color;
+    }
 
-        <style id="style">
-            :root {
-                --primary-color: $primary_color;
-                --secondary-color: $secondary_color;
-            }
+    * {
+        font-size: "$font_size";
+    }
 
-            * {
-                font-size: '$font_size';
-            }
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
+        margin: 0;
+        padding: 0;
+    }
 
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-                margin: 0;
-                padding: 0;
-            }
+    p {
+        margin: 0;
+        padding: 0;
+        page-break-after: always;
+    }
 
-            p {
-                margin: 0;
-                padding: 0;
-                page-break-after: always;
-            }
+    .header-container {
+        background-color: var(--primary-color);
+        color: white;
+        display: grid;
+        grid-template-columns: 1.5fr 1fr;
+        padding: 1.5rem;
+        width: 100%;
+        height: 160px;
+    }
 
-            .header-container {
-                background-color: var(--primary-color);
-                color: white;
-                display: grid;
-                grid-template-columns: 1.5fr 1fr;
-                padding: 1.5rem;
-                width: 100%;
-                height: 160px;
-            }
+    .header-container .company-name {
+        font-size: 2rem;
+    }
 
-            .header-container .company-name {
-                font-size: 2rem;
-            }
+    #entity-details {
+        text-align: left;
+        color: #fff4e9 !important;
+    }
 
-            #entity-details {
-                text-align: left;
-                color: #fff4e9 !important;
-            }
-            #entity-details > tr,
-            #entity-details th {
-                font-weight: normal;
-                padding-bottom: 0.5rem;
-            }
+    #entity-details > tr,
+    #entity-details th {
+        font-weight: normal;
+        padding-bottom: 0.5rem;
+    }
 
-            .company-logo {
-                height: 5rem;
-            }
+    .company-logo {
+        height: 5rem;
+    }
 
-            .logo-client-wrapper {
-                margin: 3rem 1.5rem;
-                display: grid;
-                grid-template-columns: 1.5fr 1fr;
-            }
+    .logo-client-wrapper {
+        margin: 3rem 1.5rem;
+        display: grid;
+        grid-template-columns: 1.5fr 1fr;
+    }
 
-            #client-details {
-                display: flex;
-                flex-direction: column;
-            }
-            #client-details > * {
-                margin-bottom: 0.5rem;
-            }
+    #client-details {
+        display: flex;
+        flex-direction: column;
+    }
 
-            .table-wrapper {
-                margin: 3rem 1.5rem;
-            }
+    #client-details > * {
+        margin-bottom: 0.5rem;
+    }
 
-            #product-table {
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                padding: 0.8rem;
-                background-color: var(--secondary-color);
-                color: white;
-            }
-            #product-table > thead > tr > th:last-child {
-                text-align: right;
-            }
-            #product-table > tbody > tr > td {
-                border-bottom: 1px solid var(--secondary-color);
-                padding: 1rem;
-            }
-            #product-table > tbody > tr > td:first-child {
-                font-weight: bold;
-            }
-            #product-table > tbody > tr > td:last-child {
-                text-align: right;
-            }
+    .table-wrapper {
+        margin: 3rem 1.5rem;
+    }
 
-            .footer-wrapper {
-                margin-top: 1rem;
-                background-color: var(--primary-color);
-                padding: 1rem;
-                height: 160px;
-                width: 100%;
-                position: fixed;
-                bottom: 0;
-            }
+    #product-table {
+        min-width: 100%;
+        table-layout: fixed;
+        overflow-wrap: break-word;
+    }
 
-            .footer-content {
-                display: grid;
-                gap: 15px;
-                width: 100%;
-                grid-template-columns: 1fr 1fr 1fr;
-                color: #fff4e9;
-            }
+    #product-table > thead {
+        text-align: left;
+    }
 
-            #company-address,
-            #company-details {
-                display: flex;
-                flex-direction: column;
-                margin-top: 2rem;
-                margin-bottom: 2rem;
-            }
-            #company-address > *,
-            #company-details > * {
-                margin-bottom: 0.5rem;
-            }
+    #product-table > thead > tr > th {
+        padding: 0.8rem;
+        background-color: var(--secondary-color);
+        color: white;
+    }
 
-            #product-table-footer {
-                page-break-inside: avoid;
-            }
+    #product-table > thead > tr > th:last-child {
+        text-align: right;
+    }
 
-            #product-table-footer > * {
-                display: grid;
-                grid-template-columns: 3fr 1fr 1fr;
-                margin-top: 0.5rem;
-                margin-right: 1.5rem;
-                margin-left: 1.5rem;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due-label'],
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                font-weight: bold;
-                font-size: 1.3rem;
-            }
-            #product-table-footer > * > * {
-                padding-left: 1.5rem;
-            }
-            #product-table-footer > * > :last-child {
-                text-align: right;
-                padding-right: 1rem;
-            }
-            #product-table-footer > *:last-child {
-                background-color: var(--secondary-color);
-                color: white;
-                padding-top: 0.7rem;
-                padding-bottom: 0.7rem;
-            }
+    #product-table > tbody > tr > td {
+        border-bottom: 1px solid var(--secondary-color);
+        padding: 1rem;
+    }
 
-            table.page-container {
-                page-break-after: always;
-            }
-            thead.page-header {
-                display: table-header-group;
-            }
-            tfoot.page-footer {
-                display: table-footer-group;
-            }
-        </style>
-    </head>
+    #product-table > tbody > tr > td:first-child {
+        font-weight: bold;
+    }
 
-    <table class="page-container">
-        <thead class="page-header">
-            <tr>
-                <th class="page-header-cell">
-                    <div class="header-container" id="header">
-                        <h1 class="company-name">$company.name</h1>
-                        <table id="entity-details" cellspacing="0"></table>
+    #product-table > tbody > tr > td:last-child {
+        text-align: right;
+    }
+
+    .footer-wrapper {
+        margin-top: 1rem;
+        background-color: var(--primary-color);
+        padding: 1rem;
+        height: 160px;
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+    }
+
+    .footer-content {
+        display: grid;
+        gap: 15px;
+        width: 100%;
+        grid-template-columns: 1fr 1fr 1fr;
+        color: #fff4e9;
+    }
+
+    #company-address,
+    #company-details {
+        display: flex;
+        flex-direction: column;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    #company-address > *,
+    #company-details > * {
+        margin-bottom: 0.5rem;
+    }
+
+    #product-table-footer {
+        page-break-inside: avoid;
+    }
+
+    #product-table-footer > * {
+        display: grid;
+        grid-template-columns: 3fr 1fr 1fr;
+        margin-top: 0.5rem;
+        margin-right: 1.5rem;
+        margin-left: 1.5rem;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due-label'],
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        font-weight: bold;
+        font-size: 1.3rem;
+    }
+
+    #product-table-footer > * > * {
+        padding-left: 1.5rem;
+    }
+
+    #product-table-footer > * > :last-child {
+        text-align: right;
+        padding-right: 1rem;
+    }
+
+    #product-table-footer > *:last-child {
+        background-color: var(--secondary-color);
+        color: white;
+        padding-top: 0.7rem;
+        padding-bottom: 0.7rem;
+    }
+
+    table.page-container {
+        page-break-after: always;
+    }
+
+    thead.page-header {
+        display: table-header-group;
+    }
+
+    tfoot.page-footer {
+        display: table-footer-group;
+    }
+</style>
+
+<table class="page-container">
+    <thead class="page-header">
+    <tr>
+        <th class="page-header-cell">
+            <div class="header-container" id="header">
+                <h1 class="company-name">$company.name</h1>
+                <table id="entity-details" cellspacing="0"></table>
+            </div>
+        </th>
+    </tr>
+    </thead>
+    <tfoot class="page-footer">
+    <tr>
+        <td class="page-footer-cell">
+            <div class="footer-info">
+                <div style="margin-top: 195px"></div>
+                <div class="footer-wrapper" id="footer">
+                    <div class="footer-content">
+                        <div></div>
+                        <div id="company-details"></div>
+                        <div id="company-address"></div>
                     </div>
-                </th>
-            </tr>
-        </thead>
-        <tfoot class="page-footer">
-            <tr>
-                <td class="page-footer-cell">
-                    <div class="footer-info">
-                        <div style="margin-top: 195px"></div>
-                        <div class="footer-wrapper" id="footer">
-                            <div class="footer-content">
-                                <div></div>
-                                <div id="company-details"></div>
-                                <div id="company-address"></div>
-                            </div>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </tfoot>
-        <tbody class="page-content">
-            <tr>
-                <td class="page-content-cell" id="body">
-                    <div class="logo-client-wrapper">
-                        <img
-                            class="company-logo"
-                            src="$company.logo"
-                            alt="$company.name logo"
-                        />
+                </div>
+            </div>
+        </td>
+    </tr>
+    </tfoot>
+    <tbody class="page-content">
+    <tr>
+        <td class="page-content-cell" id="body">
+            <div class="logo-client-wrapper">
+                <img
+                    class="company-logo"
+                    src="$company.logo"
+                    alt="$company.name logo"
+                />
 
-                        <div id="client-details"></div>
-                    </div>
+                <div id="client-details"></div>
+            </div>
 
-                    <div class="table-wrapper">
-                        <table id="product-table" cellspacing="0"></table>
-                    </div>
+            <div class="table-wrapper">
+                <table id="product-table" cellspacing="0"></table>
+            </div>
 
-                    <div id="product-table-footer" cellspacing="0"></div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</html>
+            <div id="product-table-footer" cellspacing="0"></div>
+        </td>
+    </tr>
+    </tbody>
+</table>
diff --git a/resources/views/pdf-designs/plain.html b/resources/views/pdf-designs/plain.html
index 556d062ec645..c30170d40961 100644
--- a/resources/views/pdf-designs/plain.html
+++ b/resources/views/pdf-designs/plain.html
@@ -1,140 +1,144 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<style id="style">
+    * {
+        font-size: "$font_size";
+    }
 
-        <style id="style">
-            * {
-                font-size: '$font_size';
-            }
+    p {
+        margin: 0;
+        padding: 0;
+        page-break-after: always;
+    }
 
-            p {
-                margin: 0;
-                padding: 0;
-                page-break-after: always;
-            }
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
+        margin: 1cm;
+    }
 
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-                margin: 1cm;
-            }
+    .header-wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
 
-            .header-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-            }
-            .header-wrapper .company-logo {
-                height: 5rem;
-            }
-            .header-wrapper #company-address {
-                display: flex;
-                flex-direction: column;
-            }
-            .header-wrapper #entity-details {
-                margin-top: 1.5rem;
-                text-align: left;
-                width: 100%;
-            }
-            .header-wrapper #entity-details > tr,
-            .header-wrapper #entity-details th {
-                font-weight: normal;
-                padding-left: 0.9rem;
-                padding-top: 0.3rem;
-                padding-bottom: 0.3rem;
-            }
-            .header-wrapper
-                #entity-details
-                [data-element='entity-balance-due-label'],
-            .header-wrapper
-                #entity-details
-                [data-element='entity-balance-due'] {
-                background-color: #e6e6e6;
-            }
+    .header-wrapper .company-logo {
+        height: 5rem;
+    }
 
-            #client-details {
-                display: flex;
-                flex-direction: column;
-            }
+    .header-wrapper #company-address {
+        display: flex;
+        flex-direction: column;
+    }
 
-            #product-table {
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-                margin-top: 3rem;
-                margin-bottom: 200px;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                padding: 1rem;
-                background-color: #e6e6e6;
-            }
-            #product-table > thead > tr > th:last-child {
-                text-align: right;
-            }
-            #product-table > tbody > tr > td {
-                border-bottom: 1px solid #e6e6e6;
-                padding: 1rem;
-            }
-            #product-table > tbody > tr > td:last-child {
-                text-align: right;
-            }
-            
-            #product-table-footer {
-                page-break-inside: avoid;
-            }
+    .header-wrapper #entity-details {
+        margin-top: 1.5rem;
+        text-align: left;
+        width: 100%;
+    }
 
-            #product-table-footer > * {
-                display: grid;
-                grid-template-columns: 3fr 1fr 1fr;
-                padding-top: .5rem;
-                padding-left: 1rem;
-                gap: 20px;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due-label'],
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                font-weight: bold;
-            }
-            #product-table-footer > * > :last-child {
-                text-align: right;
-                padding-right: 1rem;
-            }
-        </style>
-    </head>
+    .header-wrapper #entity-details > tr,
+    .header-wrapper #entity-details th {
+        font-weight: normal;
+        padding-left: 0.9rem;
+        padding-top: 0.3rem;
+        padding-bottom: 0.3rem;
+    }
 
-    <div id="header"></div>
+    .header-wrapper
+    #entity-details
+    [data-element='entity-balance-due-label'],
+    .header-wrapper
+    #entity-details
+    [data-element='entity-balance-due'] {
+        background-color: #e6e6e6;
+    }
 
-    <body id="body">
-        <div class="header-wrapper">
-            <p>$company.name</p>
+    #client-details {
+        display: flex;
+        flex-direction: column;
+    }
 
-            <div id="company-address"></div>
+    #product-table {
+        min-width: 100%;
+        table-layout: fixed;
+        overflow-wrap: break-word;
+        margin-top: 3rem;
+        margin-bottom: 200px;
+    }
 
-            <div>
-                <img
-                    class="company-logo"
-                    src="$company.logo"
-                    alt="$company.name logo"
-                />
+    #product-table > thead {
+        text-align: left;
+    }
 
-                <table id="entity-details" cellspacing="0"></table>
-            </div>
+    #product-table > thead > tr > th {
+        padding: 1rem;
+        background-color: #e6e6e6;
+    }
+
+    #product-table > thead > tr > th:last-child {
+        text-align: right;
+    }
+
+    #product-table > tbody > tr > td {
+        border-bottom: 1px solid #e6e6e6;
+        padding: 1rem;
+    }
+
+    #product-table > tbody > tr > td:last-child {
+        text-align: right;
+    }
+
+    #product-table-footer {
+        page-break-inside: avoid;
+    }
+
+    #product-table-footer > * {
+        display: grid;
+        grid-template-columns: 3fr 1fr 1fr;
+        padding-top: .5rem;
+        padding-left: 1rem;
+        gap: 20px;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due-label'],
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        font-weight: bold;
+    }
+
+    #product-table-footer > * > :last-child {
+        text-align: right;
+        padding-right: 1rem;
+    }
+</style>
+<div id="header"></div>
+
+<div id="body">
+    <div class="header-wrapper">
+        <p>$company.name</p>
+
+        <div id="company-address"></div>
+
+        <div>
+            <img
+                class="company-logo"
+                src="$company.logo"
+                alt="$company.name logo"
+            />
+
+            <table id="entity-details" cellspacing="0"></table>
         </div>
+    </div>
 
-        <div id="client-details"></div>
+    <div id="client-details"></div>
 
-        <table id="product-table" cellspacing="0"></table>
+    <table id="product-table" cellspacing="0"></table>
 
-        <div id="product-table-footer" cellspacing="0"></div>
-    </body>
+    <div id="product-table-footer" cellspacing="0"></div>
+</div>
+
+<div id="footer"></div>
 
-    <div id="footer"></div>
-</html>
diff --git a/resources/views/pdf-designs/playful.html b/resources/views/pdf-designs/playful.html
index 961733d0a08e..3581726c745a 100644
--- a/resources/views/pdf-designs/playful.html
+++ b/resources/views/pdf-designs/playful.html
@@ -1,195 +1,207 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<style id="style">
+    :root {
+        --primary-color: $primary_color;
+        --secondary-color: $secondary_color;
+    }
 
-        <style id="style">
-            :root {
-                --primary-color: $primary_color;
-                --secondary-color: $secondary_color;
-            }
+    * {
+        font-size: "$font_size";
+    }
 
-            * {
-                font-size: '$font_size';
-            }
+    p {
+        margin: 0;
+        padding: 0;
+    }
 
-            p {
-                margin: 0;
-                padding: 0;
-            }
+    body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: Arial, Helvetica, sans-serif;
+        margin: 1cm;
+    }
 
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-                margin: 1cm;
-            }
+    .header-wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
 
-            .header-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-            }
-            .header-wrapper .company-logo {
-                height: 5rem;
-            }
-            .header-wrapper .entity-details-wrapper {
-                background-color: var(--primary-color);
-                padding: 1rem;
-                border-radius: 10px;
-            }
-            .header-wrapper #entity-details {
-                width: 100%;
-                color: white;
-                text-align: left;
-            }
-            .header-wrapper #entity-details > tr,
-            .header-wrapper #entity-details th {
-                font-weight: normal;
-            }
+    .header-wrapper .company-logo {
+        height: 5rem;
+    }
 
-            .contacts-wrapper {
-                margin-top: 3rem;
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 40px;
-            }
-            .contacts-wrapper .contact-label {
-                font-weight: bold;
-                color: var(--primary-color);
-                margin-left: 1rem;
-            }
-            .contacts-wrapper #company-address,
-            .contacts-wrapper #company-details,
-            .contacts-wrapper #client-details {
-                display: flex;
-                flex-direction: column;
-                margin-bottom: 1rem;
-            }
-            .contacts-wrapper .company-info {
-                margin-top: 1rem;
-                padding: 1rem;
-                border-top: 1px solid var(--primary-color);
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
-            }
-            .contacts-wrapper #client-details {
-                margin-top: 1rem;
-                padding: 1rem;
-                border-top: 1px solid var(--primary-color);
-            }
+    .header-wrapper .entity-details-wrapper {
+        background-color: var(--primary-color);
+        padding: 1rem;
+        border-radius: 10px;
+    }
 
-            .contact-wrapper-left-side,
-            .contact-wrapper-right-side {
-                border-bottom: 1px solid var(--primary-color);
-            }
+    .header-wrapper #entity-details {
+        width: 100%;
+        color: white;
+        text-align: left;
+    }
 
-            #product-table {
-                margin-top: 3rem;
-                margin-bottom: 200px;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                font-size: 1.2rem;
-                padding: 1rem;
-                background: var(--primary-color);
-                color: white;
-            }
-            #product-table > thead tr > th:last-child {
-                text-align: right;
-            }
-            #product-table > thead tr > th:first-child {
-                border-top-left-radius: 10px;
-                border-bottom-left-radius: 10px;
-            }
-            #product-table > thead tr > th:last-child {
-                border-top-right-radius: 10px;
-                border-bottom-right-radius: 10px;
-            }
-            #product-table > tbody > tr > td {
-                border-bottom: 1px solid var(--primary-color);
-                padding: 1rem;
-            }
-            #product-table > tbody > tr > td:first-child {
-                color: var(--primary-color);
-            }
-            #product-table > tbody > tr > td:last-child {
-                text-align: right;
-            }
+    .header-wrapper #entity-details > tr,
+    .header-wrapper #entity-details th {
+        font-weight: normal;
+    }
 
-            #product-table-footer {
-                page-break-inside: avoid;
-            }
+    .contacts-wrapper {
+        margin-top: 3rem;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 40px;
+    }
 
-            #product-table-footer > * {
-                display: grid;
-                grid-template-columns: 3fr 1fr 1fr;
-                padding-top: 0.5rem;
-                padding-left: 1rem;
-                gap: 20px;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due-label'],
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                font-weight: bold;
-            }
-            #product-table-footer
-                > *
-                [data-element='product-table-balance-due'] {
-                color: var(--primary-color);
-            }
-            #product-table-footer > * > :last-child {
-                text-align: right;
-                padding-right: 1rem;
-            }
-        </style>
-    </head>
+    .contacts-wrapper .contact-label {
+        font-weight: bold;
+        color: var(--primary-color);
+        margin-left: 1rem;
+    }
 
-    <div id="header"></div>
+    .contacts-wrapper #company-address,
+    .contacts-wrapper #company-details,
+    .contacts-wrapper #client-details {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 1rem;
+    }
 
-    <body id="body">
-        <div class="header-wrapper">
-            <img
-                class="company-logo"
-                src="$company.logo"
-                alt="$company.name logo"
-            />
+    .contacts-wrapper .company-info {
+        margin-top: 1rem;
+        padding: 1rem;
+        border-top: 1px solid var(--primary-color);
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+    }
 
-            <div></div>
+    .contacts-wrapper #client-details {
+        margin-top: 1rem;
+        padding: 1rem;
+        border-top: 1px solid var(--primary-color);
+    }
 
-            <div class="entity-details-wrapper">
-                <table id="entity-details" cellspacing="0"></table>
+    .contact-wrapper-left-side,
+    .contact-wrapper-right-side {
+        border-bottom: 1px solid var(--primary-color);
+    }
+
+    #product-table {
+        margin-top: 3rem;
+        margin-bottom: 200px;
+        min-width: 100%;
+        table-layout: fixed;
+        overflow-wrap: break-word;
+    }
+
+    #product-table > thead {
+        text-align: left;
+    }
+
+    #product-table > thead > tr > th {
+        font-size: 1.2rem;
+        padding: 1rem;
+        background: var(--primary-color);
+        color: white;
+    }
+
+    #product-table > thead tr > th:last-child {
+        text-align: right;
+    }
+
+    #product-table > thead tr > th:first-child {
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+    }
+
+    #product-table > thead tr > th:last-child {
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+    }
+
+    #product-table > tbody > tr > td {
+        border-bottom: 1px solid var(--primary-color);
+        padding: 1rem;
+    }
+
+    #product-table > tbody > tr > td:first-child {
+        color: var(--primary-color);
+    }
+
+    #product-table > tbody > tr > td:last-child {
+        text-align: right;
+    }
+
+    #product-table-footer {
+        page-break-inside: avoid;
+    }
+
+    #product-table-footer > * {
+        display: grid;
+        grid-template-columns: 3fr 1fr 1fr;
+        padding-top: 0.5rem;
+        padding-left: 1rem;
+        gap: 20px;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due-label'],
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        font-weight: bold;
+    }
+
+    #product-table-footer
+    > *
+    [data-element='product-table-balance-due'] {
+        color: var(--primary-color);
+    }
+
+    #product-table-footer > * > :last-child {
+        text-align: right;
+        padding-right: 1rem;
+    }
+</style>
+
+<div id="header"></div>
+
+<div id="body">
+    <div class="header-wrapper">
+        <img
+            class="company-logo"
+            src="$company.logo"
+            alt="$company.name logo"
+        />
+
+        <div></div>
+
+        <div class="entity-details-wrapper">
+            <table id="entity-details" cellspacing="0"></table>
+        </div>
+    </div>
+
+    <div class="contacts-wrapper">
+        <div class="contact-wrapper-left-side">
+            <p class="contact-label">$to_label:</p>
+            <div class="company-info">
+                <div id="company-details"></div>
+                <div id="company-address"></div>
             </div>
         </div>
 
-        <div class="contacts-wrapper">
-            <div class="contact-wrapper-left-side">
-                <p class="contact-label">$to_label:</p>
-                <div class="company-info">
-                    <div id="company-details"></div>
-                    <div id="company-address"></div>
-                </div>
-            </div>
-
-            <div class="contact-wrapper-right-side">
-                <p class="contact-label">$from_label:</p>
-                <div id="client-details"></div>
-            </div>
+        <div class="contact-wrapper-right-side">
+            <p class="contact-label">$from_label:</p>
+            <div id="client-details"></div>
         </div>
+    </div>
 
-        <table id="product-table" cellspacing="0"></table>
+    <table id="product-table" cellspacing="0"></table>
 
-        <div id="product-table-footer" cellspacing="0"></div>
-    </body>
+    <div id="product-table-footer" cellspacing="0"></div>
+</div>
+
+<div id="footer"></div>
 
-    <div id="footer"></div>
-</html>
