pre {
    tab-size: 3;
    -moz-tab-size: 3; /* Code for Firefox */
    -o-tab-size: 3; /* Code for Opera */
}

th {
    text-align: left;
}

table.rule {
    background-color: #EBEBE0;
}

table.rule td {
    text-align: center;
}

td.up {
    border-bottom: 1px solid black;
}

td {
    vertical-align: top;
}

.algorithm {
    background: #fafafc;
    border-left-style: solid;
    border-left-width: .5em;
    border-color: #c0c0c0;
    margin-bottom: 16px;
    padding: 8px;
}

.arg {
    font-weight: bold;
    color: #000080;
}

.def {
    background: #fcfcfc;
    border-left-style: solid;
    border-left-width: .5em;
    border-color: #c0c0c0;
    margin-bottom: 16px;
}

.def-text {
}

.def-text-body {
}

.def-header {
    color: #a0a0a0;
    font-size: 16px;
    padding-bottom: 8px;
}

.diagram-class {
    border: 1px solid light-dark(black, white);
    border-radius: 4px;
    width: 360px;
}

.diagram-class-name {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.diagram-class-properties {
    border-top: 1px solid light-dark(black, white);
}

.diagram-class-properties-start {
    padding: 8px;
}

.diagram-class-properties-section {
    border-top: 1px dashed #808080;
    padding: 8px;
}

.example {
    overflow-y: hidden !important;
}

.focus-node-selected {
    color: blue;
}

.focus-node-error {
    color: red;
}

.focus-node-error {
    color: red;
}

.component-class {
    font-weight: bold;
    font-size: 16px;
}

.parameter-context {
    font-weight: bold;
    font-size: 16px;
}

.parameters {
    font-weight: bold;
    font-size: 16px;
}

.part-header {
    font-weight: bold;
}

.syntax {
    border-left-style: solid;
    border-left-width: .5em;
    border-color: #d0d0d0;
    margin-bottom: 16px;
    padding: .5em 1em;
    background-color: light-dark(#f6f6f6, #2b2b2b);
    color: light-dark(black, #d0d0d0);
}

.syntax-rule-id {
    padding-right: 10px;
}

.syntax-rule-id-a {
    white-space: nowrap;
}

.validator-id-a {
    font-weight: bold;
    white-space: nowrap;
}

.term {
    font-style: italic;
}

.term-def-header {
    font-style: italic;
    font-weight: bold;
}

.term-table {
    border-collapse: collapse;
    border-color: #000000;
    margin: 16px;
}

.term-table td, th {
    border-width: 1px;
    border-style: solid;
    padding: 5px;
}

.todo {
    color: red;
}

pre {
    word-wrap: normal;
}

.turtle {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
    font-size: 14.4px;
    hyphens: none;
    overflow-x: auto;
    padding: .5em;
    tab-size: 3;
    -moz-tab-size: 3; /* Code for Firefox */
    -o-tab-size: 3; /* Code for Opera */
    text-align: start;
    margin-bottom: -1.5em;
    margin-top: -1.5em;
    white-space: pre;
}

.data-graph {
    background: #eeb;
    border: 1px solid #cc9;
    margin-top: 0.3em;
    color: black;
}

.data-graph:before {
    color: #996;
    content: "Data graph";
    padding-left: 0.4em;
}

.results-graph {
    background: #edb;
    border: 1px solid #bbb;
    margin-top: 0.3em;
    color: black;
}

.results-graph:before {
    color: #997;
    content: "Validation results";
    padding-left: 0.4em;
}

.shapes-graph {
    background: #deb;
    border: 1px solid #bbb;
    margin-top: 0.3em;
    color: black;
}

.shapes-graph:before {
    color: #888;
    content: "Shapes graph";
    padding-left: 0.4em;
}

/* no dark mode, keep colors for shapes-graph, data-graph, and results graph background */
code.hljs {
    --base: transparent;
    --mono-1: light-dark(#383a42, #abb2bf);
}

/* our syntax menu for switching */
div.syntaxmenu {
    border: 1px dotted black;
    padding: 0.5em;
    margin: 1em;
}

@media print {
    div.syntaxmenu {
        display: none;
    }
}

/* example tab selection */
.ds-selector-tabs .selectors {
    padding: 0;
    border-bottom: 1px solid #ccc;
    height: 28px;
}

.ds-selector-tabs .selectors button {
    display: inline-block;
    min-width: 54px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    height: 27px;
    padding: 0 8px;
    line-height: 27px;
    transition: all, 0.218s;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    color: light-dark(#666, #aaa);
    border: 1px solid transparent;
}

.ds-selector-tabs .selectors button:first-child {
    margin-left: 2px;
}

.ds-selector-tabs .selectors button.selected {
    color: #202020 !important;
    border: 1px solid #ccc;
    border-bottom: 1px solid #fff !important;
}

.ds-selector-tabs .selectors button:hover {
    background-color: transparent;
    color: #202020;
    cursor: pointer;
}

.ds-selector-tabs .tab {
    display: none;
}

.ds-selector-tabs .selected {
    display: block;
}