portal-api/resources/views/pdf/invoice/styles.blade.php

<style>
    @font-face {
        font-family: "SVN Times New Roman";
        font-style: normal;
        font-weight: 400;
        src: url("{{ public_path('fonts/time-new-roman/SVN-Times-New-Roman.ttf') }}")
            format("truetype");
    }

    @font-face {
        font-family: "SVN Times New Roman";
        font-style: normal;
        font-weight: 700;
        src: url("{{ public_path('fonts/time-new-roman/SVN-Times-New-Roman-Bold.ttf') }}")
            format("truetype");
    }

    @font-face {
        font-family: "SVN Times New Roman";
        font-style: italic;
        font-weight: 400;
        src: url("{{ public_path('fonts/time-new-roman/SVN-Times-New-Roman-Italic.ttf') }}")
            format("truetype");
    }

    @font-face {
        font-family: "SVN Times New Roman";
        font-style: italic;
        font-weight: 700;
        src: url("{{ public_path('fonts/time-new-roman/SVN-Times-New-Roman-Bold-Italic.ttf') }}")
            format("truetype");
    }

    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    * {
        box-sizing: border-box;
        font-family: "SVN Times New Roman", "DejaVu Serif", serif;
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }

    body {
        color: #111;
        font-family: "SVN Times New Roman", "DejaVu Serif", serif;
        font-size: 10px;
        font-weight: 400;
        line-height: 1.45;
        padding: 20px;
    }

    strong,
    b,
    th,
    .bold {
        font-family: "SVN Times New Roman", "DejaVu Serif", serif;
        font-weight: 700;
    }

    em,
    i,
    .italic {
        font-family: "SVN Times New Roman", "DejaVu Serif", serif;
        font-style: italic;
        font-weight: 400;
    }

    strong em,
    strong i,
    b em,
    b i,
    .bold.italic {
        font-family: "SVN Times New Roman", "DejaVu Serif", serif;
        font-style: italic;
        font-weight: 700;
    }

    .invoice {
        min-height: 277mm;
        padding: 3mm;
        border: 1px solid #efefe;
    }

    .header-table,
    .info-table,
    .product-table,
    .signature-table {
        width: 100%;
        border-collapse: collapse;
    }

    .header-table td {
        vertical-align: top;
    }

    .logo {
        width: 145px;
    }

    .invoice-title {
        text-align: center;
    }

    .invoice-title h1 {
        margin: 0;
        font-size: 21px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .invoice-title h2 {
        margin: 2px 0;
        font-size: 15px;
        font-style: italic;
        font-weight: 700;
    }

    .invoice-title p {
        margin: 3px 0;
    }

    .invoice-number {
        width: 190px;
        padding-left: 15px;
        font-size: 11px;
    }

    .invoice-number p {
        margin: 3px 0;
    }

    .divider {
        margin: 7px 0;
        border: 0;
        border-top: 1px solid #bbb;
    }

    .company-name {
        margin: 0 0 3px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .info-row {
        margin: 4px 0;
    }

    .seller-section {
        position: relative;
        min-height: 120px;
        padding-right: 120px;
    }

    .qr-code {
        position: absolute;
        top: 8px;
        right: 15px;
        width: 90px;
        height: 90px;
        border: 1px solid #555;
        text-align: center;
        line-height: 90px;
    }

    .bank-table {
        width: 100%;
        margin: 4px 0;
        border-collapse: collapse;
    }

    .bank-table td {
        padding: 0;
        vertical-align: top;
    }

    .bank-table-label {
        width: 155px;
    }

    .product-table {
        margin-top: 6px;
        table-layout: auto;
    }

    .product-table th,
    .product-table td {
        border: 1px solid #777;
    }

    .product-table th {
        padding: 4px;
        height: 48px;
        text-align: center;
        vertical-align: middle;
        font-weight: 700;
    }

    .product-table tbody td {
        padding: 1px 2px;
        height: auto;
        line-height: 1.2;
    }

    .product-table th:first-child,
    .product-table td:first-child {
        width: 8mm;
        padding-left: 1px;
        padding-right: 1px;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .italic {
        font-style: italic;
    }

    .bold {
        font-weight: 700;
    }

    .summary-label {
        text-align: right;
    }

    .amount-words {
        padding: 5px !important;
    }

    .signature-table {
        margin-top: 12px;
    }

    .signature-table td {
        width: 50%;
        height: 130px;
        text-align: center;
        vertical-align: top;
    }

    .signature-title {
        font-size: 12px;
        font-weight: 700;
    }

    .signature-box {
        width: 260px;
        margin: 35px auto 0;
        padding: 8px;
        color: red;
        border: 1px solid #65a765;
        background: #eef8ee;
        text-align: left;
        font-weight: 700;
        line-height: 1.8;
    }

    .footer {
        text-align: center;
        font-size: 9px;
    }

    .footer p {
        margin: 3px 0;
    }

    .product-table-wrapper {
        position: relative;
        margin-top: 6px;
    }

    .product-table-watermark {
        position: absolute;
        top: 0;
        left: 50%;

        width: 430px;
        height: auto;

        opacity: 0.3;

        margin-left: -215px;

        z-index: 0;
    }

    .product-table {
        position: relative;
        z-index: 1;
        width: 100%;
        margin-top: 0;
        table-layout: auto;
        border-collapse: collapse;
    }

    .product-table th,
    .product-table td {
        background: transparent;
    }
</style>