numerus/web/static/invoice.css

.invoice {
    display: flex;
}

.invoice header {
    flex: 1;
    min-width: 18rem;
    padding: 0 1rem 0 0;
    display: block;
    background: initial;
    border-right: 1px solid black;
}

.invoice h1 {
    font-size: 1em;
}

.invoice > div {
    flex: 3;
    padding: 0 0 0 2.5rem;
}

.invoice .invoicee, .invoice .invoicer {
    font-style: normal;
}

.invoice header > div {
    margin-top: 2em;
}

.invoice .invoicer {
    margin-top: 9rem;
}

.invoice .invoicee {
    margin-top: 1em;
    text-align: right;
}

.invoice table {
    margin: 5rem 0;
}

.invoice th {
    font-weight: normal;
    text-transform: uppercase;
}

.invoice thead th {
    text-align: left;
    border-bottom: 1px solid black;
}

.invoice .tfoot th, .invoice .numeric {
    text-align: right;
}

.invoice .notes, .invoice .payment-instructions {
    white-space: pre-line;
    text-align: right;
}

.invoice .notes + .payment-instructions {
    margin-top: 5rem;
}

.invoice td {
    vertical-align: top;
}

.invoice tbody, .invoice .legal {
    page-break-inside: avoid;
}

.invoice tbody tr {
    background-color: initial;
}

.invoice tbody:not(:first-of-type) tr:first-child td, .invoice .tfoot th, .invoice .tfoot td {
    padding-top: 1em;
}

.invoice .tfoot.separator th, .invoice .tfoot.separator td {
    padding-top: 3em;
}

.invoice tbody .name td:first-child {
    font-weight: bold;
}

.invoice tbody td:first-child {
    max-width: 15em;
}

.invoice .legal {
    font-size: .75em;
    text-align: justify;
}

@media screen {
    .invoice .legal {
        margin-top: 16rem;
    }
}

@media print {
    @page {
        size: A4;
        margin: 64px 48px;
    }

    *, *::before, *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html, body {
        height: 100%;
    }

    html {
        font-family: sans-serif;
        font-size: 62.5%;
    }

    body {
        background-color: white;
        color: black;
        font-size: 1rem;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }

    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    body > header, nav {
        display: none;
    }

    .invoice header {
        height: 260mm;
    }
    
    .invoice .legal {
        position: absolute;
        width: 40em;
        left: 0;
        top: 0;
        transform-origin: top left;
        transform: translateY(250mm) rotate(-90deg);
    }
}