html,
body {
    height: 100%;
}

body {
    padding: 1em;
}

/* WCAG 2.4.7 - visible focus. Matches InPlace.SignOn so the two pages feel like one flow. */
.btn:focus,
.btn-link:focus,
a:focus {
    box-shadow: 0 0 0 5px #0076A5CC;
    outline: none;
}

.login-page {
    display: flex;
    flex-direction: column;
    width: 420px;
    min-width: 320px;
    margin: 0 auto;
}

    .login-page .inplace-header {
        text-align: center;
        margin-bottom: 10px;
    }

        .login-page .inplace-header img {
            max-width: 420px;
        }

    .login-page .inplace-login-holder {
        border: #009EDD solid 1px;
    }

        .login-page .inplace-login-holder .inplace-panel {
            margin-top: 10px;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

            .login-page .inplace-login-holder .inplace-panel .btn {
                border-color: #07587A;
                background-color: #07587A;
                color: white;
                margin-top: 8px;
                margin-bottom: 8px;
                white-space: normal;
            }

                .login-page .inplace-login-holder .inplace-panel .btn:hover,
                .login-page .inplace-login-holder .inplace-panel .btn:focus {
                    border-color: #23527c;
                    background-color: #23527c;
                    color: white;
                }

.login-intro {
    padding: 0 15px;
    margin-bottom: 0;
}

.footer-logo {
    text-align: center;
    padding-top: 2em;
}

    .footer-logo img {
        max-width: 150px;
    }

@media only screen and (max-width: 460px) {
    .login-page {
        width: 100%;
    }

        .login-page .inplace-header img {
            width: 100%;
        }

        .login-page .btn {
            font-size: 16px;
        }
}