@media (prefers-color-scheme: dark) {
    :root {
        --primary: #79aec8;
        --secondary: #417690;
        --accent: #f5dd5d;
        --primary-fg: #fff;
        --body-fg: #333;
        --body-bg: #fff;
        --body-quiet-color: #666;
        --body-loud-color: #000;
        --header-color: #ffc;
        --header-branding-color: var(--accent);
        --header-bg: var(--secondary);
        --header-link-color: var(--primary-fg);
        --breadcrumbs-fg: #c4dce8;
        --breadcrumbs-link-fg: var(--body-bg);
        --breadcrumbs-bg: var(--primary);
        --link-fg: #447e9b;
        --link-hover-color: #036;
        --link-selected-fg: #5b80b2;
        --hairline-color: #e8e8e8;
        --border-color: #ccc;
        --error-fg: #ba2121;
        --message-success-bg: #dfd;
        --message-warning-bg: #ffc;
        --message-error-bg: #ffefef;
        --darkened-bg: #f8f8f8;
        --selected-bg: #e4e4e4;
        --selected-row: #ffc;
        --button-fg: #fff;
        --button-bg: var(--primary);
        --button-hover-bg: #609ab6;
        --default-button-bg: var(--secondary);
        --default-button-hover-bg: #205067;
        --close-button-bg: #888;
        --close-button-hover-bg: #747474;
        --delete-button-bg: #ba2121;
        --delete-button-hover-bg: #a41515;
        --object-tools-fg: var(--button-fg);
        --object-tools-bg: var(--close-button-bg);
        --object-tools-hover-bg: var(--close-button-hover-bg);
    }
}
    body {
        font-family: "Open Sans", sans-serif;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    html {
        height: 100%;
    }

    /*************************************** TOP *******************************/
    div.topLine {
        font-family: "Roboto Slab", serif;
        font-weight: 700;
        background-color: #2e0c27;
        position: relative;
        max-height: 8vh;
        min-height: 75px;
    }

    div.topLine a {
        text-decoration: none;
    }

    div.topLine div.topContainer {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        height: 75px;
        position: relative;
    }

    div.topLine div.topContainer > a {
        display: inline-block;
        float: left;
        line-height: 0;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    div.topLine div.topContainer img.titleLogo {
        height: 34px;
    }

    /**************************************** TITLE PAGE ************************/
    div.container {
        background: #481f3f;
        color: #fff;
        height: 100%;
        overflow-y: scroll;
    }

    div.container div.content {
        color: #fff;
    }

    div.container #content {
        padding: 0;
    }

    div.container div.content div.content-wrapper {
        color: #fff;
        max-width: 1000px;
        min-width: 320px;
        font-size: 14px;
        margin: 0 auto;
        width: 100%;
    }

    div.container div.content div.content-wrapper h1 {
        color: #fff;
        font-size: 3.2em;
        margin: 0.67em 0;
    }

    div.container div.content div.content-wrapper td {
        border: none;
        font-size: 14px;
        font-family: "Open Sans", sans-serif;
    }

    div.container div.content div.content-wrapper input[type="submit"] {
        background-color: #fff;
        color: #000;
        font-size: 18px;
        font-weight: 300;
        margin-top: 20px;
        padding: 8px 22px;
    }

    div.container div.content div.content-wrapper input[type="text"],
    div.container div.content div.content-wrapper input[type="password"] {
        min-width: 300px;
        font-size: 14px;
        font-family: "Open Sans", sans-serif;
    }

    div.container div.content div.content-wrapper hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        margin: 1em 0;
        padding: 0;
    }

    div.container div.content div.content-wrapper a {
        color: #fff;
    }

    div.container div.content div.content-wrapper span.file img {
        height: 16px;
    }

    div.container div.content div.content-wrapper img {
        max-width: 100%;
    }

    div.container div.content div.content-wrapper ul {
        list-style: square;
    }

    div.container div.content div.content-wrapper div.multicolumn2 {
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        padding: 30px 0;
    }