/*********************************************************
 * Manual Style
 *********************************************************/
 
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Theme
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@font-face {
    font-family: 'courier prime';
    src: url(../fnt/courierprime/Courier%20Prime.ttf);
}

@font-face {
    font-family: 'courier prime';
    font-weight: bold;
    src: url(../fnt/courierprime/Courier%20Prime%20Bold.ttf);
}

@font-face {
    font-family: 'courier prime';
    font-style: italic;
    src: url(../fnt/courierprime/Courier%20Prime%20Italic.ttf);
}

@font-face {
    font-family: 'courier prime';
    font-weight: bold;
    font-style: italic;
    src: url(../fnt/courierprime/Courier%20Prime%20Bold%20Italic.ttf);
}

@font-face {
    font-family: 'nanum gothic';
    src: url(../fnt/nanumgothic/NanumGothic-Bold.ttf);
}

:root {

    /* === General === */

    /* Main */
    --color-primary: #2c6076;
    --color-secondary: #8ec6dd;
    --color-tertiary: silver;
    --color-text: black;
    --color-text-inverted: white;
    --color-contrast: whitesmoke;
    --color-background: white;

    --font-family-primary: arial, sans-serif;
    --font-family-code: 'courier prime', 'courier new', monospace;
    --font-family-title: 'nanum gothic', sans-serif;

    /* Information Boxes */
    --color-box: var(--color-primary);
    --color-box-background: var(--color-contrast);
    --color-box-head-text: var(--color-text-inverted);

    /* Tables */
    --color-table: var(--color-primary);
    --color-table-row-alternate: var(--color-contrast);
    --color-table-head-text: var(--color-text-inverted);

    /* Other */
    --color-link: var(--color-primary);
    --color-bulletpoint: var(--color-primary);

    /* === Print & PDF Style === */

    --color-header-footer-background: var(--color-secondary);
    --color-header-footer-text: var(--color-text-inverted);

    /* === Screen & Browser Styles === */

    --color-screen-background: #F5F5F5;

    color: var(--color-text);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Legacy Styles
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.corpauthor {
    display: none;
}

h1 {
    font-size: 1em;
}

img,
.formalpara {
    display: block;
}

/* Lists */

ol > li { 
    list-style-type: decimal;
}

ul > li,
ol > li {
    color: var(--color-primary);
}

table {
    text-align: left;
    border-collapse: collapse;
    width: 100%;
}

table.informaltable tr:last-child {
    border-bottom: none !important;
}

caption {
    break-after: avoid-page;
}

/* TOC Table */

table > caption {
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 1mm;
    margin-bottom: 1mm;
    text-align: left;

}

td {
    border: 1pt solid var(--color-text);
    padding: 2mm;
    font-size: 0.9em;
    vertical-align: top;
}

th {
    border: 1pt solid;
    font-weight: bold;
    padding: 2mm;
    font-size: 0.9em;
    text-align: left;
}

tgroup {
    width: 100%;
    margin-bottom: 3mm;
    border: 1pt solid var(--color-text);
    border-collapse: collapse;
}

td > p,
th > p {
    margin-top: 0mm;
    margin-bottom: 0mm;
    font-size: 0.9em
}

body {
    hyphens: auto;
    hyphenate-before: 3;
    hyphenate-after: 3;
    line-height: 1.25;
    
    font-family: var(--font-family-primary);
    font-size: 10pt;
}

/* Front Page */

.bookinfo {
    font-size: 10pt;
    margin-left: 1mm;
    margin-right: 1mm;
}

.bookinfo .copyright,
.bookinfo .year,
.bookinfo .holder,
.bookinfo .releaseinfo {
    margin-left: 0.1mm;
    margin-right: 0.1mm;
    font-size: 12pt;
}

/* Document Content */

.note[title]::before,
.see[title]::before,
.important[title]::before,
.title,
h1 {
    font-weight: bold;
    margin-top: 7mm;
    margin-bottom: 4mm;
}

p {
    margin-top: 2.5mm;
    margin-bottom: 2.5mm
}

.formalpara {
    border: none;
    padding: 0;
    margin: 0;
}

body > section:not(.simple) > h1, 
.toc > h1,
.preface > h1 {
    margin-top: 1cm;
    margin-bottom: 1cm;
    text-align: left;
    font-size: 2.8em;
    font-weight: bold;
}

body > section:not(.simple) > section:not(.simple) > h1 {
    margin-top: 0.8cm;
    
    font-size: 1.5em;
    font-weight: bold;
}

body > section:not(.simple) > section:not(.simple) > section:not(.simple) > h1 {
    font-size: 1.3em;
    font-weight: bold;
} 

body > section:not(.simple) > section:not(.simple) > section:not(.simple) > section:not(.simple) > h1 {
    font-size: 1.1em;
    font-style: italic;
    font-weight: bold; 
}  

body > section:not(.simple) > section:not(.simple) > section:not(.simple) > section:not(.simple) > section:not(.simple) > h1 {
    font-size: 1em;
    font-weight: bold;
}  

section.simple > section.simple > h1 {
    font-weight: normal;
    font-style: italic;
}

/* Information Boxes */

.note, .important, pre, .see  {
    margin-top: 3mm;
    margin-bottom: 3mm;
    padding-bottom: 2mm;
    border: 1pt solid var(--color-text);
    background-color: #f0f0f0;
}

.note::before,
.see::before,
.important::before {
    margin: 0 !important;
    padding: 1mm !important;
    font-weight: bold;
    color: var(--color-box-head-text);
    background-color: var(--color-box);
    display: block;
}

.note::before {
    content: "Note";
}

.see::before {
    content: "See";
}

.important::before {
    content: "Important";
}

.note[title]::before,
.see[title]::before {
    content: attr(title);
}

.important[title]::before {
    content: "Important: " attr(title);
}

.note > p,
.important > p,
.see > p {
    margin: 0;
    padding: 2mm 2mm 0 2mm;
    font-size: 0.9em;
}

pre,
.synopsis,
.function {
    font-family: var(--font-family-code);
    font-size: 0.9em;
    white-space: pre-wrap;
}

.synopsis {
    display: block;
}

pre {
    padding: 2mm;
    line-height: 1.15em;
}

.note pre,
.important pre {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 2mm;
    margin: 2mm;
}

/* Media Element Styles */

img {
    margin-bottom: 1mm;
}

figure {
    margin-top: 3mm;
    margin-bottom: 3mm;
}

figure > figcaption {
    font-family: var(--font-family-primary);
    font-size: 0.9em;
    font-weight: normal;
    font-style: italic;
    text-align: center;
    margin-top: 1mm;
    margin-bottom: 1mm;
}


/* Inline Element Styles */

.term {
    font-weight: bold;
}

strong {
    font-style: italic;
    font-weight: normal;
}

code,
.property,
.type,
.code {
    font-family: var(--font-family-code);
}

code,
.property,
.type {
    white-space: nowrap;
}

sup {
    vertical-align: super;
    font-size: 50%;
    break-before: avoid;
}

cite {
    white-space: nowrap;
    font-style: normal;
}

.userinput {
    font-style: italic;
}

/* Generated Content */

.bookinfo .date::before {
    content: "Revision ";
}

.copyright::before {
    content: "Copyright (c) ";
}


cite::before {
    content: "\"";
}

cite::after {
    content: "\"";
}

/* Link Styles */

a,
a[href^="#"] {
    color: blue;
    text-decoration: underline;
}

/* List Styles */

ul,
ol {
    margin-top: 1mm;
    margin-left: -0.5mm;
    margin-bottom: -0.1mm;
}

ol { 
    margin-left: 1em;
}

#SupportedCSSPropertiesSection .variablelist li:not(.varlistentry) {
    list-style: none;
    break-before: avoid;
}
#SupportedCSSPropertiesSection .variablelist .varlistentry {
    list-style: none;
    margin-left: -10mm;
}

#JavaScriptApiSection .variablelist li:not(.varlistentry) {
    list-style: none;
}

#JavaScriptApiSection .variablelist .varlistentry {
    list-style: none;
    margin-left: -10mm;
}

li .variablelist .varlistentry {
    list-style: none !important;
    margin-left: -10mm;
}

li {
    list-style: disc;
    padding: 0;
    margin-left: -4mm;
    margin-bottom: 1.5mm
}

dt {
    break-after: avoid;
}

dt {
    font-weight: bold;
    margin-bottom: 0.5em;
}

dl li {
    color: var(--color-text);
}

dd {
    break-inside: avoid;
}

dd > div {
    margin-bottom: 0.5em;
}

dd div.flex {
    display: flex;
    justify-content: space-between;
}

dd div.flex > div {
    width: 50%;
}

dd strong::before {
    content: "\25A0\00A0";
    color: var(--color-primary);
}

/*********************************************************
 * Table of Contents Style
 *********************************************************/
 
.toc > table {
    width: 100%;
    
    border: hidden;
    border-collapse: collapse;
}

.toc tr:nth-child(even) {
    background-color: transparent;
}

td[role="toc_chapter"] {
    border: hidden;
    height: 10pt;
    padding: 0pt;
    text-align: left;
    font-size: 0.9em;
    padding-top: 3px;
}

td[role="toc_sect1"],
td[role="toc_sect1_appendix"] {
    border: hidden;
    height: 10pt;
    padding: 0pt;
    text-align: left;
    font-size: 0.9em;
    padding-left: 4mm;
    padding-top: 3px;
}

td[role="toc_sect2"],
td[role="toc_sect2_appendix"] {
    border: hidden;
    height: 10pt;
    padding: 0pt;
    text-align: left;
    font-size: 0.9em;
    padding-left: 8mm;
    padding-top: 3px;
}

td[role="toc_sect3"] {
    border: hidden;
    height: 10pt;
    padding: 0pt;
    text-align: left;
    font-size: 0.9em;
    padding-left: 12mm;
    padding-top: 3px;
}

td[role="toc_preface"] {
    border: hidden;
    height: 10pt;
    padding: 0pt;
    text-align: left;
    font-size: 0.9em;
    padding-top: 3px;
}

td[role="toc_appendix"] {
    border: hidden;
    height: 10pt;
    padding: 0pt;
    text-align: left;
    font-size: 0.9em;
    padding-left: 0mm;
    padding-top: 3px;
}

.toc a[href^="#"] {
    color: var(--color-text);
    text-decoration: none;
}


/* Styles that are used in print primarily but may have an effect on screen (i.e. multi-column is used) */

.preface, body > section {
    break-before: always;
}

.note[title]::before,
.see[title]::before,
.important[title]::before,
.title,
h1 {
    break-after: avoid;
}

th {
    break-inside: avoid;
    break-after: avoid;
}

th {
    break-after: avoid;
}

figure, .note, .important, .example, pre, .see {
    break-inside: avoid;
}

p + :-ro-matches(figure, .note, .important, .example, pre, .see, ul, ol) {
    break-before: avoid;
}


.toc > table {
    break-before: avoid;
    break-after: always;
}

li {
    break-inside: avoid;
}

figure > figcaption { 
    break-inside: avoid;
}


/*********************************************************
 * RO styles
 *********************************************************/

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Formatter Asignment
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

math { 
    -ro-replacedelement: embedded-mathml; 
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Attribute to Style Mappings
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.bookinfo .title {
    -ro-title: content();
    -ro-subject: content();
    string-set: doctitle self;
}

.bookinfo .corpauthor {
    -ro-author: content();
}

.bookinfo .releaseinfo {
    string-set: version self;
}

[id] {
    -ro-anchor: -ro-attr(id -ro-ident);
}

[data-width] {
    width: attrByUnit(data-width) !important;
    box-sizing: border-box;
}

img[data-align="right"] {
    margin-left: auto;
    -ro-priority: -1;
}

img[data-align="left"] {
    margin-right: auto;
    -ro-priority: -1;
}

img[data-align="center"] {
    margin-left: auto;
    margin-right: auto;
    -ro-priority: -1;
}

img[depth] {
    height: attrByUnit(depth);
}


/* ... End of Legacy Styles */


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * General
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

 
 
body{
    text-align: justify;
}

/* Links */

a , a[href^="#"],
link,
.type[data-xreflabel] {
    color: var(--color-link);
    text-decoration: none;
}

a[href^="#css-property"] {
    font-family: var(--font-family-code); 
}

a[href^="#css-property"]::after {
    font-family: var(--font-family-code); 
}

.type[data-xreflabel] {
    -ro-link: "#" -ro-attr(data-xreflabel);
}

code {
    font-size: 1em;
}

img {
    max-width: 100%;
}

/* Titles */

.preface > h1,
.toc > h1,
body > section:not(.simple) > h1 {
    text-transform: uppercase;
    font-weight: normal;
}

body > section:not(.simple) > h1,
body > section:not(.simple) > section:not(.simple) > h1,
body > section:not(.simple) > section:not(.simple) > section:not(.simple) > h1 {
    string-set: sectiontitle before self;
}

.preface > h1,
.toc > h1,
body > section:not(.simple) > h1 {
    string-set: chaptertitle before self;
}

/* Table */

table, td, thead tr td, entrytbl {
    border-color: var(--color-table);
}

table + table {
    margin-top: 5mm;
}

td, entrytbl {
    border-color: var(--color-table);
    border-bottom-style: none;
    border-top-style: none;
}

td[rowspan] {
    /* workaround for Webkit/Blink bug (table row borders in collapsed tables with row spanning cells) */
    border-bottom-style: solid;
    border-top-style: solid;
}

tr:last-child{
    border-bottom: solid var(--color-table) 1pt;
}

thead tr td {
    color: var(--color-table-head-text);
    background-color: var(--color-table);
    font-weight: bold;
}

tr {
    break-inside: avoid;
    padding: 0;
}
body > section:not(.simple) > section:not(.simple) > section:not(.simple) thead tr td {
    padding: 2.5mm 1.9mm 1.9mm; 
}

body > section:not(.simple) > section:not(.simple) > section:not(.simple) td{
    padding: 2.5mm 2.1mm 2.1mm; 
}

tr:nth-child(even){
    background-color: var(--color-table-row-alternate);
}

table.code-description tbody tr td:first-child, 
table.code-description-odd tbody tr td:nth-child(odd) {
    font-family: var(--font-family-code);
    white-space: nowrap;
    break-inside: avoid;
}

table.code-description td > a::before {
    content: "<" !important;
}

table.code-description td > a::after {
    content: ">" !important;
}


/* Lists */

li > * {
    color: var(--color-text);
}

table td  ul {
    margin-top: inherit;
}

table td li {
    margin-bottom: inherit;
}

table td li p {
    margin-top: inherit;
    margin-bottom: inherit;
}

/* Helpers */

[data-col] {
    display: flex;
    break-inside: avoid-page;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
}

[data-col] > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[data-col][data-space="around"] {
    justify-content: space-around;
}

[data-col][data-space="between"] {
    justify-content: space-between;
}

[data-col="2"] > * {
    box-sizing: border-box;
    width: calc(50% - 0.5em) !important;
}

[data-col="3"] > * {
    box-sizing: border-box;
    width: calc(33% - 0.5em) !important;
}

[data-col="4"] > * {
    box-sizing: border-box;
    width: calc(25% - 0.5em) !important;
}

[data-wrap="normal"] {
     white-space: normal;
}

[data-wrap="none"] {
     white-space: nowrap;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Information Boxes
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

pre {
    border: none;
    text-align: left;
}

.note, .note, .see,
pre {
    background-color: var(--color-box-background) !important;
}

.important{
    border: none;
    border-left: dashed var(--color-box) 2pt;
    border-bottom: dashed var(--color-box) 2pt;
    border-right: dashed var(--color-box) 2pt;
    background-color: var(--color-box-background) !important;
}

.note pre,
.see pre {
    border: 1pt dotted gray;
}

.note {
    border-color: var(--color-primary);
}

.note,
.see {
    border: none !important;
}

.note {
    border-width: 2pt;
}

.important::before {
    margin-left: -2pt !important;
    margin-right: -2pt !important;
    margin-top: -2pt !important;
    padding-top: 3pt !important;
    padding-left: 6pt !important;
}

pre, .see {
    border-color: var(--color-tertiary);
}

.note::before,
.see::before {
    margin: 0 !important;
    padding: 1mm !important;
    padding-left: 2mm !important;
}

.example::before {
    font-weight: normal;
    font-style: italic;
    margin-bottom: 2mm;
    display: block;
}

.example {
    border-left: 2pt solid var(--color-box);
    padding-left: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.example + .example {
    margin-top: inherit;
}

.example > .formalpara > .title {
    margin: 0;
    font-size: 1em;
    font-weight: normal;
}

p + .example,
.formalpara + .example {
    break-before: avoid;
}

.note::before {
    background-color: var(--color-box);
    color: var(--color-box-head-text);
}

.see::before {
    background-color: var(--color-tertiary);
    color: var(--color-text);
}


.note > p > pre:last-child, 
.note > p > pre:last-child, 
.example > p > pre:last-child {
    margin-bottom: 1mm;
} 

.function,
code.rest {
    color: gray;
    font-weight: bold;
    white-space: normal;
}

pre {
    break-before: avoid;
}

pre > .userinput {
    white-space: normal;
    text-align: left;
    font-style: normal;
    display: block;
}

pre > .userinput .token {
    white-space: nowrap;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Special Styles (styling of individual elements)
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

[data-condition~="inheritFont"] {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    color: inherit !important;
}

.title + .note {
    break-after: avoid;
}

[data-break="avoid"] {
    break-before: avoid;
}

[data-break="always"] {
    break-before: always;
}

figure[data-condition~="float"] p {
    clear: both;
}

#HeaderFooterPageSideBoxes + p,
#HeaderFooterPageSideBoxes + p + p,
#HeaderFooterPageSideBoxes + p + p + p {
    break-before: avoid;
    break-after: avoid;
}

/* Section "API Comparison" */
#apiComparisonTable tr td:nth-child(3) {
    white-space: nowrap;
}

/* Chapter "How Does PDFreactor Work?" */

#StepList > li {
    counter-increment: steplist 1;
}

#StepList > li > p::before {
    content: "Step " counter(steplist) ": ";
}

/* Chapter "Generated Content" */

#GeneratedTextSample {
    border: 1pt solid black;
    background-color: palegoldenrod;
    padding: 0.1in;
}

#GeneratedTextSample::before{
    content: "Note:";
    padding-right: 0.1in;
    font-weight: bold;
}


#GeneratedTextBreakSample {
    border: 1pt solid black;
    padding: 0.1in;
}

#GeneratedTextBreakSample::before{
    content: "RealObjects\APDFreactor";
    white-space: pre;
}

#CounterCrossReferencesSample {
    border: 1pt solid black;
    padding: 0.1in;
}

.phrase[role="linkFacsimile"]{
    text-decoration: underline;
    color: blue;
}

/* Chapter "Multi-Column Layout" */

#MultiColumnSample {
    margin: 3mm;
    border: 1pt solid black;
    padding: 2mm;
    
    height: 4.0cm;
    
    background-color: #EDF1F8;
    
    column-count: 3;
    column-gap: 4mm;
    column-rule: 1pt solid black;
    column-fill: auto;
    
    font-size: 10pt;
    text-align: justify;
    
    hyphens: manual;
}

#MultiColumnSample > p {
    margin: 0mm;
    margin-bottom: 1mm;
}

#MultiColumnSample > p > .phrase {
    font-weight: bold;
}

/* Appendix "Supported Page Size Formats" */

#PageFormats table {
    margin-bottom: 0.5cm;
    break-inside: avoid;
}

#PageFormats table td {
    text-align: right;
}

#PageFormats table td:empty::before {
    content: "\2014";
}

/* Appendix "Supported length units" */

#SupportedLengthUnits {
    break-before: always;
}

/* Appendix "Color Keywords" */

table[role="colorKeywordsTable"] tr:nth-child(even),
table[role="colorKeywordsTable"] tr:nth-child(odd) {
    background-color: var(--color-text-inverted);
    color: var(--color-text);
}

table[role="colorKeywordsTable"] thead tr td {
    background-color: silver;
}

[role="colorKeywordsTable"] tgroup {
    border: 1pt solid var(--color-tertiary);
}

[role="colorKeywordsTable"] td {
    border-left: none;
    border-right: none;
    border-top: 1pt solid var(--color-tertiary);
    border-bottom: 1pt solid var(--color-tertiary);
    vertical-align: middle;
    height: 1.5em;
}

[role="colorKeywordsTable"] td[data-condition] {
    background-color: -ro-attr(data-condition color);
}

/* Appendix "Counter and List Style Types" */

#listStyleTypes {
    break-before: always;
}

table[role="listStyleTypesTable"] {
    font-family: var(--font-family-primary);
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

table[role="listStyleTypesTable"] td {
    margin-left: 0;
    vertical-align: middle;
    width: auto;
}

table[role="listStyleTypesTable"] ol {
    margin-left: -6mm;
}

table[role="listStyleTypesTable"] ol,
table[role="listStyleTypesTable"] li {
    vertical-align: middle;
}

table[role="listStyleTypesTable"] tr[data-condition] li {
    list-style-type: attrValue(data-condition, tr);
    list-style-position: inside;
    color: var(--color-text);
}

table[role="listStyleTypesTable"] :-ro-matches(tr[data-condition~="-ro-spelled-out-en"],
        tr[data-condition~="-ro-spelled-out-en-ordinal"], tr[data-condition~="-ro-spelled-out-de"],
        tr[data-condition~="-ro-spelled-out-fr"]) td::nth-child(4) {
    font-size: 0.6em;
}

table[role="listStyleTypesTable"] :-ro-matches(tr[data-condition~="-ro-spelled-out-en"],
        tr[data-condition~="-ro-spelled-out-en-ordinal"], tr[data-condition~="-ro-spelled-out-de"],
        tr[data-condition~="-ro-spelled-out-fr"]) td::nth-child(5) {
    font-size: 0.4em;
}

td[data-condition~="listStyleTypesColumn1"] ol li {
    -ro-listitem-value: 1;
}

td[data-condition~="listStyleTypesColumn2"] ol li {
    -ro-listitem-value: 12;
}

td[data-condition~="listStyleTypesColumn3"] ol li {
    -ro-listitem-value: 123;
}

td[data-condition~="listStyleTypesColumn4"] ol li {
    -ro-listitem-value: 1234;
}

td[data-condition~="listStyleTypesColumn5"] {
    font-family: var(--font-family-code);
    white-space: nowrap;
}

/* CSS At-Rules */

td[data-condition~="min-width"] {
    min-width: 8em;
}

/* Chapter Barcodes */

.example-content {
    display: flex;
    flex-direction: row;
}

.example-left {
    display: flex;
    flex-direction: column;
}

.example-left, .example-caption {
    width: 85%;
}

.example-left>pre, .example-caption>pre {
    margin-right: 1cm;
}

.example-right {
    width: 17%;
}

.example-right.hasCaption {
    padding-top: 7%;
}

.example-right>img {
    width: 100%;
    margin-top: 1.5mm;
}

.version-table {
    text-align: center;
    margin: 0;
}

.version-table.top {
    margin-top: unset;
}

/* Appendix Supported Barcode Types */
.barcodeTypeCaption p {
    font-weight: normal;
    font-size: 10pt;
}

.barcodeTypeCaption h1 {
    font-size: 1.5em;
}

.nestedtable * {
    border: none !important;
}

.nestedtable>tr {
    border: 1pt solid var(--color-primary) !important;
}

#appendix-barcodes li {
    color: var(--color-text);
}

#appendix-barcodes td {
    font-size: 10pt;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * CSS and JS Documentation
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

[data-condition='documentation'] .simplesect > .title {
    font-size: 1.3em;
    margin-top: 2.3em;
    margin-bottom: 0.7em;
    display: block;
}

[data-condition='documentation'] .simplesect > .title .property,
[data-condition='documentation'] .simplesect > .title .function,
[data-condition='documentation'] .simplesect > .title .classname {
    display: block;
    break-after: avoid;
}

[data-condition='documentation'] .simplesect .synopsis {
    font-family: var(--font-family-primary);
    white-space: normal;
    break-before: avoid;
    break-inside: avoid;
}

[data-condition='documentation'] .simplesect > .synopsis:last-of-type {
    margin-bottom: 1em;
}

[data-condition='documentation'] .simplesect .synopsis > .phrase {
    display: block;
}

[data-condition='documentation'] li .synopsis {
    margin-top: 0.5em;
}

[data-condition='documentation'] .informaltable {
    border-left: 2pt solid var(--color-table);
    break-before: avoid;
    break-inside: avoid;
    break-after: avoid;
}

[data-condition='documentation'] .informaltable tgroup {
    border: none;
}

[data-condition='documentation'] .informaltable tgroup {
    padding: 5pt;
}

[data-condition='documentation'] .informaltable tr {
    background-color: var(--color-table-row-alternate);
}

[data-condition='documentation'] .informaltable tr:first-child {
    font-weight: bold;
}

[data-condition='documentation'] .informaltable tr:not(:last-child) td {
    border-bottom: 1pt solid var(--color-tertiary);
}

[data-condition='documentation'] .informaltable tr td {
    border: none;
    padding: 0.2em;
}

[data-condition='documentation'] .informaltable tr td:first-child {
    width: 20%;
    max-width: 20%;
    min-width: 20%;
    padding-left: 1em;
}

[data-condition='documentation'] .function {
    color: var(--color-text);
}

[data-condition='documentation'] .function > .parameter {
    font-style: italic;
}

[data-condition='documentation'] .methodparam > .parameter[data-condition='optional']::after,
[data-condition='documentation'] .optional::after {
    content: "optional";
    vertical-align: super;
    font-size: 0.7em;
    color: var(--color-primary);
}


[data-condition='documentation'] .parameter .type::before,
[data-condition='documentation'] .property .type::before {
    content: "<";
}

[data-condition='documentation'] .parameter .type::after,
[data-condition='documentation'] .property .type::after {
    content: ">";
}

[data-condition='documentation'] .variablelist {
    font-size: 0.9em;
}

[data-condition='documentation'] .variablelist .varlistentry .term {
    break-inside: avoid;
}

[data-condition='documentation'] .formalpara > p,
[data-condition='documentation'] .formalpara::before {
    display: inline;
    margin: 0;
}

[data-condition='documentation'] .formalpara .title {
    font-weight: normal;
    font-style: italic;
}

[data-condition='documentation'] .formalpara.properties::before,
[data-condition='documentation'] .formalpara.methods::before,
[data-condition='documentation'] .formalpara.methods::parameters {
    font-style: italic;
}

[data-condition='documentation'] .formalpara.properties::before {
    content: "Properties";
}

[data-condition='documentation'] .formalpara.methods::before {
    content: "Methods";
}

[data-condition='documentation'] .formalpara.parameters::before {
    content: "Parameters";
}

#SupportedCSSPropertiesSection {
    break-before: always;
}

#SupportedCSSPropertiesSection .formalpara .title {
    display: inline;
}

#SupportedCSSPropertiesSection .formalpara .title::before {
    content: "\25A0\00A0";
    color: var(--color-bulletpoint);
    vertical-align: top;
    font-style: normal;
}

#JavaScriptApiSection .formalpara > .variablelist > .varlistentry > .term::before {
    content: "\25A0\00A0";
    color: var(--color-bulletpoint);
    vertical-align: top;
    font-style: normal;
}

#JavaScriptApiSection .formalpara::before {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#JavaScriptApiSection li .variablelist::before {
    content: "Parameters:";
    display: block;
    font-style: italic;
    margin-left: -10mm;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

#JavaScriptApiSection .varlistentry .variablelist::before {
    content: "Parameters:";
    font-style: italic;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

[data-condition='documentation'] .formalpara > p > pre {
    margin-left: 1em;
    break-before: avoid;
    break-inside: avoid;
    break-after: avoid;
}

[data-condition='documentation'] .classname[data-condition] {
}

[data-condition='documentation'] .classname[data-condition]::before {
    content: -ro-attr(data-condition) ".";
    color: var(--color-tertiary);
}

[data-condition='documentation'] .type[data-condition='array']::before {
    content: "<Array<" !important;
}

[data-condition='documentation'] .type[data-condition='array'][data-xreflabel]::before {
    content: "<Array<" -ro-attr(data-xreflabel) !important;
}

[data-condition='documentation'] .type[data-condition='array']::after {
    content: ">>";
}

[data-condition='documentation'] .methodsynopsis {
    position: relative;
}

[data-condition='documentation'] .methodsynopsis > .type::before,
[data-condition='documentation'] .property > .type::before {
    content: "<";
}

[data-condition='documentation'] .methodsynopsis > .type[data-xreflabel]:empty::before,
[data-condition='documentation'] .property > .type[data-xreflabel]:empty::before {
    content: "<" -ro-attr(data-xreflabel);
}

[data-condition='documentation'] .synopsis .type[data-xreflabel]:empty::before {
    content: -ro-attr(data-xreflabel);
}

[data-condition='documentation'] .methodsynopsis > .type::after {
    content: "> ";
}

[data-condition='documentation'] .methodsynopsis > .methodparam::before {
    content: "(";
}

[data-condition='documentation'] .methodsynopsis > .methodparam ~ .methodparam::before {
    content: "";
}

[data-condition='documentation'] .methodsynopsis > .methodparam::after {
    content: ", ";
}

[data-condition='documentation'] .methodsynopsis > .methodparam:last-of-type::after {
    content: ")";
}

[data-condition='documentation'] .methodsynopsis > .methodparam > .type {
    display: none;
}

#JavaScriptApiSection .term > .parameter,
#JavaScriptApiSection .term > .property {
    font-family: inherit;
}

#SupportedCSSPropertiesSection .simplesect > .title + p {
    break-after: avoid;
}

#SupportedCSSPropertiesSection .simplesect > .formalpara {
    break-before: avoid;
}

.simplesect[data-condition~="deprecated"] > .title + p::before {
    content: "Deprecated! ";
    font-weight: bold;
}

pre > code.comment {
    color: #a0a0a0;
    white-space: inherit;
    font-size: 1em;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Glossar
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 #CSSGlossar{
     columns: 2;
     column-gap: 0;
     break-before: always;
 }
 
table.glossar * {
    border: none;
}