Untitled

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <style type="text/css">
        body {
            font-family: "Lato", sans-serif;
        }

        table, tr, td, th, tbody, thead, tfoot {
            page-break-inside: avoid !important;
        }

        #content {
            width: 190mm;
            height: 277mm;
            background: #fff;
            padding: 0mm 10mm 0mm 10mm;
        }


        .img-logo {
            margin: 0 auto;
            width: 60mm;
            max-height: 10mm;
            background: #fff;
            margin-bottom: 20mm;
        }

        .img-logo img {
            width: 100%;
        }

        .statement {
            margin-bottom: 20mm;
        }

        .statement table{
            border-collapse: collapse;
            width: 190mm;
            background-color: #fff;
        }

        .statement tr {
            border-bottom: 1pt solid #ddd;
        }

        .statement td {
            padding: 2mm;
        }

        .statement .date-box{
            padding: 2mm;
            width: 30mm;
            border-right: 1pt solid #ddd;
            text-align: center;
        }

        .statement .description-box{
            width: 130mm;
            padding-left: 5mm;
            text-align: left;
        }

        .statement .amount-box{
            width: 30mm;
            text-align: center;
        }

        .statement .date {
            display: block;
            text-align: center;
            width: 100%;
        }

        .statement .date.month {
            font-size: 10pt;
        }

        .statement .date.day {
            font-size: 14pt;
        }

        .statement .date.year {
            font-size: 10pt;
        }

        .description-box span{
            display: block;
            font-size: 10pt;
            margin-bottom: 3mm;
        }

        .description-box h4{
            margin-bottom: 4mm;
        }

        .list-item {
            min-height: 10mm;
            list-style: none;
            padding: 5mm;
            border: 0.5pt solid #ccc;
        }

        .agency-table td {
            padding: 5mm;
        }

    </style>
</head>

<body>
<div id="content">
    <div class="img-logo">
        <img src="<?= $logoUrl ?>" alt="">
    </div>

    <?= $statementSummaryBox ?>
    <?= $statement ?>
</div>
</body>

</html>