/* CSS */
html {
    background: url("../images/surfaceBox.svg") no-repeat left top,
    url("../images/thumbnail_image002.png") no-repeat right center fixed, #1E1733;

    -webkit-background-size: 100vh;
    -moz-background-size: 100vh;
    -o-background-size: 100vh;
    background-size: 100vh;

    opacity: 1;
    height: 100vh;
    width: auto;
    z-index: -1;
}


.input-field {
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    box-sizing: border-box;
    color: #111827;
    font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: .75rem 1rem;
    max-width: 400px;
    width: 90vw;
    height: 60px;
    margin: 10px;
}

.input-field:focus {
    border: 1px solid #1b84b9;
}

.wrapper {
    display: block;
}

/*********************GRID SYSTEM**********************/
.container {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
    grid-template-rows: 1.5fr 1.5fr 1.5fr;
    gap: 0px 0px;
    grid-template-areas:
    ". . . . ."
    ". login . . ."
    ". . . . .";
    height: 100%;
}

.login {
    display: grid;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    grid-template-rows: 0.5fr 1fr 2fr 0.5fr;
    gap: 0px 0px;
    grid-template-areas:
    ". . ."
    ". Logo ."
    ". Form ."
    ". ForgotPW ."
    ". . .";
    grid-area: login;
}

.Logo {
    grid-area: Logo;
    margin: 0 auto;
    /*background-image: url("../images/PINIT_black_logo.svg");
    background-size: cover;*/
}

.Form {
    grid-area: Form;
}

.ForgotPW {
    grid-area: ForgotPW;
    margin: 10px;
    font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-decoration: None;
}
/******************End of Grid System*************************/


#logo {
    height: 120px;
    margin-top: 40px;
    max-width: 400px;
    width: 90vw;
}

.errorlist {
    margin: 10px;
    color: #de0101;
    font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
}