/*@import url("a4.css");*/

@page {
    size: A4;
    margin: 20mm 20mm 20mm 20mm;

    @top-center {
        content: 'Page ' counter(page) ' of ' counter(pages);
        vertical-align: top;
        padding-top: 10mm;
    }

    @area header {
        content: element(header);
        top: 10mm;
        right: 20mm;
        left: 20mm;
    }
}


html {
    font-size: 9pt;
}

h1 {
    font-size: 14pt;
    clear: both;
    margin: 0;
}

.info {
    float: right;
}

.title {
    font-weight: bold;
    font-size: 1.1em;
    text-align: right;
    margin: 1em 0 0.5em 0;
    clear: both;
}
table.information {
    clear: right;
    border: none 0;
    border-collapse: separate;
    border-spacing: 0;
}
table.information td, table.information th {
    border: none 0;
    padding: 0;

}
table.information th {
    font-weight: bold;
    padding-right: 5mm;
    text-align: left;
}
table.information td {
    text-align: right;
}
table.information th::after {
    content: ':';
}


header#logo {
    position: running(header);
    text-align: right;
}

header#logo img {
    width: 50mm;
}


header#letter {
    min-height: 50mm;
}
header#letter .left {
    /* Absolute position to fit the letter window */
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 5mm;
    height: 40mm;
    width: 90mm;
    font-size: 10pt;
    padding: 0;
}

address.sender {
    font-size: 0.75em;
    color: #999;
    margin-bottom: 1em;
}



header#letter .right {
    float: right;
    width: 40%;
}


.order-details {
    display: flow-root;
}

section.payment {
    float:left;
    width: 40%;
    margin-top: 5mm;
}
section.shipping {
    float:right;
    width: 40%;
    margin-top: 5mm;
}

table.items {
    clear: both;
    width: 100%;
    border: none;
    font-size: 9pt;
    margin: 5mm 0;
}

table.items th {
    border: none 0;
    border-bottom: 0.5mm solid black;
    font-weight: bold;
    text-align: left;
    padding: 2mm;
}
table.items td {
    border: none 0;
    padding: 2mm;
}

table.items .qty {
    text-align: center;
}
table.items .price {
    text-align: right;
    white-space: nowrap;
}

table.totals {
    margin-top: 5mm;
    float: right;
    border: none;
    border-collapse: separate;
    padding: 0;
    border-spacing: 0;

}
table.totals td, table.totals th {
    border: none;
    border-width: 0;
    padding: 1mm 0;
    line-height: 100%;
}
table.totals th {
    font-weight: bold;
    padding: 1mm 5mm;
    text-align: left;
}

table.totals .grand td, table.totals .grand th {
    border-bottom: 1mm double black;
    font-size: 1.1em;
    padding-top: 2mm;
}
table.totals td {
    text-align: right;
}