html, body, #page {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 0.8em;
    font-family: Helvetica, Verdana, Sans-Serif;
    background-color: var(--body-background-color);
}

.top-button {
    font-size: 18px;
    width: 36px;
    height: 36px;
    margin: 4px;
    padding: 0;
    border-radius: 2px;
    vertical-align: middle;
}

svg.icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

#btnLogo {
    color: var(--btnLogo-color);
    background: var(--btnLogo-background);
    border: 0;
    cursor: default;
    text-align: center;
    width: 28px;
    --stroke-color: var(--btnLogo-stroke-color);
}

    #btnLogo > svg {
        width: 24px;
        height: 24px;
    }

#btnMenu {
    color: var(--btnMenu-color);
    background: var(--btnMenu-background);
    border: 0;
    cursor: pointer;
}

#header {
    background: var(--header-background);
    box-sizing: border-box;
    min-height: 44px;
    border-bottom: 0;
}

    #header > h1 {
        display: inline-block;
        margin: 0;
        padding: 8px 0 0 8px;
        font-size: 1.5em;
        line-height: 1.5em;
        color: var(--header-h1-color);
        font-family: Helvetica Neue,Arial,sans-serif;
        font-weight: 400;
        vertical-align: top;
    }

#info {
    float: right;
    height: 36px;
    padding: 4px;
}

#user {
    float: right;
    clear: right;
    color: var(--header-user-color);
    font-family: Tahoma, Verdana, Arial;
    font-size: 12px;
    line-height: 20px;
    vertical-align: middle;
}

#domain {
    float: right;
    clear: right;
    color: var(--header-domain-color);
    font-family: Tahoma, Verdana, Arial;
    font-size: 11px;
}

@media screen and (max-width: 600px) { #user { display: none; } #domain { display: none; } #header>h1 { font-size: 1.3em; line-height: 1.3em; padding-top: 10px; margin-left:2px; }}

#btnSettings {
    float: right;
    color: var(--btnSettings-color);
    background: var(--btnSettings-background);
    border: var(--btnSettings-border);
    cursor: pointer;
}

#settings {
    position: absolute;
    top: 40px;
    right: 0;
    width: 160px;
    padding: 6px 12px;
    border-radius: 6px 0 0 6px;
    background: var(--settings-background);
    border: var(--settings-border);
    border-top: 0;
    box-shadow: var(--settings-box-shadow);
    z-index: 10;
}

    #settings > input[type=button] {
        clear: right;
        color: var(--settings-color);
        font-family: Tahoma, Verdana, Arial;
        border: 0;
        padding: 2px 4px;
        margin: 0;
        background: none;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

        #settings > input[type=button]::-moz-focus-inner {
            border: 0;
            padding: 0;
        }

    #settings > hr {
        clear: both;
        display: block;
        border: var(--settings-hr-border);
        border-bottom: var(--settings-hr-border-bottom);
        margin: 6px 0;
        padding: 0;
    }

#nav {
    float: left;
    display: block;
    background: var(--nav-background);
    border-right: var(--nav-border-right);
    overflow: auto;
}

    #nav::-webkit-scrollbar {
        width: 17px;
    }

    #nav::-webkit-scrollbar-track {
        background: var(--nav-scrollbar-track-background);
    }

    #nav::-webkit-scrollbar-thumb {
        border: var(--nav-scrollbar-button-border);
    }

    #nav::-webkit-scrollbar-button {
        height: 17px;
        border: var(--nav-scrollbar-button-border);
    }

        #nav::-webkit-scrollbar-button:start {
            background-image: var(--nav-scrollbar-button-start-image);
            background-repeat: no-repeat;
            background-position: center center;
        }

        #nav::-webkit-scrollbar-button:end {
            background-image: var(--nav-scrollbar-button-end-image);
            background-repeat: no-repeat;
            background-position: center center;
        }

    #nav > ul {
        list-style: none;
        padding: 0;
        margin: 0.5em;
    }

        #nav > ul > li > span {
            display: block;
            cursor: pointer;
            margin-bottom: -1px;
            padding: 8px 8px;
            text-decoration: none;
            font-weight: bold;
            color: var(--nav-ul-li-span-color);
            text-shadow: var(--nav-ul-li-span-text-shadow);
            background: var(--nav-ul-li-span-background);
            border: var(--nav-ul-li-span-border);
            border-radius: 4px;
        }

        #nav > ul > li > ul {
            list-style: none;
            padding: 0.3em;
            margin: 0;
            background: var(--nav-ul-li-ul-background);
            margin-bottom: -1px;
        }

            #nav > ul > li > ul > li > a {
                display: block;
                cursor: pointer;
                padding: 6px 8px;
                text-decoration: none;
                color: var(--nav-ul-li-ul-a-color);
                font-size: 1em;
                font-family: helvetica, verdana;
                border: var(--nav-ul-li-ul-a-border);
            }

                #nav > ul > li > ul > li > a.selected {
                    border-radius: 6px;
                    background: var(--nav-ul-li-ul-a-selected-background);
                    color: var(--nav-ul-li-ul-a-selected-color);
                    font-weight: 600;
                }

    #nav > hr {
        border: var(--nav-hr-border);
        border-bottom: var(--nav-hr-border-bottom);
    }

#area {
    border: 0;
    padding: 0;
    margin: 0;
    float: left;
    display: block;
}

#btnPane {
    position: absolute;
    top: 53px;
    right: 6px;
    height: 28px;
    width: 32px;
    z-index: 8;
    border: var(--btnPane-border);
    border-radius: 2px;
    color: var(--btnPane-color);
    background: var(--btnPane-background);
    cursor: pointer;
}

.main {
    border: 0;
    padding: 0;
    margin: 0;
    float: left;
    display: block;
    height: 100%;
    background: var(--main-background);
    overflow: hidden;
}

.pane {
    border: 0;
    padding: 0;
    margin: 0;
    float: left;
    display: block;
    height: 100%;
    background: var(--pane-background);
    overflow: hidden;
}

.loading {
    background-image: url("loading.gif");
    background-position: center;
    background-repeat: no-repeat;
}

.iframeCon {
    border: 0;
    padding: 0;
    margin: 6px 0 0 6px;
    overflow: auto;
    background-color: transparent;
}

#footer {
    padding: 0 1.2em;
    color: var(--footer-color);
}

    #footer > span {
        color: var(--footer-span-color);
    }

    #footer > a {
        color: var(--footer-link-color);
    }