.flex-center {
    justify-content: center;
    align-items: normal;
}

.login .login-forgot, .login .login-signin, .login .login-signup, .login.login-signin-on .login-signup {
    display: none
}

.login.login-signin-on .login-signin {
    display: block
}

.login.login-signin-on .login-forgot {
    display: none
}

.login.login-signup-on .login-signup {
    display: block
}

.login.login-forgot-on .login-signin, .login.login-forgot-on .login-signup, .login.login-signup-on .login-forgot, .login.login-signup-on .login-signin {
    display: none
}

.login.login-forgot-on .login-forgot {
    display: block
}

.login .login-form {
    width: 100%;
    max-width: 500px
}

.login .login-signin, .login .login-forgot, .login .login-reset {
    display: block;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 6px;
}

.login input {
    background-color: rgba(243, 246, 249, 0.85) !important;
    border: none !important;
    text-shadow: none !important;
    filter: none;
}

.login input::placeholder {
    color: #93939d !important;
}

.alert[data-notify] .icon ~ [data-notify="message"] {
    display: inline-block;
    padding-left: 2rem;
}

.alert[data-notify] [data-notify="icon"] {
    vertical-align: middle;
}

.alert[data-notify] [data-notify="title"] {
    display: none;
}

.alert[data-notify] [data-notify="message"] {
    vertical-align: middle;
    padding-right: 1rem;
}

.alert[data-notify] .close::before {
    font-size: .65rem;
}

.alert[data-notify] .close {
    top: -2px !important;
    right: 8px !important;
    padding: 0;
}

@media (max-width: 575.98px) {
    .login .login-form {
        width: 100%;
        max-width: 100%
    }

    .alert[data-notify] {
        max-width: 90%;
        right: 0 !important;
        left: 0 !important;
    }
}