.pageNav {
    color: white;
    position: fixed;
    padding: 0;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 250;
    display: block;
}

.pageHeader {
    box-sizing: border-box;
    height: 40px;
    padding: 10px;
    background-color: #002147;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.navButton {
    height: 30px;
    max-height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0 15px;
    color: white;
    background-color: #376193;
    border-color: #376193;
}

    .navButton:hover {
        color: white;
        border-color: #CCC;
        text-decoration: none;
    }

.breadcrumb {
    box-sizing: border-box;
    display: block;
    background-color: #ccc;
    height: 25px;
    padding: 10px;
    font-size: 80%;
}

    .breadcrumb ul {
        box-sizing: border-box;
        height: 25px;
        list-style-type: none;
        list-style: none;
        margin: 0;
        /* use these lines to center vertically*/
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

        .breadcrumb ul li {
            list-style-type: none;
            display: inline-block;
            color: black;
            /* use these lines to center vertically*/
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }

            .breadcrumb ul li a {
                display: inline-block;
            }

            .breadcrumb ul li + li:before {
                padding: 8px;
                content: "/\00a0";
            }

    .breadcrumb a {
        text-decoration: none;
        color: #333;
    }

        .breadcrumb a:hover {
            text-decoration: underline;
            color: black;
        }

.pushDown {
    box-sizing: border-box;
    height: 72px;
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* Hamburger Menu */
#pageMenuToggle {
    width: 30px;
    height: 30px;
    background-color: #376193;
    cursor: pointer;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    border: 2px solid #376193;
    border-radius: 10%;
    box-sizing: border-box;
    padding: 2px;
    margin-right: 10px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
}

    #pageMenuToggle > span {
        width: 100%;
        height: 3px;
        background-color: white;
        display: block;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
    }
    #pageMenuToggle span:first-child {
        transform-origin: 0% 0%;
    }

    #pageMenuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }

    #pageMenuToggle:hover {
        border-color: #ccc;
    }

#pageMenu {
    position: absolute;
    width: 300px;
    height: 400px;
    /*margin: -100px 0 0 -50px;*/
    top: 40px;
    padding: 10px, 0;
    background: #ededed;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    z-index: 245;
    box-sizing: border-box;
    color: #002147;
    display:flex;
    flex-flow: column nowrap;
}
    #pageMenu > div, #pageMenu > a {
        padding: 5px;
        padding-left: 50px;
    }
        #pageMenu > a:hover {
            text-decoration: none;
            background-color: #376193;
            color: #DDD;
        }
        #pageMenu ul {
            list-style-type: none;
        }
    #pageMenu li {
        padding: 10px 0;
        color: #002147;
        cursor: pointer;
    }
        #pageMenu li:hover {
            background-color: #376193;
            opacity: 0.7;
        }
.pageMenuButton {
    border-color: #002147;
    text-decoration:none;
}
    .pageMenuButton:hover {
        opacity: 0.7;
        border-color: #376193;
        text-decoration: none;
    }
.pageMenuSectionEnd {
    border-bottom: 2px solid #ccc;
    margin-bottom:10px;
}

#pageMenuMask {
    z-index:200;
    position:fixed;
    top:40px;
    width:5000px;
    height:5000px;
    display: none;
}

/*Form Inputs*/
.inputDivElement {
    margin-bottom: 10px;
}

    .inputDivElement > input {
        margin-bottom: 0;
    }

    .inputDivElement > select {
        margin-bottom: 0;
    }


.inputerror {
    color: red;
    font-style: italic;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #DDD;
    }

    input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="date"], input[type="time"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
        background-color: #000;
    }

    #pageMenu {
        background-color: #000;
        color: #CCC;
    }

    .breadcrumb {
        background-color: #555;
        color: #fff;
    }

        .breadcrumb a {
            text-decoration: none;
            color: #DDD;
        }

            .breadcrumb a:hover {
                text-decoration: underline;
                color: #FFF;
            }

        .breadcrumb ul li {
            color: #DDD;
        }

    a {
        color:cornflowerblue;
    }

        a:hover {
            color:firebrick;
        }

    .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
        color:#ccc;
    }
        .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
            color:#fff;
            border-color:#fff;
        }
}

@media screen and (max-width: 600px) {
    .pushDown {
        height: 42px;
    }

    .breadcrumb {
        display: none;
    }

    #navUserName {
        display: none;
    }
}

@media screen and (max-width:400px) {
    .pageHeader_3 {
        display: none;
    }
}