<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>
    <style>
        @page {
            header: page-header;
            footer: page-footer;
        }

        body {
            font-family: sun-extA;
        }

        .header {
            margin-top: 5em;
        }

        .separator {
            text-align: right;
            border-bottom: 0.5px solid black;
            font-size: 0.7em;
        }

        img.logo {
            top: 10px;
        }

        img {
            height: 6em;
            width: 9em;
        }

        .title {
            font-size: 2em;
            font-weight: 1200;
        }

        .details {
            display: inline-block;
            position: relative;

        }

        .sub-title {
            font-size: 1.3em;
            font-weight: bold;
        }

        .label {
            font-size: 1.1em;
            font-weight: bold;
        }

        .bill-to {
            margin-top: 30px;
        }

        table {
            width: 100%;
            vertical-align: top;
        }

        th {
            border-bottom: 1px solid black;
        }

        td {
            padding: 0.4em;
            /* text-align: center; */
        }

        td.title {
            text-align: left;
        }
        td.description,
        th.description {
            text-align: justify;
            max-width: 40em;
        }

        td.stock-code,
        th.stock-code {
            text-align: center;
        }

        th {
            vertical-align: middle;
        }

        td,
        th {
            /* margin-top: 0.6em;
            margin-right: 0.6em; */
        }

        .subtotal td {
            border-top: 1px solid black;
        }

        .total {
            border-top: 1px solid black;
            border-bottom: 3px double black;
            font-weight: bolder;
        }

        .address {}

        */ td.header-logo {
               /* text-align: left; */
               width: fit-content;
           }

        td.header-cief-address {
            text-align: left;
            margin-left: -30px;
        }

        td.header-details {
            text-align: left;
            vertical-align: top;
        }

        td.bill-to {
            text-align: left;
        }

        td.document-detail {
            text-align: left;
            border: 1px solid black;
            padding: 1em 1em 1em 1em;
            width: 16em;
        }

        td.address {
            text-align: left;
        }

        .right {
            text-align: right;
        }
    </style>
</head>

<body>
@yield('inner_content')
</body>

</html>