/* === Name: Ubaid     =============================================================== */
/* === Date: 3/28/2019 =============================================================== */
/* =================================================================================== */
/* == View #1 ============== initial view ============================================ */
/* =================================================================================== */

* {
    margin: 0;
    padding: 0;
    outline: none;
    font-family: 'Roboto';
}

#background_img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('images/portal_background.jpg');
    z-index: -1;
}

#back_to_SignIn_container {
    padding-top: 63.2px;
    height: 25.2px
}

    #back_to_SignIn_container a {
        margin-left: 20px;
        text-decoration: none;
        color: #1C75BB;
        font-size: 16px;
        font-weight: 600;
    }

    #back_to_SignIn_container i {
        padding: 5px;
        border: 1.6px solid #E0E2E4;
        background: white;
        border-radius: 50px;
        margin-right: 13.2px;
        color: #1C75BB;
        font-size: 17.8px;
        font-weight: 600;
    }

    #back_to_SignIn_container a:hover i {
        color: #9B9B9B;
    }

    #back_to_SignIn_container a:active i {
        color: #ED7804;
    }

#init_signUp, #before_lock_error_container {
    margin: 100px auto 0 auto;
    width: 417px;
    padding: 22.6px 0 63.1px;
    background: #FFFF09;
    background: rgba(255, 255, 255, .9);
}

#before_lock_error {
    padding: 20px;
}

#before_lock_error p {
    padding: 20px;
    font-size: 20px;
    background-color: rgba(237,120,4,0.40);
}

#before_lock_error a {
    color: #ED7804;
    text-decoration: none;
}

#logo_container {
    margin: 0 0 34.5px 20px;
}

    #logo_container img {
        width: 160px;
        height: 68.09px;
    }

#Info_container_outer {
    width: 377px;
    height: 135px;
    text-align: center;
    margin: 0 auto 23px auto;
}

#Info_container1 {
    width: 351px;
    font-size: 18px;
    color: #4a4a4a;
    line-height: 26px;
}

    #Info_container1 a {
        text-decoration: none;
        color: #00AB08;
        font-weight: 500;
    }

#Info_container2 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ed7802;
    background: rgba(237,120,4,0.40);
    height: 93px;
    line-height: 26px;
    font-size: 18px;
    color: #000000;
}

    #Info_container2 span {
        display: block;
        font-size: 24px;
        color: #4a4a4a;
    }

#Info_container3 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ed7802;
    background: rgba(237,120,4,0.40);
    height: 76px;
    line-height: 26px;
    font-size: 18px;
    color: #4a4a4a;
}

#Info_container4 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #a2c319;
    background: rgba(162,196,25,0.40);
    height: 93px;
    line-height: 26px;
    color: #000000;
}

    #Info_container4 span {
        display: block;
        color: #4a4a4a;
        font-size: 22px;
    }

#email_input_container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48.5px;
    text-align: center;
    padding-bottom: 14.5px;
}

    #email_input_container svg {
        display: inline;
        padding: 15px 10px;
        background: #1C75BB;
    }

    #email_input_container path {
        fill: white;
    }

    #email_input_container input {
        border: 1px solid #9B9B9B;
        border-radius: unset;
        font-size: 15px;
        width: 200px;
        height: 41px;
        padding: 0 5px 0 5px
    }

#c_container {
    margin: 0 auto 34.5px auto;
    width: 303px;
}

#b_container {
    margin: 0 auto 0 auto;
    width: 300px;
    text-align: center;
}

#send_email {
    background: #1c75bb;
    border: none;
    border-radius: 4px;
    width: 184px;
    height: 47.9px;
    color: white;
    font-size: 15px;
    letter-spacing: -0.17px;
    cursor: pointer;
}

    #send_email:hover {
        background: #9B9B9B;
    }

    #send_email:active {
        background: #ED7804;
    }

    #send_email span {
        padding-left: 5px;
    }

/* ================================================================================== */
/* == View #2 ============== Sign Up/ Lock styles... ================================ */
/* ================================================================================== */
#outer_lock_container {
    position: relative;
    top: 200px;
    margin: 0 auto;
    padding: 22.6px 0 63.1px 0;
    width: 417px;
    min-width: 417px;
    background: #ffffff;
    background: rgba(255, 255, 255, .9);
}

#lock_logo_container {
    text-align: center;
    margin-bottom: 27.7px
}

    #lock_logo_container img {
        width: 230px;
        height: 97.89px;
    }

/*Auth0 setting overriding start...*/
.auth0-lock-header {
    display: none;
}

.auth0-lock-cred-pane {
    background: #ffffff;
    background: rgba(255, 255, 255, 0.01) !important;
}

.auth0-lock-content {
    min-height: 139px;
}

.auth0-lock-input-email {
    margin-bottom: 15px !important;
}

.auth0-lock-input-wrap {
    background: #1C75BB !important;
    border-radius: unset !important;
}

    .auth0-lock-input-wrap input {
        border: 1px solid #9B9B9B !important;
        border-radius: unset !important;
        min-width: 218px !important;
        font-size: 15px !important;
    }

#lock_container .auth0-lock-input-wrap path { /*Changing the color of the image in the box before the input text area*/
    fill: white;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.auth0-lock-submit {
    background: none !important;
    width: 187.9px !important;
    height: 47.9px !important;
    margin: 10px auto 0 !important;
    padding: unset !important;
    padding: 0 !important;
    border-radius: 4px !important;
    font-weight: 600;
}

.auth0-label-submit {
    font-size: 15px;
    background: #1C75BB !important;
    width: inherit !important;
    height: 20px !important;
    border-radius: 4px !important;
    line-height: 20px !important;
    line-height: unset !important;
    padding: 15px 0 !important;
    transition: unset !important;
    font-weight: 600 !important;
}

    .auth0-label-submit:hover {
        background: #9B9B9B !important;
    }

    .auth0-label-submit:active {
        background: #ED7804 !important;
    }

    .auth0-label-submit span {
        display: none !important;
    }

#User_exist {
    margin: 20px auto 0;
    width: 233px;
    font-weight: 500;
}

    #User_exist a {
        text-decoration: none;
        color: #00AB08
    }

/* ================================================================================== */
/* == View #3 ============== after_signUp styles... ================================= */
/* ================================================================================== */

#after_signUp {
    position: relative;
    top: 200px;
    margin: 0 auto;
    padding: 22.6px 0 63.1px 0;
    width: 417px;
    min-width: 417px;
    background: #ffffff;
    background: rgba(255, 255, 255, .9);
}

#success {
    width: 377px;
    height: 93px;
    background: #a2c319;
    background: rgba(162,196,25,0.40);
    margin: 0 auto 46px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #success p {
        color: #4a4a4a;
        font-size: 50px;
    }

#success_message {
    /*width: 345px;
    height: 128px;*/
    margin: 0 auto;
}

    #success_message p {
        color: #4a4a4a;
        font-size: 24px;
        text-align: center;
        line-height: 34px;
    }

#success_email {
    margin: 40px auto 63.1px auto;
    width: 377px;
    height: 29px;
    text-align: center;
}

    #success_email p {
        display: inline;
        background: #4a90E2;
        font-size: 15px;
        color: white;
        letter-spacing: -0.17px;
        padding: 10px 25px;
        border-radius: 10px;
    }

#redirect_IN {
    margin: 0 auto;
    width: 377px;
    text-align: center;
}

    #redirect_IN p {
        margin: 0 auto;
        width: 277px;
        font-size: 15px;
        color: #4a4a4a;
        line-height: 26px
    }

@media only screen and (max-width: 400px) {
    main {
        width: 320px;
        margin: 0 auto;
        overflow: hidden;
    }

    #back_to_SignIn_container {
        padding-top: 14px;
        height: 25.2px;
    }

    #background_img {
        top: -100px
    }

    #init_signUp {
        width: 320px;
        min-width: unset;
        margin: 10px auto 0 auto;
        padding: 12.6px 0 33.1px;
        top: 50px;
    }

    #outer_lock_container, #before_lock_error_container {
        width: 320px;
        min-width: unset;
        margin: 10px auto 0 auto;
        padding: 12.6px 0 63.1px;
        top: 50px;
    }

    #after_signUp {
        width: 320px;
        min-width: unset;
        margin: 0 auto;
        padding: 12.6px 0 63.1px;
        top: 0;
    }

    #logo_container {
        margin: 0 0 14.5px 20px;
    }

    #Info_container_outer {
        width: 310px;
        height: 90px;
        margin: 0 auto 25px;
    }

    #Info_container_outer div {
        width: 310px;
    }

    #before_lock_error {
        padding: 10px;
    }

    #before_lock_error p {
        padding: 10px;
        font-size: 17px;
    }

    #Info_container1 {
        width: 296px;
        font-size: 15px;
        text-align: left;
        margin: 0 auto;
        padding-left: 10px;
        line-height: 20px;
    }

    #Info_container1 p {
        width: 295px;
    }

    #Info_container2 {
        height: 73px;
    }

    #Info_container4 {
        height: 80px;
    }

    #Info_container4 span {
        font-size: 18px;
    }

    #c_container {
        margin: 0 auto 14.5px;
        width: 303px;
    }

    /*Lock view*/
    #success {
        width: 300px;
    }

    #success_message p {
        font-size: 18px;
        line-height: 24px;
    }

    #success_email {
        width: 320px;
    }

    #redirect_IN {
        width: 320px;
    }
}