html, body { background: #ECF0F1; }
body::before { content: ''; background-image: url('/Public/Static/images/minlunchguide-logo-bg.svg'); background-size: contain; background-repeat: no-repeat; background-position: right bottom; position: absolute; right: 0; bottom: 0; height: 55vw; width: 55vw; }
.mox-login-background-overlay { background-color: transparent; }
.mox-login { max-width: 980px; margin: 10vh auto 0; background: initial; overflow: visible; }
.mox-login .logo { background-color: transparent; background-image: url('/Public/Static/images/minlunchguide-logo.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; text-indent: -99999px; height: 25vh; max-height: 250px; margin-bottom: 40px; }

.mox-login .content-container { background-color: #fff; border-radius: 5px; box-shadow: 0px 3px 6px #00000029; padding: 15px 50px; }
.mox-login fieldset { padding: 0; }

h2 { margin: 20px 0; }
a { margin: 0; }

a.mox-login-button, 
.mox-login fieldset input[type="submit"], 
.mox-login fieldset button.save, 
.mox-content fieldset input[type="submit"], 
.mox-content fieldset button.save { background-color: #2C3E50; min-width: 250px; }

a.mox-login-button:hover, 
.mox-login fieldset input[type="submit"]:hover, 
.mox-login fieldset button.save:hover { background-color: #5A6E82; }

@media only screen and (max-width: 640px) {
    .mox-login { margin: 0; padding-bottom: 100px; }
    .mox-login .logo { margin: 20px auto; width: 70%; height: 40vw; }
    .mox-login .content-container { padding: 20px; margin: 20px; }
    h2 { text-align: center; margin: 0; font-size: 28px; }

    .mox-login-col2 { flex-direction: column-reverse; }
    .mox-login-col2 > * { width: 100%; }
}