:root {
    --bg: #f1f1f1;
    --version-shadow: #fff;
    --version-color: #6e5a43;
    --version-xs-color: #6e5a43;
    --main: #9bc947;
    --main-darker: #6a7f34;
    --input-color: #6e5a43;
    --loader-color: #008137;
    --link-color: #e5074d;
    --form-bg: #ffffffcc;
    --form-border: #6a7f34;
}
body {
    background-color: var(--bg);
}
#login-bg, #login-image {
    display: none;
}
#login-form {
    background-color: var(--form-bg);
    border-radius: .5rem;
    border: 1px solid var(--form-border);
    position: relative;
}
#logo {
    max-height: 15rem;
    max-width: 15rem;
    border-radius: 0.5rem;
    overflow: hidden;
    position: absolute;
    border: 1px solid var(--form-border);
    top: -6rem;
    left: -5rem;
}
#title {
    color: var(--main);
}
#login-div {
    align-items: center;
}
#login-app {
    grid-template-areas:
        ". main main ."
        ". left left ."
        ". right right ."
        ". bottom bottom ."
        ". . . ."
        ". mention version .";
    grid-template-columns: 1rem auto auto 1rem;
    grid-template-rows: auto 0fr 0fr 0fr 0fr auto 0fr;
}
button.primary {
    transition-timing-function: ease-out;
    transition-duration: .25s;
    transition-property: background-color;
}
@media (max-width: 768px) {
    #login-app {
        grid-template-areas:
            ". main ."
            ". left ."
            ". right ."
            ". bottom ."
            ". mention ."
            ". version .";
        grid-template-columns: 1rem auto 1rem;
        grid-template-rows: auto 0fr 0fr 0fr 0fr 0fr;
    }
    #logo {
        left: -1rem;
        top: -4rem;
    }
    #login-div {
        margin-top: 2rem;
    }
}
@media (max-width: 992px) {
    #login-div {
        margin-top: 4rem;
    }
}
@media (max-width: 1200px) {
    #login-form {
        padding: 2rem;
    }
}
@media (max-height: 550px) {
    #login-div {
        margin-top: 4rem;
    }
}
:root { --loader-color: #9bc947; }