html, body {
    height: 100%;
}
h3.small-caps {
    margin-bottom: 40px;
    font-variant: small-caps;
    color: white;
}
#main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}
#login-wrapper {
    width: 100%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 7px;
    padding: 25px;
}
.button-group {
    margin-top: 30px;
}
.btn-full-width {
    width: 100%;
}
.right-align-btns {
    text-align: right;
    margin-top: 15px;
}

#loading {
    text-align: center;
}
.fade-enter-active {
    transition: all .6s ease;
}
.fade-leave-active {
    /*transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
    display: none;
}
.fade-enter, .fade-leave-to
    /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}

#stage-error {
    text-align: center;
}
#stage-maintenance {
    text-align: center;
}
#stage-banned {
    text-align: center;
}
#stage-browser-unsupported {
    text-align: center;
}
.fas-large-center {
    font-size: 600%;
    padding-bottom: 30px;
}

.fas-red {
    color: red;
}
.fas-orange {
    color: orange;
}
.fas-gray {
    color: gray;
}
#login-logo {
    max-width: 300px;
    max-height: 150px;
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}