index.scss

body {
    min-height: 100%;
}

$login-page-margin: 50px;
$gap-between-boxes: calc($login-page-margin / 2);

#main-header {
    grid-column: 1 / 3;
    grid-row: 1 / 1;
}

#content {
    grid-column: 1 / 3;
    grid-row: 2 / 2;

    &.loginpage {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 20px;
        align-items: flex-start;
        flex-basis: 450px;
    }
}

#background-desktop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

#background-mobile {
    display: none;
    z-index: -1;
}

#index,
#login {
    #content {
        padding: $login-page-margin;
    }
}

#login_flex {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    flex-wrap: wrap;
    row-gap: 20px;
    align-items: flex-start;
}

#loginbox {
    background-color: var(--white);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    padding: 20px;
    width: 450px;
    float: left;

    header {
        margin: 0 0 0 0;

        h1 {
            border-bottom: 0;
        }
    }

    nav {
        ul {
            display: inline-block;
            list-style-type: none;
            margin: 0;
            width: 450px;
            padding-inline-start: 0;

            .login_link {
                display: inline-block;
                width: 180px;
                vertical-align: top;
                padding-right: 25px;

                a {
                    font-size: 1.5em;

                    p {
                        font-size: 0.5em;
                        color: var(--black);
                    }
                }
            }
        }
    }

    footer {
        overflow: auto;

        #languages,
        #contrast {
            display: flex;
            align-items: center;
            gap: 5px;
            border-top: 1px solid var(--light-gray-color);
            font-size: 0.9em;
            padding: 10px;

        }

        #contrast {
            padding-bottom: 0;
        }

        div.login_info {
            border-top: 1px solid var(--light-gray-color);
            font-size: 0.8em;
            div {
                text-align: right;
                float: left;
                padding: 5px;

                &:last-child {
                    float:right;
                }
            }
        }
        > a {
            margin-left: 12px;
        }
    }


    input#loginname,
    input#password {
        display: initial;
    }

    input#password {
        padding-right: 28px;
    }

    #password-toggle {
        position: absolute;
        right: 7px;
        bottom: 0;
        cursor: pointer;

        #visible-password,
        #invisible-password {
        }
    }
}

#faq_box {
    background-color: var(--white);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    padding: 20px;
    width: 450px;
    float: left;
    > header {
        margin: 0 0 0 0;
    }
}

#login-plugin-contents {
    margin-top: $gap-between-boxes;
}

#index,
#login {

    #current-page-structure {
        display: none;
    }

    .messagebox {
        margin-bottom: $gap-between-boxes;
        width: 418px;
    }
}

::-ms-reveal {
    display: none;
}


#login-form {
    max-height: 300px;
    overflow: hidden;
    transition: max-height var(--transition-duration-slow) linear;

    // This prevents the focus border from being cut due to overflow: hidden
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 5px;
    padding-right: 5px;

    &.hide {
        max-height: 0px;
    }

    #submit_login {
        margin-top: 0 !important;
        float: left !important;

    }
}