/* Differences table */
table.chardiff { border: 2px solid gray; border-collapse: collapse; }
table.chardiff th, table.chardiff td { border: 1px solid gray; }
table.chardiff thead tr > *, table.chardiff tfoot tr > * { font-weight: bold; background-color: rgba(192,192,192,0.25) /*#eee*/; text-align: center; }
table.chardiff thead tr:last-child > * { border-bottom-width: 2px }
table.chardiff tfoot tr:first-child > * { border-top-width: 2px }
table.chardiff th { text-align: left; font-weight: normal; padding-left: 0.5ex; padding-right: 0.5ex; }
table.chardiff td { white-space: nowrap; width: 2em; padding: 0; text-align: center; }
table.chardiff td.na { background-color: rgba(192,192,192,0.25) /*#eee*/; }
table.chardiff th:first-child { width: 20em; text-align: left; }

/* Character set table */
table.charset { border-collapse: collapse; }
table.charset td.ctrl { font-size: 80%; }
table.charset td.diff, table.charset td.na { background-color: rgba(96,192,96,0.25) /*#cec*/; color: inherit }
table.charset td, table.charset th { text-align: center; width: 5ex; border: 1px solid black; }
table.charset th { font-weight: normal; }
table.charset th:first-child { width: 4ex; }
table.charset thead td:first-child { border-width: 0; background: none }
table.charset tbody tr:first-child td { border-top-width: 2px }
table.charset tbody th + td { border-left-width: 2px }
table.charset tbody td:last-child { border-right-width: 2px }
table.charset tbody tr:last-child td { border-bottom-width: 2px }

/* Composite characters */
.composite { font-family: "Courier New", monospace; }
table.composite { border-spacing: 2px; border-collapse: separate }
table.composite tr>* { padding-right: 1em;vertical-align:top; }
table.composite tr>*:first-child { display: none }
table.composite td:nth-child(3), span.composite { position: relative; }
table.composite td:nth-child(3) { left: 1.5em }
.comp1, .comp2 { position: absolute; left: 0; top: 0; white-space: nowrap }
span.composite { display: inline-block; width: 1em; height: 1.2em;}


p.reference { font-style: italic; }
p.reference a { font-style: normal; }

section {page-break-inside: avoid;}

p.chardiffinfo { display: none; }

@media screen and (max-width: 640px) {
    p.chardiffinfo { display: block; }
    div.chardiff { max-width: 95vw; overflow-x: auto; }
    table.chardiff { min-width:600px; font-size: 90%; }
    
    table.chardiff tr.heading th, table.chardiff tr.heading td { font-weight: normal; }
    table.chardiff tr * { border-left:none; border-right:none; }
    table.chardiff tr.heading > * { background-color: white }
    table.chardiff tr > * { border-left: none !important; }
}

@media print {
    table.charset td.diff { font-weight: bold; border-width: 2px }
    table.chardiff a { color: initial; }
    table.chardiff th:first-child { min-width: 30ex }
    p.reference a { display: none }
}