body {
    background: $white;
}

.common-space {
    padding: 0 $space20;
}

.left-content {
    display: none;
}

.heading {
    .back {
        margin: $space30 0;
        display: block;
    }

    .logo {
        display: none;
    }

    .head {
        @include font-size(22px);
        line-height: 26px;
        color: $title-color;
        font-family: $robotobold;
        margin: 0 0 $space10;
    }

    .sub-head {
        @include font-size(16px);
        line-height: 20px;
        color: $subtitle-color;

    }
}

//input fields
.single-input {
    position: relative;
    transition: 0.3s all ease-in-out;
    margin-top: $space40;

    &:nth-of-type(1) {
        margin-top: 0;
    }

    .field-label {
        position: absolute;
        top: 0;
        left: 7px;
        @include font-size(13px);
        line-height: 15px;
        color: $subtitle-color;
        opacity: 0;
        transition: 0.2s all ease-in-out;
        width: 100%;
    }

    &.field-not-empty {
        .field-label {
            top: -15px;
            opacity: 1;
        }
    }

    .input-field {
        width: 100%;
        padding: $space5 7px;
        border-bottom: $common-border;
        @include font-size(16px);
        line-height: 20px;
        color: $title-color;
        font-family: $robotoregular;

        &::placeholder {
            color: $placeholder-color;
            @include font-size(16px);
            line-height: 20px;
        }
    }

    input[type=date]:invalid::-webkit-datetime-edit {
        color: $placeholder-color;
        text-transform: uppercase;
    }

    input[type=date]:valid::-webkit-datetime-edit {
        color: $title-color;
    }

    input[type=date],
    &.result input[type=text] {
        background: url('../images/calender.svg') no-repeat;
        background-position: right 5px center;
    }

    input[type=tel]{
        text-align: center;
    }
}

//mobile number
.number {
    @extend .flex;
    align-items: flex-end;
    position: relative;

    .select-code {
        width: 25%;
        border-bottom: $common-border;

        .country-code {
            .list {
                width: 100%;
                padding-right: $space15;
                @include font-size(16px);
                line-height: 20px;
                appearance: none;
                color: $subtitle-color;
                background: url('../images/dropdown.svg') no-repeat;
                background-position: right 5px center;
            }
        }

    }

    .single-input {
        width: 70%;
        margin-top: 0;
    }
}

.tabs {
    background: $bg-light;
    border-radius: 40px;
    display: flex;
    margin: $space30 0 $space50+3px;

    .single-tab {
        margin: $space5;
        padding: $space10;
        @include font-size(16px);
        line-height: 20px;
        color: $subtitle-color;
        text-align: center;
        cursor: pointer;
        width: 50%;
        transition: 0.3s all ease-in-out;

        &.active {
            background: $white;
            color: $primary-color;
            border-radius: 40px;
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
        }
    }
}

.form {
    .email {
        display: none;
    }

    .single-input {
        .pass {
            position: relative;
            cursor: pointer;

            &:after {
                content: '';
                background: url('../images/eye.svg');
                background-repeat: no-repeat;
                width: 15px;
                height: 13px;
                background-size: 15px;
                position: absolute;
                top: 12px;
                right: 5px;
            }

            &.hide-pass {
                &::after {
                    background: url('../images/eye-slash.svg');
                    background-repeat: no-repeat;
                }
            }

        }
    }

    .forgot-pass {
        @include font-size(13px);
        line-height: 20px;
        color: $primary-color;
        display: block;
        text-align: right;
        margin-top: $space5;
    }
}

.btn {
    display: block;
    color: $white;
    background: $primary-color;
    border-radius: 9px;
    padding: $space10 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: $space30+$space5 0;
    cursor: pointer;
}

.social-links {
    .small-text {
        text-align: center;
        @include font-size(14px);
        line-height: 18px;
        color: $subtitle-color;
        position: relative;

        &::after {
            content: '';
            display: block;
            width: 100%;
            border: $common-border;
            position: absolute;
            top: 8px;

        }

        span {
            background: $white;
            position: relative;
            z-index: 1;
            padding: 0 $space5;
        }
    }

    .link-list {
        display: flex;
        justify-content: center;
        margin: $space15 0 $space25;

        .single-link {
            padding: 0 $space5;

            a {
                display: inline-block;
            }
        }
    }

    .signup {
        @include font-size(15px);
        line-height: 20px;
        color: $title-color;
        text-align: center;

        .signup-link {
            color: $primary-color;
        }
    }
}


.mid-content {

    .back,
    .img {
        display: block;
    }

    .img {
        margin: $space30 auto;
    }

    .head,
    .sub-head,
    .edit-num {
        text-align: center;
    }

    .number {
        padding: $space50 0 0;
    }

    .edit-num {
        @include font-size(16px);
        line-height: 20px;
        color: $primary-color;
        margin-top: 3px;

        .edit-icon {
            background: $bg-light;
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 100%;
            margin-left: $space10;

            svg {
                vertical-align: sub;
            }
        }
    }

    .otp-input {
        display: flex;
        justify-content: center;
        margin-bottom: $space15;

        .input-field {
            border: $common-border;
            border-radius: 3px;
            width: 40px;
            height: 40px;
            margin-right: $space10+2;

            &:nth-last-of-type(1) {
                margin-right: 0;
            }
        }
    }

    .resend-text {
        text-align: center;
        @include font-size(14px);
        line-height: 16px;
        color: $title-color;
        font-family: $interregular;

        .timer,
        .resend-link {
            color: $primary-color;
        }
    }

    .pass-form {
        margin-top: $space35;

        .single-input {
            &:nth-of-type(1) {
                margin-bottom: $space40+$space5;
            }
        }
    }
}

.signup-form {
    margin-top: $space50+$space5;

    &>.single-input {
        margin-top: $space40;

        &:nth-of-type(1) {
            margin-top: 0;
        }
    }

    .number {
        margin-top: $space40;
    }
}

.name {
    @extend .flex;

    .single-input {
        width: 48%;
        margin: 0;
    }
}

#success_screen{
    margin-top: $space60;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.spinner,
.resend-spinner .resend-link {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        top: 3px;
        right: -25px;
        border-radius: 50%;
        border: 2px solid #ccc;
        border-top-color: #225cc8;
        animation: spinner .6s linear infinite;
    }
}
.resend-spinner{
    .resend-link {
        &::before {
            width: 15px;
            height: 15px;
            top: 2px;
            right: -20px;
        }
    }
}

@media only screen and (min-width: 411px) and (max-width: 415px) {}

@media screen and (min-width:768px) {
    .login-bg {
        background: url('../images/bg.jpg') no-repeat;
        background-size: cover;
        background-repeat: repeat-y;
        position: relative;
        background-position: center;
    }

    .heading {
        .back {
            display: none;
        }

        .logo {
            display: block;
            width: 45%;
            margin: auto auto $space25;
        }

        .head,
        .sub-head {
            text-align: center;
        }
    }

    .common-space {
        padding: $space25 $space35 - 1;
    }

    .common-box {
        display: flex;
        box-shadow: 0px 2px 16px 0px #00000024;
        border-radius: 20px;
        overflow: hidden;
        margin: 75px auto;
    }

    .left-content {
        width: 50%;
        display: inline-block;
        background: url('../images/d-bg.png') no-repeat $bg-blue;
        background-position: bottom;
        background-size: contain;

        .common-text {
            padding-left: $space25;
            padding-top: 225px;

            .ldetail,
            .lhead {
                color: $white;
            }

            .lhead {
                @include font-size(26px);
                line-height: 30px;
                margin-bottom: $space20;
            }

            .ldetail {
                @include font-size(15px);
                line-height: 20px;
                margin-bottom: $space10;

                img {
                    margin-right: $space10;
                }
            }
        }
    }

    .mid-content {
        .img {
            margin: 0 auto $space30;
        }
    }

    .right-content,
    .mid-content {
        background: $white;
        width: 41%;
    }

    #success_screen{
        margin-top: 0;
    }
}

@media screen and (min-width:1024px) {
    .common-space {
        padding: $space25 $space40;
    }

    .left-content {
        .common-text {
            .lhead {
                @include font-size(30px);
                line-height: 36px;
            }

            .ldetail {
                @include font-size(16px);
                margin-bottom: $space15;
            }
        }
    }
}

@media screen and (min-width:1366px) {

    .common-space {
        padding: $space25 90px;
    }

    .left-content {
        min-height: 715px;
        background-size: unset;

        .common-text {
            .lhead {
                @include font-size(50px);
                line-height: 53px;
                margin-bottom: $space35;
            }
        }
    }

    .right-content,
    .mid-content {
        width: 34.5%;
    }

}