default.html

<!-- default theme -->

<style>
    /* import google fonts */
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
    @import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");

    /* -------------------------------------------------- */
    /* global */
    /* -------------------------------------------------- */

    /* all elements */
    * {
        /* force sans-serif font unless specified otherwise */
        font-family: "Open Sans", "Helvetica", sans-serif;

        /* prevent text inflation on some mobile browsers */
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
        -o-text-size-adjust: none !important;
        text-size-adjust: none !important;
    }

    @media only screen {
        /* "page" element */
        body {
            position: relative;
            box-sizing: border-box;
            font-size: 12pt;
            line-height: 1.5;
            max-width: 8.5in;
            margin: 20px auto;
            padding: 40px;
            border-radius: 5px;
            border: solid 1px #bdbdbd;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
            background: #ffffff;
        }
    }

    /* when on screen < 8.5in wide */
    @media only screen and (max-width: 8.5in) {
        /* "page" element */
        body {
            padding: 20px;
            margin: 0;
            border-radius: 0;
            border: none;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05) inset;
            background: none;
        }
    }

    /* -------------------------------------------------- */
    /* headings */
    /* -------------------------------------------------- */

    /* all headings */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 20px 0;
        padding: 0;
        font-weight: bold;
    }

    /* biggest heading */
    h1 {
        margin: 40px 0;
        text-align: center;
    }

    /* second biggest heading */
    h2 {
        margin-top: 30px;
        padding-bottom: 5px;
        border-bottom: solid 1px #bdbdbd;
    }

    /* heading font sizes */
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.5em;
    }
    h3{
        font-size: 1.35em;
    }
    h4 {
        font-size: 1.25em;
    }
    h5 {
        font-size: 1.15em;
    }
    h6 {
        font-size: 1em;
    }

    /* -------------------------------------------------- */
    /* manuscript header */
    /* -------------------------------------------------- */

    /* manuscript title */
    header > h1 {
        margin: 0;
    }

    /* manuscript title caption text (ie "automatically generated on") */
    header + p {
        text-align: center;
        margin-top: 10px;
    }

    /* -------------------------------------------------- */
    /* text elements */
    /* -------------------------------------------------- */

    /* links */
    a {
        color: #2196f3;
        overflow-wrap: break-word;
    }

    /* normal links (not empty, not button link, not syntax highlighting link) */
    a:not(:empty):not(.button):not(.sourceLine) {
        padding-left: 1px;
        padding-right: 1px;
    }

    /* superscripts and subscripts */
    sub,
    sup {
        /* prevent from affecting line height */
        line-height: 0;
    }

    /* unordered and ordered lists*/
    ul,
    ol {
        padding-left: 20px;
    }

    /* class for styling text semibold */
    .semibold {
        font-weight: 600;
    }

    /* class for styling elements horizontally left aligned */
    .left {
        display: block;
        text-align: left;
        margin-left: auto;
        margin-right: 0;
        justify-content: left;
    }

    /* class for styling elements horizontally centered */
    .center {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    /* class for styling elements horizontally right aligned */
    .right {
        display: block;
        text-align: right;
        margin-left: 0;
        margin-right: auto;
        justify-content: right;
    }

    /* -------------------------------------------------- */
    /* section elements */
    /* -------------------------------------------------- */

    /* horizontal divider line */
    hr {
        border: none;
        height: 1px;
        background: #bdbdbd;
    }

    /* paragraphs, horizontal dividers, figures, tables, code */
    p,
    hr,
    figure,
    table,
    pre {
        /* treat all as "paragraphs", with consistent vertical margins */
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* -------------------------------------------------- */
    /* figures */
    /* -------------------------------------------------- */

    /* figure */
    figure {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* figure caption */
    figcaption {
        padding: 0;
        padding-top: 10px;
    }

    /* figure image element */
    figure > img,
    figure > svg {
        max-width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* figure auto-number */
    img + figcaption > span:first-of-type,
    svg + figcaption > span:first-of-type {
        font-weight: bold;
        margin-right: 5px;
    }

    /* -------------------------------------------------- */
    /* tables */
    /* -------------------------------------------------- */

    /* table */
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* table cells */
    th,
    td {
        border: solid 1px #bdbdbd;
        padding: 10px;
        /* squash table if too wide for page by forcing line breaks */
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* header row and even rows */
    th,
    tr:nth-child(2n) {
        background-color: #fafafa;
    }

    /* odd rows */
    tr:nth-child(2n + 1) {
        background-color: #ffffff;
    }

    /* table caption */
    caption {
        text-align: left;
        padding: 0;
        padding-bottom: 10px;
    }

    /* table auto-number */
    table > caption > span:first-of-type,
    div.table_wrapper > table > caption > span:first-of-type {
        font-weight: bold;
        margin-right: 5px;
    }

    /* -------------------------------------------------- */
    /* code */
    /* -------------------------------------------------- */

    /* multi-line code block */
    pre {
        padding: 10px;
        background-color: #eeeeee;
        color: #000000;
        border-radius: 5px;
        break-inside: avoid;
        text-align: left;
    }

    /* inline code, ie code within normal text */
    :not(pre) > code {
        padding: 0 4px;
        background-color: #eeeeee;
        color: #000000;
        border-radius: 5px;
    }

    /* code text */
    /* apply all children, to reach syntax highlighting sub-elements */
    code,
    code * {
        /* force monospace font */
        font-family: "Source Code Pro", "Courier New", monospace;
    }

    /* -------------------------------------------------- */
    /* quotes */
    /* -------------------------------------------------- */

    /* quoted text */
    blockquote {
        margin: 0;
        padding: 0;
        border-left: 4px solid #bdbdbd;
        padding-left: 16px;
        break-inside: avoid;
    }

    /* -------------------------------------------------- */
    /* banners */
    /* -------------------------------------------------- */

    /* info banners */
    .banner {
        box-sizing: border-box;
        display: block;
        position: relative;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 20px;
        text-align: center;
    }

    /* paragraph in banner */
    .banner > p {
        margin: 0;
    }

    /* -------------------------------------------------- */
    /* highlight colors */
    /* -------------------------------------------------- */

    .white {
        background: #ffffff;
    }
    .lightgrey {
        background: #eeeeee;
    }
    .grey {
        background: #757575;
    }
    .darkgrey {
        background: #424242;
    }
    .black {
        background: #000000;
    }
    .lightred {
        background: #ffcdd2;
    }
    .lightyellow {
        background: #ffecb3;
    }
    .lightgreen {
        background: #dcedc8;
    }
    .lightblue {
        background: #e3f2fd;
    }
    .lightpurple {
        background: #f3e5f5;
    }
    .red {
        background: #f44336;
    }
    .orange {
        background: #ff9800;
    }
    .yellow {
        background: #ffeb3b;
    }
    .green {
        background: #4caf50;
    }
    .blue {
        background: #2196f3;
    }
    .purple {
        background: #9c27b0;
    }
    .white,
    .lightgrey,
    .lightred,
    .lightyellow,
    .lightgreen,
    .lightblue,
    .lightpurple,
    .orange,
    .yellow,
    .white a,
    .lightgrey a,
    .lightred a,
    .lightyellow a,
    .lightgreen a,
    .lightblue a,
    .lightpurple a,
    .orange a,
    .yellow a {
        color: #000000;
    }
    .grey,
    .darkgrey,
    .black,
    .red,
    .green,
    .blue,
    .purple,
    .grey a,
    .darkgrey a,
    .black a,
    .red a,
    .green a,
    .blue a,
    .purple a {
        color: #ffffff;
    }

    /* -------------------------------------------------- */
    /* buttons */
    /* -------------------------------------------------- */

    /* class for styling links like buttons */
    .button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 5px;
        padding: 10px 20px;
        font-size: 0.75em;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 1px;
        background: none;
        color: #2196f3;
        border: solid 1px #bdbdbd;
        border-radius: 5px;
    }

    /* buttons when hovered */
    .button:hover:not([disabled]),
    .icon_button:hover:not([disabled]) {
        cursor: pointer;
        background: #f5f5f5;
    }

    /* buttons when disabled */
    .button[disabled],
    .icon_button[disabled] {
        opacity: 0.35;
        pointer-events: none;
    }

    /* class for styling buttons containg only single icon */
    .icon_button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        margin: 0;
        padding: 0;
        background: none;
        border-radius: 5px;
        border: none;
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
    }

    /* icon button inner svg image */
    .icon_button > svg {
        height: 16px;
    }

    /* -------------------------------------------------- */
    /* icons */
    /* -------------------------------------------------- */

    /* class for styling icons inline with text */
    .inline_icon {
        height: 1em;
        position: relative;
        top: 0.125em;
    }

    /* -------------------------------------------------- */
    /* print control */
    /* -------------------------------------------------- */

    @media print {
        @page {
            /* suggested printing margin */
            margin: 0.5in;
        }

        /* document and "page" elements */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        /* "page" element */
        body {
            font-size: 11pt !important;
            line-height: 1.35;
        }

        /* all headings */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 15px 0;
        }

        /* figures and tables */
        figure, table {
            font-size: 0.85em;
        }

        /* table cells */
        th,
        td {
            padding: 5px;
        }

        /* shrink font awesome icons */
        i.fas,
        i.fab,
        i.far,
        i.fal {
            transform: scale(0.85);
        }

        /* decrease banner margins */
        .banner {
            margin-top: 15px;
            margin-bottom: 15px;
            padding: 15px;
        }

        /* class for centering an element vertically on its own page */
        .page_center {
            margin: auto;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            vertical-align: middle;
            break-before: page;
            break-after: page;
        }

        /* always insert a page break before the element */
        .page_break_before {
            break-before: page;
        }

        /* always insert a page break after the element */
        .page_break_after {
            break-after: page;
        }

        /* avoid page break before the element */
        .page_break_before_avoid {
            break-before: avoid;
        }

        /* avoid page break after the element */
        .page_break_after_avoid {
            break-after: avoid;
        }

        /* avoid page break inside the element */
        .page_break_inside_avoid {
            break-inside: avoid;
        }
    }

    /* -------------------------------------------------- */
    /* override pandoc css quirks */
    /* -------------------------------------------------- */

    .sourceCode {
        /* prevent unsightly overflow in wide code blocks */
        overflow: auto !important;
    }

    div.sourceCode {
        /* prevent background fill on top-most code block  container */
        background: none !important;
    }

    .sourceCode * {
        /* force consistent line spacing */
        line-height: 1.5 !important;
    }

    div.sourceCode {
        /* style code block margins same as <pre> element */
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* -------------------------------------------------- */
    /* tablenos */
    /* -------------------------------------------------- */

    /* tablenos wrapper */
    .tablenos {
        /* show scrollbar on tables if necessary to prevent overflow */
        width: 100%;
        margin: 20px 0;
    }

    .tablenos > table {
        /* move margins from table to table_wrapper to allow margin collapsing */
        margin: 0;
    }

    @media only screen {
        /* tablenos wrapper */
        .tablenos {
            /* show scrollbar on tables if necessary to prevent overflow */
            overflow-x: auto !important;
        }

        .tablenos th,
        .tablenos td {
            overflow-wrap: unset !important;
            word-break: unset !important;
        }

        /* table in wrapper */
        .tablenos table,
        .tablenos table * {
            /* don't break table words */
            overflow-wrap: normal !important;
        }
    }

    /* -------------------------------------------------- */
    /* mathjax */
    /* -------------------------------------------------- */

    /* mathjax containers */
    .math.display > span:not(.MathJax_Preview) {
        /* turn inline element (no dimensions) into block (allows fixed width and thus scrolling) */
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: center;
        align-items: center;
        margin: 0 !important;
    }

    /* right click menu */
    .MathJax_Menu {
        border-radius: 5px !important;
        border: solid 1px #bdbdbd !important;
        box-shadow: none !important;
    }

    /* equation auto-number */
    span[id^="eq:"] > span.math.display + span {
        font-weight: 600;
    }

    /* equation */
    span[id^="eq:"] > span.math.display > span {
        /* nudge to make room for equation auto-number and anchor */
        margin-right: 60px !important;
    }

    /* -------------------------------------------------- */
    /* anchors plugin */
    /* -------------------------------------------------- */

    @media only screen {
        /* anchor button */
        .anchor {
            opacity: 0;
            margin-left: 5px;
        }

        /* anchor buttons within <h2>'s */
        h2 .anchor {
            margin-left: 10px;
        }

        /* anchor buttons when hovered/focused and anything containing an anchor button when hovered */
        *:hover > .anchor,
        .anchor:hover,
        .anchor:focus {
            opacity: 1;
        }

        /* anchor button when hovered */
        .anchor:hover {
            cursor: pointer;
        }
    }

    /* always show anchor button on devices with no mouse/hover ability */
    @media (hover: none) {
        .anchor {
            opacity: 1;
        }
    }

    /* always hide anchor button on print */
    @media only print {
        .anchor {
            display: none;
        }
    }

    /* -------------------------------------------------- */
    /* accordion plugin */
    /* -------------------------------------------------- */

    @media only screen {
        /* accordion arrow button */
        .accordion_arrow {
            margin-right: 10px;
        }

        /* arrow icon when <h2> data-collapsed attribute true */
        h2[data-collapsed="true"] > .accordion_arrow > svg {
            transform: rotate(-90deg);
        }

        /* all elements (except <h2>'s) when data-collapsed attribute true */
        *:not(h2)[data-collapsed="true"] {
            display: none;
        }

        /* accordion arrow button when hovered and <h2>'s when hovered */
        .accordion_arrow:hover,
        h2[data-collapsed="true"]:hover,
        h2[data-collapsed="false"]:hover {
            cursor: pointer;
        }
    }

    /* always hide accordion arrow button on print */
    @media only print {
        .accordion_arrow {
            display: none;
        }
    }

    /* -------------------------------------------------- */
    /* tooltips plugin */
    /* -------------------------------------------------- */

    @media only screen {
        /* tooltip container */
        #tooltip {
            position: absolute;
            width: 50%;
            min-width: 240px;
            max-width: 75%;
            z-index: 1;
        }

        /* tooltip content */
        #tooltip_content {
            margin-bottom: 5px;
            padding: 20px;
            border-radius: 5px;
            border: solid 1px #bdbdbd;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
            background: #ffffff;
            overflow-wrap: break-word;
        }

        /* tooltip copy of paragraphs and figures */
        #tooltip_content > p,
        #tooltip_content > figure {
            margin: 0;
            max-height: 320px;
            overflow-y: auto;
        }

        /* tooltip copy of <img> */
        #tooltip_content > figure > img,
        #tooltip_content > figure > svg {
            max-height: 260px;
        }

        /* navigation bar */
        #tooltip_nav_bar {
            margin-top: 10px;
            text-align: center;
        }

        /* navigation bar previous/next buton */
        #tooltip_nav_bar > .icon_button {
            position: relative;
            top: 3px;
        }

        /* navigation bar previous button */
        #tooltip_nav_bar > .icon_button:first-of-type {
            margin-right: 5px;
        }

        /* navigation bar next button */
        #tooltip_nav_bar > .icon_button:last-of-type {
            margin-left: 5px;
        }
    }

    /* always hide tooltip on print */
    @media only print {
        #tooltip {
            display: none;
        }
    }

    /* -------------------------------------------------- */
    /* jump to first plugin */
    /* -------------------------------------------------- */

    @media only screen {
        /* jump button */
        .jump_arrow {
            position: relative;
            top: 0.125em;
            margin-right: 5px;
        }
    }

    /* always hide jump button on print */
    @media only print {
        .jump_arrow {
            display: none;
        }
    }

    /* -------------------------------------------------- */
    /* link highlight plugin */
    /* -------------------------------------------------- */

    @media only screen {
        /* anything with data-highlighted attribute true */
        [data-highlighted="true"] {
            background: #ffeb3b;
        }

        /* anything with data-selected attribute true */
        [data-selected="true"] {
            background: #ff8a65 !important;
        }

        /* animation definition for glow */
        @keyframes highlight_glow {
            0% {
                background: none;
            }
            10% {
                background: #bbdefb;
            }
            100% {
                background: none;
            }
        }

        /* anything with data-glow attribute true */
        [data-glow="true"] {
            animation: highlight_glow 2s;
        }
    }

    /* -------------------------------------------------- */
    /* table of contents plugin */
    /* -------------------------------------------------- */

    @media only screen {
        /* toc panel */
        #toc_panel {
            box-sizing: border-box;
            position: fixed;
            top: 0;
            left: 0;
            background: #ffffff;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
            z-index: 2;
        }

        /* toc panel when closed */
        #toc_panel[data-open="false"] {
            min-width: 60px;
            width: 60px;
            height: 60px;
            border-right: solid 1px #bdbdbd;
            border-bottom: solid 1px #bdbdbd;
        }

        /* toc panel when open */
        #toc_panel[data-open="true"] {
            min-width: 260px;
            max-width: 480px;
            /* keep panel edge consistent distance away from "page" edge */
            width: calc(((100vw - 8.5in) / 2) - 30px - 40px);
            bottom: 0;
            border-right: solid 1px #bdbdbd;
        }

        /* toc panel header */
        #toc_header {
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 60px;
            margin: 0;
            padding: 20px;
        }

        /* toc panel header when hovered */
        #toc_header:hover {
            cursor: pointer;
        }

        /* toc panel header when panel open */
        #toc_panel[data-open="true"] > #toc_header {
            border-bottom: solid 1px #bdbdbd;
        }

        /* toc open/close header button */
        #toc_button {
            margin-right: 20px;
        }

        /* hide toc list and header text when closed */
        #toc_panel[data-open="false"] > #toc_header > *:not(#toc_button),
        #toc_panel[data-open="false"] > #toc_list {
            display: none;
        }

        /* toc list of entries */
        #toc_list {
            box-sizing: border-box;
            width: 100%;
            padding: 20px;
            position: absolute;
            top: calc(60px + 1px);
            bottom: 0;
            overflow: auto;
        }

        /* toc entry, link to section in document */
        .toc_link {
            display: block;
            padding: 5px;
            position: relative;
            font-weight: 600;
            text-decoration: none;
        }

        /* toc entry when hovered or when "viewed" */
        .toc_link:hover,
        .toc_link[data-viewing="true"] {
            background: #f5f5f5;
        }

        /* toc entry, level 1 indentation */
        .toc_link[data-level="1"] {
            margin-left: 0;
        }

        /* toc entry, level 2 indentation */
        .toc_link[data-level="2"] {
            margin-left: 20px;
        }

        /* toc entry, level 3 indentation */
        .toc_link[data-level="3"] {
            margin-left: 40px;
        }

        /* toc entry, level 4 indentation */
        .toc_link[data-level="4"] {
            margin-left: 60px;
        }

        /* toc entry bullets */
        #toc_panel[data-bullets="true"] .toc_link[data-level]:before {
            position: absolute;
            left: -15px;
            top: -1px;
            font-size: 1.5em;
        }

        /* toc entry, level 2 bullet */
        #toc_panel[data-bullets="true"] .toc_link[data-level="2"]:before {
            content: "\2022";
        }

        /* toc entry, level 3 bullet */
        #toc_panel[data-bullets="true"] .toc_link[data-level="3"]:before {
            content: "\25AB";
        }

        /* toc entry, level 4 bullet */
        #toc_panel[data-bullets="true"] .toc_link[data-level="4"]:before {
            content: "-";
        }
    }

    /* when on screen < 8.5in wide */
    @media only screen and (max-width: 8.5in) {
        /* push <body> ("page") element down to make room for toc icon */
        .toc_body_nudge {
            padding-top: 60px;
        }

        /* toc icon when panel closed and not hovered */
        #toc_panel[data-open="false"]:not(:hover) {
            background: rgba(255, 255, 255, 0.75);
        }
    }

    /* always hide toc panel on print */
    @media only print {
        #toc_panel {
            display: none;
        }
    }

    /* -------------------------------------------------- */
    /* lightbox plugin */
    /* -------------------------------------------------- */

    @media only screen {
        /* regular <img> in document when hovered */
        img.lightbox_document_img:hover {
            cursor: pointer;
        }

        .body_no_scroll {
            overflow: hidden !important;
        }

        /* screen overlay */
        #lightbox_overlay {
            display: flex;
            flex-direction: column;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.75);
            z-index: 3;
        }

        /* middle area containing lightbox image */
        #lightbox_image_container {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            padding: 20px;
        }

        /* bottom area containing caption */
        #lightbox_bottom_container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            min-height: 100px;
            max-height: 100px;
            background: rgba(0, 0, 0, 0.5);
        }

        /* image number info text box */
        #lightbox_number_info {
            position: absolute;
            color: #ffffff;
            font-weight: 600;
            left: 2px;
            top: 0;
            z-index: 4;
        }

        /* zoom info text box */
        #lightbox_zoom_info {
            position: absolute;
            color: #ffffff;
            font-weight: 600;
            right: 2px;
            top: 0;
            z-index: 4;
        }

        /* copy of image caption */
        #lightbox_caption {
            box-sizing: border-box;
            display: inline-block;
            width: 100%;
            max-height: 100%;
            padding: 10px 0;
            text-align: center;
            overflow-y: auto;
            color: #ffffff;
        }

        /* navigation previous/next button */
        .lightbox_button {
            width: 100px;
            height: 100%;
            min-width: 100px;
            min-height: 100%;
            color: #ffffff;
        }

        /* navigation previous/next button when hovered */
        .lightbox_button:hover {
            background: none !important;
        }

        /* navigation button icon */
        .lightbox_button > svg {
            height: 25px;
        }

        /* figure auto-number */
        #lightbox_caption > span:first-of-type {
            font-weight: bold;
            margin-right: 5px;
        }

        /* lightbox image when hovered */
        #lightbox_img:hover {
            cursor: grab;
        }

        /* lightbox image when grabbed */
        #lightbox_img:active {
            cursor: grabbing;
        }
    }

    /* when on screen < 480px wide */
    @media only screen and (max-width: 480px) {
        /* make navigation buttons skinnier on small screens to make more room for caption text */
        .lightbox_button {
            width: 50px;
            min-width: 50px;
        }
    }

    /* always hide lightbox on print */
    @media only print {
        #lightbox_overlay {
            display: none;
        }
    }

    /* -------------------------------------------------- */
    /* hypothesis (annotations) plugin */
    /* -------------------------------------------------- */

    /* hypothesis activation button */
    #hypothesis_button {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        right: 0;
        width: 60px;
        height: 60px;
        background: #ffffff;
        border-radius: 0;
        border-left: solid 1px #bdbdbd;
        border-bottom: solid 1px #bdbdbd;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        z-index: 2;
    }

    /* hypothesis button svg */
    #hypothesis_button > svg {
        position: relative;
        top: -4px;
    }

    /* hypothesis annotation count */
    #hypothesis_count {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5px;
    }

    /* side panel */
    .annotator-frame {
        width: 280px !important;
    }

    /* match highlight color to rest of theme */
    .annotator-highlights-always-on .annotator-hl {
        background-color: #ffeb3b !important;
    }

    /* match focused color to rest of theme */
    .annotator-hl.annotator-hl-focused {
        background-color: #ff8a65 !important;
    }

    /* match bucket bar color to rest of theme */
    .annotator-bucket-bar {
        background: #f5f5f5 !important;
    }

    /* always hide button, toolbar, and tooltip on print */
    @media only print {
        #hypothesis_button {
            display: none;
        }

        .annotator-frame {
            display: none !important;
        }

        hypothesis-adder {
            display: none !important;
        }
    }
</style>