body {
        background: #1B485E;
        background: linear-gradient(#1e4e66, rgb(18, 48, 63));
        font-family: 'Lato', sans-serif !important;
        font-size: 14px;
}

.hidden {
        display: none;
}

.brand-logo {
        height: 50px;
        margin-bottom: 10px;
}

.login-page {
        height: 100%;
}

.form-container {
        top: 30%;
        background: #fbfbfb;
        border-radius: 3px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
        margin: auto;
        width: 260px;
        padding: 40px 20px;
        position: relative;
        text-align: center;
        transition: height 0.25s;
}

.form-container .login-form {
        margin: 0px;
}

.input-container {
        text-align: center;
}

.form-container input {
        display: block;
        background: #FFFFFF;
        border: 1px solid #CCC;
        border-radius: 3px;
        height: 29px;
        position: relative;
        text-align: center;
        width: 200px;
        z-index: 1;
        margin: auto;
        margin-bottom: 20px;
        font-size: 13px;
}

.form-container input:focus {
        /* outline: #F0C97E auto 1px; */
        outline: none;
        border: 2px solid #F0C97E;
}

.form-container button {
        background: #399bd8;
        border: 1px solid #3a73d8;
        border-radius: 3px;
        color: #FFF;
        cursor: pointer;
        padding: 0.4em 12px;
        transition-duration: 0.1s;
        width: 200px;
        height: 29px;
}

.form-container button:hover,.form button:active,.form button:focus {
        background: #3289bf;
        border: 1px solid #3466bf;
        outline: none;
}

.form-container .nav-button {
        width: 95px;
        margin: 0 4px;
        outline: none;
}

.form-container .message {
        margin: 15px 0 20px 0;
        color: #b33232;
        font-size: 12px;
}
.form-container .message a {
        color: #3FA9F5;
        text-decoration: none;
}

.form-container .change-password-form {
        display: block;
}

.container {
        position: relative;
        z-index: 1;
        max-width: 300px;
        margin: 0 auto;
}

.container:before, .container:after {
        content: "";
        display: block;
        clear: both;
}

.container .info {
        margin: 50px auto;
        text-align: center;
}

.container .info h1 {
        margin: 0 0 15px;
        padding: 0;
        font-size: 36px;
        font-weight: 300;
        color: #1a1a1a;
}

.container .info span {
        color: #4d4d4d;
        font-size: 12px;
}

.container .info span a {
        color: #000000;
        text-decoration: none;
}

        .container .info span .fa {
        color: #EF3B3A;
}

.button-container {
        bottom: 25px;
        left: 0;
        position: absolute;
        width: 100%;
}

.header {
        margin-top: 0px;
        margin-bottom: 20px;
}

#username_header {
        padding: 5px;
        margin-bottom: 5px;
}

.forgot-password-button{
        font-style: italic;
        font-size: 12px;
        text-decoration:none;
        color: #1e4e66;;
        cursor: pointer;
        float: right;
        margin-right: 50px;
        margin-top: 10px;
        margin-bottom: -5px;
}

.forgot-password-button:hover{
        text-decoration: underline;
}

.two-factor-info {
        margin-bottom: 15px;
        font-size: 12px;
}