@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 300;
    src: local("Roboto Light"),local("Roboto-Light"),url(fonts/Roboto-300.woff2) format("woff2"),url(fonts/Roboto-300.woff) format("woff"),url(fonts/Roboto-300.ttf) format("truetype");
}

@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 400;
    src: local("Roboto"),local("Roboto-Regular"),url(fonts/Roboto-400.woff2) format("woff2"),url(fonts/Roboto-400.woff) format("woff"),url(fonts/Roboto-400.ttf) format("truetype");
}

@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"),local("Roboto-Medium"),url(fonts/Roboto-500.woff2) format("woff2"),url(fonts/Roboto-500.woff) format("woff"),url(fonts/Roboto-500.ttf) format("truetype");
}

@font-face {
    font-family: RobotoFallback;
    font-style: normal;
    font-weight: 700;
    src: local("Roboto Bold"),local("Roboto-Bold"),url(fonts/Roboto-700.woff2) format("woff2"),url(fonts/Roboto-700.woff) format("woff"),url(fonts/Roboto-700.ttf) format("truetype");
}

html, body {
    background-color: #363640;
    color: #DDDDDD;
    font-weight: 400;
    font-size: 14px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    line-height: 1.2857;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}


#navbar {
    background-color: #363640;
    overflow: hidden;
}

    /* Style the links inside the navigation bar */
    #navbar a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    }

        /* Change the color of links on hover */
        #navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        /* Add a color to the active/current link */
        #navbar a.active {
            background-color: #4CAF50;
            color: white;
        }

#homePageLogin {
    width: 400px;
    margin: 100px auto 0 auto;
    background-color: #363640;
    overflow: hidden;
}
    #homePageLogin h1 {
        text-align: center;
    }

    #homePageLogin img {
        display: block;
        margin: 20px auto;
    }

    #homePageLogin .loginMessageError {
        text-align: center;
        color:red;
    }

    #homePageLogin .loginMessageSuccess {
    text-align: center;
    color:green;
    }

    #homePageLogin #loginBackToLogin {
        margin: 1em auto;
        width:35%;
    }

    #homePageLogin form {
        display: grid;
        grid-row-gap: 1em;       /* space between rows */
        justify-content: center; /* center the whole grid in your 400px container */
    }

    /* wrap each label+input in a div.field */
    #homePageLogin .field {
    display: grid;
    grid-template-columns: 100px auto;  /* labels 100px wide, inputs take the rest */
    grid-column-gap: 1em;
    align-items: center;
    }

    /* right-align the text in the label column */
    #homePageLogin .field label {
    text-align: right;
    }

    #homePageLogin button.loginButton {
        display: block;
        margin: 20px auto;
    }

    #homePageLogin a {
        color: #cddc39;
        text-decoration: none;
    }

    #homePageLogin a:hover {
        color: #cddc39;
        text-decoration: underline;
    }

    /* Style the links inside the navigation bar */
    #homePageLogin a.menu {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    }

        /* Change the color of links on hover */
        #homePageLogin a.menu:hover {
            background-color: #ddd;
            color: black;
        }

        /* Add a color to the active/current link */
        #homePageLogin a.menu.active {
            background-color: #4CAF50;
            color: white;
        }