/* Shared look of the authentication block, used by the login and register pages
   (styled by landing.css) and by the auth modal (styled by main.css). Loaded
   last by both bases so it wins over the global button, nav and panel rules
   that each of those files carries. */

.auth-box {
    padding: 40px;
    text-align: center;
    max-width: 450px;
    margin: 0 auto;
}

/* the line-separator rules live in main.css, which the auth pages do not load */
.auth-box .line-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #777;
    margin-bottom: 20px;
}

.auth-box .line-separator::before,
.auth-box .line-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #777;
}

.auth-box .line-separator::before {
    margin-right: .5em;
}

.auth-box .line-separator::after {
    margin-left: .5em;
}

.auth-box .main-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.3;
}

.auth-box .social-login-container {
    margin: 40px 0 20px;
    display: flow-root;
}

/* flush with the form inputs: undo the bootstrap column side padding */
.auth-box .social-login-container [class*="col-lg-"] {
    padding-left: 0;
    padding-right: 0;
}

.auth-box .footer-text {
    font-size: 14px;
    color: #888;
}

.auth-box form {
    text-align: left;
}

.auth-box .g-recaptcha > div {
    margin: 0 auto;
}

.auth-box .modal-auth-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-box .modal-auth-remember {
    margin: 0;
    font-weight: normal;
}

/* which of the three forms shows: the wrapper carries auth-box plus
   modal-auth-register or modal-auth-reset */
.auth-box .modal-auth-error,
.auth-box .modal-auth-success,
.auth-box #modal-register-form,
.auth-box #modal-reset-form,
.auth-box .modal-auth-register-footer,
.auth-box .modal-auth-register-title,
.auth-box .modal-auth-reset-title,
.auth-box .modal-auth-tos,
.auth-box .modal-auth-student-note,
.auth-box.modal-auth-register #modal-auth-form,
.auth-box.modal-auth-register .modal-auth-login-title,
.auth-box.modal-auth-register .modal-auth-login-footer,
.auth-box.modal-auth-register.modal-auth-student .social-login-container,
.auth-box.modal-auth-register.modal-auth-student .line-separator,
.auth-box.modal-auth-reset #modal-auth-form,
.auth-box.modal-auth-reset .modal-auth-login-title,
.auth-box.modal-auth-reset .modal-auth-login-footer,
.auth-box.modal-auth-reset .social-login-container,
.auth-box.modal-auth-reset .line-separator {
    display: none;
}

.auth-box.modal-auth-register #modal-register-form,
.auth-box.modal-auth-register .modal-auth-register-footer,
.auth-box.modal-auth-register .modal-auth-register-title,
.auth-box.modal-auth-register .modal-auth-tos,
.auth-box.modal-auth-register.modal-auth-student .modal-auth-student-note,
.auth-box.modal-auth-reset #modal-reset-form,
.auth-box.modal-auth-reset .modal-auth-reset-title,
.auth-box.modal-auth-reset .modal-auth-register-footer {
    display: block;
}

.auth-box ul.nav.custom_menu_signup {
    margin-bottom: 40px;
}

.auth-box.modal-auth-student ul.nav.custom_menu_signup {
    margin-top: 20px;
    margin-bottom: 20px;
}

.auth-box .btn {
    font-size: 14px !important;
}

.auth-box .company_logo_default {
    padding: 4px 8px;
    background: white;
    border: 1px solid #e4e4e4;
}

.auth-box ul.nav.custom_menu_signup {
    display: flex;
}

.auth-box ul.nav.custom_menu_signup li {
    width: 50%;
}

.auth-box .custom_menu_signup li a {
    padding: 8px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
}

.auth-box .custom_menu_signup li a:hover {
    background-color: #eee !important;
    border-color: #adadad;
}

.auth-box .custom_menu_signup li a:focus {
    background-color: #eee !important;
    border-color: #8c8c8c;
}

.auth-box .custom_menu_signup li a:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

/* after the states above on purpose: same specificity, so the chosen tab wins */
.auth-box .custom_menu_signup li.active a {
    background: #e0e0e0 !important;
}

.auth-box .panel-success {
    border-color: #d6e9c6;
    border-radius: 4px;
}

.auth-box .panel-body {
    padding: 15px !important;
}

.auth-box .fa-green {
    color: #00c500;
    float: left;
    height: 20px;
    padding: 0px 6px;
    margin-top: 5px;
}

.auth-password {
    position: relative;
}

.auth-password .form-control {
    padding-right: 40px;
}

.auth-password input::-ms-reveal {
    display: none;
}

.auth-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #888;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus {
    color: #333;
}