/***********************************************************
* Screen Style
***********************************************************/

@media screen {
    body {
        max-width: 7.5in;
        margin: auto;
    }
    
    header, footer {
        position: inherit;
    }
    
    header:not(:first-child) {
        /* Only the first header should be visible in browsers */
        display: none;
    }
    
    #mortgageSummary, #amortizationTable .multi-column {
        /* Disable multi-column in browsers */
        column-count: auto !important;
    }
    
    footer {
        margin-top: 14pt;
    }
    
    .pageNumber::before {
        display: none;
    }
}

/***********************************************************
 * Page Style 
 ***********************************************************/

@page:first {
    margin-top: 1.25in;
    
    @top-center {
        /* First page uses different header, which should use the complete page width */
        width: 100-ro-pw;
    }
}

@page {
    margin: 0.66in 0.5in;
    
    size: legal portrait;
    
    @top-center {
        /* Fill the content with the running element named 'headerElement'. Use the first
           occurrence if there are multiple defined on the current page. In all other cases the
           latest one is used. */
        content: element(headerElement, first);
        
        vertical-align: top;
    }
    
    @bottom-center {
        content: element(footerElement, last);
        
        padding-top: 0.25in;
        vertical-align: top;
    }
}

@page:-ro-last {
    margin-bottom: 1.5in;
    
    @bottom-center {
        /* On the last page, add PDF tags for the footer, as it contains 
           important information. */
        -ro-pdf-tag-type: "Div";
    }
}

/***********************************************************
 * General Style
 ***********************************************************/

:root {
    --corporate-color-1: darkslategray;
    --corporate-color-2: white;
    
    font-family: sans-serif;
    line-height: 1.5;
    
    hyphens: auto;
}

h1, h2, h3 {
    font-family: serif;
    font-weight: normal;
    color: var(--corporate-color-1);
}

h1 {
    margin: 0;
    margin-bottom: 17pt;
    padding: 0;
    font-size: 21pt;
}

h2 {
    margin: 1em 0 6pt;
    padding: 0;
    font-size: 16pt;
}

h3 {
    margin: 0.8em 0 6pt;
    padding: 0;
    font-size: 12pt;
}

p, li, td, th {
    margin: 6pt 0;
    padding: 0;
    font-size: 9pt;
}

p + p {
    margin-top: 12pt;
}

h1 + h2 {
    margin-top: 12pt;
}

/***********************************************************
 * Mortgage Overview
 ***********************************************************/

#mortgageOverview {
    display: flex;
    justify-content: space-between;
}

#mortgageOverview > div {
    flex: 0 1;
    
    border: 0.5pt solid gray;
}

#mortgageOverview > div h4 {
    text-align: center;
    margin: 3pt 0;
}

#mortgageOverview > div canvas {
    display: block;
    margin: 3pt auto;
}

#mortgageOverview .legend {
    display: flex;
    flex-flow: row wrap;
    
    margin: 0.0625in 6pt; 
    margin-bottom: 0.0625in;
}

.legend > div {
    flex: 1 0 auto;
    padding: 0;
    margin: 0;
    margin-left: 0.125in;
    font-size: 7pt;
    
    white-space: nowrap;
}

.legend > div::before {
    content: "";
    width: 6pt;
    height: 6pt;
    margin-right: 4pt;
    background-color: black;
    display: inline-block;
}

#mortgageSummaryGraph .legend > div:nth-of-type(1)::before {
    background-color: indianred;
}
#mortgageSummaryGraph .legend > div:nth-of-type(2)::before {
    background-color: steelblue;
}
#mortgageSummaryGraph .legend > div:nth-of-type(3):before {
    background-color: seagreen;
}
#mortgageSummaryGraph .legend > div:nth-of-type(4)::before {
    background-color: palegoldenrod;
}

#balanceGraph .legend > div:nth-of-type(1)::before,
#interestPrincipalGraph .legend > :nth-of-type(1)::before {
    background-color: indianred;
}

#interestPrincipalGraph .legend > div:nth-of-type(2)::before {
    background-color: steelblue;
}

#mortgageOverview h4 {
    /* The h4 elementes actually are captions for the graphs. Tag them as such
       instead of the usual heading tag. */
    -ro-pdf-tag-type: "Caption";
    /* Also do note create bookmarks for these h4 elements */
    -ro-bookmarks-enabled: false;
}

/***********************************************************
 * Mortgage Summary
 ***********************************************************/

#mortgageSummary {
    column-count: 2;
    column-gap: 0.25in;
}

#mortgageSummary h2 {
    column-span: all;
}

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

#mortgageSummary td {
    border: 1px solid silver;
}

#mortgageSummary th {
    font-weight: bold;
    font-size: 10pt;
}

#mortgageSummary td, #mortgageSummary th {
    padding: 4pt 3pt;
}

#mortgageSummary table tr:nth-of-type(odd) td {
    background-color: gainsboro;
}

/***********************************************************
 * Legal Disclaimer
 ***********************************************************/

#legalDisclaimer {
    color: rgb(166, 170, 177);
}

#legalDisclaimer p {
    margin: 0.66em auto;
    font-size: 8pt;
    text-align: justify;
}

/***********************************************************
 * Amortization Table
 ***********************************************************/

@media print {
    
    #amortizationTable {
        break-before: page;
    }
    
    /* 
        Set the continuation markers on the container around the multi-column, so they 
        appear at the page break rather than the column break. 
    */
    #amortizationTable::-ro-before-break {
        content: "Continued on page " -ro-counter-offset(page, 1);
        text-align: right;
        margin-top: 3pt;
    }
    
    #amortizationTable::-ro-after-break {
        content: "Continued from page " -ro-counter-offset(page, -1);
        text-align: left;
        margin-bottom: 3pt;
    }
    
    #amortizationTable::-ro-before-break,
    #amortizationTable::-ro-after-break {
        font-size: 10.5pt;
        color: var(--corporate-color-1);
        margin: 6pt 0;
    }
    
    #amortizationTable .multi-column {
        column-count: 2;
        column-gap: 0.25in;
    }
}


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

#amortizationTable td {
    border: 1px solid silver;
}

#amortizationTable thead td {
    font-weight: bold;
    font-size: 8pt;
    background-color: var(--corporate-color-1);
    color: var(--corporate-color-2);
}

#amortizationTable td {
    padding: 3pt;
    font-size: 7pt;
}

#amortizationTable tr:nth-child(odd) {
    background-color: gainsboro;
    /* Always keep two rows together to ensure that the colors of neighboring
    rows in the multi-column match each other, thus avoiding a checkerboard pattern. */
    break-after: avoid;
}

/***********************************************************
 * Header Style
 ***********************************************************/

header {
    /* Define header elements as running elements of the name 'headerElement' */
    position: running(headerElement);
    width: 100%;
    height: 1in;
    overflow: hidden;
    
    background-color: var(--corporate-color-1);
    color: var(--corporate-color-2);
    
    font-family: serif;
    
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

header p {
    margin: 0;
    font-size: 28pt;
}

header img {
    margin: 0 0.5in;
    height: 0.75in;
}

header.small {
    height: 0.5in;
    
    color: var(--corporate-color-1);
    background-color: transparent;
}

header.small p {
    font-size: 14pt;
}

header.small img {
    margin: 0 0.125in 0 0;
    height: 0.33in;
}

/***********************************************************
 * Footer Style
 ***********************************************************/
 
footer .qrcode {
    display: none;
}

footer {
    position: running(footerElement);
    color: var(--corporate-color-1);
    font-size: 9pt;
    text-align: center;
}

footer > div {
    position: relative;
}

@media print {
    footer::after {
        content: counter(page) " / " counter(pages);
        position: absolute;
        bottom: 30pt;
        right: 0;
        color: var(--corporate-color-1);
        font-size: 10pt;
    }
    
    footer .qrcode {
        /* Enable this element for print */
        display: block;
        
        /* Make it a QR code */
        -ro-replacedelement: qrcode;
        -ro-qrcode-quality: high;
        -ro-qrcode-forcedcolors: none;
        
        height: 100%;
        position: absolute;
        color: inherit;
        left: 0;
        top: 0;
    }
}

/***********************************************************
 * PDF Comment Style 
 ***********************************************************/

notecomment, commentend {
    -ro-comment-title: attr(author);
    -ro-comment-date: attr(date);
    -ro-comment-dateformat: "yyyy-dd-MM HH:mm";
    -ro-comment-content: attr(text);
}

notecomment {
    -ro-comment-position: page-right;
}

commentstart {
    -ro-comment-start: attr(uid);
}

commentend {
    -ro-comment-end: attr(uid);
    
    -ro-comment-title: attr(author);
    -ro-comment-content: attr(text);
    -ro-comment-date: attr(date);
    
    /* The value of attribute 'commentstyle' must be handled as an 'identifier' */
    -ro-comment-style: attr(commentstyle -ro-ident);
}

commentend[commentstyle="strikeout"] {
    -ro-comment-color: red;
}

commentend[commentstyle="underline"] {
    -ro-comment-color: green;
}

commentend[commentstyle="squiggly"] {
    -ro-comment-color: blue;
}

commentend[commentstyle="highlight"] {
    -ro-comment-color: yellow;
}

/***********************************************************
 * ro-preferences
 ***********************************************************/

@-ro-preferences {
    /* Specify default viewer settings for the resulting PDF */
    page-layout: 1 column;
    initial-zoom: 125%;
}