/*    Auth Shared Styles
--------------------------*/
.auth-background {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../images/elevate-auth-background-gradient-3-op50.png");
}

.auth-content-area {
    font-family: var(--elevate-auth-primary-font);
    font-weight: 400;
    font-size: 14px;
    color: #8A8A8A;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0 0;
    padding: 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-content-area h1 {
    font-family: var(--elevate-auth-primary-font);
    font-weight: 400;
    color: #000000;
    font-size: 1.5rem;
    line-height: 33px;
}

.auth-content-area h2 {
    font-family: var(--elevate-auth-primary-font);
    font-weight: 600;
    font-size: 1rem;
    color: #000000;
    line-height: 19px;
}

.auth-content-area h3 {
    font-family: var(--elevate-auth-primary-font);
    font-weight: 500;
    font-size: 0.9rem;
    color: #000000;
    line-height: 19px;
}

.auth-content-area ul {
    --icon-space: 1.3em;
    list-style: none;
    padding: 0 0 0 2px;
    color: #000000;
}

.auth-content-area li {
   padding-left: var(--icon-space);
   padding-bottom: 4px;
}

.auth-content-area .auth-bold {
    font-weight: 500;
}

.auth-content-area li:before {
    content: "\e64c"; /* FontAwesome Unicode */
    font-family: "themify"; /* DO NOT CHANGE - this is the checkmarks, it's a fontawesome icon, change will break checkmark. */
    color: #009D00;
    display: inline-block;
    margin-left: calc( var(--icon-space) * -1 );
    width: var(--icon-space);
}

.auth-logo-area {
    display: block;
    margin-top: 0px;
    margin-bottom: 21px;
}

.auth-logo-area a {
    text-decoration: none;
}

.password-requirements {
    font-size: 12px;
    padding-left: 4px;
    margin: 0px;
}

.auth-textbox {
    width: 100%;
    height: 32px;
    color: #8A8A8A;
    font-family: var(--elevate-auth-primary-font);
    font-weight: 500;
    font-size: 14px;
    box-shadow: none;
    border: 1px solid #D4D4D4;
    border-radius: 4px;
    background: var(--elevate-white);
    margin: 10px 0px;
    padding: 8px 12px;
}

    .auth-textbox-phone {
        width: 350px;
        height: 32px;
        color: #8A8A8A;
        font-family: var(--elevate-auth-primary-font);
        font-weight: 500;
        font-size: 14px;
        box-shadow: none;
        border: 1px solid #D4D4D4;
        border-radius: 4px;
        background: var(--elevate-white);
        margin: 10px 4px;
        padding: 8px 12px;
    }

.auth-error {
    font-family: var(--elevate-auth-primary-font);
    color: var(--elevate-red);
    margin-top: 8px;
    margin-left: 4px;
    font-weight: 600;
    font-size: 1rem;
}

.auth-button {
    width: 100%;
    height: 30px;
    background: var(--nice-blue);
    border: 1px solid var(--nice-blue);
    border-radius: 4px;
    font-family: var(--elevate-auth-primary-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--nice-white);
    cursor: pointer;
    margin: 20px 0 20px 0;
}

.auth-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.forgot-password-button {
    font-size: 1rem;
}

.auth-side {
    width: 48%;
    margin-right: auto;
    margin-left: auto;
}

.auth-stick-left {
    margin-left: 0;
    margin-right: auto;
    float: left;
}

.auth-stick-right {
    margin-right: 0;
    margin-left: auto;
    float: right;
}

.auth-or-area {
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
}

.auth-or-line-left {
    border: 1px solid #D4D4D4;
    width: 42%;
    height: 1px;
    margin-right: auto;
    margin-left: 0;
}

.auth-or-line-right {
    border: 1px solid #D4D4D4;
    width: 42%;
    height: 1px;
    margin-right: 0;
    margin-left: auto;
}

.auth-or-line-text {
    font-family: var(--elevate-auth-primary-font);
    font-weight: 400;
    font-size: 12px;
    color: #3c4043;
}

.auth-signin-google-area {
    width: 100%;
    margin-top: 1rem;
}

.auth-signin-google-button {
    font-family: var(--elevate-auth-primary-font);
    font-weight: 500;
    font-size: 14px;
    color: #3c4043;
    text-align: center;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: center;
    position: relative;
    letter-spacing: 0.25px;
    -webkit-font-smoothing: antialiased;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #dadce0;
    height: 32px;
    padding: 0 12px;
    cursor: pointer;
    transition: background-color .218s, border-color .218s;
    -webkit-transition: background-color .218s, border-color .218s;
    padding-top: 1px;
}

    .auth-signin-google-button:hover {
        background-color: rgba(66,133,244,.04);
        border-color: #d2e3fc;
        transition: background-color .218s, border-color .218s;
        -webkit-transition: background-color .218s, border-color .218s;
    }

.google-signin-google-logo {
    display: block;
    height: 18px;
    margin-right: 8px;
    min-width: 18px;
    width: 18px;
}

/*.g_id_signin {
    width: 100% !important;
    margin-top: 1rem;
}

iframe {
    margin: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}*/
/*#container {
    margin-left: auto !important;
    margin-right: auto !important;
}
*/
@media (max-width: 855px) {
    .auth-side {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .auth-stick-left {
        float: left;
        width: 100%;
    }

    .auth-stick-right {
        float: left;
        width: 100%;
    }
}

.auth-link {
    font-family: var(--elevate-auth-primary-font);
    color: var(--nice-blue);
    margin-top: 3px;
    margin-left: 5px;
    font-weight: 500;
}

.auth-link:hover {
    color: var(--nice-blue);
    text-decoration: underline;
}

.auth-side-by-side {
    width: 100%;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

/* ElevateAI Information Styles*/
.auth-signin-information-area {
    text-align: center;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}
    .auth-signin-information-area > h2 {
        color: #495057;
    }

    .auth-signin-information-area > p {
        color: #6c757d;
        margin-bottom: 0 !important;
    }

.auth-signup-information-area {
    padding: 2rem;
    text-align: center;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin: 2rem 0;
}

    .auth-signup-information-area > h1 {
        color: #495057;
        margin-bottom: 1rem;
    }

    .auth-signup-information-area > p {
        color: #6c757d;
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

/*    Sign In Styles
--------------------------*/
.auth-content-area-signin {
    max-width: 450px;
    min-width: 355px;
    background: var(--elevate-white);
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    display: block;
    margin: 0 0;
}

.auth-content-area-signin-form {
    padding: 40px 40px 16px 40px;
}

@media (max-width: 768px) {
    .auth-content-area-signin {
        max-width: 355px;
        min-width: 355px;
        background: var(--elevate-white);
        border: 1px solid #D4D4D4;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
        display: block;
        margin: 0 0;
    }

    .auth-content-area-signin-form {
        padding: 20px 20px 18px 20px;
    }
}

.signin-button {
    width: 100%;
    background: linear-gradient(to right, var(--nice-darkblue), var(--nice-blue));
    font-size: 22px;
    cursor: pointer;
    border-radius: 50px;
    font-family: var(--elevate-auth-primary-font);
    font-weight: 400;
    height: 100%;
    color: white;
}

.signin-signup-link {
    text-align: center;
}

/*  Forgot Password Styles
--------------------------*/
.auth-content-area-forgot-password {
    max-width: 450px;
    min-width: 355px;
    background: var(--elevate-white);
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    display: block;
    margin: 0 0;
}

.auth-content-area-forgot-password-form {
    padding: 42px 51px;
}

@media (max-width: 768px) {
    .auth-content-area-forgot-password {
        max-width: 355px;
        min-width: 355px;
        background: var(--elevate-white);
        border: 1px solid #D4D4D4;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
        display: block;
        margin: 0 0;
    }

    .auth-content-area-forgot-password-form {
        padding: 21px 24px;
    }
}

/*  Confirm Account Styles
--------------------------*/
.auth-content-area-confirm-account {
    max-width: 450px;
    min-width: 355px;
    background: var(--elevate-white);
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    display: block;
    margin: 0 0;
}

.auth-content-area-confirm-account-form {
    padding: 42px 51px;
}

@media (max-width: 768px) {
    .auth-content-area-confirm-account {
        max-width: 355px;
        min-width: 355px;
        background: var(--elevate-white);
        border: 1px solid #D4D4D4;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
        display: block;
        margin: 0 0;
    }

    .auth-content-area-confirm-account-form {
        padding: 21px 24px;
    }
}

/*  Sign Up Styles
--------------------------*/
.auth-content-area-signup {
    max-width: 855px;
    min-width: 355px;
    background: var(--elevate-white);
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    display: block;
    margin: 0 0;
}

.auth-content-area-signup-form {
    max-width: 460px;
    min-width: 355px;
    display: flow;
    float: left;
    padding: 42px 51px;
}

.auth-content-area-signup-admin {
    max-width: 460px;
    min-width: 355px;
    background: var(--elevate-white);
    border: 1px solid #D4D4D4;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    display: block;
    margin: 0 0;
}

.auth-content-area-signup-admin-form {
    width: 100%;
    padding: 42px 51px;
}

.auth-content-area-signup-info {
    max-width: 390px;
    min-width: 390px;
    padding: 111px 46px 0px 42px;
    float: right;
}

.auth-signup-contact-us {
    margin-top: 1.1rem;
}

@media (max-width: 855px) {
    .auth-content-area-signup {
        max-width: 355px;
        min-width: 355px;
        background: var(--elevate-white);
        border: 1px solid #D4D4D4;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
        display: block;
        margin: 0 0;
    }

    .auth-content-area-signup-admin {
        max-width: 355px;
        min-width: 355px;
        background: var(--elevate-white);
        border: 1px solid #D4D4D4;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
        display: block;
        margin: 0 0;
    }

    .auth-content-area-signup-form {
        max-width: 355px;
        min-width: 355px;
        display: flow;
        float: left;
        padding: 21px 24px;
    }

    .auth-content-area-signup-admin-form {
        width: 100%;
        padding: 21px 24px;
    }

    .auth-content-area-signup-info {
        display: none;
    }
}

.signup-button {
    width: 100%;
    background: linear-gradient(to right, var(--nice-darkblue), var(--nice-blue));
    font-size: 22px;
    cursor: pointer;
    border-radius: 50px;
    font-family: var(--elevate-auth-primary-font);
    font-weight: 400;
    color: white;
    height: 2.3rem;
}

.signup-terms {
    margin-left: 6px;
    margin-top: 6px;
}

.footer-link {
    color: var(--nice-blue);
}

.footer-link:hover {
    color: var(--nice-blue);
    text-decoration: underline;
}

.auth-info-symbol {
    display: inline-block;
    font-size: 1rem;
}

.auth-password-tooltip {
    display: block;
    text-align: left;
    list-style-type: none;
    max-width: 500px !important;
}

h1.auth-admin-text {
    color: var(--nice-black);
    font-family: var(--elevate-auth-primary-font);
    font-weight: normal;
    font-size: 1.3rem;
    margin-bottom: -1.2rem !important;
}

/* Google Auth classes */
.google-auth-redirecting-area {
    margin-bottom: 1rem;
}

.google-auth-redirecting-text {
    font-size: 1.5rem;
    font-family: var(--elevate-auth-primary-font);
    font-weight: 400;
    color: black;
    display: inline-block;
}

.google-auth-link {
    font-family: var(--elevate-auth-primary-font);
    font-weight: 400;
}

/* Google Auth loading spinner */
.lds-ring {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        margin: 3px;
        border: 3px solid #fff;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: var(--nice-blue) transparent transparent transparent;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}