div.wrapper
{
    display: grid;
    align-items: center;
    justify-items: center;
}

div.container
{
    display: grid;
    grid-template-columns: repeat(18, auto) 1fr repeat(5, auto);
    align-items: stretch;
    justify-items: stretch;
    grid-auto-flow: row;
}

div.container div
{
    display: grid;
    align-items: center;
    justify-items: center;
    white-space: nowrap;
    padding: 2px;
    background-color: white;
}

div.container>div.row,
div.container>div.header
{
    display: contents;
}

div.h1
{
    font-size: 9px;
}

div.container>div.spacer
{
    grid-column: 1/-1;
    border-top: 1px solid black;
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    grid-gap: 0.5em;
    padding: 0.5em;
}

div.container>div.spacer.top,
div.container>div.spacer:first-child
{
    border-top: none;
    padding-top: 0;
}

div.container>div.spacer.top>h2,
div.container>div.spacer.top>h3
{
    margin-top: 0;
}

div.container>div>div
{
    border-left: 1px solid black;
    border-top: 1px solid black;
}

div.container>div>div:last-child
{
    border-right: 1px solid black;
}

div.container>div:last-child>div
{
    border-bottom: 1px solid black;
}

div.container div.link
{
    outline: 5px solid #F00;
    font-family: monospace;
}

div.container>div.header>div {
    font-weight: bold;
}

div.container div.ref
{
    grid-column: 1/2;
}

div.container div.catalog
{
    grid-column: 2/3;
}

div.container div.type
{
    grid-column: 3/4;
}

div.container div.issuer
{
    grid-column: 4/5;
}

div.container div.district,
div.container div.city
{
    grid-column: 5/6;
}

div.container>div.header>div.issue
{
    grid-column: 6/8;
}

div.container>div.row>div.issue
{
    grid-column: 6/7;
    justify-content: start;
}

div.container>div.row>div.denom
{
    grid-column: 7/8;
    border-left: none;
    justify-content: end;
}

div.container div.variety
{
    grid-column: 8/9;
}

div.container>div.header>div.signatures
{
    grid-column: 9/11;
}

div.container div.sig1
{
    grid-column: 9/10;
}

div.container div.sig2
{
    grid-column: 10/11;
}

div.container div.printer
{
    grid-column: 11/12;
}

div.container>div.header>div.serial
{
    grid-column: 12/16;
}

div.container>div.row>div.asterisk
{
    grid-column: 12/13;
}

div.container>div.row>div.series
{
    grid-column: 13/14;
    font-size: 1.0em;

    display: flex;
    flex-flow: column-reverse;

    justify-content: center;
    align-content: center;
}

    div.container>div.row>div.series>span
    {
        min-width: 1em;
        text-align: center;
        padding: 0.1em;
    }

    div.container>div.row>div.series>span:last-child
    {
        border-bottom: 1px solid black;
        align-content: center;
    }

div.container>div.row>div.serial
{
    grid-column: 14/15;
    border-left: none;
}

div.container div.suffix
{
    grid-column: 15/16;
    border-left: none;
}

div.container div.pp
{
    grid-column: 16/17;
}

div.container div.fpn
{
    grid-column: 17/18;
}

div.container div.bpn
{
    grid-column: 18/19;
}

div.container div.description
{
    grid-column: 19/20;
}

div.container div.grade
{
    grid-column: 20/21;
}

div.container div.comment
{
    grid-column: 21/22;
}

div.container div.price
{
    grid-column: 22/23;
}

div.container div.front
{
    grid-column: 23/24;
}

div.container div.back
{
    grid-column: 24/25;
}

div.wrapper>div.footer
{
    padding: 0.5em;
}
