html {
    /* primary theme color. This will affect the entire websites color scheme: links, arrows, labels, ... */
    --primary-color: #1779c4;
    --primary-dark-color: #335c80;
    --primary-light-color: #70b1e9;

    /* page base colors */
    --page-background-color: #ffffff;
    --page-foreground-color: #2f4153;
    --page-secondary-foreground-color: #6f7e8e;
    --separator-color: #dedede;
    --side-nav-background: #fbfbfb;

    --code-background: #f5f5f5;

    --tablehead-background: #f1f1f1;

    /* blockquote colors */
    --blockquote-background: #f8f9fa;
    --blockquote-foreground: #636568;

    /* colors for various content boxes: @warning, @note, @deprecated @bug */
    --warning-color: #faf3d8;
    --warning-color-dark: #f3a600;
    --warning-color-darker: #5f4204;
    --note-color: #e4f3ff;
    --note-color-dark: #1879C4;
    --note-color-darker: #274a5c;
    --todo-color: #e4dafd;
    --todo-color-dark: #5b2bdd;
    --todo-color-darker: #2a0d72;
    --deprecated-color: #ecf0f3;
    --deprecated-color-dark: #5b6269;
    --deprecated-color-darker: #43454a;
    --bug-color: #f8d1cc;
    --bug-color-dark: #b61825;
    --bug-color-darker: #75070f;
    --invariant-color: #d8f1e3;
    --invariant-color-dark: #44b86f;
    --invariant-color-darker: #265532;

    /* fragment colors */
    --fragment-background: #F8F9FA;
    --fragment-foreground: #37474F;
    --fragment-keyword: #bb6bb2;
    --fragment-keywordtype: #8258b3;
    --fragment-keywordflow: #d67c3b;
    --fragment-token: #438a59;
    --fragment-comment: #969696;
    --fragment-link: #5383d6;
    --fragment-preprocessor: #46aaa5;
    --fragment-linenumber-color: #797979;
    --fragment-linenumber-background: #f4f4f5;
    --fragment-linenumber-border: #e3e5e7;
    --fragment-math: #335c80;
    --fragment-lineheight: 20px;

    /* border radius for all rounded components. Will affect many components, like dropdowns, memitems, codeblocks, ... */
    --border-radius-large: 8px;
    --border-radius-small: 4px;
    --border-radius-medium: 6px;

    /* default spacings. Most components reference these values for spacing, to provide uniform spacing on the page. */
    --spacing-small: 5px;
    --spacing-medium: 10px;
    --spacing-large: 16px;

    /* default box shadow used for raising an element above the normal content. Used in dropdowns, search result, ... */
    --box-shadow: 0 2px 8px 0 rgba(0,0,0,.075);

    --odd-color: rgba(0,0,0,.028);

    /* font-families. will affect all text on the website
     * font-family: the normal font for text, headlines, menus
     * font-family-monospace: used for preformatted text in memtitle, code, fragments
     */
    --font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    --font-family-monospace: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;

    /* font sizes */
    --page-font-size: medium;
    --navigation-font-size: medium;
    --toc-font-size: medium;
    --code-font-size: medium; /* affects code, fragment */
    --title-font-size: larger;

    /* content text properties. These only affect the page content, not the navigation or any other ui elements */
    --content-line-height: 27px;
    /* The content is centered and constraint in it's width. To make the content fill the whole page, set the variable to auto.*/
    --content-maxwidth: 1050px;
    --table-line-height: 24px;
    --toc-sticky-top: var(--spacing-medium);
    --toc-width: 200px;
    --toc-max-height: calc(100vh - 2 * var(--spacing-medium) - 85px);

    /* table colors */
    --tablehead-foreground: var(--page-foreground-color);

    /* menu-display: block | none
     * Visibility of the top navigation on screens >= 768px. On smaller screen the menu is always visible.
     * `GENERATE_TREEVIEW` MUST be enabled!
     */
    --menu-display: block;

    --menu-focus-foreground: var(--page-background-color);
    --menu-focus-background: var(--primary-color);
    --menu-selected-background: rgba(0,0,0,.05);


    --header-background: var(--page-background-color);
    --header-foreground: var(--page-foreground-color);

    /* searchbar colors */
    --searchbar-background: var(--side-nav-background);
    --searchbar-foreground: var(--page-foreground-color);

    /* searchbar size
     * (`searchbar-width` is only applied on screens >= 768px.
     * on smaller screens the searchbar will always fill the entire screen width) */
    --searchbar-height: 33px;
    --searchbar-width: 210px;
    --searchbar-border-radius: var(--searchbar-height);

    /* code block colors */
    --code-foreground: var(--page-foreground-color);

    /* sidebar navigation (treeview) colors */
    --side-nav-foreground: var(--page-foreground-color);
    --side-nav-arrow-opacity: 0;
    --side-nav-arrow-hover-opacity: 0.9;

    --toc-background: var(--side-nav-background);
    --toc-foreground: var(--side-nav-foreground);

    /* height of an item in any tree / collapsible table */
    --tree-item-height: 30px;

    --memname-font-size: var(--code-font-size);
    --memtitle-font-size: medium;

    --webkit-scrollbar-size: 7px;
    --webkit-scrollbar-padding: 4px;
    --webkit-scrollbar-color: var(--separator-color);

    --animation-duration: .12s
}

@media screen and (max-width: 767px) {
    html {
        --page-font-size: medium;
        --navigation-font-size: medium;
        --toc-font-size: medium;
        --code-font-size: medium; /* affects code, fragment */
        --title-font-size: larger;
    }
}

@media (prefers-color-scheme: dark) {
    html:not(.light-mode) {
        color-scheme: dark;

        --primary-color: #1982d2;
        --primary-dark-color: #86a9c4;
        --primary-light-color: #4779ac;

        --page-background-color: #1C1D1F;
        --page-foreground-color: #d2dbde;
        --page-secondary-foreground-color: #859399;
        --separator-color: #38393b;
        --side-nav-background: #252628;

        --code-background: #2a2c2f;

        --tablehead-background: #2a2c2f;

        --blockquote-background: #222325;
        --blockquote-foreground: #7e8c92;

        --warning-color: #3b2e04;
        --warning-color-dark: #f1b602;
        --warning-color-darker: #ceb670;
        --note-color: #163750;
        --note-color-dark: #1982D2;
        --note-color-darker: #dcf0fa;
        --todo-color: #2a2536;
        --todo-color-dark: #7661b3;
        --todo-color-darker: #ae9ed6;
        --deprecated-color: #2e323b;
        --deprecated-color-dark: #738396;
        --deprecated-color-darker: #abb0bd;
        --bug-color: #2e1917;
        --bug-color-dark: #ad2617;
        --bug-color-darker: #f5b1aa;
        --invariant-color: #303a35;
        --invariant-color-dark: #76ce96;
        --invariant-color-darker: #cceed5;

        --fragment-background: #282c34;
        --fragment-foreground: #dbe4eb;
        --fragment-keyword: #cc99cd;
        --fragment-keywordtype: #ab99cd;
        --fragment-keywordflow: #e08000;
        --fragment-token: #7ec699;
        --fragment-comment: #999999;
        --fragment-link: #98c0e3;
        --fragment-preprocessor: #65cabe;
        --fragment-linenumber-color: #cccccc;
        --fragment-linenumber-background: #35393c;
        --fragment-linenumber-border: #1f1f1f;
        --fragment-math: #86a9c4;

        --box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);

        --odd-color: rgba(100,100,100,.06);

        --menu-selected-background: rgba(0,0,0,.4);
    }
}

/* dark mode variables are defined twice, to support both the dark-mode without and with doxygen-awesome-darkmode-toggle.js */
html.dark-mode {
    color-scheme: dark;

    --primary-color: #1982d2;
    --primary-dark-color: #86a9c4;
    --primary-light-color: #4779ac;

    --box-shadow: 0 2px 8px 0 rgba(0,0,0,.30);

    --odd-color: rgba(100,100,100,.06);

    --menu-selected-background: rgba(0,0,0,.4);

    --page-background-color: #1C1D1F;
    --page-foreground-color: #d2dbde;
    --page-secondary-foreground-color: #859399;
    --separator-color: #38393b;
    --side-nav-background: #252628;

    --code-background: #2a2c2f;

    --tablehead-background: #2a2c2f;

    --blockquote-background: #222325;
    --blockquote-foreground: #7e8c92;

    --warning-color: #3b2e04;
    --warning-color-dark: #f1b602;
    --warning-color-darker: #ceb670;
    --note-color: #163750;
    --note-color-dark: #1982D2;
    --note-color-darker: #dcf0fa;
    --todo-color: #2a2536;
    --todo-color-dark: #7661b3;
    --todo-color-darker: #ae9ed6;
    --deprecated-color: #2e323b;
    --deprecated-color-dark: #738396;
    --deprecated-color-darker: #abb0bd;
    --bug-color: #2e1917;
    --bug-color-dark: #ad2617;
    --bug-color-darker: #f5b1aa;
    --invariant-color: #303a35;
    --invariant-color-dark: #76ce96;
    --invariant-color-darker: #cceed5;

    --fragment-background: #282c34;
    --fragment-foreground: #dbe4eb;
    --fragment-keyword: #cc99cd;
    --fragment-keywordtype: #ab99cd;
    --fragment-keywordflow: #e08000;
    --fragment-token: #7ec699;
    --fragment-comment: #999999;
    --fragment-link: #98c0e3;
    --fragment-preprocessor: #65cabe;
    --fragment-linenumber-color: #cccccc;
    --fragment-linenumber-background: #35393c;
    --fragment-linenumber-border: #1f1f1f;
    --fragment-math: #86a9c4;
}

.MathJax {
    color: var(--fragment-math)
}

td.odd_c {
    background-color: var(--odd-color)
}