html,
body {
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    background-color: #f3f3f3;
    font-family: 'Roboto', sans-serif;
    color: #404040;
    background: linear-gradient(150deg, rgba(16, 82, 160, .9), rgba(66, 172, 246, .6)), rgba(16, 82, 160) url(../images/auth-bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    transition: .5s;
}
@media(max-width: 991px) {
    body {
        background-image: none;
    }
}

h1 {
    font-size: 30px;
    margin-bottom: 30px;
}

.wrapper {
    width: 100%;
    z-index: 2;
}

.container {
    min-width: 300px;
    transition: .5s;
}

.auth-box {
    background: #fff;
    box-shadow: 0 20px 25px -12px rgb(0 0 0 / 9%);
    -webkit-box-shadow: 0 20px 25px -12px rgb(0 0 0 / 9%);
    border-radius: 8px;
    text-align: center;
}

.auth-box .logo {
    margin-bottom: 30px;
}

.auth-box input {
    text-align: center;
}

.has-error {
    color: red;
}

.has-error .form-control {
    border-color: red;
}

.help-block {
    margin-top: 4px;
}