.login-wrapper-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    overflow: hidden;
    z-index: 1000;
    font-size: 18px;
    display: none
}

    .login-wrapper-container.show {
        display: block !important
    }

    .login-wrapper-container .login-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        width: 25%;
        height: 100%;
        background-color: #fff;
        overflow: hidden;
        display: none
    }

        .login-wrapper-container .login-wrapper.show {
            display: block;
            animation: right-scroll 1s ease-in-out;
            animation-iteration-count: 1
        }

@keyframes right-scroll {
    0% {
        transform: translateX(2500px)
    }

    to {
        transform: translateX(0)
    }
}

.login-wrapper-container .login-wrapper .login-block {
    position: relative;
    overflow: hidden
}

    .login-wrapper-container .login-wrapper .login-block .back-btn-login {
        padding: 10px 25px;
        display: none
    }

        .login-wrapper-container .login-wrapper .login-block .back-btn-login.show {
            display: block !important
        }

.login-wrapper-container .login-wrapper .one-tap-login {
    padding: 0 10%;
    position: relative;
    display: none
}

    .login-wrapper-container .login-wrapper .one-tap-login.show {
        display: block !important
    }

    .login-wrapper-container .login-wrapper .one-tap-login .user-name-exist {
        font-size: 1.75rem;
        color: #000;
        font-weight: 700
    }

    .login-wrapper-container .login-wrapper .one-tap-login .user-email-mobile-exist {
        font-size: 1rem;
        background-color: #f0f0f0;
        color: #000;
        opacity: .5;
        padding: 0 10px;
        border-radius: 5px
    }

    .login-wrapper-container .login-wrapper .one-tap-login .login-btn-wrap {
        position: relative
    }

        .login-wrapper-container .login-wrapper .one-tap-login .login-btn-wrap .continue-login-btn {
            width: 100%;
            text-align: left;
            padding: 5px 20px;
            background-color: #1789fc;
            border: none;
            border-radius: 5px;
            color: #fff
        }

        .login-wrapper-container .login-wrapper .one-tap-login .login-btn-wrap .login-back-img {
            cursor: pointer;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 20px
        }

.login-wrapper-container .login-wrapper .login-panel {
    position: relative;
    width: 100%;
    padding: 20px 10%
}

    .login-wrapper-container .login-wrapper .login-panel .login-headings {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }

        .login-wrapper-container .login-wrapper .login-panel .login-headings.hide {
            display: none !important
        }

        .login-wrapper-container .login-wrapper .login-panel .login-headings .create-acc-head, .login-wrapper-container .login-wrapper .login-panel .login-headings .login-head {
            -ms-flex: 1;
            flex: 1;
            font-size: 1rem;
            color: #1789fc
        }

            .login-wrapper-container .login-wrapper .login-panel .login-headings .create-acc-head.active, .login-wrapper-container .login-wrapper .login-panel .login-headings .login-head.active {
                font-size: 1.5rem;
                color: #1d2533;
                font-weight: 700
            }

        .login-wrapper-container .login-wrapper .login-panel .login-headings .div1 {
            text-align: left
        }

        .login-wrapper-container .login-wrapper .login-panel .login-headings .div2 {
            cursor: pointer;
            text-align: right
        }

    .login-wrapper-container .login-wrapper .login-panel .user-cred-step {
        display: none
    }

        .login-wrapper-container .login-wrapper .login-panel .user-cred-step.show {
            display: block !important
        }

        .login-wrapper-container .login-wrapper .login-panel .user-cred-step #user-exist-mobile {
            width: 100%
        }

        .login-wrapper-container .login-wrapper .login-panel .user-cred-step #user-exist-email {
            width: 100%;
            padding: 5px 10px !important
        }

        .login-wrapper-container .login-wrapper .login-panel .user-cred-step .login-btn-wrap {
            position: relative
        }

            .login-wrapper-container .login-wrapper .login-panel .user-cred-step .login-btn-wrap .login-btn {
                width: 100%;
                text-align: left;
                padding: 5px 20px;
                background-color: #1789fc;
                border: none;
                border-radius: 5px;
                color: #fff
            }

            .login-wrapper-container .login-wrapper .login-panel .user-cred-step .login-btn-wrap .login-back-img {
                cursor: pointer;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 20px
            }

            .login-wrapper-container .login-wrapper .login-panel .user-cred-step .login-btn-wrap .forgot-password {
                font-size: .9rem;
                text-align: right;
                margin: 5px 0;
                color: #1789fc
            }

    .login-wrapper-container .login-wrapper .login-panel .user-verify-step {
        display: none
    }

        .login-wrapper-container .login-wrapper .login-panel .user-verify-step.show {
            display: block !important
        }

        .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login {
            display: none
        }

            .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login.show, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login.show {
                display: block !important
            }

            .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .login-types, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .login-types {
                display: block;
                -ms-flex-align: center;
                align-items: center
            }

                .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .login-types .otp-login-text, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .login-types .password-login-txt, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .login-types .otp-login-text, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .login-types .password-login-txt {
                    text-align: left;
                    font-size: 1.5rem;
                    color: #1d2533;
                    font-weight: 700
                }

                .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .login-types .otp-msg, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .login-types .otp-msg {
                    font-size: 1rem;
                    color: #1d2533
                }

                .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .login-types .otp-number, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .login-types .otp-number {
                    padding: 5px 10px;
                    background-color: #ddd;
                    font-size: 1rem;
                    border-radius: 5px;
                    display: -ms-flexbox;
                    display: flex
                }

            .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .cred-block-pass, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .cred-block-pass {
                position: relative;
                width: 100%;
                display: block;
                margin: 25px 0
            }

                .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .cred-block-pass.hide, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .cred-block-pass.hide {
                    display: none !important
                }

                .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .cred-block-pass .usr-password, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .cred-block-pass .usr-password {
                    width: 100%;
                    padding: 5px 10px !important
                }

            .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .cred-block-otp, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .cred-block-otp {
                position: relative;
                width: 100%;
                display: block;
                margin: 25px 0
            }

                .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .cred-block-otp.hide, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .cred-block-otp.hide {
                    display: none !important
                }

                .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .cred-block-otp .usr-otp, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .cred-block-otp .usr-otp {
                    width: 100%;
                    padding: 5px 10px !important
                }

            .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .login-btn-wrap, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .login-btn-wrap {
                position: relative
            }

                .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .login-btn-wrap .login-verify-btn, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .login-btn-wrap .login-verify-btn {
                    width: 100%;
                    text-align: left;
                    padding: 5px 20px;
                    background-color: #1789fc;
                    border: none;
                    border-radius: 5px;
                    color: #fff
                }

                .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .login-btn-wrap .login-back-img, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .login-btn-wrap .login-back-img {
                    cursor: pointer;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 20px
                }

                .login-wrapper-container .login-wrapper .login-panel .user-verify-step .otp-login .login-btn-wrap .forgot-password, .login-wrapper-container .login-wrapper .login-panel .user-verify-step .password-login .login-btn-wrap .forgot-password {
                    font-size: .9rem;
                    text-align: right;
                    margin: 5px 0;
                    color: #1789fc
                }

    .login-wrapper-container .login-wrapper .login-panel .new-user-block {
        display: none
    }

        .login-wrapper-container .login-wrapper .login-panel .new-user-block.show {
            display: block !important
        }

        .login-wrapper-container .login-wrapper .login-panel .new-user-block #user-mobile {
            width: 100%
        }

        .login-wrapper-container .login-wrapper .login-panel .new-user-block #user-email {
            width: 100%;
            padding-left: 10px
        }

        .login-wrapper-container .login-wrapper .login-panel .new-user-block .login-btn-wrap {
            position: relative
        }

            .login-wrapper-container .login-wrapper .login-panel .new-user-block .login-btn-wrap .get-otp-create {
                width: 100%;
                text-align: left;
                padding: 5px 20px;
                background-color: #1789fc;
                border: none;
                border-radius: 5px;
                color: #fff
            }

            .login-wrapper-container .login-wrapper .login-panel .new-user-block .login-btn-wrap .login-back-img {
                cursor: pointer;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 20px
            }

    .login-wrapper-container .login-wrapper .login-panel .user-create-step {
        display: none
    }

        .login-wrapper-container .login-wrapper .login-panel .user-create-step.show {
            display: block !important
        }

        .login-wrapper-container .login-wrapper .login-panel .user-create-step .login-create {
            display: block;
            -ms-flex-align: center;
            align-items: center
        }

            .login-wrapper-container .login-wrapper .login-panel .user-create-step .login-create .otp-login-text {
                text-align: left;
                font-size: 1.5rem;
                color: #1d2533;
                font-weight: 700
            }

            .login-wrapper-container .login-wrapper .login-panel .user-create-step .login-create .otp-msg {
                font-size: 1rem;
                color: #1d2533
            }

            .login-wrapper-container .login-wrapper .login-panel .user-create-step .login-create .otp-number {
                padding: 5px 10px;
                background-color: #ddd;
                font-size: 1rem;
                border-radius: 5px;
                display: -ms-flexbox;
                display: flex
            }

        .login-wrapper-container .login-wrapper .login-panel .user-create-step .cred-block-invite {
            position: relative;
            width: 100%;
            display: block;
            margin: 25px 0
        }

            .login-wrapper-container .login-wrapper .login-panel .user-create-step .cred-block-invite .usr-invite-code {
                width: 100%;
                padding: 5px 10px !important
            }

        .login-wrapper-container .login-wrapper .login-panel .user-create-step .cred-block-otp {
            position: relative;
            width: 100%;
            display: block;
            margin: 25px 0
        }

            .login-wrapper-container .login-wrapper .login-panel .user-create-step .cred-block-otp .usr-create-otp {
                width: 100%;
                padding: 5px 10px !important
            }

        .login-wrapper-container .login-wrapper .login-panel .user-create-step .login-btn-wrap {
            position: relative
        }

            .login-wrapper-container .login-wrapper .login-panel .user-create-step .login-btn-wrap .create-verify-btn {
                width: 100%;
                text-align: left;
                padding: 5px 20px;
                background-color: #1789fc;
                border: none;
                border-radius: 5px;
                color: #fff
            }

            .login-wrapper-container .login-wrapper .login-panel .user-create-step .login-btn-wrap .login-back-img {
                cursor: pointer;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 20px
            }

    .login-wrapper-container .login-wrapper .login-panel .sign-with-google {
        position: relative
    }

        .login-wrapper-container .login-wrapper .login-panel .sign-with-google .google-signin {
            width: 100%;
            height: 60px
        }

            .login-wrapper-container .login-wrapper .login-panel .sign-with-google .google-signin.hide {
                display: none !important
            }

        .login-wrapper-container .login-wrapper .login-panel .sign-with-google .another-signin {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: distribute;
            justify-content: space-around;
            font-size: 1rem;
            text-align: center;
            color: #878787;
            padding: 10px 0;
            border-radius: 5px;
            box-shadow: 0 2px 6px rgba(0,0,0,.3)
        }

            .login-wrapper-container .login-wrapper .login-panel .sign-with-google .another-signin.hide {
                display: none !important
            }

.block-seperation {
    position: relative;
    width: 100%;
    padding: 25px 0;
    overflow: hidden;
    z-index: 0
}

    .block-seperation .circle-div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 50px;
        height: 50px;
        color: #989898;
        background-color: #eff4f9;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        z-index: 5;
        border-radius: 50%
    }

        .block-seperation .circle-div hr {
            position: relative;
            width: 100%;
            z-index: 1 !important
        }

.btn-resend {
    font-size: 12px;
    margin-left: auto
}

.login-using-email, .login-using-mobile {
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
    margin: 5px 0 20px;
    color: #1789fc
}

.login-using-mobile, .login-with-email {
    display: none
}

@media only screen and (max-width:799px) {
    .login-wrapper-container {
        font-size: 16px !important
    }

    .login-wrapper {
        width: 100% !important
    }

    .create-acc-head, .login-head {
        -ms-flex: 1;
        flex: 1;
        font-size: 1rem !important
    }

        .create-acc-head.active, .login-head.active {
            font-size: 1.25rem !important
        }
}

.error-msg {
    display: block;
    background: red;
    padding: .35rem .9375rem;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    margin: 0 .35rem;
    border-radius: .25rem
}

.input_block {
    position: relative;
    width: 100%;
    margin-top: 20px
}

    .input_block .intl-tel-input {
        width: 100% !important
    }

    .input_block input, .input_block select, .input_block textarea {
        font-size: 16px !important;
        margin: 0 !important;
        display: block !important;
        height: 40px !important;
        background-color: transparent !important;
        border: none !important;
        border: 1px solid #757575 !important;
        border-radius: 5px !important
    }

        .input_block input.error-input, .input_block select.error-input, .input_block textarea.error-input {
            border: none !important;
            border: 1px solid red !important
        }

        .input_block input:disabled {
            cursor: not-allowed
        }

    .input_block .floating-select:focus, .input_block .input_effect:focus, .input_block .input_effect:hover, .input_block .input_effect:valid {
        outline: none !important;
        border: 1px solid #1789fc !important
    }

    .input_block label {
        color: #999 !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        position: absolute !important;
        pointer-events: none !important;
        left: 15px !important;
        padding: 0 10px !important;
        transition: all .2s ease !important;
        -moz-transition: .2s ease all !important;
        -webkit-transition: all .2s ease !important;
        top: -10px !important;
        background-color: #fff !important
    }

    .input_block .input_effect:focus ~ label, .input_block input:valid ~ label {
        font-size: 16px !important;
        color: #1789fc !important
    }

    .input_block input:valid ~ label {
        top: -10px !important;
        background-color: #fff !important
    }

    .input_block .input_effect:focus ~ .bar:after, .input_block .input_effect:focus ~ .bar:before {
        width: 50%
    }

    .input_block input:-webkit-autofill, .input_block input:-webkit-autofill:active, .input_block input:-webkit-autofill:focus, .input_block input:-webkit-autofill:hover {
        -webkit-box-shadow: 0 0 0 100px #fff inset;
        background-color: #fff !important
    }

    .input_block input:not([type]):focus:not([readonly]), .input_block input[type=date]:not(.browser-default):focus:not([readonly]), .input_block input[type=datetime-local]:not(.browser-default):focus:not([readonly]), .input_block input[type=datetime]:not(.browser-default):focus:not([readonly]), .input_block input[type=email]:not(.browser-default):focus:not([readonly]), .input_block input[type=number]:not(.browser-default):focus:not([readonly]), .input_block input[type=password]:not(.browser-default):focus:not([readonly]), .input_block input[type=search]:not(.browser-default):focus:not([readonly]), .input_block input[type=tel]:not(.browser-default):focus:not([readonly]), .input_block input[type=text]:not(.browser-default):focus:not([readonly]), .input_block input[type=time]:not(.browser-default):focus:not([readonly]), .input_block input[type=url]:not(.browser-default):focus:not([readonly]), .input_block textarea.materialize-textarea:focus:not([readonly]) {
        background-color: #fff !important
    }

    .input_block *, .input_block :after, .input_block :before {
        box-sizing: border-box
    }