:root {
    --font-mono: 'UbuntuMono';
    --font-serif: 'MinionPro';
    --font-header: 'MyriadPro';
    --font-hand: 'Excalifont';
    --font-sans: 'Abel';

    --document-width: 1000px;

    --color-document-lightmode-background: hsl(0, 0%, 100%);
    --color-document-background: var(--color-document-lightmode-background);

    --color-accent: hsl(210, 100%, 35%);
    --color-accent-light: hsl(210, 100%, 55%);
    --color-accent-background: hsl(210, 100%, 95%);

    --color-avans-icon: hsl(347, 100%, 39%);
    --color-avans-text: var(--color-avans-icon);

    --color-text: hsl(0, 0%, 5%);
    --color-text-lighter: hsl(0, 0%, 40%);
    --color-text-light: hsl(0, 0%, 60%);
    --color-text-very-light: hsl(0, 0%, 90%);
    --color-link: var(--color-accent);
    --color-invalid-link: hsla(347, 100%, 39%, 0.3);
    --color-header-level: var(--color-accent);
    --color-box-background: hsl(0, 0%, 98%);
    --color-box-border: hsl(0, 0%, 80%);
    --color-inline-box-background: hsl(0, 0%, 98%);
    --color-inline-box-border: hsl(0, 0%, 80%);
    --color-mark: #ffffb5;
    --color-table-row-head: hsl(0, 0%, 90%);
    --color-table-row-head-alternative: hsl(0, 0%, 80%);
    --color-table-row-odd: hsl(0, 0%, 98%);
    --color-table-row-even: hsl(0, 0%, 95%);
    --color-table-row-hover: var(--color-accent-background);
    --color-list-item: var(--color-accent);
    --color-hidden-section: hsl(0, 93%, 42%);
    --color-hidden-section-background: hsl(0, 0%, 90%);
    --color-preview-banner-background: var(--color-mark);

    --color-slide-background: hsl(0, 0%, 100%);
    --color-slide-border: var(--color-accent);
    --color-card-front: var(--color-text);
    --color-card-front-background: var(--color-document-background);
    --color-card-back: hsl(0, 0%, 80%);
    --color-card-back-background: hsl(0, 0%, 50%);
    --color-card-correct: var(--color-accent);
    --color-card-correct-background: var(--color-document-background);
    --color-show-close-hover: hsl(0, 93%, 42%);
    --color-show-button: hsl(0, 0%, 80%);
    --color-show-button-background: transparent;
    --color-show-button-hover: var(--color-accent);
    --color-show-button-hover-background: hsl(0, 0%, 90%);
    --color-show-background: hsl(0, 0%, 30%);
    --color-show-indicator-next-slide-front: hsla(0, 0%, 5%, 0.2);
    --color-show-indicator-next-slide-back: transparent;
    --color-show-indicator-next-slide-hover: hsla(210, 100%, 40%, 0.2);
    --color-show-progress-background: transparent;
    --color-show-progress: var(--color-accent);

    --color-toolbar-foreground: var(--color-text);
    --color-toolbar-background: var(--color-box-background);
    --color-toolbar-border: var(--color-box-border);

    --color-panel-background: hsl(0, 0%, 40%);
    --color-panel-button: hsl(0, 0%, 80%);
    --color-panel-close: hsl(0, 0%, 80%);
    --color-panel-button-hover: var(--color-accent);
    --color-panel-close-hover: hsl(0, 93%, 42%);
    --color-editsource-text: var(--color-text);
    --color-editsource-background: var(--color-box-background);
    --color-editsource-border: var(--color-box-border);
    --color-editsource-linenumber: var(--color-text-light);

    --color-white: var(--color-document-background);
    --color-black: var(--color-text);
    --color-grey: var(--color-text-lighter);
    --color-gray: var(--color-grey);
    --color-silver: var(--color-text-light);
    --color-lightgrey: var(--color-text-very-light);
    --color-lightgray: var(--color-lightgrey);
    --color-blue: var(--color-accent);
    --color-red: var(--color-avans-icon);
    --color-yellow: hsl(64, 100%, 43%);
    --color-green: hsl(120, 95%, 23%);
    --color-purple: hsl(293, 95%, 23%);
    --color-orange: hsl(36, 100%, 41%);
    --color-pink: hsl(328, 100%, 44%);
    --color-cyan: hsl(182, 100%, 34%);

    --color-parameters-name: var(--color-accent);
    --color-parameters-value: var(--color-pink);
    --color-parameters-keyword: var(--color-green);
    --color-parameters-comment: var(--color-silver);

    --color-message-background: hsla(0, 0%, 90%, 0.7);
    --color-message-text: var(--color-text);
    --color-message-warning: var(--color-orange);
    --color-message-info: var(--color-yellow);
    --color-message-error: var(--color-red);

    --color-hover-color: hsl(0, 0%, 50%);
    --color-hover-background: transparent;

    --color-syntax-background: var(--color-box-background);
    --color-syntax-text: var(--color-black);
    --color-syntax-style-quote: var(--color-gray);
    --color-syntax-tag-name: var(--color-orange);
    --color-syntax-tag-symbol: var(--color-gray);
    --color-syntax-tag-attribute: var(--color-red);
    --color-syntax-number: var(--color-purple);
    --color-syntax-section: var(--color-red);
    --color-syntax-keyword: var(--color-blue);
    --color-syntax-bullet: var(--color-blue);
    --color-syntax-symbol: var(--color-red);
    --color-syntax-params: var(--color-text);
    --color-syntax-string: var(--color-green);
    --color-syntax-link: var(--color-purple);
    --color-syntax-function: var(--color-pink);
    --color-syntax-variable: var(--color-red);
    --color-syntax-figure: var(--color-pink);
    --color-syntax-code: var(--color-gray);
    --color-syntax-code-background: hsl(0, 0%, 93%);
    --color-syntax-comment: var(--color-gray);
    --color-syntax-use-param: var(--color-cyan);
    --color-syntax-table: inherit;
    --color-syntax-table-background: hsla(328, 100%, 44%, 0.1);

    --color-print-text: black;
    --color-print-text-lighter: hsl(0, 0%, 40%);
    --color-print-text-light: hsl(0, 0%, 70%);
    --color-print-link: var(--color-print-text);
    --color-print-box-background: var(--color-box-background);
    --color-print-box-border: var(--color-inline-box-border);
    --color-print-inline-box-background: var(--color-inline-box-background);
    --color-print-inline-box-border: var(--color-inline-box-border);
    --color-print-mark: hsl(0, 0%, 93%);
    --color-print-table-row-head: var(--color-table-row-head);
    --color-print-table-row-odd: var(--color-table-row-odd);
    --color-print-table-row-even: var(--color-table-row-even);
    --color-print-list-item: var(--color-print-text);
}

body.dark-mode {
    --color-document-background: hsl(0, 0%, 20%);

    --color-accent: hsl(210, 100%, 70%);
    --color-accent-light: hsl(210, 50%, 50%);
    --color-accent-background: hsl(210, 20%, 30%);

    --color-avans-icon: hsl(347, 70%, 49%);
    --color-avans-text: var(--color-avans-icon);

    --color-text: hsl(0, 0%, 95%);
    --color-text-lighter: hsl(0, 0%, 60%);
    --color-text-light: hsl(0, 0%, 50%);
    --color-text-very-light: hsl(0, 0%, 35%);
    --color-link: var(--color-accent);
    --color-invalid-link: hsla(347, 70%, 49%, 0.3);
    --color-header-level: var(--color-accent);
    --color-box-background: hsl(0, 0%, 17%);
    --color-box-border: hsl(0, 0%, 50%);
    --color-inline-box-background: hsl(0, 0%, 25%);
    --color-inline-box-border: hsl(0, 0%, 50%);
    --color-mark: #5c5c2e;
    --color-table-row-head: hsl(0, 0%, 30%);
    --color-table-row-head-alternative: hsl(0, 0%, 45%);
    --color-table-row-odd: hsl(0, 0%, 22%);
    --color-table-row-even: hsl(0, 0%, 25%);
    --color-table-row-hover: var(--color-accent-background);
    --color-list-item: var(--color-accent);
    --color-hidden-section: hsl(347, 60%, 29%);
    --color-hidden-section-background: hsl(0, 0%, 35%);
    --color-preview-banner-background: hsl(60, 100%, 15%);

    --color-slide-background: var(--color-document-background);
    --color-slide-border: var(--color-accent);
    --color-slide-accent: var(--color-accent);
    --color-slide-text: var(--color-text);
    --color-slide-text-lighter: var(--color-text-lighter);
    --color-slide-text-light: var(--color-text-light);
    --color-card-front: var(--color-text);
    --color-card-front-background: var(--color-document-background);
    --color-card-back: hsl(0, 0%, 40%);
    --color-card-back-background: hsl(0, 0%, 10%);
    --color-card-correct: var(--color-accent);
    --color-card-correct-background: var(--color-document-background);
    --color-show-close-hover: var(--color-avans-icon);
    --color-show-button: hsl(0, 0%, 80%);
    --color-show-button-background: transparent;
    --color-show-button-hover: var(--color-accent);
    --color-show-button-hover-background: hsl(0, 0%, 90%);
    --color-show-background: hsl(0, 0%, 24%);
    --color-show-indicator-next-slide-front: hsla(0, 0%, 90%, 0.3);
    --color-show-indicator-next-slide-back: transparent;
    --color-show-indicator-next-slide-hover: hsla(210, 100%, 40%, 0.2);
    --color-show-progress-background: transparent;
    --color-show-progress: var(--color-accent);

    --color-toolbar-foreground: var(--color-text);
    --color-toolbar-background: var(--color-box-background);
    --color-toolbar-border: var(--color-box-border);

    --color-panel-background: hsl(0, 0%, 30%);
    --color-panel-button: hsl(0, 0%, 80%);
    --color-panel-close: hsl(0, 0%, 80%);
    --color-panel-button-hover: var(--color-accent);
    --color-panel-close-hover: var(--color-avans-icon);
    --color-editsource-text: var(--color-text);
    --color-editsource-background: var(--color-box-background);
    --color-editsource-border: var(--color-box-border);
    --color-editsource-linenumber: var(--color-text-light);

    --color-white: var(--color-document-background);
    --color-black: var(--color-text);
    --color-grey: var(--color-text-lighter);
    --color-gray: var(--color-grey);
    --color-silver: var(--color-text-light);
    --color-lightgrey: var(--color-text-very-light);
    --color-lightgray: var(--color-lightgrey);
    --color-blue: var(--color-accent);
    --color-red: var(--color-avans-icon);
    --color-yellow: hsl(69, 100%, 65%);
    --color-green: hsl(120, 90%, 60%);
    --color-purple: hsl(293, 100%, 66%);
    --color-orange: hsl(36, 100%, 45%);
    --color-pink: hsl(328, 90%, 60%);
    --color-cyan: hsl(182, 100%, 44%);

    --color-parameters-name: var(--color-accent);
    --color-parameters-value: var(--color-pink);
    --color-parameters-keyword: var(--color-green);
    --color-parameters-comment: var(--color-silver);

    --color-message-background: hsla(0, 0%, 10%, 0.7);
    --color-message-text: var(--color-text);
    --color-message-warning: var(--color-orange);
    --color-message-info: var(--color-yellow);
    --color-message-error: var(--color-red);

    --color-hover-color: hsl(0, 0%, 70%);
    --color-hover-background: transparent;

    --color-syntax-background: var(--color-box-background);
    --color-syntax-text: var(--color-black);
    --color-syntax-style-quote: var(--color-orange);
    --color-syntax-tag-name: var(--color-green);
    --color-syntax-tag-symbol: var(--color-silver);
    --color-syntax-tag-attribute: var(--color-blue);
    --color-syntax-number: var(--color-purple);
    --color-syntax-section: var(--color-green);
    --color-syntax-keyword: var(--color-pink);
    --color-syntax-bullet: var(--color-blue);
    --color-syntax-symbol: var(--color-orange);
    --color-syntax-params: var(--color-text);
    --color-syntax-string: var(--color-yellow);
    --color-syntax-link: var(--color-purple);
    --color-syntax-function: var(--color-blue);
    --color-syntax-variable: var(--color-pink);
    --color-syntax-figure: var(--color-yellow);
    --color-syntax-code: var(--color-grey);
    --color-syntax-code-background: hsl(0, 0%, 25%);
    --color-syntax-comment: var(--color-silver);
    --color-syntax-table: inherit;
    --color-syntax-use-param: var(--color-purple);
    --color-syntax-table-background: hsla(328, 90%, 60%, 0.2);
}

html {
    width: 100%;
}

body {
    font-family: var(--font-serif);
    font-size: 18pt; /* large screens (from 1000px); for medium and small screens, see bottom */
    color: var(--color-text);
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: hsl(0, 0%, 100%);    /* manual color "--color-document-background" because of bug in some browsers */
}
body.dark-mode {
    background-color: hsl(0, 0%, 20%);    /* manual color "--color-document-background" because of bug in some browsers */
}
.only-preview {
    display: none;
}
/* ONLY PREVIEW START */
.only-preview {
    display: block;
}
/* ONLY PREVIEW END */

div {
    margin: 0;
    padding: 0;
    border: 0;
}

p {
    font-size: 1.0em;
    line-height: 1.3em;
    margin: 0.9em 0;
    text-align: justify;
}
p:first-of-type{
    margin-top: 0;
}
p:last-of-type {
    margin-bottom: 0;
}

h1, h2, h3, h4 {
    font-family: var(--font-header);
    font-weight: normal;
    white-space: pre-wrap;
    padding: 0;
    page-break-after: avoid;
    break-after: avoid-page;
    page-break-inside: avoid;
}

/* ONLY PREVIEW START */
h2:hover, h3:hover, h4:hover {
    color: var(--color-hover-color);
}
/* ONLY PREVIEW END */

h1 {
    text-transform: uppercase;
    font-size: 2.5em;
    line-height: 1.2em;
    margin: 0.8em 0 0.4em 0;
    border-bottom: 0;
}

h2 {
    font-size: 1.8em;
    line-height: 1.3em;
    margin: 0.8em 0 0.4em 0;
    border-bottom: 0.04em solid var(--color-box-border);
    /* position: sticky; */
    top: 0;
    background-color:var(--color-document-background);
    padding-top: 0.2em;
    padding-bottom: 0.1em;
    z-index: 999;
}

h3 {
    font-size: 1.5em;
    line-height: 1.4em;
    margin: 0.8em 0 0.4em 0;
}

h4 {
    font-size: 1.2em;
    line-height: 1.4;
    margin: 0.4em 0 0.4em 0;
}

h2>span.level, h3>span.level, h4>span.level {
    text-align: left;
    float: right;
    font-size: 0.8em;
    color: var(--color-header-level);
    margin: 0.1em 0px 0px 0px;
}

h2>a.to-top, h3>a.to-top, h4>a.to-top {
    float:right;
    font-size: 0.8em;
}

h2>a.to-top::before, h3>a.to-top::before, h4>a.to-top::before {
    content: "   ↑   ";
}

a, a:active, a:visited {
    text-decoration: none;
    color: var(--color-link);
}

a:hover {
    background-color: var(--color-accent-background);
    border: 0;
    border-radius: 0.2em;
}

a.intern-link {
    text-decoration: none;
}
a.intern-link.invalid {
    /* text-decoration: wavy underline var(--color-invalid-link) 0.10em; */
    background-color: var(--color-invalid-link);
}

a.extern-link {
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
}

table {
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    padding: 0;
    margin: 0.8em 0;
    text-align: left;
}

thead tr th { border-top: 0.02em solid var(--color-box-border); }
thead tr th { border-bottom: 0.02em solid var(--color-box-border); }
thead tr th:last-child, tbody tr td:last-child { border-right: 0.02em solid var(--color-box-border); }
tbody tr:last-child td { border-bottom: 0.04rem solid var(--color-box-border); }
thead tr th:first-child, tbody tr td:first-child { border-left: 0.02em solid var(--color-box-border); }

thead tr th:first-child { border-top-left-radius: 0.5em; }
thead tr th:last-child { border-top-right-radius: 0.5em; }
tbody tr:last-child td:first-child { border-bottom-left-radius: 0.5em; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 0.5em; }

thead tr {
    background-color: var(--color-table-row-head);
}

tbody tr:nth-child(odd) {
    background-color: var(--color-table-row-odd);
}

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

tbody tr:hover {
    background-color: var(--color-table-row-hover);
}

th {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    padding: 0.0em 0.4em;
    font-weight: bold;
    word-wrap: break-word;
    vertical-align: middle;
}
th.click-show-table {
    cursor: pointer;
}

td {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    padding: 0.0em 0.4em;
    word-wrap: break-word;
    vertical-align: top;
}

th.align-left, td.align-left {
    text-align: left;
}

th.align-center, td.align-center {
    text-align: center;
}

th.align-right, td.align-right {
    text-align: right;
}

img {
    border: 0;
    max-width: 100%;
    height:auto;
    width:auto;
}

hr {
    border: 0;
    border-top: 0.02em solid var(--color-box-border);
    margin: 1.0em 0;
    width: 100%;
}

div.b00k-jsvg-drawing {
    text-align: center;
    max-width: 100%;
}
div.b00k-jsvg-drawing svg {
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    height: auto;
}

figure {
    text-align: center;
    margin: 1.5em 0;
}

figure > table, figure > img, figure > svg, figure > div.b00k-drawing {
    margin: 0 auto;
}

figure > p {
    text-align: center;
    margin: 0;
}

figcaption {
    margin-top: 0.4em;
    font-size: 0.9em;
    font-style: italic;
    color: var(--color-text-light);
}

figcaption > span.index::after {
    content: ":\2000";
}

pre {   /* code block */
    font-family: var(--font-mono);
    font-size: 0.8em;
    white-space: pre-wrap;
    line-height: 1.3em;
    background-color: var(--color-box-background);
    margin: 1.0em 0 1.0em 0;
    padding: 0.5em;
    border: 0.02em solid var(--color-box-border);
    border-radius: 0.6em;
    page-break-inside: avoid;
    text-align: left;
    overflow: visible;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-wrap: unrestricted;
}

:not(pre) > code {  /* inline code */
    font-family: var(--font-mono);
    font-size: 0.85em;
    white-space: normal;
    line-height: 1.0em;
    background-color: var(--color-inline-box-background);
    padding: 0.1em 0.3em 0.2em 0.3em;
    margin: 0 0.05em;
    border-radius: 0.3em;
    border: 0.02em solid var(--color-inline-box-border);
}

div.codeblock-parameter {
    font-family: var(--font-mono);
    font-size: 0.88em;
    float: right;
    margin: 0.3em 0 0.3em 0;
    cursor: default;
}

div.codeblock-parameter-content {
    clear: both;
}

span.math {  /* inline math */
    font-size: 0.85em;
}

div.math {  /* block math */
    font-size: 0.85em;
    margin: 1.0em 0;
}

em {  /* italic */
    font-size: 1.0em;
    font-style: italic;
}

strong {  /* bold */
    font-size: 1.0em;
    font-weight: bold;
}

del {  /* strikethrough */
    font-size: 1.0em;
    text-decoration: line-through;
}

mark {  /* highlight */
    font-size: 1.0em;
    background: var(--color-mark);
    border-radius: 0.4em;
    padding: 0 0.2em 0.08em 0.2em;
    color: var(--color-text);
}

blockquote {
    /* border: 0.1em dashed var(--color-box-border); */
    margin: 1.5em 2em 1.5em 2em;
    padding: 1em;
    color: var(--color-text);
    width: calc(100% - 6.2em);
    /* background-color: var(--color-box-background); */
    /* border-radius: 1em; */
    font-family: var(--font-hand);
    font-size: 1.0em;
}

ul, ol {
    padding-inline-start: 2.0em;
    margin-block-start: 0.0em;
    margin-block-end: 0.0em;
}
div.b00k-list {
    margin: 0 0 1.5em 0;
}
div.b00k-list:last-child {
    margin: 0;
}
p:has(+ .b00k-list) {
    margin-bottom: 0.2em;
}
ul.level-first, ul.level-odd {
    list-style-type: disc;
}

ul.level-even {
    list-style-type: circle;
}

ol.level-first, ol.level-odd {
    /* list-style-type: lower-alpha; */
    list-style-type: decimal;
}

ol.level-even {
    /* list-style-type: lower-roman; */
    list-style-type: lower-alpha;
}

li {
    margin: 0.2em 0;
    padding: 0;
}

li::marker {
    color: var(--color-list-item);
    font-size: 1.0em;
}

li > p {
    margin: 0 0 0 0.2em;
}

ul.toc-list {
    list-style-type: none;
    padding-inline-start: 0;
    border: 0.1em dashed var(--color-box-border);
    margin: 1.5em 2em 1.5em 2em;
    padding: 1em;
    color: var(--color-text);
    width: calc(100% - 6.2em);
    background-color: var(--color-box-background);
    border-radius: 1em;
}
blockquote ul.toc-list {
    margin: 0 0 -1.5em 1.0em;
}
ul.toc-list li.level-2 {
    margin: 0.2em 0 0.2em 0.0em;
    padding: 0;
}
ul.toc-list li.level-3 {
    margin: 0.2em 0 0.2em 1.5em;
    padding: 0;
}
ul.toc-list li.level-4 {
    margin: 0.2em 0 0.2em 3.0em;
    padding: 0;
}

.font-serif {
    font-family: var(--font-serif);
}
.font-mono {
    font-family: var(--font-mono);
}
.font-header {
    font-family: var(--font-header);
}
.font-sans {
    font-family: var(--font-sans);
}
.font-hand {
    font-family: var(--font-hand);
}

/* ========================================================================= */

div#document-wrap {
    width: 100%;
    text-align: center;
}
div#document-wrap.hide {
    display: none;
}

div#document {
    width: calc(100% - 2*1.0em);
    max-width: var(--document-width);
    margin: 2.0em auto;
    text-align: left;
}

div.hidden-section {
    border-left: 0.2em solid var(--color-hidden-section);
    padding: 1.0em;
    background-color: var(--color-hidden-section-background);
    margin: 1em 0;
}
div.hidden-section::before {
content: "✗";
font-size: 2.0em;
color: var(--color-hidden-section);
}

span.b00k-logo {
    font-size: 0.8em;
}

div#b00k-preview-banner {
    position: fixed;
    font-style: italic;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 10000;
    background-color: var(--color-preview-banner-background);
    color: var(--color-text-lighter);
    font-size: 0.9em;
    text-align: center;
    border-top: solid 0.02em var(--color-box-border);
}

/* ========================================================================= */

div#toolbar {
    position: fixed;
    right: 1.0em;
    top: 1.5em;
    margin: 0;
    z-index: 1000;
    max-width: calc(100% - 6*0.5em);
    margin: 0;
    background-color: var(--color-toolbar-background);
    border: solid 0.02em var(--color-toolbar-border);
    border-radius: 0.5em;
    text-align: center;
}
div#toolbar.hide {
    display: none;
}

div#toolbar div.b00k-menu-button {
    color: var(--color-toolbar-foreground);
    font-size: 0.8em;
    cursor: default;
}

div#toolbar div.b00k-menu-button a {
    display: block;
}

div#toolbar div.b00k-menu-button a:hover {
    background-color: transparent;
}

div#toolbar div.b00k-menu-button svg {
    float:right;
    width: 1.8em;
    height: 1.8em;
    margin: 0.4em 0.4em;
    stroke: var(--color-toolbar-foreground);
}

div#toolbar div.b00k-menu {
    display: none;
    clear: both;
}

div#toolbar div.b00k-menu hr {
    margin: 0;
    border: 0;
    border-top: 0.02em solid var(--color-toolbar-border);
}

div#toolbar ul.b00k-menu-list {
    list-style-type: none;
    margin: 0;
    max-height: 12em;
    overflow-y: auto;
    overflow-x: hidden;
    padding-inline-start: 0;
}

div#toolbar ul.b00k-menu-list li.b00k-menu-item {
    margin: 0 auto;
    text-align: left;
}

div#toolbar ul.b00k-menu-list li.b00k-menu-item a {
    font-size: 0.9em;
    color: var(--color-toolbar-foreground);
    text-decoration: none;
    margin: 0 auto;
    border-radius: 0.2em;
    background-color: transparent;
    border: 0.02em solid transparent;
    display: block;
    padding: 0.2em 0;
}

div#toolbar ul.b00k-menu-list li.b00k-menu-item a.active {
    color: var(--color-accent)
}

div#toolbar ul.b00k-menu-list li.b00k-menu-item a:hover {
    background-color: var(--color-accent-background);
    color: var(--color-accent);
}

div#toolbar ul.b00k-menu-list li.b00k-menu-item a div.b00k-padder {
    margin: 0.1em 0.6em;
}

div#toolbar ul.b00k-menu-list li.b00k-menu-item.only-preview {
    background-color: var(--color-preview-banner-background);
}

div#toolbar ul.b00k-menu-actions {
    list-style-type: none;
    margin: 0;
    padding-inline-start: 0;
}

div#toolbar ul.b00k-menu-actions li.b00k-menu-item {
    margin: 0 auto;
    text-align: left;
}

div#toolbar ul.b00k-menu-actions li.b00k-menu-item svg{
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    position: relative;
    top: 0.3em;
}

div#toolbar ul.b00k-menu-actions li.b00k-menu-item a {
    font-size: 0.9em;
    color: var(--color-toolbar-foreground);
    text-decoration: none;
    margin: 0 auto;
    border-radius: 0.2em;
    background-color: transparent;
    border: 0.02em solid transparent;
    display: block;
    padding: 0.2em 0;
}
div#toolbar ul.b00k-menu-actions li.b00k-menu-item a.active {
    color: var(--color-accent)
}

div#toolbar ul.b00k-menu-actions li.b00k-menu-item a:hover {
    background-color: var(--color-accent-background);
    color: var(--color-accent);
}

div#toolbar ul.b00k-menu-actions li.b00k-menu-item a div.b00k-padder {
    margin: 0.1em 0.6em;
}

div#toolbar ul.b00k-menu-actions li.b00k-menu-item.only-preview {
    background-color: var(--color-preview-banner-background);
}

div#toolbar div.b00k-menu div.b00k-menu-link {
    text-align: center;
    margin: 0.2em 0;
    font-size: 0.8em;
}

/* ========================================================================= */

div#messages {
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    z-index: 10001;
    background-color: var(--color-message-background);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    text-align: center;
    cursor: pointer;
    padding: 0 2.0em;
    overflow-x: hidden;
    overflow-y: auto;
}
div#messages.hide {
    display: none;
}
div#messages div.message {
    margin: 5.0em auto;
    cursor: pointer;
}
div#messages div.message-warning {
    color: var(--color-message-warning);
}
div#messages div.message-info {
    color: var(--color-message-info);
}
div#messages div.message-error {
    color: var(--color-message-error);
}
div#messages div.message-warning,
div#messages div.message-info,
div#messages div.message-error {
    font-size: 6.0em;
}
div#messages div.message-text {
    color: var(--color-message-text);
    font-size: 1.5em;
    font-family: var(--font-mono);
}

/* ========================================================================= */

div#file-open table,
div#file-open tr,
div#file-open td {
    border: 0;
    background: transparent;
}
div#file-open div.file-open-logo {
    margin: 4em 2em 1em 2em;
    cursor: default;
}
div#file-open div.file-open-logo > span {
    font-size: 4em;
    color: var(--color-accent);
}
div#file-open div.file-new-file a,
div#file-open div.file-open-file a {
    display: block;
    width: 4.0em;
    height: 4.0em;
    padding: 0.4em;
    border-radius: 1.0em;
    border: solid 0.10em transparent;
}
div#file-open div.file-new-file a:hover,
div#file-open div.file-open-file a:hover {
    background-color: var(--color-accent-background);
    border: solid 0.10em var(--color-accent);
}
div#file-open div.file-new-file a svg,
div#file-open div.file-open-file a svg {
    width: 4.0em;
    height: 4.0em;
    fill: var(--color-text-light);
}
div#file-open div.file-open-home-computer {
    display: block;
}
div#file-open div.file-open-home-mobile {
    display: none;
}
div#file-open div.file-open-home-computer,
div#file-open div.file-open-home-mobile {
    position: fixed;
    bottom: 1.0em;
    right: 1.0em;
}
div#file-open div.file-open-home-computer a,
div#file-open div.file-open-home-mobile a {
    display: block;
    fill: var(--color-text-very-light);
}
div#file-open div.file-open-home-computer a:hover,
div#file-open div.file-open-home-mobile a:hover {
    fill: var(--color-accent);
    background-color: transparent;
}
div#file-open div.file-open-home-computer a svg,
div#file-open div.file-open-home-mobile a svg {
    width: 3.0em;
    height: 3.0em;
}

/* ========================================================================= */

div#source-code-panel,
div#icon-view-panel,
div#color-view-panel,
div#symbol-view-panel,
div#help-panel,
div#image-tool-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1000;
    background-color: var(--color-panel-background);
}
div#icon-view-panel div.icon-name,
div#color-view-panel div.color-name,
div#symbol-view-panel div.symbol-name {
    position: fixed;
    display: block;
    top: 2.0em;
    left: 2.8em;
    font-size: 0.9em;
    color: var(--color-accent);
    font-weight: bold;
    font-family: var(--font-mono);
    background-color: var(--color-box-background);
    padding: 0.2em 1.0em;
    border: solid 0.02em var(--color-toolbar-border);
    border-radius: 0.6em;
}
div#source-code-panel a.close,
div#source-code-panel a.render,
div#source-code-panel a.export,
div#source-code-panel a.icons,
div#source-code-panel a.colors,
div#source-code-panel a.symbols,
div#source-code-panel a.cheatsheet,
div#source-code-panel a.image-tool,
div#icon-view-panel a.close,
div#color-view-panel a.close,
div#symbol-view-panel a.close,
div#help-panel a.close,
div#image-tool-panel a.close {
    position: fixed;
    display: block;
    width: 2.0em;
    height: 2.0em;
    top: 2.0em;
    right: 3.0em;
    font-size: 0.8em;
    fill: var(--color-panel-button);
    border-radius: 0.2em;
}
div#source-code-panel a.close,
div#icon-view-panel a.close,
div#color-view-panel a.close,
div#symbol-view-panel a.close,
div#help-panel a.close,
div#image-tool-panel a.close {
    fill: var(--color-panel-close);
}
div#source-code-panel a.render:hover,
div#source-code-panel a.export:hover,
div#source-code-panel a.icons:hover,
div#source-code-panel a.colors:hover,
div#source-code-panel a.symbols:hover,
div#source-code-panel a.cheatsheet:hover,
div#source-code-panel a.image-tool:hover {
    fill: var(--color-panel-button-hover);
}
div#source-code-panel a.close:hover,
div#icon-view-panel a.close:hover,
div#color-view-panel a.close:hover,
div#symbol-view-panel a.close:hover,
div#help-panel a.close:hover,
div#image-tool a.close:hover {
    fill: var(--color-panel-close-hover);
}
div#source-code-panel a.render {
    right: auto;
    left: 3.0em;
}
div#source-code-panel a.export {
    right: auto;
    left: 6.0em;
}
div#source-code-panel a.icons {
    right: auto;
    left: 9.0em;
}
div#source-code-panel a.colors {
    right: auto;
    left: 12.0em;
}
div#source-code-panel a.symbols {
    right: auto;
    left: 15.0em;
}
div#source-code-panel a.image-tool {
    right: auto;
    left: 18.0em;
}
div#source-code-panel a.cheatsheet {
    right: auto;
    left: 21.0em;
}
div#source-code-panel a.close svg,
div#source-code-panel a.render svg,
div#source-code-panel a.export svg,
div#source-code-panel a.icons svg,
div#source-code-panel a.colors svg,
div#source-code-panel a.symbols svg,
div#source-code-panel a.cheatsheet svg,
div#source-code-panel a.image-tool svg,
div#icon-view-panel a.close svg,
div#color-view-panel a.close svg,
div#symbol-view-panel a.close svg,
div#help-panel a.close svg,
div#image-tool-panel a.close svg {
    width: 2.0em;
    height: 2.0em;
}
div#source-code-panel .select-div {
    position: fixed;
    top: 4.5em;
    left: 3.0em;
    width: calc(100% - 6.0em);
    overflow: hidden;
}
div#source-code-panel .select-div select {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.75em;
    color: var(--color-editsource-text);
    background-color: var(--color-editsource-background);
    border-radius: 0.4em;
    padding: 0.2em 0.4em;
    box-sizing: border-box;
}
div#source-code-panel .select-div select:focus {
    outline: none;
    border: solid 0.02em var(--color-editsource-border);
    border-radius: 0.4em;
}
div#source-code-panel .select-div select option {
    color: var(--color-editsource-text);
    background-color: var(--color-editsource-background);
}
div#source-code-panel .textarea-wrapper {
    position: fixed;
    bottom: 4.5em;
    right: 3.0em;
    top: calc(3.0em + 2.0em + 2.0em);
    left: 3.0em;
    border: solid 0.02em var(--color-editsource-border);
    border-radius: 0.8em;
    overflow: hidden;
}
div#source-code-panel .source-code-input {
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-family: var(--font-mono);
    font-size: 0.80em;
    white-space: pre-wrap;
    line-height: 1.3em;
    margin: 0;
    padding: 0.8em;
    text-align: left;
    overflow: visible;
    resize: none;
    background-color: var(--color-editsource-background);
    color: var(--color-editsource-text);
    border: 0;
}
div#source-code-panel .source-code-input:focus {
    outline: none;
    border: 0;
}
/* div#source-code-panel .source-code-input span.line-number {
    display: inline-block;
    width: 2.0em;
    text-align: right;
    color: var(--color-editsource-linenumber);
    margin-right: 0.5em;
    user-select: none;
} */

div#icon-view-panel div.icon-container,
div#color-view-panel div.color-container,
div#symbol-view-panel div.symbol-container,
div#help-panel div.help-container,
div#image-tool-panel div.image-tool-container {
    position: fixed;
    bottom: 4.5em;
    right: 3.0em;
    top: calc(3.0em + 2.0em);
    left: 3.0em;
    font-size: 0.80em;
    background-color: var(--color-box-background);
    border: solid 0.02em var(--color-toolbar-border);
    border-radius: 0.8em 0 0 0.8em;
    margin: 0;
    padding: 0;
    text-align: left;
    overflow-x: hidden;
    overflow-y: auto;
    resize: none;
}
div#icon-view-panel div.icon-container div.icon-disclaimer {
    margin: 0em;
    text-align: center;
    width: 100%;
}
div#icon-view-panel div.icon-container div.icon-disclaimer table {
    margin: 0.5em auto;
    width: 80%
}
div#icon-view-panel div.icon-container svg {
    margin: 0.5em;
}
div#color-view-panel div.color-container > div {
    float: left;
    margin: 1.0em;
    width: 4.0em;
    height: 4.0em;
    border-radius: 1.0em;
    border: solid 0.1em var(--color-toolbar-border);
}
div#color-view-panel div.color-container > hr {
    border:0;
}
div#color-view-panel div.color-container > span {
    font-size: 1.1em;
    display: block;
    margin: 1.0em 0 -2.0em 0;
    width: 100%;
    text-align: center;
}
div#symbol-view-panel div.symbol-container div.symbol,
div#symbol-view-panel div.symbol-container div.symbol-letter {
    float: left;
    margin: 0.2em 0.0em 0.2em 1.0em;
    width: 4.0em;
    height: 5.0em;
    line-height: 5.0em;
    text-align: center;
}
div#symbol-view-panel div.symbol-container div.symbol {
    border-radius: 1.0em;
    border: solid 0.1em var(--color-toolbar-border);
}
div#symbol-view-panel div.symbol-container div.symbol-letter {
    color: var(--color-accent);
    margin-bottom: -1.0em;
    margin-top: 0.5em;
    width: auto;
}
div#symbol-view-panel div.symbol-container div.symbol > span,
div#symbol-view-panel div.symbol-container div.symbol-letter > span {
    cursor: default;
    font-size: 3.0em;
}
div#symbol-view-panel div.symbol-container div.symbol-letter > span {
    font-family: var(--font-header);
}
div#symbol-view-panel div.symbol-container div.source {
    margin: 1.0em 1.0em 0 1.0em;
    text-align: center;
}
div#symbol-view-panel div.symbol-container hr {
    border: 0;
}
div#help-panel div.help-container > div {
    margin: 2em 4%;
    width: 90%;
}
div#help-panel div.help-container > pre {
    width: 90%;
    margin: 2em 4%;
    font-size: 1.0em;
    border: 0;
}

div#image-tool-panel div.image-tool-container div.image-tool-header {
    position: absolute;
    top: 3.0em;
    left: 3.0em;
    right: 3.0em;
    height: 5.0em;
}
div#image-tool-panel div.image-tool-container div.image-tool-header a.upload-image {
    margin: 0 2.0em;
    display: block;
    float: left;
}
/* div#image-tool-panel div.image-tool-container div.image-tool-header a.paste-clipboard {
    margin: 0 2.0em;
    display: block;
    float: left;
} */
/* div#image-tool-panel div.image-tool-container div.image-tool-header div.image-drop-zone {
    margin: 0 2.0em;
    display: block;
    float: left;
    border: dashed 0.04em var(--color-text);
    border-radius: 0.4em;
}
div#image-tool-panel div.image-tool-container div.image-tool-header div.image-drop-zone div {
    margin: 0.5em 1.0em;
    color: var(--color-text-light);
    font-size: 0.8em;
    user-select: none;
}
div#image-tool-panel div.image-tool-container div.image-tool-header div.image-drop-zone.on-drop {
    border-color: var(--color-accent);
    background-color: var(--color-mark);
}
div#image-tool-panel div.image-tool-container div.image-tool-header div.image-drop-zone.on-drop div {
    color: var(--color-text);
} */
div#image-tool-panel div.image-tool-container div.image-tool-header form.image-tool-form {
    margin: 0 2.0em;
    display: block;
    float: left;
}
div#image-tool-panel div.image-tool-container div.image-tool-header form.image-tool-form input.image-width-height {
    width: 5em;
    background-color: var(--color-document-background);
    padding: 0.2em 0.4em;
    font-size: 0.8em;
    color: var(--color-text);
    border: 0.04em solid var(--color-text);
    border-radius: 0.4em;
    font-family: var(--font-mono);
}
/* div#image-tool-panel div.image-tool-container div.image-tool-header form.image-tool-form input.image-url {
    width: 20em;
    background-color: var(--color-document-background);
    padding: 0.2em 0.4em;
    font-size: 0.8em;
    color: var(--color-text);
    border: 0.04em solid var(--color-text);
    border-radius: 0.4em;
    font-family: var(--font-mono);
} */
div#image-tool-panel div.image-tool-container div.image-tool-output {
    position: absolute;
    bottom: 3.0em;
    width: 40%;
    left: 3.0em;
    top: 8.0em;
    background-color: var(--color-panel-background);
    border: solid 0.02em var(--color-toolbar-border);
    border-radius: 0.8em;
    padding: 1.0em;
    overflow-x: hidden;
    overflow-y: auto;
}
div#image-tool-panel div.image-tool-container div.image-tool-output img {
    max-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}
div#image-tool-panel div.image-tool-container div.image-tool-source {
    position: absolute;
    bottom: 3.0em;
    width: 40%;
    right: 3.0em;
    top: 8.0em;
    background-color: var(--color-panel-background);
    border: solid 0.02em var(--color-toolbar-border);
    border-radius: 0.8em;
    overflow: hidden
}
div#image-tool-panel div.image-tool-container div.image-tool-source textarea {
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: var(--color-editsource-text);
    border: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.8em;
    resize: none;
    overflow-x: hidden;
    overflow-y: auto;
}

@media screen and (min-width: 1500px) {
    div#source-code-panel.to-side {
        right: calc(var(--document-width) + 50px);
        border-right: 0.02em solid var(--color-box-border);
    }
    div#source-code-panel.to-side a.close {
        right: calc(var(--document-width) + 50px + 0.8em);
        top: 0.6em;
    }
    div#source-code-panel.to-side a.render {
        left: 1.0em;
        top: 0.6em;
    }
    div#source-code-panel.to-side a.export {
        left: 4.0em;
        top: 0.6em;
    }
    div#source-code-panel.to-side a.icons {
        left: 7.0em;
        top: 0.6em;
    }
    div#source-code-panel.to-side a.colors {
        left: 10.0em;
        top: 0.6em;
    }
    div#source-code-panel.to-side a.symbols {
        left: 13.0em;
        top: 0.6em;
    }
    div#source-code-panel.to-side a.image-tool {
        left: 16.0em;
        top: 0.6em;
    }
    div#source-code-panel.to-side a.cheatsheet {
        left: 19.0em;
        top: 0.6em;
    }
    div#document.to-side {
        margin: 2.0em 25px 2.0em calc(100% - var(--document-width) - 25px);
    }
    div#source-code-panel .select-div {
        top: 2.6em;
        left: 1.0em;
        width: calc(100% - var(--document-width) - 50px - 2.2em);
    }
    div#source-code-panel.to-side .textarea-wrapper {
        bottom: 2.5em;
        left: 1.0em;
        top: 4.5em;
        right: auto;
        width: calc(100% - var(--document-width) - 50px - 2.2em);
    }

    div#icon-view-panel.to-side,
    div#color-view-panel.to-side,
    div#symbol-view-panel.to-side,
    div#help-panel.to-side,
    div#image-tool-panel.to-side {
        left: auto;
        width: calc(var(--document-width) + 50px + 2px);
    }
    div#icon-view-panel.to-side div.icon-container,
    div#color-view-panel.to-side div.color-container,
    div#symbol-view-panel.to-side div.symbol-container,
    div#help-panel.to-side div.help-container,
    div#image-tool-panel.to-side div.image-tool-container {
        left: auto;
        width: calc(var(--document-width) + 50px - 1.0em);
        right: 1.0em;
        bottom: 2.5em;
        top: 3.0em;
    }
    div#icon-view-panel.to-side div.icon-name,
    div#color-view-panel.to-side div.color-name,
    div#symbol-view-panel.to-side div.symbol-name {
        left: calc(100% - var(--document-width) - 50px);
        top: 0.6em;
    }

    div#icon-view-panel.to-side a.close,
    div#color-view-panel.to-side a.close,
    div#symbol-view-panel.to-side a.close,
    div#help-panel.to-side a.close,
    div#image-tool-panel.to-side a.close {
        top: 0.6em;
        right: 1em;
    }
}

/* ========================================================================= */

div.b00k-slide {
    width: calc(100% - 2*0.05em);
    aspect-ratio: 16/9;
    border: 0.05em solid var(--color-slide-border);
    border-radius: 0.50em;
    background-color: var(--color-slide-background);
    container-type: inline-size;
    container-name: b00k-slide;
}
div.b00k-slide div.slide-frame {
    width: 1000px;
    height: 562.5px;
    position: relative;
    font-size: 18px;
}
div.b00k-slide div.slide-frame * {
    user-select: none;
}
div.b00k-slide div.slide-frame.sub-slide {
    border-top: 0.05em solid var(--color-slide-border);
}
@container b00k-slide (max-width: 990px) {
    /* slide has to be scaled, small screens */
    div.b00k-slide div.slide-frame {
        width: 100%;
        height: 100%;
        font-size: 1.8cqi;
    }
}
@container b00k-slide (min-width: 1010px) {
    /* slide has to be scaled, slide show */
    div.b00k-slide div.slide-frame {
        width: 100%;
        height: 100%;
        font-size: 1.8cqi;
    }
}
div.b00k-slide div.slide-frame div {
    font-family: var(--font-serif);
    fill: var(--color-slide-text);
    position: absolute;
    font-size: 1.0em;
}
div.b00k-slide div.slide-frame div.slide-header-left,
div.b00k-slide div.slide-frame div.slide-header-center,
div.b00k-slide div.slide-frame div.slide-header-right {
    font-family: var(--font-header);
    dominant-baseline: hanging;
    font-size: 1.3em;
    color: var(--color-slide-text-light);
}
div.b00k-slide div.slide-frame div.slide-footer-left,
div.b00k-slide div.slide-frame div.slide-footer-center,
div.b00k-slide div.slide-frame div.slide-footer-right {
    /* font-style: italic; */
    font-size: 0.8em;
    color: var(--color-slide-text-light);
}
div.b00k-slide div.slide-frame div.slide-header-left,
div.b00k-slide div.slide-frame div.slide-footer-left {
    text-align: left;
}
div.b00k-slide div.slide-frame div.slide-header-center,
div.b00k-slide div.slide-frame div.slide-footer-center {
    text-align: center;
}
div.b00k-slide div.slide-frame div.slide-header-right,
div.b00k-slide div.slide-frame div.slide-footer-right {
    text-align: right;
}
div.b00k-slide div.slide-frame div.slide-title {
    font-family: var(--font-header);
    text-anchor: start;
    color: var(--color-slide-accent);
    font-size: 2.0em;
}
div.b00k-slide div.slide-frame div.slide-cell-left,
div.b00k-slide div.slide-frame div.slide-cell-right,
div.b00k-slide div.slide-frame div.slide-cell-single {
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
    word-wrap: break-word;
}
div.b00k-slide div.slide-frame div.slide-cell-left > div,
div.b00k-slide div.slide-frame div.slide-cell-right > div,
div.b00k-slide div.slide-frame div.slide-cell-single > div,
div.b00k-slide div.slide-frame div.slide-cell-left div.math,
div.b00k-slide div.slide-frame div.slide-cell-right div.math,
div.b00k-slide div.slide-frame div.slide-cell-single div.math {
    width: 100%;
}
div.b00k-slide div.slide-frame div.slide-cell-align-left,
div.b00k-slide div.slide-frame div.slide-cell-align-left p {
    text-align: left;
}
div.b00k-slide div.slide-frame div.slide-cell-align-center,
div.b00k-slide div.slide-frame div.slide-cell-align-center p {
    text-align: center;
}
div.b00k-slide div.slide-frame div.slide-cell-align-right,
div.b00k-slide div.slide-frame div.slide-cell-align-right p {
    text-align: right;
}

div#slideshow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    width: 100vw;
    height: 100vh; /* 100% of the viewport height, so that in landscape mode no scroll */
    background-color: var(--color-show-background);
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 1.0em; /* only used for button font size, not for slide */
}
div#slideshow > div.b00k-slide {
    position: relative;
    border: 0;
    z-index: 900;
    background-color: var(--color-slide-background);
    aspect-ratio: 16/9;
    width: calc(100% - 6vw);
    height: auto;
    overflow: hidden;
}
div#slideshow > div.b00k-slide > div.slide-frame {
    width: 100%;
    height: 100%;
}
div#slideshow > div.b00k-slide > div.slide-frame.hide {
    display: none;
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-previous-info,
div#slideshow > div.b00k-slide > div.slide-frame > div.has-next-info,
div#slideshow > div.b00k-slide > div.slide-frame > div.has-up-info,
div#slideshow > div.b00k-slide > div.slide-frame > div.has-down-info {
    position: absolute;
    z-index: 1000;
    background-color: var(--color-show-indicator-next-slide-back);
    cursor: pointer;
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-previous-info svg,
div#slideshow > div.b00k-slide > div.slide-frame > div.has-next-info svg,
div#slideshow > div.b00k-slide > div.slide-frame > div.has-up-info svg,
div#slideshow > div.b00k-slide > div.slide-frame > div.has-down-info svg {
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    fill: var(--color-show-indicator-next-slide-front);
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-previous-info:hover,
div#slideshow > div.b00k-slide > div.slide-frame > div.has-next-info:hover,
div#slideshow > div.b00k-slide > div.slide-frame > div.has-up-info:hover,
div#slideshow > div.b00k-slide > div.slide-frame > div.has-down-info:hover {
    background-color: var(--color-show-indicator-next-slide-hover);
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-previous-info {
    display: none;
    left: 0.0em;
    top: calc(50% - 3.2em);
    height: 8.0em;
    width: 4.0em;
    border-radius: 0 0.3em 0.3em 0;
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-previous-info svg {
    left: 0.0em;
    top: calc(50% - 0.8em);
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-next-info {
    display: none;
    right: 0.0em;
    top: calc(50% - 3.2em);
    height: 8.0em;
    width: 4.0em;
    border-radius: 0.3em 0 0 0.3em;
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-next-info svg {
    right: 0.0em;
    top: calc(50% - 0.8em);
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-up-info {
    display: none;
    top: 0.0em;
    left: calc(50% - 3.2em);
    height: 4.0em;
    width: 8.0em;
    border-radius: 0 0 0.3em 0.3em;
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-up-info svg {
    top: 0.0em;
    left: calc(50% - 0.8em);
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-down-info {
    display: none;
    bottom: 0.0em;
    left: calc(50% - 3.2em);
    height: 4.0em;
    width: 8.0em;
    border-radius: 0.3em 0.3em 0 0;
}
div#slideshow > div.b00k-slide > div.slide-frame > div.has-down-info svg {
    bottom: 0.0em;
    left: calc(50% - 0.8em);
}
div#slideshow > div.b00k-slide > div.slide-frame.has-previous > div.has-previous-info {
    display: block;
}
div#slideshow > div.b00k-slide > div.slide-frame.has-next > div.has-next-info {
    display: block;
}
div#slideshow > div.b00k-slide > div.slide-frame.has-up > div.has-up-info {
    display: block;
}
div#slideshow > div.b00k-slide > div.slide-frame.has-down > div.has-down-info {
    display: block;
}
div#slideshow div.button {
    color: var(--color-show-button);
    cursor: pointer;
    position: absolute;
    z-index: 1000;
    background-color: var(--color-show-button-background);
    border: 0.04em solid transparent;
    border-radius: 0.40em;
    user-select: none;
}
div#slideshow div.button:hover {
    color: var(--color-show-button-hover);
    border: 0.04em solid var(--color-show-button-hover-background);
    background-color: var(--color-show-button-hover-background);
}
div#slideshow div.button svg {
    width: 1.2em;
    height: 1.2em;
    position: relative;
    top: 0.2em;
    margin: 0.2em 0.4em;
    display: inline-block;
    stroke-width: 0;
    fill: currentColor;
}
div#slideshow div.close {
    right: 0.5em;
    top: 0.5em;
    background-color:transparent
}
div#slideshow div.close:hover {
    color: var(--color-show-close-hover);
    background-color: var(--color-show-button-hover-background);
}
div#slideshow div.toggle-keys {
    left: 0.5em;
    bottom: 0.5em;
}
div#slideshow div.toggle-keys.active {
    background-color: transparent;
}
div#slideshow div.toggle-keys.active:hover {
    background-color: var(--color-show-button-hover-background);
}
div#slideshow div.zoom-in {
    left: 3.0em;
    bottom: 0.5em;
}
div#slideshow div.zoom-out {
    left: 5.5em;
    bottom: 0.5em;
}
div#slideshow div.fullscreen {
    left: 8.0em;
    bottom: 0.5em
}
div#slideshow div.current-slide-info {
    color: var(--color-show-button);
    font-size: 1.0em;
    position:absolute;
    z-index: 1000;
    left: 11.5em;
    bottom: 0.5em;
    background-color: var(--color-show-button-background);
    border: 0.04em solid transparent;
    border-radius: 0.40em;
    padding: 0.3em 0.5em;
    user-select: none;
    cursor: pointer
}
div#slideshow div.current-slide-info:hover {
    color: var(--color-show-button-hover);
    border: 0.04em solid var(--color-show-button-hover-background);
    background-color: var(--color-show-button-hover-background);
}
div#slideshow div.previous {
    right: 5.5em;
    bottom: 0.5em;
}
div#slideshow div.up {
    right: 3.0em;
    bottom: 1.5em;
}
div#slideshow div.down {
    right: 3.0em;
    bottom: 0.0em;
}
div#slideshow div.up svg,
div#slideshow div.down svg {
    height: 0.6em;
}
div#slideshow div.next {
    right: 0.5em;
    bottom: 0.5em
}
div#slideshow div.progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.2em;
    background-color: var(--color-show-progress-background);
    z-index: 1000;
}
div#slideshow div.progress-bar div.progress {
    bottom: 0;
    left: 0;
    height: 100%;
    background-color: var(--color-show-progress);
}

/* ========================================================================= */

div.b00k-card-table > table {
    width: 100%;
}

div.b00k-card-table > table a.show-cards svg {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    stroke-width: 0;
    fill: var(--color-text-light);
    top: 0.2em;
    position: relative;
}
div.b00k-card-table > table a.show-cards:hover svg {
    fill: var(--color-accent);
}
div.b00k-card-table > table td {
    text-align: left;
    vertical-align: middle;
}
div.b00k-card-table > table td svg.arrow,
div#tableshow div.table-content div.table-scroll table td svg.arrow{
    position: relative;
    height: 0.8em;
    stroke: var(--color-text-light);
    fill: none;
    top: 0.2em;

}
div.b00k-card-table > table td svg.arrow.right,
div#tableshow div.table-content div.table-scroll table td svg.arrow.right {
    stroke-width: 0.05em;
}
div.b00k-card-table > table td svg.arrow.leftright,
div#tableshow div.table-content div.table-scroll table td svg.arrow.leftright {
    stroke-width: 0.05em;
}
div#cardshow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0;
    width: 100vw;
    height: 100vh; /* 100% of the viewport height, so that in landscape mode no scroll */
    background-color: var(--color-show-background);
    overflow: hidden;
    font-size: 1.0em; /* only used for button font size, not for slide */
}
div#cardshow div.card-container-left,
div#cardshow div.card-container-right {
    position: absolute;
    top: 6.0vh;
    bottom: 6.0vh;
    width: calc(50% - 7.5vw);
    overflow: hidden;
    border: 0;
    border-radius: 1.6em;
}
div#cardshow div.card-container-left {
    left: 5.0vw;
}
div#cardshow div.card-container-right {
    right: 5.0vw;
}
div#cardshow div.card-frame {
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    font-size: 1.0em;
    font-family: var(--font-mono);
    background-color: var(--color-card-front-background);
    color: var(--color-card-front);
}
div#cardshow div.card-frame.back-side {
    background-color: var(--color-card-back-background);
    color: var(--color-card-back);
    cursor: pointer;
}
div#cardshow div.card-frame.correct {
    background-color: var(--color-card-correct-background);
    color: var(--color-card-correct);
}
div#cardshow div.card-frame div.label {
    position: absolute;
    top: 1.0em;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    text-align: center;
    font-size: 1.5vw;
    opacity: 0.5;
}
div#cardshow div.card-frame div.content {
    margin: 2.0em;
    text-align: left;
    font-size: 3.0vw;
}
div#cardshow div.button {
    color: var(--color-show-button);
    cursor: pointer;
    position: absolute;
    z-index: 1000;
    background-color: var(--color-show-button-background);
    border: 0.04em solid transparent;
    border-radius: 0.40em;
    user-select: none;
}
div#cardshow div.button:hover {
    color: var(--color-show-button-hover);
    border: 0.04em solid var(--color-show-button-hover-background);
    background-color: var(--color-show-button-hover-background);
}
div#cardshow div.button svg {
    width: 1.2em;
    height: 1.2em;
    position: relative;
    top: 0.2em;
    margin: 0.2em 0.4em;
    display: inline-block;
    stroke-width: 0;
    fill: currentColor;
}
div#cardshow div.previous {
    left: 0.5em;
    bottom: 0.5em;
    background-color:transparent
}
div#cardshow div.step {
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    bottom: 0.5em;
    background-color: transparent;
    padding: 0 0.4em;
}
div#cardshow div.next {
    right: 0.5em;
    bottom: 0.5em;
    background-color:transparent
}
div#cardshow div.close {
    right: 0.5em;
    top: 0.5em;
    background-color:transparent
}
div#cardshow div.close:hover {
    color: var(--color-show-close-hover);
    background-color: var(--color-show-button-hover-background);
}
@media screen and (orientation:portrait) {
    div#cardshow div.card-container-left,
    div#cardshow div.card-container-right {
        top: auto;
        bottom: auto;
        width: auto;
        height: calc(50% - 7.5vh);
        left: 5.0vw;
        right: 5.0vw;
    }
    div#cardshow div.card-container-left {
        top: 6.0vh;
    }
    div#cardshow div.card-container-right {
        bottom: 6.0vh;
    }
    div#cardshow div.card-frame div.label {
        top: 2.0em;
        left: 2.0em;
        right: auto;
        margin-inline: 0;
        width: auto;
        text-align: left;
        font-size: 1.0em;
    }
    div#cardshow div.card-frame div.content {
        font-size: 5.0vw;
    }
}

/* ========================================================================= */

div.b00k-csv-table > table {
    width: 100%;
}

div#tableshow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0;
    width: 100vw;
    height: 100vh; /* 100% of the viewport height, so that in landscape mode no scroll */
    background-color: var(--color-show-background);
    overflow: hidden;
    font-size: 1.0em; /* only used for button font size, not for slide */
}
div#tableshow div.table-container {
    position: absolute;
    top: 4.0em;
    bottom: 3.0vh;
    left: 2.0vw;
    right: 2.0vw;
    overflow: hidden;
    border: 0;
    border-radius: 0.6em;
    font-size: 0.9em;
    background-color: var(--color-document-background);
    color: var(--color-text);
}
div#tableshow div.table-content {
    margin: 0; /* 1.0em; */
    width: 100%; /* calc(100% - 2.0em); */
    height: 100%; /* calc(100% - 2.0em); */
}
div#tableshow div.table-content div.table-scroll {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
}
div#tableshow div.table-content div.table-scroll table {
    margin: 0;
    width: 100%;
    position: relative;
    border-collapse: collapse;
}
div#tableshow div.table-content div.table-scroll table thead tr {
    position: sticky;
    top: 0;
    background-color: var(--color-table-row-head-alternative);
}
div#tableshow div.table-content div.table-scroll table th {
    border-radius: 0;
    border: 0;
    padding: 0.1em 0.4em;
}
div#tableshow div.table-content div.table-scroll table th div.label {
    float: left;
    cursor: pointer;
    user-select: none;
}
div#tableshow div.table-content div.table-scroll table th div.label:hover {
    color: var(--color-accent);
}
div#tableshow div.table-content div.table-scroll table th svg.arrow-up,
div#tableshow div.table-content div.table-scroll table th svg.arrow-down {
    display: block;
    position: relative;
    height: 1.4em;
    width: 1.4em;
    stroke: none;
    fill: var(--color-accent);
    top: 0.0em;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: none;
    float: left;
}
div#tableshow div.table-content div.table-scroll table th.sorted.descending svg.arrow-up {
    display: block;
}
div#tableshow div.table-content div.table-scroll table th.sorted.ascending svg.arrow-down {
    display: block;
}
div#tableshow div.table-content div.table-scroll table tbody td {
    border-radius: 0;
    border: 0;
}
div#tableshow form.search {
    position: absolute;
    top: 1.0em;
    left: 1.5em;
}
div#tableshow form.search input {
    width: 20em;
    background-color: var(--color-document-background);
    padding: 0.2em 0.4em;
    font-size: 0.8em;
    color: var(--color-text);
    border: 0.04em solid var(--color-text);
    border-radius: 0.4em;
    font-family: var(--font-mono);
}
div#tableshow div.button {
    color: var(--color-show-button);
    cursor: pointer;
    position: absolute;
    z-index: 1000;
    background-color: var(--color-show-button-background);
    border: 0.04em solid transparent;
    border-radius: 0.40em;
    user-select: none;
}
div#tableshow div.button:hover {
    color: var(--color-show-button-hover);
    border: 0.04em solid var(--color-show-button-hover-background);
    background-color: var(--color-show-button-hover-background);
}
div#tableshow div.button svg {
    width: 1.2em;
    height: 1.2em;
    position: relative;
    top: 0.2em;
    margin: 0.2em 0.4em;
    display: inline-block;
    stroke-width: 0;
    fill: currentColor;
}
div#tableshow div.close {
    right: 0.5em;
    top: 0.5em;
    background-color:transparent
}
div#tableshow div.close:hover {
    color: var(--color-show-close-hover);
    background-color: var(--color-show-button-hover-background);
}

/* ========================================================================= */

div.exercise-block {
    margin: 1.0em 0;
    border: solid 0.02em var(--color-accent);
    border-radius: 0.5em 0.5em;
    background-color: var(--color-box-background);
    user-select: none;
}
div.exercise-block > div.exercise-title {
    font-family: var(--font-header);
    font-size: 1.3em;
    color: var(--color-text);
}
div.exercise-block div.exercise-title > div {
    margin: 0.5em 0.8em;
}
div.exercise-block div.exercise-question > div {
    margin: 0.2em 1.0em;
}
div.exercise-block > div.exercise-steps {
    margin: 0;
}
div.exercise-block div.exercise-step {
    border-top: solid 0.02em var(--color-box-border);
    cursor: pointer;
}
div.exercise-block div.exercise-step div.step-title {
    font-family: var(--font-header);
    font-size: 1.1em;
    color: var(--color-text);
}
div.exercise-block div.exercise-step div.step-title > div {
    margin: 0.2em 0.97em;
    height: 1.3em;
}
div.exercise-block div.exercise-step div.step-title span.title-text {
    float: left
}
div.exercise-block div.exercise-step div.step-title span.title-icon {
    float: right;
}
div.exercise-block div.exercise-step div.step-title span.title-icon svg {
    display: inline-block;
    position: relative;
    height: 1.0em;
    width: 1.0em;
    stroke: none;
    fill: var(--color-text-light);
    top: 0.2em;
    stroke-linecap: round;
    stroke-linejoin: round;
}
div.exercise-block div.exercise-step:not(.show) div.step-title span.title-icon svg.arrow-up {
    display: none;
}
div.exercise-block div.exercise-step.show div.step-title span.title-icon svg.arrow-up {
    display: block;
}
div.exercise-block div.exercise-step.show div.step-title span.title-icon svg.arrow-down {
    display: none;
}
div.exercise-block div.exercise-step:not(.show) div.step-title span.title-icon svg.arrow-down {
    display: block;
}
div.exercise-block div.exercise-step div.step-title:hover span.title-icon svg {
    fill: var(--color-accent);
}
div.exercise-block div.exercise-step div.step-content {
    font-size: 1.0em;
    color: var(--color-text);
    margin-top: 0.4em;
}
div.exercise-block div.exercise-step div.step-content > div {
    margin: 0.2em 1.0em;
}
div.exercise-block div.exercise-step:not(.show) div.step-content {
    display: none;
}
div.exercise-block div.exercise-step.show div.step-content {
    display: block;
}

/* ========================================================================= */

div.mermaid-diagram {
    text-align: center;
}
div.mermaid-diagram svg {
    margin: 0 auto;
    width: 100%;
}
body:not(.dark-mode) div.mermaid-diagram.dark svg {
    display: none;
}
body.dark-mode div.mermaid-diagram.light svg {
    display: none;
}
pre.mermaid-error {
    border: 0.20em solid var(--color-red);
    font-style: italic;
}

/* ========================================================================= */

pre > code[language="parameters"] span.parameter {
    color: var(--color-parameters-name);
}
pre > code[language="parameters"] span.value {
    color: var(--color-parameters-value);
}
pre > code[language="parameters"] span.group {
    color: var(--color-parameters-keyword);
}
pre > code[language="parameters"] span.char {
    color: var(--color-parameters-keyword);
}
pre > code[language="parameters"] span.comment {
    color: var(--color-parameters-comment);
    font-style: italic;
}
pre > code[language="parameters"] span.b00k-title {
    cursor: default;
}
/* ONLY PREVIEW START */
pre > code[language="parameters"] span.b00k-title:hover {
    color: var(--color-hover-color);
    background-color: var(--color-hover-background);
}
/* ONLY PREVIEW END */
div.codeblock-parameter {
    color: var(--color-parameters-name);
}
/* ONLY PREVIEW START */
div.codeblock-parameter:hover {
    color: var(--color-hover-color);
    background-color: var(--color-hover-background);
}
/* ONLY PREVIEW END */


/* ========================================================================= */



.hljs {
    background: var(--color-syntax-background);
    color: var(--color-syntax-text);
}
.hljs-mark,
.hljs-strong,
.hljs-emphasis,
.hljs-strikethrough {
    color: var(--color-syntax-style-quote);
}
.hljs-name {
    color: var(--color-syntax-tag-name);
}
.hljs-tag,
.hljs-subst {
    color: var(--color-syntax-tag-symbol);
}
.hljs-attr,
.hljs-attribute {
    color: var(--color-syntax-tag-attribute);
}
.hljs-number,
.hljs-regexp {
    color: var(--color-syntax-number);
}
.hljs-section {
    color: var(--color-syntax-section);
    font-weight: bold;
}
.hljs-keyword,
.hljs-selector-class,
.hljs-selector-tag,
.hljs-selector-id {
    color: var(--color-syntax-keyword);
}
.hljs-bullet,
.hljs-quote {
    color: var(--color-syntax-bullet);
}
.hljs-symbol,
.hljs-literal,
.hljs-built_in,
.hljs-selector-attr,
.hljs-selector-pseudo {
    color: var(--color-syntax-symbol);
}
.hljs-params {
    color: var(--color-syntax-params);
}
.hljs-useparam {
    color: var(--color-syntax-use-param);
}
.hljs-string,
.hljs-type,
.hljs-addition,
.hljs-template-variable {
    color: var(--color-syntax-string);
}
.hljs-link {
    color: var(--color-syntax-link);
}
.hljs-title.function_,
.hljs-title.class_ {
    color: var(--color-syntax-function);
}
.hljs-variable {
    color: var(--color-syntax-variable);
}
.hljs-figure {
    color: var(--color-syntax-figure);
}
.hljs-code {
    color: var(--color-syntax-code);
    background-color: var(--color-syntax-code-background);
}
.hljs-comment,
.hljs-deletion,
.hljs-meta {
    color: var(--color-syntax-comment);
    font-style: italic;
}
.hljs-emphasis,
.hljs-params {
    font-style: italic;
}
.hljs-strong {
    font-weight: bold;
}
.hljs-strikethrough {
    text-decoration: line-through;
}
.hljs-mark {
    background-color: var(--color-mark);
}
.hljs-table {
    background-color: var(--color-syntax-table-background);
    color: var(--color-syntax-table);
}
.hljs-colorblue {
    border-bottom: 0.20em solid var(--color-blue);
}
.hljs-colorred {
    border-bottom: 0.20em solid var(--color-red);
}
.hljs-coloryellow {
    border-bottom: 0.20em solid var(--color-yellow);
}
.hljs-colorgreen {
    border-bottom: 0.20em solid var(--color-green);
}
.hljs-colorpurple {
    border-bottom: 0.20em solid var(--color-purple);
}
.hljs-colororange {
    border-bottom: 0.20em solid var(--color-orange);
}
.hljs-colorpink {
    border-bottom: 0.20em solid var(--color-pink);
}
.hljs-colorcyan {
    border-bottom: 0.20em solid var(--color-cyan);
}
.hljs-colorblack {
    border-bottom: 0.20em solid var(--color-black);
}
.hljs-colorgray,
.hljs-colorgrey {
    border-bottom: 0.20em solid var(--color-gray);
}
.hljs-colorsilver {
    border-bottom: 0.20em solid var(--color-silver);
}
.hljs-colorlightgray,
.hljs-colorlightgrey {
    border-bottom: 0.20em solid var(--color-lightgray);
}
.hljs-colorwhite {
    border-bottom: 0.20em solid var(--color-lightgray);
}

/* ========================================================================= */

/* Medium screens */
@media screen and (min-width: 601px) and (max-width: 999px) {
    body {
        font-size: 3.0vw; /* 3 viewport width for medium screens */
    }

    *:hover {
        background-color: inherit;
    }

    div#toolbar {
        right: 0.3em;
        top: 0.3em;
        border-radius: 0.5em;
    }

    div#document {
        margin: 1.0em;
    }

    div#file-open div.file-new-file {
        display: none;
    }
    div#file-open div.file-open-home-computer {
        display: none;
    }
    div#file-open div.file-open-home-mobile {
        display: block;
    }
}

/* Small screens */
@media screen and (max-width: 600px) {
    body {
        font-size: 4.5vw;  /* 4.5 viewport width for small screens */
    }

    *:hover {
        background-color: inherit;
    }

    div#toolbar {
        right: 0.2em;
        top: 0.2em;
        border-radius: 0.5em;
    }

    div#file-open div.file-new-file {
        display: none;
    }
    div#file-open div.file-open-home-computer {
        display: none;
    }
    div#file-open div.file-open-home-mobile {
        display: block;
    }

    div#document {
        margin: 1.0em;
    }

    div#slideshow div.fullscreen,
    div#slideshow div.toggle-keys,
    div#slideshow div.previous,
    div#slideshow div.up,
    div#slideshow div.down,
    div#slideshow div.next,
    div#slideshow div.current-slide-info,
    div#slideshow div.zoom-in,
    div#slideshow div.zoom-out {
        display: none;
    }
    div#slideshow div.close {
        right: 0.2em;
        top: 0.2em;
        font-size: 1.5em;
    }
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-previous-info,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-next-info {
        top: 10%;
        height: 80%;
        width: 30%;
    }
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-up-info,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-down-info {
        left: 30%;
        height: 40%;
        width: 40%;
    }
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-previous-info svg,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-next-info svg,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-up-info svg,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-down-info svg {
        fill: var(--color-accent);
    }
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-previous-info:hover,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-next-info:hover,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-up-info:hover,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-down-info:hover {
        background: transparent;
    }
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-previous-info:hover svg,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-next-info:hover svg,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-up-info:hover svg,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-down-info:hover svg {
        fill: var(--color-accent);
        width: 5.0em;
        height: 5.0em;
    }
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-previous-info:hover svg,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-next-info:hover svg {
        top: calc(50% - 2.5em);
    }
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-up-info:hover svg,
    div#slideshow > div.b00k-slide > div.slide-frame > div.has-down-info:hover svg {
        left: calc(50% - 2.5em);
    }

    div#cardshow div.previous,
    div#cardshow div.next {
        display: none;
    }
    div#cardshow div.close {
        right: 0.2em;
        top: 0.2em;
        font-size: 1.5em;
    }

    div#tableshow div.close {
        right: 0.2em;
        top: 0.2em;
        font-size: 1.5em;
    }
}

/* Print style */
@media print {
    body {
        font-size: 14pt;
        color: var(--color-text-print);
        width: auto;
        margin: 0;
        padding: 0;
    }

    h1 {
        margin-top:0;
    }

    h2 {
        border-bottom: 1px solid var(--color-print-box-border);
    }

    h2>span.level, h3>span.level, h4>span.level {
        color: var(--color-print-text-lighter);
        border-color: var(--color-print-inline-box-border);
    }

    a {
        color: var(--color-print-link);
        font-weight: normal;
        text-decoration: underline;
        text-decoration-thickness: 0.05em;
    }

    pre {
        white-space: pre-wrap;
        border-color: var(--color-print-box-border);
        background-color: var(--color-print-box-background);
    }

    :not(pre) > code {
        border-color: var(--color-print-inline-box-border);
        background-color: var(--color-print-inline-box-background);
    }

    pre > code[language="ini"] span {
        color: var(--color-print-text) !important;
    }

    div.codeblock-parameter {
        color: var(--color-print-text-lighter);
    }

    mark {
        background: var(--color-print-mark);
    }

    blockquote {
        border-left: 1.5px solid var(--color-print-box-border);
        color: var(--color-print-text-lighter);
    }

    iframe {
        display: none;
    }

    thead tr th { border-top: 1px solid var(--color-print-box-border); }
    thead tr th { border-bottom: 1px solid var(--color-print-box-border); }
    thead tr th:last-child, tbody tr td:last-child { border-right: 1px solid var(--color-print-box-border); }
    tbody tr:last-child td { border-bottom: 1px solid var(--color-print-box-border); }
    thead tr th:first-child, tbody tr td:first-child { border-left: 1px solid var(--color-print-box-border); }

    thead tr {
        background-color: var(--color-print-table-row-head);
    }

    tbody tr:nth-child(odd) {
        background-color: var(--color-print-table-row-odd);
    }

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

    li::marker {
        color: var(--color-print-list-item);
    }

    div#toolbar {
        display: none;
    }

    div#document-wrap {
        margin: 0;
    }

    div#document {
        width: calc(100% - 2*50px);
        margin: 20px 50px;
    }

    div.hidden-section {
        display: none;
    }

    div#source-code-panel {
        display: none;
    }

    div#file-open {
        display: none;
    }

    div#b00k-preview-banner {
        display: none;
    }

    div.b00k-slide {
        break-inside: avoid;
        border-color: var(--color-print-box-border);
    }
     div.b00k-frame {
        border-color: var(--color-print-box-border);
    }

    div.exercise-block div.exercise-step div.step-title,
    div.exercise-block div.exercise-title {
        color: var(--color-print-text);
    }
    div.exercise-block div.exercise-step.show div.step-content,
    div.exercise-block div.exercise-step:not(.show) div.step-content {
        display: block; /* show all steps */
    }
    div.exercise-block div.exercise-step.show div.step-title span.title-icon svg,
    div.exercise-block div.exercise-step:not(.show) div.step-title span.title-icon svg,
    div.exercise-block div.step-title span.title-icon svg {
        display: none; /* hide arrows */
    }

    div.b00k-card-table a.show-cards {
        display: none;
    }
}