<style>
    @page {
        margin: 140px 40px 80px 40px;
    }
    body {
        font-family: DejaVu Sans, sans-serif;
        font-size: 9px;
        margin: 0;
    }

    .rpt-header {
        position: fixed;
        top: -120px; left: 0; right: 0;
        height: 100px;
    }
    .rpt-logo  { float: right; width: 18%; text-align: right; }
    .rpt-logo img { max-height: 60px; }
    .rpt-info  { float: left; width: 82%; }
    .rpt-title   { font-size: 15px; font-weight: bold; color: #2c3e50; }
    .rpt-company { font-size: 12px; font-weight: bold; color: #34495e; margin-top: 2px; }
    .rpt-meta    { font-size: 9px; color: #555; margin-top: 2px; }
    .rpt-meta .lbl { font-weight: bold; color: #2c3e50; }
    .rpt-divider { border: 0; border-top: 2px solid #2c3e50; margin-top: 6px; }

    .rpt-footer {
        position: fixed;
        bottom: -60px; left: 0; right: 0;
        height: 50px;
        border-top: 1px solid #ccc;
        padding-top: 4px;
        font-size: 8px; color: #777;
    }
    .rpt-footer .fl { float: left;  width: 33%; }
    .rpt-footer .fc { float: left;  width: 34%; text-align: center; }
    .rpt-footer .fr { float: right; width: 33%; text-align: right; }
    .page-number:before { content: "Page " counter(page) " of " counter(pages); }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 6px;
    }
    th {
        background: #2c3e50;
        color: #fff;
        font-size: 8px;
        font-weight: bold;
        padding: 5px 4px;
        text-align: left;
        border: 1px solid #1a252f;
    }
    td {
        font-size: 8px;
        padding: 3px 4px;
        border: 1px solid #ccc;
    }
    .tc { text-align: center; }
    .tr { text-align: right; }

    .rpt-summary {
        margin-top: 6px;
        padding: 4px 8px;
        background: #f0f0f0;
        border: 1px solid #ccc;
        font-size: 8px;
    }
</style>
