/*-----------------------  SIGN-IN ---------------------------------*/

@import url('scrollbar.css');

@media (min-width: 279px) and (max-width: 990px) {

    .login-page {
        width: 100% !important;
        height: 800px !important;
    }

    .login-header {
        /*flex-direction: column;*/
        width: 100% !important;
        gap: 120px !important;
        padding-top: 20px !important;
        padding-right: 0px !important;
        padding-bottom: 20px !important;
        padding-left: 0px !important;
        background: #ffffff;
    }

    .login-menu {
        flex-direction: column;
        gap: 0px !important;
        width: 100% !important;
    }

    .login-side-menu {
        width: 60% !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    .login-body {
        padding: 10px !important;
        margin-top: 50px !important;
        margin-right: 12px !important;
        margin-bottom: 5px !important;
        margin-left: 20px !important;
        gap: 10px !important;
        width: 90% !important;
    }

    .login-desc-body {
        gap: 15px !important;
    }

    .login-social {
        width: 100% !important;
        height: 100% !important;
    }

        .login-social button {
            width: 100% !important;
            height: 35px !important;
        }

    .login-option {
        gap: 10px !important;
    }

        .login-option span {
            width: 10px !important;
            height: 15px !important;
        }

    .login-body1 {
        gap: 10px !important;
        width: 100% !important;
    }

    .login-footer {
        gap: 10px !important;
        width: 90% !important;
    }

    .login-body-desc {
        width: 100% !important;
    }

        .login-body-desc input {
            width: 100% !important;
            height: 35px !important;
        }

    .login-footer {
        gap: 14pa !important;
        width: 100% !important;
    }

        .login-footer button {
            padding-top: 5px !important;
            padding-right: 12px !important;
            padding-bottom: 5px !important;
            padding-left: 12px !important;
        }
}

.login-page {
    width: 100%;
    height: 655px;
    background: #F8F8FC;
}

.login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 120px;
    gap: 223px;
    left: 120px;
    top: 23px;
}

.login-menu {
    display: flex;
    align-items: center;
    padding: 0px;
    gap: 40px;
}

    .login-menu h1 {
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 130%;
        text-align: center;
        letter-spacing: 0.05em;
        text-transform: capitalize;
        color: #1A202C;
    }

.login-side-menu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

    .login-side-menu h5 {
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
        display: flex;
        align-items: center;
        text-align: center;
        color: #1A202C;
    }

        .login-side-menu h5 a {
            font-weight: 700;
            font-size: 14px;
            line-height: 140%;
            display: flex;
            align-items: center;
            text-align: center;
            color: #7B68EE;
            text-decoration: none;
        }

.login-body {
    margin-left: 37%;
    margin-top: 1%;
    /*margin: 22px 490px;*/
    align-items: center;
    padding: 24px;
    gap: 40px;
    width: 28%;
    left: 535px;
    top: 80px;
    background: #FFFFFF;
    box-shadow: 0px 4px 14px rgba(54, 57, 90, 0.1);
    border-radius: 8px;
}

.login-desc {
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    gap: 30px;
}

.login-desc h1 {
    font-weight: 700;
    font-size: 22px;
    line-height: 150%;
    display: flex;
    align-items: center;
    color: #1A202C;
}

.login-desc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 24px;
}

.login-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 100%;
}

    .login-social button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 12px;
        /*width: 320px;*/
        width: 100%;
        height: 41px;
        background: #FFFFFF;
        border: 1px solid #EFEFF7;
        border-radius: 8px;
    }

        .login-social button i {
            width: 18.2px;
            height: 18.2px;
        }

            .login-social button i span {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding: 9px 0px;
                gap: 10px;
                width: 130px;
                height: 41px;
            }

                .login-social button i span b {
                    font-weight: 700;
                    font-size: 15px;
                    line-height: 150%;
                    color: #1A202C;
                }
.login-option-form-control{
    width: 100%;
}

.login-option-form-control form {
    width: 100%;
}

.login-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 20px;
}

    .login-option img {
        width: 47%;
    }

    .login-option span {
        width: 12px;
        height: 18px;
        font-weight: 400;
        font-size: 12px;
        line-height: 150%;
        display: flex;
        align-items: center;
        color: #6B7B9C;
    }

.login-body1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 100%;
}

.login-body-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 100%;
}

    .login-body-desc b {
        padding: 0px 0px 8px;
        font-weight: 500;
        font-size: 15px;
        line-height: 140%;
        color: #1A202C;
    }

    .login-body-desc input {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 10px;
        /*width: 320px;*/
        width: 100%;
        background: #FFFFFF;
        border: 1px solid #EFEFF7;
        border-radius: 8px;
        color: #6B7B9C;
    }

.login-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 24px;
    /*width: 320px;*/
    width: 100%;
}

    .login-footer button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px 24px;
        gap: 10px;
        background: #7B68EE;
        border-radius: 8px;
    }

.btn {
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
}

.login-footer a {
    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    align-items: center;
    text-align: center;
    color: #1A202C;
    text-decoration: none;
}

.fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.fa-linkedin {
    color: #0077B5;
}


/*-----------------------  SIGN-UP ---------------------------------*/

@media (min-width: 279px) and (max-width: 990px) {

    .signup-page {
        width: 100% !important;
        height: 820px !important;
    }

    .signup-header {
        /*flex-direction: column;*/
        width: 100% !important;
        gap: 120px !important;
        padding-top: 20px !important;
        padding-right: 0px !important;
        padding-bottom: 20px !important;
        padding-left: 0px !important;
        background: #ffffff;
    }

    .signup-menu {
        flex-direction: column;
        gap: 0px !important;
        width: 100% !important;
    }

    .signup-side-menu {
        width: 60% !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    .signup-body {
        padding: 10px !important;
        margin-top: 50px !important;
        margin-right: 12px !important;
        margin-bottom: 5px !important;
        margin-left: 20px !important;
        gap: 10px !important;
        width: 90% !important;
    }

    .signup-desc-body {
        gap: 15px !important;
    }

    .signup-social {
        width: 100% !important;
        height: 100% !important;
    }

        .signup-social button {
            width: 100% !important;
            height: 35px !important;
        }

    .signup-option {
        gap: 10px !important;
    }

        .signup-option span {
            width: 10px !important;
            height: 15px !important;
        }

    .signup-body1 {
        gap: 10px !important;
        width: 100% !important;
    }

    .signup-footer {
        gap: 10px !important;
        width: 90% !important;
    }

    .signup-body-desc {
        width: 100% !important;
    }

        .signup-body-desc input {
            width: 100% !important;
            height: 35px !important;
        }

    .signup-footer {
        gap: 14pa !important;
        width: 100% !important;
    }

        .signup-footer button {
            padding-top: 5px !important;
            padding-right: 12px !important;
            padding-bottom: 5px !important;
            padding-left: 12px !important;
        }
}

.signup-page {
    width: 100%;
    height: 950px;
    background: #F8F8FC;
}

.signup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 120px;
    gap: 223px;
    left: 120px;
    top: 23px;
}

.signup-menu {
    display: flex;
    align-items: center;
    padding: 0px;
    gap: 40px;
}

    .signup-menu h1 {
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 130%;
        text-align: center;
        letter-spacing: 0.05em;
        text-transform: capitalize;
        color: #1A202C;
    }

.signup-side-menu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

    .signup-side-menu h5 {
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
        display: flex;
        align-items: center;
        text-align: center;
        color: #1A202C;
    }

        .signup-side-menu h5 a {
            font-weight: 700;
            font-size: 14px;
            line-height: 140%;
            display: flex;
            align-items: center;
            text-align: center;
            color: #7B68EE;
            text-decoration: none;
        }

.signup-body {
    margin-left: 37%;
    margin-top: 1%;
    /*margin: 22px 490px;*/
    align-items: center;
    padding: 24px;
    gap: 40px;
    width: 28%;
    left: 535px;
    top: 80px;
    background: #FFFFFF;
    box-shadow: 0px 4px 14px rgba(54, 57, 90, 0.1);
    border-radius: 8px;
}

.signup-desc {
    display: flex;
    flex-direction: column;
    /*align-items: center;
    padding: 24px;*/
    gap: 30px;
}

.signup-desc h1 {
    font-weight: 700;
    font-size: 22px;
    line-height: 150%;
}

.signup-desc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 24px;
}

.signup-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 100%;
}

    .signup-social button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 12px;
        /*width: 320px;*/
        width: 100%;
        height: 41px;
        background: #FFFFFF;
        border: 1px solid #EFEFF7;
        border-radius: 8px;
    }

        .signup-social button i {
            width: 18.2px;
            height: 18.2px;
        }

            .signup-social button i span {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding: 9px 0px;
                gap: 10px;
                width: 130px;
                height: 41px;
            }

                .signup-social button i span b {
                    width: 130px;
                    height: 23px;
                    font-weight: 700;
                    font-size: 15px;
                    line-height: 150%;
                    color: #1A202C;
                }

.signup-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 20px;
    width: 100%;
}

    .signup-option img {
        width: 47%;
    }

    .signup-option span {
        width: 12px;
        height: 18px;
        font-weight: 400;
        font-size: 12px;
        line-height: 150%;
        display: flex;
        align-items: center;
        color: #6B7B9C;
    }

.signup-body1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 100%;
}

.signup-body-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 100%;
}

    .signup-body-desc b {
        font-weight: 500;
        font-size: 15px;
        line-height: 140%;
        color: #1A202C;
        padding: 0px 0px 8px;
    }

    .signup-body-desc input {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 10px;
        /*width: 320px;*/
        width: 100%;
        background: #FFFFFF;
        border: 1px solid #EFEFF7;
        border-radius: 8px;
        color: #6B7B9C;
    }

.signup-option-form-control {
    width: 100%;
}

    .signup-option-form-control form {
        width: 100%;
    }

.signup-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 24px;
    width: 100%;
    /*width: 320px;*/
}

    .signup-footer button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px 24px;
        gap: 10px;
        background: #7B68EE;
        border-radius: 8px;
    }

.btn {
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
}

.signup-footer a {
    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    align-items: center;
    text-align: center;
    color: #1A202C;
}

.fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.fa-linkedin {
    color: #0077B5;
}

/*-----------------------  ForgotPassword ---------------------------------*/

@media (min-width: 279px) and (max-width: 990px) {

    .forgotpassword-page {
        width: 100% !important;
        height: 800px !important;
    }

    .forgotpassword-header {
        /*flex-direction: column;*/
        width: 100% !important;
        gap: 120px !important;
        padding-top: 20px !important;
        padding-right: 0px !important;
        padding-bottom: 20px !important;
        padding-left: 0px !important;
        background: #ffffff;
    }

    .forgotpassword-menu {
        flex-direction: column;
        gap: 0px !important;
        width: 100% !important;
    }

    .forgotpassword-side-menu {
        width: 35% !important;
    }

    .forgotpassword-body {
        padding: 16px !important;
        margin-top: 50px !important;
        margin-right: 12px !important;
        margin-bottom: 5px !important;
        margin-left: 20px !important;
        gap: 10px !important;
        width: 90% !important;
    }

    .forgotpassword-desc-body {
        gap: 15px !important;
    }

    .forgotpassword-social {
        width: 100% !important;
        height: 100% !important;
    }

        .forgotpassword-social button {
            width: 100% !important;
            height: 35px !important;
        }

    .forgotpassword-option {
        gap: 10px !important;
    }

        .forgotpassword-option span {
            width: 10px !important;
            height: 15px !important;
        }

    .forgotpassword-body1 {
        gap: 10px !important;
        width: 100% !important;
    }

    .forgotpassword-footer {
        gap: 10px !important;
        width: 90% !important;
    }

    .forgotpassword-body-desc {
        width: 100% !important;
    }

        .forgotpassword-body-desc input {
            width: 100% !important;
            height: 35px !important;
        }

    .forgotpassword-footer {
        gap: 14pa !important;
        width: 100% !important;
    }

        .forgotpassword-footer button {
            padding-top: 5px !important;
            padding-right: 12px !important;
            padding-bottom: 5px !important;
            padding-left: 12px !important;
        }
}

.forgotpassword-page {
    width: 100%;
    height: 645px;
    background: #F8F8FC;
    padding-bottom: 0px;
}

.forgotpassword-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 120px;
    gap: 223px;
    left: 120px;
    top: 23px;
}

.forgotpassword-menu {
    display: flex;
    align-items: center;
    padding: 0px;
    gap: 40px;
}

    .forgotpassword-menu h1 {
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 130%;
        text-align: center;
        letter-spacing: 0.05em;
        text-transform: capitalize;
        color: #1A202C;
    }

.forgotpassword-side-menu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

    .forgotpassword-side-menu h5 {
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
        display: flex;
        align-items: center;
        text-align: center;
        color: #1A202C;
    }

        .forgotpassword-side-menu h5 a {
            font-weight: 700;
            font-size: 14px;
            line-height: 140%;
            display: flex;
            align-items: center;
            text-align: center;
            color: #7B68EE;
            text-decoration: none;
        }

.forgotpassword-body {
    margin-left: 37%;
    margin-top: 5%;
    /*margin: 100px 490px;*/
    align-items: center;
    padding: 24px;
    gap: 40px;
    width: 28%;/*
    left: 535px;
    top: 80px;*/
    background: #FFFFFF;
    box-shadow: 0px 4px 14px rgba(54, 57, 90, 0.1);
    border-radius: 8px;
}

.forgotpassword-desc h1 {
    font-weight: 700;
    font-size: 22px;
    line-height: 150%;
}

.forgotpassword-desc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 24px;
    width: 100%;
}

    .forgotpassword-desc-body p {
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
        color: #6B7B9C;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    .forgotpassword-social {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 16px;
    }

    .forgotpassword-social button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 12px;
        width: 320px;
        height: 41px;
        background: #FFFFFF;
        border: 1px solid #EFEFF7;
        border-radius: 8px;
    }

        .forgotpassword-social button i {
            width: 18.2px;
            height: 18.2px;
        }

            .forgotpassword-social button i span {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding: 9px 0px;
                gap: 10px;
                width: 130px;
                height: 41px;
            }

                .forgotpassword-social button i span b {
                    width: 130px;
                    height: 23px;
                    font-weight: 700;
                    font-size: 15px;
                    line-height: 150%;
                    color: #1A202C;
                }

.forgotpassword-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 20px;
}

    .forgotpassword-option span {
        width: 12px;
        height: 18px;
        font-weight: 400;
        font-size: 12px;
        line-height: 150%;
        display: flex;
        align-items: center;
        color: #6B7B9C;
    }

.forgotpassword-body1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 100%;
}

.forgotpassword-body-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 100%;
}

    .forgotpassword-body-desc b {
        font-weight: 500;
        font-size: 15px;
        line-height: 140%;
        color: #1A202C;
        padding: 0px 0px 8px;
    }

    .forgotpassword-body-desc input {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 10px;
        width: 100%;
        /*width: 320px;*/
        background: #FFFFFF;
        border: 1px solid #EFEFF7;
        border-radius: 8px;
        color: #6B7B9C;
    }

.forgotpassword-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 24px;
    /*width: 320px;*/
    width: 100%;
}

    .forgotpassword-footer button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px 24px;
        gap: 10px;
        width: 70%;
        background: #7B68EE;
        border-radius: 8px;
    }

.btn {
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
}

.forgotpassword-footer a {
    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    align-items: center;
    text-align: center;
    color: #1A202C;
}

.fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.fa-linkedin {
    color: #0077B5;
}

/*-----------------------  CreatePassword ---------------------------------*/

@media (min-width: 279px) and (max-width: 990px) {

    .createpassword-page {
        width: 100% !important;
        height: 800px !important;
    }

    .createpassword-header {
        flex-direction: column;
        width: 100% !important;
        gap: 20px !important;
        padding-top: 20px !important;
        padding-right: 0px !important;
        padding-bottom: 0px !important;
        padding-left: 0px !important;
        background: #ffffff;
    }

    .createpassword-menu {
        flex-direction: column;
        gap: 0px !important;
        width: 100% !important;
    }

    .createpassword-side-menu {
        width: 35% !important;
    }

    .createpassword-body {
        padding: 10px !important;
        margin-top: 50px !important;
        margin-right: 12px !important;
        margin-bottom: 5px !important;
        margin-left: 20px !important;
        gap: 10px !important;
        width: 90% !important;
    }

    .createpassword-desc-body {
        gap: 15px !important;
    }

    .createpassword-social {
        width: 100% !important;
        height: 100% !important;
    }

        .createpassword-social button {
            width: 100% !important;
            height: 35px !important;
        }

    .createpassword-option {
        gap: 10px !important;
    }

        .createpassword-option span {
            width: 10px !important;
            height: 15px !important;
        }

    .createpassword-body1 {
        gap: 10px !important;
        width: 100% !important;
    }

    .createpassword-footer {
        gap: 10px !important;
        width: 90% !important;
    }

    .createpassword-body-desc {
        width: 100% !important;
    }

        .createpassword-body-desc input {
            width: 100% !important;
            height: 35px !important;
        }

    .createpassword-footer {
        gap: 14pa !important;
        width: 100% !important;
    }

        .createpassword-footer button {
            padding-top: 5px !important;
            padding-right: 12px !important;
            padding-bottom: 5px !important;
            padding-left: 12px !important;
        }
}

.createpassword-page {
    width: 100%;
    height: 655px;
    background: #F8F8FC;
}

.createpassword-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 120px;
    gap: 223px;
    left: 120px;
    top: 23px;
}

.createpassword-menu {
    display: flex;
    align-items: center;
    padding: 0px;
    gap: 40px;
}

    .createpassword-menu h1 {
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 130%;
        text-align: center;
        letter-spacing: 0.05em;
        text-transform: capitalize;
        color: #1A202C;
    }

.createpassword-side-menu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

    .createpassword-side-menu h5 {
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
        display: flex;
        align-items: center;
        text-align: center;
        color: #1A202C;
    }

        .createpassword-side-menu h5 a {
            font-weight: 700;
            font-size: 14px;
            line-height: 140%;
            display: flex;
            align-items: center;
            text-align: center;
            color: #7B68EE;
            text-decoration: none;
        }

.createpassword-body {
    margin: 22px 490px;
    align-items: center;
    padding: 24px;
    gap: 40px;
    width: 28%;
    left: 535px;
    top: 80px;
    background: #FFFFFF;
    box-shadow: 0px 4px 14px rgba(54, 57, 90, 0.1);
    border-radius: 8px;
}

.createpassword-desc h1 {
    font-weight: 700;
    font-size: 22px;
    line-height: 150%;
}

.createpassword-desc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 24px;
}

.createpassword-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

    .createpassword-social button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 12px;
        width: 320px;
        height: 41px;
        background: #FFFFFF;
        border: 1px solid #EFEFF7;
        border-radius: 8px;
    }

        .createpassword-social button i {
            width: 18.2px;
            height: 18.2px;
        }

            .createpassword-social button i span {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding: 9px 0px;
                gap: 10px;
                width: 130px;
                height: 41px;
            }

                .createpassword-social button i span b {
                    width: 130px;
                    height: 23px;
                    font-weight: 700;
                    font-size: 15px;
                    line-height: 150%;
                    color: #1A202C;
                }

.createpassword-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 20px;
}

    .createpassword-option span {
        width: 12px;
        height: 18px;
        font-weight: 400;
        font-size: 12px;
        line-height: 150%;
        display: flex;
        align-items: center;
        color: #6B7B9C;
    }

.createpassword-body1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

.createpassword-body-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
}

    .createpassword-body-desc b {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px 0px 8px;
        gap: 4px;
    }

    .createpassword-body-desc input {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 10px;
        width: 320px;
        background: #FFFFFF;
        border: 1px solid #EFEFF7;
        border-radius: 8px;
        color: #6B7B9C;
    }

.createpassword-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 24px;
    width: 320px;
}

    .createpassword-footer button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px 24px;
        gap: 10px;
        width: 50%;
        background: #7B68EE;
        border-radius: 8px;
    }

.btn {
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #FFFFFF;
}

.createpassword-footer a {
    font-weight: 700;
    font-size: 12px;
    line-height: 150%;
    align-items: center;
    text-align: center;
    color: #1A202C;
}

.fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.fa-linkedin {
    color: #0077B5;
}

.customLoginInput::placeholder {
    text-align: center;
}