.center-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

auth {
    display: contents;
    font-family: Poppins, sans-serif;
}

.auth.page {
    padding: 0;
    min-height: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ecede8;
    color: #333;
}

#login {
    min-width: 25em;
}

#login-header {
    margin: 0 0 1.5em 0;
}

#login-header-title {
    color: #4a4a4a;
    font-size: 1.2em;
    font-weight: 700;
}

#login-header-subtitle {
    text-align: center;
    color: #757575;
    font-size: 0.8em;
    font-weight: 300;
    margin: 0.5em 0 0 0;;
}

.auth.page .logo {
    font-size: 5em;
    color: #ff1a45;
}

.auth.page .auth-box {
    flex: 1 0 auto;
    padding: 1em 4em 2em;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 2;
    border-radius: 5px;
    box-shadow: 0 0 15px #e4e4e4;
    margin: 1em 2em;
}

.auth.page .auth-box login {
    flex: 1;
    display: flex;
    align-items: center;
}

#auth-title {
    text-align: center;
    font-weight: 400;
    color: #333;
    font-size: 1.3em;
}

#auth-portal {
    text-align: center;
    color: #999;
}

.auth.page .auth-box ::placeholder, .auth.page .auth-box ::-webkit-input-placeholder, .auth.page .auth-box ::-moz-placeholder, .auth.page .auth-box :-ms-input-placeholder {
    color: #999;
    opacity: 1;
    font-family: Poppins, sans-serif;;
    font-weight: normal;
}

.auth.page .auth-box .input-container {
    margin-bottom: 0.75rem;
}

.auth.page .auth-box .register-field {
    min-width: 200px;
}

#register {
}

#register input {
    font-size: 0.7em;
    box-shadow: 0 0 1px #758194;
}

#register-user {
    margin: 0 3em 0 0;
    min-width: calc(50% - 1.5em);
}

#register-company {
}

.register-header {
    margin: 1em 0 1em 0;
}

.register-header-icon {
    margin: 0 0.5em 0 0;
}

.register-header-icon img {
    height: 1.7em;
}

.register-header-label {
    font-size: 0.9em;
    font-weight: 500;
    color: #555;
}

#register-title {
    margin: 0 0 0.5em 0;
}

.login-back {
    margin: 0 0 1em 0;
    opacity: 0.5;
}

.login-back:hover {
    opacity: 1;
    cursor: pointer;
}

.login-back-icon {
    margin: 0 0.5em 0 0;
}

.login-back-icon img {
    height: 1em;
}

.login-back-text {
    font-size: 0.7em;
    font-weight: 600;
    color: #555;
}

#register-title-text {
    font-weight: 700;
    color: #555;
}

#register-no-account {
    font-size: 0.8em;
}

#register-no-account a {
    color: #ff1a45
}

#register input[type=text], #register input[type=number], #register select, #register textarea {
    width: 100%;
    background-color: #eceff2;
    border: none;
    border-radius: 3px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    padding: 1em;
    height: auto;
    font-size: 0.7em;
    color: #7b8292;
    box-shadow: 0 0 1px #758194;
}

#register-btn:hover {
    filter: brightness(120%);
}

#register .field-label {
    font-size: 0.7em;
    font-weight: 500;
    color: #9ea4b0;
    margin: 0.5em 0 0.5em 0;
}

#register-btn, #reset-password-btn {
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 0.8em;
    padding: 1em 4em;
    background-color: #ff1a45;
    border-radius: 3px;
}

.login-info-title {
    color: #555;
    font-weight: 700;
    text-align: center;
    font-size: 1.4em;
    margin: 0.5em 0 0.5em 0;
}

.login-info-icon {
    text-align: center;
    margin: 1em 0 1em 0;
}

.login-info-icon img {
    height: 5em;
}

.auth.page .auth-box input, .auth.page .auth-box .sp-select-popup, .auth.page .auth-box .sp-select select {
    width: 100%;
    background-color: #eceff2;
    border: none;
    border-radius: 3px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    padding: 1em;
    height: auto;
    font-size: 0.8em;
    color: #7b8292;
    box-shadow: 0 0 1px #75819466;
}

#reset-passowrd {
    min-width: 20em;
}

#reset-passowrd-btn {
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 0.8em;
    padding: 1em 4em;
    background-color: #ff1a45;
    border-radius: 3px;
}

#reset-passowrd-btn:hover {
    filter: brightness(120%);
}

#reset-password-title {
    font-size: 0.8em;
    color: #858b9b;
    font-weight: 400;
    margin: 0.5em 0 1em 0;
    text-align: center;
}

#login-btn {
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    padding: 0.5em 2em;
    background-color: #ff1a45;
    border-radius: 3px;
}

#login-options {
    margin: 1em 0 0.5em 0;
    justify-content: center;
}

.login-option {
    font-size: 0.7em;
    margin: 0 0.5em 0 0;
}

.auth.page .login-option a {
    color: #ff1a45;
}

.login-option-divider {
    color: #999;
    margin: 0 0.5em 0 0;
}

#login-sign-up {
    border-top: 1px solid #ccc;
    padding: 1em 0 0 0;
}

#login-sign-up a, #login-sign-up a:hover {
    text-decoration: none;
    color: #fff;
}

#login-sign-up-button {
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 0.7em;
    padding: 0.7em 2em;
    background-color: #6e848f;
    border-radius: 3px;
    color: #fff;
    text-align: center;
}

.login-label {
    font-size: 0.7em;
    font-weight: 600;
    margin: 0 0 0.5em 0;
    color: #5c5c5c;
}

.auth.page .auth-box .login-btn[disabled] {
    color: inherit;
    background-color: #aaaaaa;
}

.auth.page .auth-box .login-btn:not([disabled]):hover {
    filter: brightness(90%);
}

.auth.page input.ng-dirty {
    border-color: #ffd42a;
}

#footer {
    text-align: center;
    padding: 1em;
    font-size: 0.7em;
}

#footer-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    opacity: 0.3;
}

#footer-bg img {
    width: 100%;
}

#footer-content {
    position: relative;
    z-index: 2;
}

#footer-text {
    margin: 0 1em 0 0;
}

#footer-logo {
}

#footer-logo img {
    height: 2.2em;
    display: block;
}

#company-location-header {
    margin-top: 1.4em
}