# Node.js



--------------------------------------------------------------------------------
title: "Introduction"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.676Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/introduction/"
service: "All Services"
related:
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction/)
- Embedded Authentication Type (/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/)
- User Management (/en/cloud-scale/help/authentication/user-management/introduction/)
- Custom User Validation (/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)
- Identity Providers (/en/cloud-scale/help/authentication/social-logins/introduction/)
- Node.js SDK (/en/sdk/nodejs/v2/overview/)

--------------------------------------------------------------------------------


# Introduction

This tutorial will help you build a simple client application that allows your end-users to log in to your application after they have been authenticated using {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" %}}Embedded Authentication Type{{%/link%}} with a {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/" %}}Custom User Validation{{%/link%}} function. The Embedded Authentication type allows you to load your login element as an iFrame in your application.

The Embedded Authenication Portal app uses the following Catalyst services and their respective components:

- {{%link href="/en/cloud-scale/" %}}Catalyst Cloud Scale{{%/link%}}
    - **Authentication**: The end-user will be authenticated to your application using {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" %}}Embedded Authentication{{%/link%}}, a {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/introduction/" %}}Native Catalyst Authentication Type{{%/link%}}.
    - **Web Client Hosting**: The front end of the application is going to be hosted on Catalyst using the {{%link href="/en/cloud-scale/help/web-client-hosting/introduction/" %}}Web Client Hosting{{%/link%}} component. We will be initializing and configuring the client as a {{%link href="/en/cli/v1/initialize-resources/initialize-client/#basic-client-applications" %}}Basic web app{{%/link%}} and a {{%link href="/en/cli/v1/initialize-resources/initialize-client/#react-applications" %}}React app{{%/link%}}.
- {{%link href="/en/serverless/" %}}Catalyst Serverless{{%/link%}}
    - **Functions**: We will be using a {{%link href="/en/serverless/help/functions/basic-io/" %}}Basic I/O function{{%/link%}} to code the logic used to implement *Custom User Validation*. We will be coding the function in **Node.js**.

This tutorial will help you understand the various features of *Embedded Authentication Type*. We will be incorporating the following functionalities in this tutorial:

- Sign up to the web app using an email address 
- Log in to the app using the sign-up account information
- Log in to the app using any or all of the following Identity Provider Logins:
    - {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-zoho-social-login" %}}Zoho{{%/link%}}
    - {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-google-social-login" %}}Google{{%/link%}}
    - {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-microsoft-365-social-login" %}}Microsoft 365{{%/link%}}
    - {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-linkedin-social-login" %}}LinkedIn{{%/link%}}
    - {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-facebook-social-login" %}}Facebook{{%/link%}}
- Reset the password option in case an end-user forgets their password
- Configure **Email Verification** and **Password Reset** {{%link href="/en/cloud-scale/help/authentication/email-templates/customizing-email-templates/" %}}email templates{{%/link%}}
- Configure and add a {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/" %}}Custom User Validation{{%/link%}} function
- View profile information after logging into the application
- Log out of the application

The following is an example of how the client application will appear:


You can access a working application and test its functionality here: {{%link href="https://authentication.catalystserverlessapp.com/app/index.html" %}}Try the App!{{%/link%}}

You will be using the following features of the Authentication component in this application:

* **User Management**: The user profiles are automatically saved in this {{%link href="/en/cloud-scale/help/authentication/user-management/introduction/" %}}section{{%/link%}} when they sign up for the application. Using this feature, you can manage the end-users’ access to your application and {{%link href="/en/cloud-scale/help/authentication/user-management/roles/introduction/" %}}configure their roles{{%/link%}}.

* **Authentication Type**: You will be able to view the {{%link href="/en/cloud-scale/help/authentication/authentication-types/" %}}authentication type{{%/link%}} you have configured for your application, and edit your configurations when required.

* **Whitelisting**: You will use this section to enable {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/" %}}Custom User Validation{{%/link%}}. You can also use this section to enable {{%link href="/en/cloud-scale/help/authentication/whitelisting/authorized-domains/introduction/" %}}CORS and iFrame access{{%/link%}} to your application.

* **Email Templates**: You will be able to configure and customize *Email Verification* and *Password Reset* emails from this {{%link href="/en/cloud-scale/help/authentication/email-templates/introduction/" %}}section{{%/link%}}.

We will use the {{%link href="https://console.catalyst.zoho.com/baas/index" %}}Catalyst web console{{%/link%}} and the {{%link href="/en/cli/v1/cli-command-reference/" %}}Catalyst Command Line Interface{{%/link%}} (CLI) to build this application.

You will be given the code for the files to be included in the function and client directory of your project in this tutorial. You can either copy the provided code or customize it, should you feel it necessary and paste it into the appropriate files as directed.

### Application Architecture

The authorization portal's application logic is described below:

* **Login process**: The end-user will be directed to the login page. They can either opt in to log in to the application using the **Zoho**, **Google**, **LinkedIn**, **Microsoft 365**, or **Facebook** identity provider logins, or click the **Sign Up** option provided to sign up using their email address.

* **Custom user validation**: The details inputted by the end-user during the login process will sent be as a JSON input to the *Custom User Validation* function. if the details are successfully validated per the custom logic present in the *Basic I/O function*, the verification email will be triggered.

* **Email verification triggered**: Once users sign up for the application, an email verification email will be sent to the email address used to register the account. The email verification content and style can be customized per your preference using the *Email Templates* feature of *Authentication*.

* **Password setup**: When end-users click the link present in the email verification email, they will be directed to the password setup page. Here, the end-user can secure their account by setting a password of their preference.

* **End-user account created**: After the password is set, the user account will be created, and the end-user will now be able to log in to the application using the credentials they created. You can confirm the account has been created by viewing the account details in the *User Management* section of the *Authentication* component.

* **Password reset option**: End-users will have the option to reset the password by opting for the **Forgot Password** option present in the login page. They will then be prompted to provide any of their previous passwords to recover their account or go ahead with the reset option. Once the users go ahead with the reset option, a one-time password (OTP) email will be sent to the user. Once the OTP is verified, they can set a new password for their account.

{{%note%}}{{%bold%}}Note:{{%/bold%}} 

* As we are using the {{%bold%}}Embedded Login{{%/bold%}} method which is a native Catalyst Authentication type, you will be given the scripts for the native login form that can be added to your application's web client. You can also customize the design and branding of the login and password reset elements by configuring the css file mentioned in the script. Refer {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/" %}}this Styling Embedded Authentication type help section{{%/link%}}, to style your iFrame and the login element.
   
* Instead of opting for the {{%italics%}}Forgot Password{{%/italics%}} option, the end-user can also contact the app administrator to reset their credentials. Using the {{%italics%}}User Management{{%/italics%}} feature, a {{%bold%}}Password Reset{{%/bold%}} email can be sent from within Catalyst to the user, containing a link and instructions to reset their password. This email can be styled using the {{%italics%}}Email Templates{{%/italics%}} feature.{{%/note%}}



--------------------------------------------------------------------------------
title: "Prerequisites"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.676Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/prerequisities/"
service: "All Services"
related:
- CLI Command Reference (/en/cli/v1/cli-command-reference/)
- Install CLI (/en/getting-started/installing-catalyst-cli/)
- Login CLI (/en/cli/v1/login/login-from-cli/)

--------------------------------------------------------------------------------


# Prerequisites

Before you begin building the application, you must have the following prerequisites installed on your system:

1. **Catalyst CLI**<br /><br />
    Catalyst CLI contains a host of tools that enable you to initialize, develop, test, and deploy the components of your application from your local machine. We will be working with Catalyst CLI in this tutorial.<br /><br />You must perform the following actions:
    * **Install Catalyst CLI**: Catalyst CLI is installed through NPM. You must therefore have NPM and Node.js installed on your system before you install the CLI. Refer to the {{%link href="/en/getting-started/installing-catalyst-cli/" %}}Install Catalyst CLI help page{{%/link%}} for details on the pre-requisites and the steps to install it.
    * **Log in to Catalyst CLI**: After you install Catalyst CLI, you must authenticate the CLI with your Catalyst account before using it. Refer to the {{%link href="/en/cli/v1/login/login-from-cli/" %}}CLI Login help page{{%/link%}} for the steps to login from Catalyst CLI and the various options available for it.

2. **Any IDE tool for Node.js and client code development**<br /><br />
    You can use any IDE to work with the Basic I/O function and the client code. Some popular choices include Visual Studio Code, IDLE, IntelliJ IDEA, Eclipse, and Sublime Text. Download and install an IDE of your choice on your system.

{{%info image="/images/tutorials/todo-list/vscode.png"%}}If you are a Visual Studio Code IDE user, you can install the {{%bold%}}Catalyst Tools{{%/bold%}} extension, and use your IDE itself in place of the CLI. You can find more details about the Catalyst VS Code extension from this {{%link href="/en/catalyst-extensions/vs-code-extension/introduction/" %}}help section{{%/link%}}.{{%/info%}}



--------------------------------------------------------------------------------
title: "Create a Project"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.676Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/create-project/"
service: "All Services"
related:
- Project Directory (/en/cli/v1/project-directory-structure/introduction)
- Set up Catalyst Projects (/en/getting-started/catalyst-projects)

--------------------------------------------------------------------------------


# Create a Project

Let’s {{%link href="/en/getting-started/catalyst-projects/#creating-a-catalyst-project" %}}create a Catalyst project{{%/link%}} from the Catalyst console.

1. Log in to the {{%link href="https://console.catalyst.zoho.com/baas/index" %}}Catalyst console{{%/link%}} and click **Create New Project**.
    <br />

2. Enter the project’s name as "**AuthorizationPortal**" in the pop-up window, and click **Create**.
    <br />

Your project will be created and it will be opened.

You can access the project later, by clicking **Access Project**.
<br />

--------------------------------------------------------------------------------
title: "Configure Embedded Authentication Type"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/configure-embedded-login/"
service: "All Services"
related:
- Setup Embedded Authentication type (/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/setup-embedded-auth/)
- Configure Identity Provider Logins (/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/)

--------------------------------------------------------------------------------


# Configure Embedded Authentication Type

Let's configure the *Native Catalyst Authentication* type, *Embedded Login* in this section.

1. Authentication is a {{%link href="/en/cloud-scale/" %}}Catalyst Cloud Scale{{%/link%}} component. Click the **Cloud Scale** icon on the console's side navigation menu to access the Cloud Scale service console, then click **Start Exploring**.
    <br />

2. Click **Authentication** under *Security & Identity* to access the Authentication component.
    <br />

3. Set up the application's authentication using {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" %}}*Embedded Authentication*{{%/link%}}, a Native Catalyst Authentication type. Click the **Set Up** button in the Native Catalyst Authentication section to start configuring your login element.
    <br />

{{%note%}}{{%bold%}}Note:{{%/bold%}}

You can also learn about other authentication types here.

* {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/" %}}Hosted Login{{%/link%}}
* {{%link href="/en/cloud-scale/help/authentication/third-party-authentication/introduction/" %}}Third-party Authentication{{%/link%}}{{%/note%}}

4. Select *Embedded Authentication* and click **Next**.
    

5. Click the **toggle button** to enable *Public Signup*.
    <br />
    * Read the information pop-up and click **Yes, Proceed**.
        <br />
{{%note%}}{{%bold%}}Note:{{%/bold%}} To learn more about {{%italics%}}Public Signup{{%/italics%}}, visit this {{%link%}}help document{{%/link%}}.{{%/note%}}

6. You can add any or all of the {{%link href="/en/cloud-scale/help/authentication/social-logins/introduction/" %}} Identity Provider Logins{{%/link%}} that are present in the console.
   
    To enable the **Zoho** identity provider login:

    - Click the **Zoho** button, and enter "**AuthorizationPortal**" as the *Client Name*.
        <br />

        {{%note%}}{{%bold%}}Note:{{%/bold%}} As your application is being built on Catalyst, you do not have to create OAuth {{%badge%}}Client ID{{%/badge%}} and {{%badge%}}Client Secret{{%/badge%}} credentials.{{%/note%}}

    - Click **Enable**.
        Your end-users can now log in to your application using their Zoho credentials. 

    To enable the **Google** identity provider login:

    - Click the **Google** button, and enter the OAuth {{%badge%}}Client ID{{%/badge%}} and {{%badge%}}Client Secret{{%/badge%}} that you obtained in the Google console in their respective fields.
        <br />

        {{%note%}}{{%bold%}}Note:{{%/bold%}}  Steps to obtain the OAuth {{%badge%}}Client ID{{%/badge%}} and {{%badge%}}Client Secret{{%/badge%}} for each of the identity provider logins can be accessed in the following help documents: {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-google-social-login" %}}Google{{%/link%}}, {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-microsoft-365-social-login" %}}Microsoft 365{{%/link%}}, {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-linkedin-social-login" %}}LinkedIn{{%/link%}}, and {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-facebook-social-login" %}}Facebook{{%/link%}}.{{%/note%}}

    - Click **Enable**.
        
        Your end-users can now log in to your application using their **Google** credentials.
    
    You can repeat the same steps to enable the other identity provider logins.
    
7. Click **Next**.

{{%note%}}{{%bold%}}Note:{{%/bold%}} You can also {{%link href="/en/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/setup-embedded-auth/" %}}edit your identity provider login configurations{{%/link%}} at a later point from the Authentication Type section.{{%/note%}}

8. We will configure the *Additional Settings* section at a later point using the *Whitelisting* feature. Click **Finish**.

    <br />

You will now able to view and verify that *Embedded Authentication* type has been enabled for your application.
<br />



--------------------------------------------------------------------------------
title: "Configure Email Templates"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/configure-email-templates/"
service: "All Services"
related:
- Email Templates (/en/cloud-scale/help/authentication/email-templates/introduction/)

--------------------------------------------------------------------------------


# Configure Email Templates

Catalyst provides you with {{%link href="/en/cloud-scale/help/authentication/email-templates/introduction/" %}}Email Templates{{%/link%}} that you can use to send custom emails to your end-users when they sign up to your application, or on instances when they wish to change their password.

To configure the email templates:

1. Click the **Email Templates** tab in the *Authentication* component to navigate to the relevant section.
    <br />

2. Click the **Email Verification** tab, then click **Edit** to begin customizing and editing the content. You can also include {{%link href="/en/cloud-scale/help/authentication/email-templates/benefits-and-key-concepts/#placeholders" %}}placeholders{{%/link%}} in the templates for the values that need to be populated dynamically when the emails are invoked.

    <br />

{{%note%}}{{%bold%}}Note:{{%/bold%}}

* You can customize the email content to match your preference.

* The placeholder content (content present between {{%badge%}}%%{{%/badge%}}) will be dynamically altered and rendered based on the user details.

* The {{%badge%}}%LINK%{{%/badge%}} placeholder will contain the application's link that is automatically generated by Catalyst. You can also provide a custom link.{{%/note%}}

3. Make the necessary changes and click **Save**.
    <br />

4. To customize the *Reset Password* emails, click the **Password Reset** tab and customize the email content in the same manner as above.
    <br />

The email templates will now be configured. 

{{%note%}}{{%bold%}}Note:{{%/bold%}}

* You can learn more about {{%italics%}}Email Templates{{%/italics%}} from this {{%link href="/en/cloud-scale/help/authentication/email-templates/introduction/" %}}help document{{%/link%}}.

* Because we are using {{%italics%}}Embedded Login{{%/italics%}} to authenticate this application, the handling of sending these emails at the required instances will be automatically configured by Catalyst, so you do not have to code the logic to trigger these emails.{{%/note%}}



--------------------------------------------------------------------------------
title: "Initialize the Project"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/init-project/"
service: "All Services"
related:
- Initialize CLI Resources (/en/cli/v1/initialize-resources/introduction)
- Project Directory Structure (/en/cli/v1/project-directory-structure/introduction)

--------------------------------------------------------------------------------


# Initialize the Project from the CLI

You can now begin working on your Catalyst project from the CLI. The first step is to initialize the project in an empty directory. This will be the home directory of your project and all of the project files will be saved in it.

You can learn more about this from the {{%link href="/en/cli/v1/project-directory-structure/introduction/" %}}Project Directory Structure help page{{%/link%}}. You can learn about initializing a project in detail from the {{%link href="/en/cli/v1/initialize-resources/introduction" %}}CLI help documentation{{%/link%}}.

For this application, we will initialize a {{%link href="/en/serverless/help/functions/basic-io/" %}}Basic I/O function{{%/link%}}, which will contain the logic for {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/" %}}Custom User Validation{{%/link%}} and a {{%link href="/en/cli/v1/initialize-resources/initialize-client/#basic-client-applications" %}}Basic web app{{%/link%}} as the client component.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Ensure that you enter the function's package name or class name exactly as instructed, because the application's code contains the same name.{{%/note%}}

1. Create a folder for the project on your local machine and navigate to it from the terminal.

2. Initialize a project by executing the following command from that directory:
{{%cli%}}catalyst init{{%/cli%}}

3. Navigate using the **arrow keys**, select your preferred portal, and press the **Enter** key. If you have no other organizations associated with the account, then the default one will be selected automatically.
    
{{%note%}}{{%bold%}}Note:{{%/bold%}} You can find out more about Catalyst’s multi-org portal feature from this {{%link href="/en/getting-started/catalyst-projects/#access-the-multi-org-portal" %}}help document{{%/link%}}.{{%/note%}}

4. The CLI will now ask you to associate a Catalyst project with the directory. Associate it with the project that we created earlier from the console. Select **Authorization Portal** from the list and press **Enter**.
    

5. Navigate using the arrow keys and select **Functions**, **Client** using the space bar. Press **Enter** to initialize.
    
6. The CLI will initiate the function setup. Select **Basic IO** as the function type for your *Custom User Validation* function.
    

7. Select the latest runtime of *Node.js* as the function stack.
    

8. Enter "{{%badge%}}authorization_portal_function{{%/badge%}}" as the package name, "{{%badge%}}index.js{{%/badge%}}" as the entry point, and your email address as the author, then press **Enter**. Alternatively, you can press **Enter** without entering inputs to fill in the default values. The CLI will prompt the initialization of the Node dependencies. Press **Y** to confirm the installation, and press **Enter** to confirm your choice. The Node modules will be installed.
    

The CLI will now initiate the client setup.

{{%tabs%}}
{{%tab "Basic web app" %}}

9. Select **Basic web app** and press **Enter** to initialize your client as a {{%link href="/en/cli/v1/initialize-resources/initialize-client/#basic-client-applications" %}}basic web app{{%/link%}}.
    

10. Enter a name for your client package and press **Enter**. For the purposes of this tutorial, we are naming our client package "{{%badge%}}zylkertechnologies{{%/badge%}}". You can use the same of provide a name of your choice.
    

The Catalyst initialization is now complete.

The project directory is now set up with the client directory and the functions directory along with configuration files and dependencies. The project directory also contains the {{%link href="/en/cli/v1/project-directory-structure/catalyst-json/" %}}{{%badge%}}catalyst.json{{%/badge%}}{{%/link%}} configuration file and a hidden {{%badge%}}.catalystrc{{%/badge%}} file.

The structure of your project directory should now appear as shown below:

{{%/tab%}}

{{%tab "React web app" %}}

9. Select **React web app** and press **Enter** to initialize your client as a {{%link href="/en/cli/v1/initialize-resources/initialize-client/#react-applications" %}}React web app{{%/link%}}.
    

10. Select **JavaScript** as the React app type and press **Enter**
    

11. Enter "{{%badge%}}zylkertechnologies{{%/badge%}}" as the name of your client package and click **Enter**. You can also provide any name of your choice. All of the required React packages, such as “{{%badge%}}react{{%/badge%}},” “{{%badge%}}react-dom{{%/badge%}},” and “{{%badge%}}react-scripts{{%/badge%}}” will be installed through the Catalyst React plugin ({{%link href="https://www.npmjs.com/package/zcatalyst-cli-plugin-react" %}}{{%badge%}}zcatalyst-cli-plugin-react{{%/badge%}}{{%/link%}}).
    
    The client is now successfully initialized as a React web application.
    

The {{%link href="/en/cli/v1/project-directory-structure/client-directory" %}}client directory{{%/link%}} will be created in the standard structure in the project directory.

This is the structure of the *Authorization Portal* project’s directory if the client is initialized as a React app.


Catalyst initialization is now complete.
{{%/tab%}}
{{%/tabs%}}


--------------------------------------------------------------------------------
title: "Configure the Basic I/O Function"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/configure-function/"
service: "All Services"
related:
- Basic I/O Functions (/en/serverless/help/functions/basic-io/)
- Functions Directory Structure (/en/cli/v1/project-directory-structure/functions-directory)

--------------------------------------------------------------------------------


# Configure the Basic I/O Function

Now, we will begin coding the authorization portal application by configuring the function component.

The {{%link href="/en/cli/v1/project-directory-structure/functions-directory" %}}function’s directory{{%/link%}}, ({{%badge%}}functions/authorization_portal_function{{%/badge%}}), contains:

* The {{%badge%}}index.js{{%/badge%}} main function file
* The {{%badge%}}catalyst-config.json{{%/badge%}} configuration file
* Node modules
* {{%link href="https://docs.npmjs.com/files/package.json" %}}{{%badge%}}package.json{{%/badge%}}{{%/link%}} and {{%link href="https://docs.npmjs.com/configuring-npm/package-lock-json.html" %}}{{%badge%}}package-lock.json{{%/badge%}}{{%/link%}} dependency files

You will be adding code in the {{%badge%}}index.js{{%/badge%}} file.

The Basic I/O function contains the following functionalities:

* The end-user's details will provided as a JSON input to the *Custom User Validation* function.
* The function is coded to implement a custom logic based upon which the end-user will either be authenticated or denied.
{{%note%}}{{%bold%}}Note:{{%/bold%}} For the purpose of this tutorial, we have coded a logic for the Custom User Validation function where if the user's email provider is anyone other than Zylker Technology ({{%badge%}}@zylker.com{{%/badge%}}) the end-user will not be able to sign up to the application. You can either use the same or code a logic of your preference.{{%/note%}}

Now, let’s begin coding the Basic I/O function.

Copy the code given below and paste it in the {{%badge%}}index.js{{%/badge%}} file in the {{%badge%}}functions/authorization_portal_function{{%/badge%}} directory of your project, and save the file. You can use any IDE of your choice to work with the application’s files.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Please go through the code in this section to make sure you fully understand it.{{%/note%}}

{{% panel_with_adjustment header="index.js" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}const catalyst = require('zcatalyst-sdk-node')
module.exports = (context, basicIO) => {
  const catalystApp = catalyst.initialize(context)
  const requestDetails = catalystApp.userManagement().getSignupValidationRequest(basicIO)
  if (requestDetails) {
    if (requestDetails.user_details.email_id.includes('@zylker.com')) {
      // The actions that occur in the event of a successful authentication can be customized
      basicIO.write(JSON.stringify({
        status: 'success',
        user_details:
             {
               first_name: requestDetails.user_details.first_name,
               last_name: requestDetails.user_details.last_name,
               email_id: requestDetails.user_details.email_id,
               role_identifier: 'App User', // If you want to override the default role, you can specify the role id/name here.
               org_id: '' // If you are providing the Org ID, make sure it is copied exactly from the console.
             }
      }))
    } else {
      // The user has failed authentication
      basicIO.write(JSON.stringify({
        status: 'failure'
      }))
    }
  }
  context.close()
}
{{% /panel_with_adjustment %}}

{{%note%}}{{%bold%}}Note:{{%/bold%}} You can also use this {{%link href="/en/sdk/nodejs/v2/cloud-scale/authentication/custom-user-validation/" %}}SDK{{%/link%}} to code your own custom logic instead of the one implemented above.{{%/note%}}

The function directory is now configured. We can now proceed to configuring the client directory.

--------------------------------------------------------------------------------
title: "Enable Custom User Validation"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/enable-custom-validation/"
service: "All Services"
related:
- Custom User Validation (/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/)
- Whitelisting (/en/cloud-scale/help/authentication/whitelisting/introduction/)
- Catalyst Deploy Options (/en/cli/v1/deploy-resources/deploy-options/)

--------------------------------------------------------------------------------


# Enable Custom User Validation

Now that we have coded the logic, let's enable {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/" %}}Custom User Validation{{%/link%}}. To do this, you must first deploy the function to the console.

Enter this CLI command to {{%link href="/en/cli/v1/deploy-resources/deploy-options/#--only-lttargetsgt" %}}deploy the function component{{%/link%}} alone to the console.
{{%cli%}}catalyst deploy --only functions{{%/cli%}}



A function endpoint will be created for the function that allows you to access the function directly. The function will be deployed to the console.

Now, go to the console, and implement the following steps:

1. Navigate to the *Whitelisting* section in the *Authentication* component, and click the **Custom User Validation** toggle.


2. Select the **Basic I/O function** from the drop-down in the pop-up.


3. Click **Configure**.


The *Custom User Validation* function has been enabled for the project, and the end-users signing up for your application will now be additionally authenticated using this function.

{{%note%}}{{%bold%}}Note:{{%/bold%}} You can find out about the all of the features present in the {{%italics%}}Whitelisting{{%/italics%}} section form in this {{%link href="/en/cloud-scale/help/authentication/whitelisting/introduction/" %}}help document{{%/link%}}.{{%/note%}}


--------------------------------------------------------------------------------
title: "Configure the Client"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.678Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/configure-client/"
service: "All Services"
related:
- Client Directory Structure (/en/cli/v1/project-directory-structure/client-directory)

--------------------------------------------------------------------------------


# Configure the Client

Let’s configure the client component.

{{%tabs%}}
{{%tab "Basic web app" %}}
The {{%link href="/en/cli/v1/project-directory-structure/client-directory/" %}}client directory{{%/link%}} contains:
* The {{%badge%}}index.html{{%/badge%}} file that contains the HTML code for the frontend application
* The {{%badge%}}main.css{{%/badge%}} file that contains the CSS code for the frontend application
* The {{%badge%}}main.js{{%/badge%}} file that contains the JavaScript code
* The {{%badge%}}client-package.json{{%/badge%}} configuration file

We will be coding {{%badge%}}index.html{{%/badge%}} and {{%badge%}}main.js{{%/badge%}}. We will also be making a change in the {{%badge%}}client-package.json{{%/badge%}} to ensure that the homepage of the application is the authenticated page.

You will need to create the additional files {{%badge%}}home.html{{%/badge%}},{{%badge%}}embeddediframe.css{{%/badge%}},{{%badge%}}fpwd.css{{%/badge%}} in the {{%badge%}}/client{{%/badge%}} folder of your project. The {{%badge%}}embeddediframe.css{{%/badge%}} and {{%badge%}}fpwd.css{{%/badge%}} files contain the styling configurations for the login and password reset forms of the application respectively.

We will discuss the code at the end of this section.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Please go through the code provided in this section to make sure you fully understand it.{{%/note%}}

Copy the code below and paste it into the respective files located in the {{%badge%}}client/directory{{%/badge%}} of your project using an IDE and save the files.

{{% panel_with_adjustment header="index.html" footer="button" class="language-xml line-numbers" scroll="set-scroll" %}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Authorization Portal</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script src="https://static.zohocdn.com/catalyst/sdk/js/4.0.0/catalystWebSDK.js">
</script>
<script src="/__catalyst/sdk/init.js"></script>
<script>
const config = {
css_url: "/app/embeddediframe.css", // Login page customization css file path, if not provided default css will be rendered
is_customize_forgot_password: false, // Default value is false. Keep this value as true, if you wish to customize Forgot Password page
forgot_password_id: "login", // Element id in which forgot password page should be loaded, by default will render in the "loginDivElementId"
forgot_password_css_url: "/app/fpwd.css", // Forgot password page customization css file path, if not provided default css will be rendered
};
catalyst.auth.signIn("login", config);
</script>
</head>
<body style="background: #c0c0c0">
<div class="center">
<header>  
<img 
width="80px"
height="80px"
src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"/>
<h1>User Profile Management</h1>  
</header>
</div>
<div id="login"></div>
<div class="signup" id="signup" >
<form class="modal-content" onsubmit="signupAction(this);return false;">
<div class="center">
<h2 style="margin-top: -40px;">Sign Up</h2>
<p>Please fill this form to sign up for a new account.</p>
</div>
<label for="firstname"><b>First Name</b></label>
<input
id="firstname"
type="text"
placeholder="Enter First Name"
name="firstname"
required
/>
<label for="lastname"><b>Last Name</b></label>
<input
id="lastname"
type="text"
placeholder="Enter Last Name"
name="lastname"
required
/>
<label for="email"><b>Email</b></label>
<input
id="mailid"
type="text"
placeholder="Enter Email address"
name="email"
required
/>
<p>
By creating an account, you agree to our
<a
href="https://www.zoho.com/catalyst/terms.html"
target="_blank"
style="color: dodgerblue;"
>Terms & Conditions </a>
</p>
<div class="center">
<button
class="signupfnbtn"
type="submit"
class="signupbtn"
>
Sign Up
</button>
</div>
</form>
</div>
<div id="buttons">
<p class="homepage center">
Don't have an account? <a class="underline" href="#" onclick="showDiv()">Sign-up</a> now!
</p>
</div>
</body>
</html>

{{% /panel_with_adjustment %}}

{{% panel_with_adjustment header="home.html" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
<!DOCTYPE html>
<html>
<head>
 <title>User Profile Information</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <script src="main.js"></script>
 <script src="https://static.zohocdn.com/catalyst/sdk/js/4.0.0/catalystWebSDK.js"> </script>
 <script src="/__catalyst/sdk/init.js"></script>
 <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body onload="showProfile()">
 <div id="profile" class="card" style="display: none;">
   <h2 style="text-align:center">User Profile Information</h1>
  <img width="200px" height="450px" src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png" alt="John" style="width:80px;height: 80px;">
  <p class="title" id="fname"></p>
  <p class="title" id="lname"></p>
  <p class="title"id="mailid" ></p>
  <p class="title"id="tzone" ></p>
  <p class="title"id="ctime" ></p>
 <button id="logoutbtn" onclick="logout()">Logout</button>
 </div>
</body>
</html>
{{% /panel_with_adjustment %}}

{{%panel_with_adjustment class="language-css line-numbers" header="main.css" footer="button" scroll="set-scroll" %}}body {
  background-color: #ffffff;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 0;
}
h1 {
  margin-bottom: 0;
}
p {
  font-size: 12px;
  font-weight: bold;
}
a {
  text-decoration: none;
  font-size: 20px;
  color: #000;
  transition: opacity 0.3s;
}
a:hover,
button:hover {
  opacity: 0.7;
}
/* === Card Layout === */
.card {
  max-width: 480px;
  margin: 3rem auto;
  text-align: center;
  background: #b3b3b3;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}
.title,
.headtitle {
  color: #000;
  font-size: 22px;
  font-weight: 600;
}
/* === Input Fields === */
input[type="text"],
input[type="password"] {
  width: 90%;
  padding: 12px;
  margin: 12px 0;
  border: none;
  border-radius: 8px;
  background: #f1f1f1;
  transition: background-color 0.2s;
}
input:focus {
  background: #ddd;
  outline: none;
}
/* === Buttons === */
button,
.loginbutton {
  background-color: #4caf50;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s, transform 0.1s;
}
button:hover,
.loginbutton:hover {
  background-color: #45a049;
  transform: scale(1.02);
}
/* Special Buttons */
.logoutbtn {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  background-color: #e53935;
  color: #fff;
}
.signupbtn,
.seperatebtn,
.signupfnbtn,
.pwdfnbtn {
  border-radius: 8px;
  padding: 8px;
}
/* === Containers === */
#login {
  width: 480px;
  margin: 3rem auto;
  text-align: center;
}
.signup,
.forgotpwd {
  display: none;
}
.center {
  text-align: center;
}
.underline {
  text-decoration: underline;
  color: #1e90ff;
}
/* === Modal === */
.modal {
  display: none;
  position: fixed;
  z-index: 10;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  overflow: auto;
}
.modal-content {
  background: #b3b3b3;
  margin: 5% auto;
  padding: 20px;
  width: 40%;
  border-radius: 10px;
}
/* Close button */
.close {
  position: absolute;
  right: 25px;
  top: 15px;
  font-size: 35px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
.close:hover {
  color: #f44336;
}
/* Misc */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
p.homepage {
  font-size: 26px;
  color: #fff;
}
#BackToLoginbutton {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
{{%/panel_with_adjustment%}}


{{%panel_with_adjustment class="language-javascript line-numbers" header="main.js" footer="button" scroll="set-scroll" %}}async function signupAction() {

  //Get the details of the user from the HTML page
  var firstName = document.getElementById("firstname").value;
  var lastName = document.getElementById("lastname").value;
  var email = document.getElementById("mailid").value;

  //Create a JSON to use the details for the user sign-up
  var data = {
    first_name: firstName,
    last_name: lastName,
    email_id: email,
    platform_type: "web",
  };
  var auth = catalyst.auth;

  //The signup method will sign up the user with the specified data
  var signupresponse = await auth.signUp(data);

  if (signupresponse.status == 200) {
    //If the signup is successful, the user will be asked to check their email
    document.body.innerHTML =
      "An account verification email has been sent to your email address";
    setTimeout(function () {
      location.reload();
    }, 5000);
  } else {
    alert(signupresponse.message);
    location.reload();
  }
}

function showProfile() {
  //The catalyst.auth.isUserAuthenticated() method allows only authenticated users, i.e., the users who are logged in, to access the pages
  //You can load this method in the body of your page to allow only authenticated users to access a particular page
  catalyst.auth
    .isUserAuthenticated()
    .then((result) => {
      //If the user is logged in, these contents of the page will be displayed to the user

      var first_name = "First Name: " + result.content.first_name;
      document.getElementById("fname").innerHTML = first_name;
      var last_name = "Last Name: " + result.content.last_name;
      document.getElementById("lname").innerHTML = last_name;
      var mailid = "Email Address: " + result.content.email_id;
      document.getElementById("mailid").innerHTML = mailid;
      var tzone = "Time Zone: " + result.content.time_zone;
      document.getElementById("tzone").innerHTML = tzone;
      var created_time = " Joined On: " + result.content.created_time;
      document.getElementById("ctime").innerHTML = created_time;
      document.getElementById("profile").style.display = "block";
    })
    .catch((err) => {
      //If the user is not logged in, this will be displayed to the user and they will be redirected to the login page
      document.getElementById("profile").style.display = "block";
      document.body.innerHTML =
        "You are not logged in. Please log in to continue. Redirecting you to the login page..";
      setTimeout(function () {
        window.location.href = "index.html";
      }, 3000);
    });
}

function logout() {
  //The signOut method is used to sign the user out of the application
  var redirectURL = "/";
  catalyst.auth.signOut(redirectURL);
}

function showDiv() {
  debugger;
  document.getElementById("login").style.display = "none";
  document.getElementById("signup").style.display = "block";
  document.getElementById("buttons").style.display = "none";
}
{{% /panel_with_adjustment %}}

{{% panel_with_adjustment header="embeddediframe.css" footer="button" class="language-css line-numbers" scroll="set-scroll" %}}
@font-face {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/robotomonoregular/font.eot");
  src: url("https://webfonts.zohowebstatic.com/robotomonoregular/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.woff")
      format("woff"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.svg#RobotoMono-Regular")
      format("svg");
}

@font-face {
  font-family: "LatoLgt";
  font-weight: 300;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latolight/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latolight/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latolight/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latolight/font.woff") format("woff"),
    url("https://webfonts.zohowebstatic.com/latolight/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latolight/font.svg#Lato-Light")
      format("svg");
}
@font-face {
  font-family: "LatoReg";
  font-weight: 400;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latoregular/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latoregular/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.woff")
      format("woff"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.svg#Lato-Regular")
      format("svg");
}
@font-face {
  font-family: "LatoSB";
  font-weight: 700;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latobold/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latobold/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latobold/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latobold/font.woff") format("woff"),
    url("https://webfonts.zohowebstatic.com/latobold/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latobold/font.svg#Lato-Bold")
      format("svg");
}

@font-face {
  font-family: "LatoB";
  font-weight: 900;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latoblack/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latoblack/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.woff") format("woff"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.svg#Lato-Black")
      format("svg");
}

@font-face {
  font-family: "signinicon";
  src: url(/images/signinicon.eot);
  src: url(/images/signinicon.eot) format("embedded-opentype"),
    url(/__catalyst/auth/static-file?file_name=signinicon.woff2) format("woff2"),
    url(/__catalyst/auth/static-file?file_name=signinicon.ttf)
      format("truetype"),
    url(/__catalyst/auth/static-file?file_name=signinicon.woff) format("woff"),
    url("../images/fonts/signinicon.651f82b8f8f51f33cd0b6331f95b5b4f.svg")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "signinicon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-hide:before {
  content: "\e907";
}
.icon-show:before {
  content: "\e914";
}
.icon-backarrow:before {
  content: "\e900";
}
.icon-backup:before {
  content: "\e901";
}
.icon-support:before {
  content: "\e915";
}
body {
  font-family: "Roboto", sans-serif;
  margin: 0px;
}
.bg_one {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: url("../images/bg.49756b7c711696d95133fa95451f8e13.svg")
    transparent;
  background-size: auto 100%;
  z-index: -1;
}
.signin_container {
  display: block;
  width: 520px;
  min-height: 520px;
  background-color: #fff;
  box-shadow: 0px 2px 30px #ccc6;
  margin: auto;
  position: relative;
  z-index: 1;
  margin-top: 7%;
  overflow: hidden;
}
.mod_container {
  width: 500px;
}
.checkbox_label {
  display: inline-block;
  font-size: 14px;
  margin: 0px 6px;
  float: left;
  cursor: pointer;
  line-height: 20px;
}
.signin_box {
  width: 520px;
  min-height: 520px;
  height: auto;
  background: #fff;
  box-sizing: border-box;
  padding: 50px 50px;
  border-radius: 2px;
  transition: all 0.1s ease-in-out;
  float: left;
  overflow-y: auto;
  display: table-cell;
  border-right: 2px solid #f1f1f1;
}
.nopassword_message {
  display: table-cell;
  font-size: 14px;
  color: #222222;
  letter-spacing: 0px;
  line-height: 20px;
  height: auto;
  width: auto;
  margin-left: 10px;
  font-weight: 400;
  padding-left: 10px;
}
.portal_logo {
  display: block;
  height: 30px;
  width: auto;
  margin-bottom: 20px;
  background-size: auto 100%;
}
.pointer {
  cursor: pointer;
}
#forgotpassword {
  cursor: default;
}
#forgotpassword > a {
  cursor: pointer;
}
.text16 {
  display: block;
  text-align: center;
  margin-bottom: 30px;
  color: #626262;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.checkbox {
  float: left;
  z-index: 0;
  height: 12px;
  width: 12px;
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 2px;
  position: relative;
  top: 1.5px;
  overflow: hidden;
  background-color: #fff;
}
.show_hide_password {
  font-size: 34px;
  color: #a7a7a7;
  position: relative;
  top: -39px;
  right: 13px;
  float: right;
  cursor: pointer;
  height: 20px;
}
.pass_policy,
.pass_policy_error {
  color: #8c8c8c;
  font-size: 14px;
  padding-top: 10px;
}
.pass_policy_error {
  color: #ed7500;
  display: block;
}
.checkbox_check {
  position: absolute;
  z-index: 1;
  opacity: 0;
  left: 50px;
  margin: 0px;
  height: 16px;
  cursor: pointer;
  width: 16px;
}
.checkbox_div {
  display: none;
  height: 16px;
  width: auto;
  margin-bottom: 30px;
}
.checkbox_div {
  display: block;
}
#terminate_session_form .checkbox_mod {
  margin-top: 50px;
}
.checkbox_tick {
  display: block;
  height: 3px;
  width: 8px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  margin: 2px 1px;
}
.passexpsuccess {
  display: none;
  height: 106px;
  width: 178px;
  background: url("../images/passexpiry.db4c66debd4dd8880655f338ead6b973.png")
    no-repeat transparent;
  background-size: auto 100%;
  margin: 0px auto;
  margin-bottom: 20px;
}
.signin_head {
  display: block;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 30px;
  transition: all 0.1s ease-in-out;
}
.rightside_box {
  width: 390px;
  height: auto;
  float: right;
  box-sizing: border-box;
  padding: 40px;
  background-color: #fff;
  display: table-cell;
}
.service_name,
.backup_desc,
.pass_name {
  display: block;
  font-size: 16px;
  color: #000;
  font-weight: 400;
}
.titlename {
  display: block;
  font-size: 24px;
  color: #000;
  font-weight: 400;
  text-transform: capitalize;
  width: auto;
  margin-bottom: 20px;
}
.extramargin {
  margin-top: 10px;
}
.show_hide_password {
  font-size: 34px;
  color: #a7a7a7;
  position: relative;
  top: -39px;
  right: 13px;
  float: right;
  cursor: pointer;
  height: 20px;
}
.textbox_div {
  display: block;
  margin-bottom: 30px;
  position: relative;
}
.textbox_label {
  display: block;
  font-size: 14px;
  color: #626262;
  padding-bottom: 10px;
}
.textbox {
  display: block;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  border-radius: 2px;
  text-indent: 12px;
  font-size: 16px;
  outline: none;
  border: none;
  padding-right: 12px;
  transition: all 0.2s ease-in-out;
  background: #f1f1f1;
  border: 1px solid #e4e4e4;
}
.textbox:valid {
  border: 2px solid #f4f6f8;
}
.textindent42 {
  text-indent: 36px;
}
.textindent62 {
  text-indent: 56px;
}
.textintent52 {
  text-indent: 46px;
}
::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.errorborder:focus,
.textbox.errorborder {
  border-bottom: 2px solid #ff8484;
}
.btn {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 44px;
  border-radius: 4px;
  letter-spacing: 0.5;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  border: none;
  margin: auto;
  text-transform: uppercase;
  margin-bottom: 30px;
  transition: all 0.2s ease-in-out;
}
.signupbtn {
  width: 250px;
  margin-left: 0px;
}
.blue {
  box-shadow: 0px 2px 2px #fff;
  background-color: #159aff;
  color: #fff;
}
.grey {
  background-color: #f3f3f3;
  color: #3a3a3a;
  letter-spacing: 0px;
}
.green {
  box-shadow: 0px 2px 2px #fff;
  background-color: #00c573;
  color: #fff;
}
.blue:hover {
  box-shadow: 0px 2px 2px rgba(90, 183, 254, 0.2);
}
.changeloadbtn {
  display: block;
  height: 44px;
  width: 44px;
  border-radius: 22px;
  padding: 0px;
}
.changeloadbtn:before {
  content: "";
  height: 20px;
  width: 20px;
  display: inline-block;
  margin: 9px;
  border: 3px solid #fff;
  border-top: 3px solid #5ab7fe;
  border-radius: 50%;
  animation: spin 0.5s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.hellouser {
  margin-bottom: 30px;
}
.username {
  display: inline-block;
  max-width: 100%;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
  float: left;
}
.Notyou {
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
}
.signup_text {
  text-align: center;
  margin: 20px 0px;
  font-size: 16px;
}
.backbtn {
  display: none;
  float: left;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  position: absolute;
  padding: 0px 5px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.1s ease;
}
.zeroheight {
  width: 0px;
  height: 0px;
  overflow: hidden;
  display: block;
}
#captcha,
#bcaptcha {
  background: #fff;
  width: 60%;
  display: inline-block;
}
#captcha_img,
#bcaptcha_img {
  width: 40%;
  float: right;
  background-color: #ffffff;
  border-left: none;
}
#captcha_img img,
#bcaptcha_img img {
  height: 40px;
}
.reloadcaptcha {
  float: right;
  clear: both;
  margin-top: -37px;
  height: 30px;
  width: 30px;
  border-radius: 50px;
  background: url("../images/reload.eaef7ea18b680bc07558164c918909a6.png")
    no-repeat transparent 5px;
  background-size: 50%;
  display: inline-block;
  cursor: pointer;
}
#captcha_container {
  display: none;
}
.options {
  display: block;
  width: 100%;
  max-width: 500px;
  min-height: 80px;
  padding: 0px 50px;
  cursor: pointer;
}
.options:hover {
  background-color: #f9f9f9;
}
.option_details {
  display: inline-block;
  height: auto;
  width: 320px;
  margin-left: 15px;
}
.option_title {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.img_option {
  display: table-cell;
  height: 24px;
  width: 24px;
  color: #499aff;
  font-size: 24px;
  vertical-align: top;
}
.errorlabel {
  color: #e92b2b;
}
.fielderror {
  display: none;
  font-size: 14px;
  margin-top: 10px;
}
.fielderror a {
  text-decoration: none;
  color: #309ff4;
}
.bluetext {
  color: #309ff4;
  cursor: pointer;
}
#country_code_select {
  width: 50px;
  height: 40px;
  position: absolute;
  opacity: 0;
  display: none;
  z-index: 0;
}
.select_country_code {
  width: 50px;
  height: 40px;
  display: inline-block;
  float: left;
  position: absolute;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: black;
  display: none;
  z-index: 0;
}
.pic {
  width: 20px;
  height: 14px;
  background-size: 280px 252px;
  background-image: url("../images/Flags2x.0b8394efb0ea9167cef2465fb8f63d78.png");
  float: left;
}
.cc {
  float: right;
  color: #aeaeae;
}
.cn {
  margin-left: 10px;
}
.select2-results__option--highlighted {
  background: #f4f6f8;
}

.searchparent {
  height: auto;
}
.searchlbl {
  font-size: 10px;
  font-weight: bolder;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.cntrysearch {
  width: 380px;
  height: 32px;
  border-radius: 2px;
  font-size: 14px;
  box-sizing: border-box;
  padding: 8px 10px;
  background: #f7f7f7;
  outline: none;
  border: none;
  margin-top: 10px;
}

.select2-results__option {
  list-style-type: none;
  height: 40px;
  box-sizing: border-box;
  padding: 12px 20px;
  font-size: 14px;
  line-height: 16px;
}

.select2-search__field {
  width: 380px;
  height: 32px;
  border: none;
  outline: none;
  background: #f7f7f7;
  border-radius: 2px;
  margin: 10px 0 0 10px;
  font-size: 14px;
  padding: 10.5px 8px;
}

.select2-selection {
  display: inline-block;
  outline: none;
  /* background-color: #F4F6F8; */
  height: 40px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.selection {
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 0px;
  height: 43px;
}

#select2-combobox-results {
  padding-left: 0px;
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 400px;
  margin-top: 10px;
  margin-bottom: 0px;
  background: white;
}

.select2-container--open {
  z-index: 10;
  background: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13);
  width: auto;
  box-sizing: border-box;
}

.select2 {
  position: absolute;
  background: transparent;
  box-shadow: none;
  display: none;
  margin: 2px;
}
.select2-results__options {
  overflow-y: auto;
  max-height: 200px;
}

.selection {
  width: auto;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  margin: auto;
  display: block;
}
.select2-search--hide,
.select2-selection__clear {
  display: none;
}
#otp_container,
#enableotpoption,
#mfa_ga_container,
#mfa_otp_container,
#mfa_totp_container,
#recoverybtn,
#recovery_container,
#enableforgot,
#enablesaml,
.trustbrowser_ui,
#backup_ver_container,
#backup_container,
#enablemore,
.password_expiry_container,
.terminate_session_container {
  display: none;
}
.errorlabel {
  color: #e92b2b;
}
.fielderror {
  display: none;
  font-size: 14px;
  margin-top: 10px;
}
.field_error {
  color: #f37272;
  font-size: 14px;
  padding-top: 10px;
}
#recoverybtn,
#problemsignin,
.tryanother {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 40px;
}
.textbox_actions,
.textbox_actions_saml,
.textbox_actions_more {
  display: block;
  margin-top: 20px;
  height: 20px;
}
.bluetext_action {
  display: inline-block;
  float: left;
  font-size: 14px;
  color: #159aff;
  font-weight: 500;
  line-height: 16px;
  cursor: pointer;
}
.bluetext_action a {
  text-decoration: none;
}
.bluetext_action_right {
  float: right;
}
.textbox_actions {
  display: block;
  margin-top: 20px;
  height: 20px;
}
.Alert,
.Errormsg {
  display: block;
  margin: auto;
  height: auto;
  min-width: 200px;
  width: fit-content;
  width: -moz-fit-content;
  max-width: 600px;
  background-color: #032239;
  border-radius: 6px;
  position: fixed;
  top: -100px;
  left: 0px;
  right: 0px;
  transition: all 0.2s ease;
  padding: 0px 20px;
  z-index: 2;
}
.tick_icon,
.error_icon {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: #22c856;
  border-radius: 50%;
  background-size: 60px;
  margin: 15px;
  float: left;
}
.tick_icon:after {
  display: block;
  content: "";
  height: 5px;
  width: 9px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  margin: 7px 6px;
  box-sizing: border-box;
}

.alert_message,
.error_message {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  line-height: 18px;
  margin: 16px 0px;
  margin-right: 20px;
  max-width: 510px;
}
.error_icon {
  background-color: #ff676f;
}
.error_icon:before,
.error_icon:after {
  position: absolute;
  left: 44px;
  top: 20px;
  content: " ";
  height: 10px;
  width: 2px;
  background-color: #ffffff;
}
.error_icon:before {
  transform: rotate(45deg);
}
.error_icon:after {
  transform: rotate(-45deg);
}
.select2-results__options {
  padding-left: 0px;
}
.showcountry_code {
  width: 62px !important;
}
.textindent70 {
  text-indent: 70px;
}
.countrybox {
  width: 400px;
  height: 220px;
  overflow: auto;
}
.focusmanage {
  position: absolute;
  z-index: 10;
  width: 400px;
  height: 266px;
  box-sizing: border-box;
  padding: 10px;
  margin-top: -25px;
  background: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13);
  border-radius: 2px;
}
.recoveryhead {
  margin-bottom: 10px;
}
.nopassword_container {
  display: none;
  background: #ebf4fb;
  border: 1px solid #cbe8ff;
  border-radius: 5px;
  width: 400px;
  height: auto;
  position: absolute;
  bottom: 50px;
  box-sizing: border-box;
  padding: 20px;
}
.nopassword_icon {
  display: table-cell;
  margin: 0px;
  height: 30px;
  width: 30px;
  color: #0091ff;
  font-size: 30px;
  vertical-align: middle;
}
.mailsearch {
  width: 400px;
  height: 30px;
  padding: 0px 0px;
  border: none;
  position: absolute;
}

.bolder1 {
  font-weight: bolder;
}

#ui-id-1 {
  height: 200px;
  width: auto;
  outline: none;
  border: none;
  overflow-x: hidden;
  overflow-y: scroll;
}

.ui-menu-item-wrapper {
  overflow: auto;
}

.nonclickelem {
  color: #626262;
  pointer-events: none;
}

.trustdevicebox {
  width: 500px;
  min-height: auto !important;
}
.trustdevice {
  width: auto;
  float: left;
  margin-right: 18px;
  min-width: 100px;
  margin-bottom: 0px;
}

.loadwithbtn {
  display: inline-block;
  height: 22px;
  width: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  position: absolute;
  margin: -2px;
  box-sizing: border-box;
  border-left: 3px solid transparent;
  animation-name: rotate1;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
@keyframes rotate1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.waitbtn .waittext,
.loadbtntext {
  display: inline-block;
  text-indent: 25px;
}
#waitbtn {
  display: none;
}
.loadwithbtn:before {
  display: inline-block;
  content: "";
  height: 22px;
  width: 22px;
  border: 3px solid #ffffff30;
  border-radius: 50%;
  margin: -3px -11px;
  position: absolute;
  box-sizing: border-box;
}
.notnowbtn .loadwithbtn {
  border: 3px solid #3a3a3a;
  border-left: 3px solid transparent;
}
.trustdevice .loadwithbtn {
  display: none;
}

#recoverybtn,
#problemsignin,
.tryanother {
  display: none;
  bottom: 50px;
  width: fit-content;
  margin: 0px auto;
  cursor: pointer;
}
#recoverOption,
#verify_totp_container,
#verify_qr_container {
  display: none;
}
.backoption {
  width: 30px;
  height: 30px;
  font-size: 24px;
  display: inline-block;
  float: left;
  color: #666666;
  padding: 3px;
  box-sizing: border-box;
  margin-right: 5px;
  border-radius: 15px;
  cursor: pointer;
}
.backoption:hover {
  background: #f4f4f4;
}
.rec_head_text,
.backoption {
  display: table-cell;
}
.options,
.optionstry {
  display: table;
  width: 100%;
  height: auto;
  padding: 20px 50px;
  box-sizing: border-box;
  cursor: pointer;
}
.options:hover,
.optionstry:hover {
  background-color: #f9f9f9;
}
.option_details,
.option_details_try {
  height: auto;
  width: auto;
  padding-left: 10px;
  vertical-align: top;
  box-sizing: border-box;
}
.option_title_try {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.option_description {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: #696969;
  margin-top: 5px;
}
.img_option_try {
  margin: 12px 0px;
}
.img_option {
  font-size: 30px;
  color: #499aff;
}
.option_details {
  display: table-cell;
}
.problemsignincon,
.recoverymodes,
.addaptivetfalist,
#recoverymodeContainer {
  width: auto;
  margin: 0px -50px;
}
.line {
  background-color: #f1f1f1;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 20px;
}

/*---------------------terminate_session---------------------*/

.terminate_session_container .signin_head {
  margin-bottom: 20px;
}

#terminate_session_form .checkbox_div {
  position: relative;
  margin-bottom: 10px;
}

#terminate_session_form .checkbox_mod {
  margin-top: 30px;
}

#terminate_session_form .checkbox_check {
  left: 15px;
}

#terminate_session_form .checkbox_check:checked ~ .checkbox {
  background-color: #159aff;
  border-color: #159aff;
}

#terminate_session_form .showOneAuthLable {
  border: 1px solid #e7e7e7;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  max-width: 420px;
  height: auto;
  overflow: auto;
  margin-bottom: 0px;
}

.oneAuthLable {
  display: inline-flex;
  max-width: 420px;
  padding: 15px;
  align-items: center;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #e7e7e7;
  border-top: none;
  border-radius: 0px 0px 15px 15px;
}

.oneauth_icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background-size: 40px 40px;
}

.one_auth_icon_v2 {
  background-image: url(../images/oneAuth2.4b2a6945d5ecd70b703ba18f5f11eb68.png);
}

.oneAuthLable .text_container {
  flex: 1;
  margin: 0px 10px;
}

.oneAuthLable .text_header {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}

.oneAuthLable .text_desc {
  font-size: 10px;
  line-height: 14px;
}

.oneAuthLable .togglebtn_div {
  height: 16px;
  padding: 4px;
  width: 30px;
  display: inline-block;
  position: relative;
}

.oneAuthLable .real_togglebtn {
  cursor: pointer;
  display: inline-block;
  position: relative;
  height: 16px;
  width: 30px;
  z-index: 1;
  opacity: 0;
  position: absolute;
  margin: 0px;
}

.real_togglebtn:checked ~ .togglebase {
  background-color: #10bc83;
}

.real_togglebtn:checked ~ .togglebase .toggle_circle {
  left: 16px;
}

.oneAuthLable .togglebase {
  height: 16px;
  width: 30px;
  display: inline-block;
  background: #ccc;
  border-radius: 10px;
  position: absolute;
}

.oneAuthLable .toggle_circle {
  transition: all 0.2s ease-in-out;
  height: 12px;
  width: 12px;
  background-color: #fff;
  border-radius: 10px;
  display: inline-block;
  position: absolute;
  left: 2px;
  top: 2px;
  box-shadow: 0px 0px 5px #999;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
  not all,
  not all,
  not all,
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  .google_icon {
    background-color: #fff;
    box-shadow: 0px 0px 2px #00000012, 0px 2px 2px #00000024;
  }
  .google_icon .fed_icon {
    background: url("../images/signin_icons@2x.c0c72f3600a6f5ec03c9119d5a7d0518.png")
      no-repeat transparent;
    background-size: 205px auto;
    background-position: -10px -10px;
  }
  .MS_icon {
    background-color: #2f2f2f;
  }
  .MS_icon .fed_icon {
    background: url("../images/signin_icons@2x.c0c72f3600a6f5ec03c9119d5a7d0518.png")
      no-repeat transparent;
    background-size: 205px auto;
    background-position: -38px -10px;
  }
  .linkedin_fed_box {
    background-color: #0966c2;
  }
  .linkedin_fed_box .fed_icon {
    background: url("../images/signin_icons@2x.c0c72f3600a6f5ec03c9119d5a7d0518.png")
      no-repeat transparent;
    background-size: 205px auto;
    background-position: -67px -11px;
  }
  .large_box .linked_fed_icon {
    background-position: -9px -174px;
  }
  .fb_fed_box {
    background-color: #1877f2;
  }
  .fb_fed_box .fed_icon {
    background: url("../images/signin_icons@2x.c0c72f3600a6f5ec03c9119d5a7d0518.png")
      no-repeat transparent;
    background-size: 205px auto;
    background-position: -94px -10px;
  }
  .zoho_icon {
    background: url(../images/signin_icons@2x.c0c72f3600a6f5ec03c9119d5a7d0518.png)
      no-repeat transparent;
    background-size: 205px auto;
    background-position: -152px -174px;
  }
}

@media only screen and (max-width: 600px) {
  body {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }
  .nopassword_container {
    width: calc(100% - 60px);
    padding: 10px;
    box-sizing: border-box;
  }
  .signin_container {
    width: 100%;
    box-shadow: none;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    margin-top: 40px;
    height: auto;
    overflow: hidden;
  }
  .signin_box {
    width: 100%;
    padding: 0px 30px;
    height: auto;
    border-right: none;
  }
  #captcha_img,
  #captcha,
  #bcaptcha_img,
  #bcaptcha {
    border: 2px solid #f4f6f8;
    border-radius: 2px;
    text-indent: 3px;
    width: 50%;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .textbox,
  #verify_totp {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #f4f6f8;
    text-indent: 0px;
    border-radius: 0px;
  }
  .textbox:focus,
  #verify_totp {
    border: none;
    border-bottom: 2px solid #159aff;
  }

  .errorborder:focus,
  .textbox.errorborder {
    border-bottom: 2px solid #ff8484;
  }
  .backoption {
    margin-bottom: 10px;
  }
  .img_option {
    margin: 0px 10px 0px 0px !important;
  }
  .bg_one,
  .line {
    display: none;
  }
  .signin_head {
    margin-bottom: 30px;
  }
  .btn {
    margin-top: 10px;
    border-radius: 4px;
  }
  .changeloadbtn {
    border-radius: 22px;
  }
  .more {
    margin-right: 0px !important;
  }
  .textindent42 {
    text-indent: 36px;
  }
  .textindent62 {
    text-indent: 56px;
  }
  .textintent52 {
    text-indent: 46px;
  }
  .select2-selection {
    background-color: #f1f9ff;
  }
  .devices .select2-selection {
    background-color: #f1f9ff;
  }
  .select2-search__field {
    width: 280px;
  }
  .applynormal {
    width: 46% !important;
    min-width: 0px;
  }
  .borderless,
  .borderlesstry {
    line-height: 12px;
    font-size: 14px;
  }
  .alert_message,
  .error_message {
    max-width: 300px;
    width: 75%;
  }
  .Alert,
  .Errormsg {
    max-width: 400px !important;
    padding: 0px;
    min-width: 300px;
  }
  .error_icon:before,
  .error_icon:after {
    left: 24px;
  }
  ::placeholder {
    font-weight: 500;
  }
  .mobilehide {
    display: none !important;
  }
  #forgotpassword {
    margin-bottom: 0px;
  }
  #forgotpassword a {
    display: inline-block;
  }
  .fielderror {
    position: absolute;
    margin-top: 5px;
  }
  .trustdevicebox {
    width: auto;
    height: auto;
  }
  #recoverybtn,
  #problemsignin,
  .tryanother {
    position: initial !important;
    margin-top: 70px !important;
  }
  .problemsignincon,
  .recoverymodes,
  #recoverymodeContainer {
    width: 100%;
    margin-left: 0px;
  }
}
.hover-tool-tip {
  position: absolute;
  top: 15px;
  left: 335px;
  background: #fff;
  padding: 20px;
  box-shadow: 0px 0px 10px #0000001a;
  transition: opacity 0.1s;
  border-radius: 5px;
  z-index: 9;
  opacity: 0;
}
.hover-tool-tip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -8px;
  top: 25px;
  left: 0;
  box-sizing: border-box;
  border: 6px solid black;
  border-color: #ffffff transparent transparent #ffffff;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  box-shadow: -6px -6px 10px 0 #0000001a;
}
.hover-tool-tip.no-arrow::after {
  content: none;
}
.hover-tool-tip ul {
  padding: 0;
  margin: 0px 0px 0px 15px;
  list-style: none;
}
.hover-tool-tip p {
  margin: 0px 0px 10px 0px;
  font-size: 14px;
  font-weight: 500;
}
.hover-tool-tip ul li {
  font-size: 12px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: 25px;
}
.hover-tool-tip ul li.success::before {
  background-color: #0dbc83;
}
.hover-tool-tip ul li::before {
  content: "";
  margin-right: 10px;
  background-color: red;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.titlename,
.service_name {
  display: none !important;
}

.signin_head {
  padding-top: 20px;
}

#login_id {
  text-indent: 0 !important;
}

.showcountry_code {
  display: none !important;
}
{{% /panel_with_adjustment %}}

{{% panel_with_adjustment header="fpwd.css" footer="button" class="language-css line-numbers" scroll="set-scroll" %}}
/*$Id$*/

@font-face {
    font-family:"Roboto Mono";
    font-weight:400;
    font-style:normal;
    src:url("https://webfonts.zohowebstatic.com/robotomonoregular/font.eot");
    src:url("https://webfonts.zohowebstatic.com/robotomonoregular/font.eot?#iefix") format("eot"),
        url("https://webfonts.zohowebstatic.com/robotomonoregular/font.woff2") format("woff2"),
        url("https://webfonts.zohowebstatic.com/robotomonoregular/font.woff") format("woff"),
        url("https://webfonts.zohowebstatic.com/robotomonoregular/font.ttf") format("truetype"),
        url("https://webfonts.zohowebstatic.com/robotomonoregular/font.svg#RobotoMono-Regular") format("svg");}
  
    @font-face {
      font-family: "LatoLgt";
      font-weight: 300;
      font-style: normal;
      src: url("https://webfonts.zohowebstatic.com/latolight/font.eot");
      src: url("https://webfonts.zohowebstatic.com/latolight/font.eot?#iefix")
          format("eot"),
        url("https://webfonts.zohowebstatic.com/latolight/font.woff2")
          format("woff2"),
        url("https://webfonts.zohowebstatic.com/latolight/font.woff") format("woff"),
        url("https://webfonts.zohowebstatic.com/latolight/font.ttf")
          format("truetype"),
        url("https://webfonts.zohowebstatic.com/latolight/font.svg#Lato-Light")
          format("svg");
    }
    @font-face {
      font-family: "LatoReg";
      font-weight: 400;
      font-style: normal;
      src: url("https://webfonts.zohowebstatic.com/latoregular/font.eot");
      src: url("https://webfonts.zohowebstatic.com/latoregular/font.eot?#iefix")
          format("eot"),
        url("https://webfonts.zohowebstatic.com/latoregular/font.woff2")
          format("woff2"),
        url("https://webfonts.zohowebstatic.com/latoregular/font.woff")
          format("woff"),
        url("https://webfonts.zohowebstatic.com/latoregular/font.ttf")
          format("truetype"),
        url("https://webfonts.zohowebstatic.com/latoregular/font.svg#Lato-Regular")
          format("svg");
    }
    @font-face {
      font-family: "LatoSB";
      font-weight: 700;
      font-style: normal;
      src: url("https://webfonts.zohowebstatic.com/latobold/font.eot");
      src: url("https://webfonts.zohowebstatic.com/latobold/font.eot?#iefix")
          format("eot"),
        url("https://webfonts.zohowebstatic.com/latobold/font.woff2")
          format("woff2"),
        url("https://webfonts.zohowebstatic.com/latobold/font.woff") format("woff"),
        url("https://webfonts.zohowebstatic.com/latobold/font.ttf")
          format("truetype"),
        url("https://webfonts.zohowebstatic.com/latobold/font.svg#Lato-Bold")
          format("svg");
    }
  
    @font-face {
      font-family: "LatoB";
      font-weight: 900;
      font-style: normal;
      src: url("https://webfonts.zohowebstatic.com/latoblack/font.eot");
      src: url("https://webfonts.zohowebstatic.com/latoblack/font.eot?#iefix")
          format("eot"),
        url("https://webfonts.zohowebstatic.com/latoblack/font.woff2")
          format("woff2"),
        url("https://webfonts.zohowebstatic.com/latoblack/font.woff") format("woff"),
        url("https://webfonts.zohowebstatic.com/latoblack/font.ttf")
          format("truetype"),
        url("https://webfonts.zohowebstatic.com/latoblack/font.svg#Lato-Black")
          format("svg");
    }
  
  
  @font-face {
    font-family: "signinicon";
    src: url(/images/signinicon.eot);
    src: url(/images/signinicon.eot)
        format("embedded-opentype"),
      url(/__catalyst/auth/static-file?file_name=signinicon.woff2)
        format("woff2"),
      url(/__catalyst/auth/static-file?file_name=signinicon.ttf)
        format("truetype"),
      url(/__catalyst/auth/static-file?file_name=signinicon.woff)
        format("woff"),
      url("../images/fonts/signinicon.651f82b8f8f51f33cd0b6331f95b5b4f.svg")
        format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'signinicon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-device:before {
    content: "\e90a";
  }
  .icon-reload:before {
    content: "\e912";
  }
  .icon-backarrow:before {
    content: "\e900";
  }
  .icon-email:before {
    content: "\e904";
  }
  .icon-hide:before {
    content: "\e907";
  }
  .icon-otp:before {
    content: "\e90c";
  }
  .icon-show:before {
    content: "\e914";
  }
  
  /*$Id$*/
  
  body 
  {
      margin: 0px;
  }
  
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color:#0003;
  }
  
  .bg_one 
  {
      display: block;
      position: fixed;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
      background: url('../images/bg.49756b7c711696d95133fa95451f8e13.svg') transparent;
      background-size: auto 100%;
      z-index: -1;
  }
  
  .titlename {
      display: block;
      font-size: 24px;
      color: #000;
      font-weight: 400;
      text-transform: capitalize;
      width: auto;
      margin-bottom: 20px;
  }
  
  .Alert,.Errormsg
  {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      height: auto;
      min-width: 200px;
      width: fit-content;
      width: -moz-fit-content;
      max-width:600px;
      background-color: #032239;
      border-radius: 6px;
      position: fixed;
      top: -100px;
      left: 0px;
      right: 0px;
      transition: all .2s ease;
      padding: 0px 20px;
      z-index:2;
  }
  
  .tick_icon,.error_icon
  {
      display: inline-block;
      height: 20px;
      width: 20px;
      background-color: #22C856;
      border-radius: 50%;
      background-size: 60px;
      margin: 0px 15px;
      float: left;
      position: relative;
  }
  
  .tick_icon:after
  {
      display: block;
      content: "";
      height: 5px;
      width: 9px;
      border-bottom: 2px solid #fff;
      border-left: 2px solid #fff;
      transform: rotate(-45deg);
      margin: 7px 6px;
      box-sizing: border-box;
  }
  
  .alert_message,.error_message
  {
      display: inline-block;
      font-size: 14px;
      color: #fff;
      line-height: 18px;
      margin: 16px 0px;
      margin-right: 20px;
      max-width: 510px;
  }
  
  .error_icon
  {
      background-color: #FF676F;	
  }
  .error_icon:before, .error_icon:after 
  {
      position: absolute;
      left: 9px;
      top: 5px;
      content: ' ';
      height: 10px;
      width: 2px;
      background-color: #FFFFFF;
  }
  .error_icon:before 
  {
    transform: rotate(45deg);
  }
  .error_icon:after 
  {
    transform: rotate(-45deg);
  }
  
  .loader
  {
      width: 36px;
      height: 36px;
      border: 4px solid #EF7320;
      border-bottom: 4px solid transparent;
      border-radius: 50%;
      display: block;
      box-sizing: border-box;
      animation: rotate 1s linear infinite;
      position: absolute;
      top: 0px;
      z-index: 7;
      bottom: 0px;
      left: 0px;
      right: 0px;
      margin: auto;
  }
  
  @keyframes rotate 
  {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  
  .blur
  {
      top: 0px;
      left: 0px;
      bottom: 0px;
      background: #fff;
      width: 100%;
      height: auto;
      margin: auto;
      position: absolute;
      z-index: 3;
      opacity: 0.9;
      display:block;
  }
  
  .bold_font
  {
      font-weight: 500;
  }
  
  .searchparent 
  {
      height: auto;
  }
  
  .textbox_div {
      display: block;
      margin-bottom: 30px;
      position: relative;
  }
  
  #confirm_otp_container .textbox_div{
      margin-bottom: 40px;
  }
  .textbox {
      display: block;
      width: 100%;
      height: 44px;
      box-sizing: border-box;
      border-radius: 2px;
      text-indent: 12px;
      font-size: 16px;
      outline: none;
      border: none;
      padding-right: 12px;
      transition: all .2s ease-in-out;
      background: #F9F9F9;
      border: 1px solid #DDDDDD;
  }
  
  .textbox:focus {
      border: none;
      border-bottom: 2px solid #EF7320;
  }
  
  
  #last_password {
      padding-right: 40px;
  }
  
  ::-webkit-credentials-auto-fill-button 
  {
      visibility: hidden;
      pointer-events: none;
      position: absolute;
      right: 0px;
  }
  input[type="text"],input[type="password"],input[type="email"],input[type="number"] 
  {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }
  .errorborder 
  {
      border-bottom: 2px solid #ff8484 !important;
  }
  
  .textbox:-webkit-autofill,.textbox:-webkit-autofill:hover, .textbox:-webkit-autofill:focus,.textbox:-webkit-autofill:active
  {
      -webkit-box-shadow: inset 0 0 0px 9999px #F9F9F9;
      -webkit-text-fill-color: black;
      background-color: #F9F9F9 !important;
  }
  
  .fielderror
  {
      display:none;
      font-size: 14px;
      margin-top: 5px;
  }
  
  .fielderror a 
  {
      text-decoration: none;
      color: #309FF4;
  }
  
  #captcha_container
  {
      display: none;
      border: 1px solid #DDDDDD;
      width: 250px;
      padding: 10px;
      box-sizing: border-box;
      margin-top: 10px;
      border-radius: 4px;
  }
  
  #captcha
  {
      width: 100%;
      display: inline-block;
      height: 40px;
      padding: 0px 12px;
      text-indent: 0px;
      background: #F9F9F9;
  }
  
  #captcha_img
  {
      background-color: #FFFFFF;
      border: none;
      height: 60px;
      width: 150px;
      margin-left: 20px;
  }
  
  #captcha_img img
  {
      height: 50px;
      width: 150px;
      box-sizing: border-box;
      margin: 0px;
  }
  
  .reloadcaptcha
  {
      height: 30px;
      width: 30px;
      border-radius: 50%;
      display: inline-block;
      cursor: pointer;
      position: absolute;
      right: 20px;
      top: 20px;
      background-color: #F2F2F2;
      font-size: 30px;
      box-sizing: border-box;
      color: #0006;
  }
  
  .reloadcaptcha:hover
  {
      color:#000000b3;
  }
  
  .load_captcha_btn{
      animation: spin 0.5s linear infinite;
  }
  
  #Last_password_div .head_info
  {
      margin:0px;
  }
  
  .zeroheight{
      width:0px;
      height:0px;
      overflow: hidden;
      display: block;
  }
  
  .btn 
  {
      cursor: pointer;
      display: block;
      width: 100%;
      height: 44px;
      border-radius: 4px;
      letter-spacing: .5;
      font-size: 14px;
      font-weight: 600;
      outline: none;
      border: none;
      margin: auto;
      text-transform: uppercase;
      margin-bottom: 30px;
      transition: width .2s ease-in-out;
      transform: translate(0, -20px)
  }
  #nextbtn{
      margin-top: 40px !important;
  }
  #last_pwd_submit{
      margin-top: 40px;
  }
  
  #dont_remember {
      margin-top:-40px;
  }
  .rec_modes_contact_support{
      margin-top:-35px;
  }
  #reset_password_submit{
    margin-top:35px;
  }
  
  user agent stylesheet
  div {
      display: block;
      unicode-bidi: isolate;
  }
  style attribute {
      visibility: visible;
  }
  body {
      font-family: 'ZohoPuvi', Georgia;
      font-weight: 400;
  }
  @media only screen and (max-width: 600px) {
      body {
          -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      }
  }
  .blue 
  {
      background-color:#EF7320;
      color: #fff;
  }
  
  .grey 
  {
      background-color: #F3F3F3;
      color: #3a3a3a;
      letter-spacing: 0px;
  }
  
  .green 
  {
      box-shadow: 0px 2px 2px #fff;
      background-color: #00C573;
      color: #fff;
  }
  
  .blue:hover 
  {
      background: #EF7320;
  }
  
  .changeloadbtn 
  {
      display: block;
      height: 44px;
      width: 44px;
      border-radius: 22px;
      padding: 0px;
  }
  
  .changeloadbtn:before 
  {
      content: "";
      height: 20px;
      width: 20px;
      display: inline-block;
      margin: 9px;
      border: 3px solid #fff;
      border-top: 3px solid #5AB7FE;
      border-radius: 50%;
      animation: spin .5s linear infinite;
  }
  
  @keyframes spin 
  {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  
  .doneBtn
  {
      position:relative;
  }
  
  .doneBtn:before
  {
      content: '';
      opacity: 1;
      height: 15px;
      width: 6px;
      border: unset;
      border-radius: unset;
      transform-origin: left top;
      border-right: 3px solid #fff;
      border-top: 3px solid #fff;
      left: 12px;
      top: 23px;
      margin: 0px;
      position: absolute;
      transform: scaleX(-1) rotate(135deg);
      animation:tickmark .8s ease;
  }
  
  @keyframes tickmark {
    0% {
      height: 0px;
      width: 0px;
      border-radius: unset;
      opacity: 1;
    }
    20% {
      height: 0px;
      width: 6px;
      opacity: 1;
      border-radius: unset;
    }
    40% {
      height: 15px;
      width: 6px;
      opacity: 1;
      border-radius: unset;
    }
    100% {
      height: 15px;
      width: 6px;
      opacity: 1;
      border-radius: unset;
    }
  }
  
  .doneWithContent span:before
  {
      content: '';
      opacity: 1;
      height: 14px;
      width: 5px;
      border: unset;
      border-radius: unset;
      transform-origin: left top;
      border-right: 3px solid #fff;
      border-top: 3px solid #fff;
      display: inline-block;
      margin: 0px;
      position: relative;
      transform: scaleX(-1) rotate(135deg);
      top: 12px;
      left: -21px;
  }
  .doneWithContent {
      padding-left: 21px;
      position:relative;
  }
  .doneWithContent:after
  {
      position: absolute;
      height: 100%;
      content: "";
      display: block;
      left: 0px;
      top: 0px;
      background: #00000008;
      animation-name: btn_loading;
      animation-duration: 4.3s;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      
  }
  .restrict_icon {
      display: block;
      height: 102px;
      width: 100%;
      background: url(../images/URLError.76c2ce33de912ad7ae9d2fbfd93ec2c1.png) no-repeat transparent;
      background-size: auto 100%;
      margin: auto;
      margin-top: 30px;
      background-position: center;
  }
  .error_portion
  {
      display:none;
  }
  .error_content
  {
      text-align:center;
  }
  .error_content .error_header
  {
      font-size: 20px;
      font-weight: 500;
      margin-top: 30px;
      line-height: 26px;
  }
  .error_content .error_desc
  {
      font-size: 16px;
      margin: 10px 0px 30px 0px;
      line-height: 24px;
      font-weight: 500;
      color: #000000cc;
  }
  .retry_button
  {
      line-height:44px;
  }
  .doneWithContent:hover
  {
      background:#EF7320;
  }
  
  .doneWithContent span
  {
      width: 100%;
      display: block;
      transition: width .2s ease-in-out;
      white-space: nowrap;
  }
  @keyframes btn_loading {
    0%   {width:0%;}
    100% {width: 100%;}
  }
  
  .resend_label
  {
      display:block;
      text-align:center;
  }
  .push_resend
  {
      font-size: 14px;
      color: #626262;
      font-weight: 500;
      line-height: 16px;
      cursor: none;
  }
  
  .bottom_option
  {	
      cursor: pointer;
      width: max-content;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      color: #EF7320;
      /* transform: translate(10px, 58px); */
  }
  
  .bottom_line_opt
  {
      width: 100%;
      display: flex;
      justify-content: center;
      position: absolute;
      left: 0px;
      /* bottom:20%; */
  }
  
  .errorlabel 
  {
      color: #E92B2B;
  }
  
  .show_hide_password
  {
      font-size: 24px;
      color: #00000066;
      position: relative;
      top: -34px;
      right: 13px;
      float: right;
      cursor: pointer;
      line-height: 23px;
  }
  .show_hide_password:hover {
      color: #000000b3;
  }
  
  .select2-results__option {
      list-style-type: none;
      height: 40px;
      box-sizing: border-box;
      padding: 12px 20px;
      font-size: 14px;
      line-height: 16px;
  }
  
  .select2-search__field {
      width: 380px;
      height: 32px;
      border: none;
      outline: none;
      background: #F7F7F7;
      border-radius: 2px;
      margin: 10px 8px;
      font-size: 14px;
      padding: 10.5px 8px;
  }
  
  .select2-selection {
      display: inline-block;
      outline: none;
      background-color: #F9F9F9;
      height: 40px;
      text-align: center;
      padding: 10px;
      box-sizing: border-box;
      cursor: pointer;
  }
  
  .selection {
      transition: all .2s ease-in-out;
      -webkit-user-select: none;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      width: 0px;
      height: 43px;
  }
  
  #select2-combobox-results {
      padding-left: 0px;
      max-height: 200px;
      overflow-y: scroll;
      overflow-x: hidden;
      width: 400px;
      margin-top: 10px;
      margin-bottom: 0px;
      background: white;
  }
  
  .select2-container--open {
      z-index: 10;
      background: #FFFFFF;
      box-shadow: 0px 5px 8px 2px #0000000d;
      width: auto;
      box-sizing: border-box;
  }
  
  .select2 {
      position: absolute;
      background: transparent;
      box-shadow: none;
      display:none;
      margin: 2px;
  }
  .select2-results__options{
      overflow-y: auto;
      max-height: 200px;	
  }
  
  .selection{
      width:auto;
      width:-moz-fit-content;
      width:-webkit-fit-content;
      margin: auto;
      display: block;
  }
  .select2-search--hide,.select2-selection__clear {
      display: none;
  }
  
  #country_code_select {
      width: 50px;
      height: 40px;
      position: absolute;
      opacity: 0;
      display: none;
      z-index: 0;
  }
  .select_country_code{
      width: 50px;
      height: 40px;
      display: inline-block;
      float: left;
      position: absolute;
      line-height: 39px;
      text-align: center;
      font-size: 16px;
      color: black;
      display: none;
      z-index: 0;
  }
  
  .pic {
      width: 20px;
      height: 14px;
      background-size: 280px 252px;
      background-image: url("../images/Flags2x.0b8394efb0ea9167cef2465fb8f63d78.png");
      float: left;
  }
  .cc {
      float: right;
      color: #AEAEAE;
  }
  .cn {
      margin-left: 10px;
  }
  .select2-results__option--highlighted {
      background: #F4F6F8;
  }
  
  .searchparent {
      height: auto;
  }
  
  .select2-results__options{padding-left:0px;}
  
  .optionstry
  {
      display: table;
      width: 100%;
      height: auto;
      padding: 20px 50px;
      box-sizing: border-box;
      cursor: pointer;
  }
  
  .optionstry:hover
  {
      background-color: #F9F9F9;
  }
  
  .img_option_try
  {
      margin:12px 0px;    
  }
  
  .img_option
  {
      display: table-cell;
      width: 30px;
      color: #499aff;
      font-size: 30px;
      vertical-align: top;
      height: 30px;
  }
  
  .option_details_try
  {
      height: auto;
      width: auto;
      padding-left: 12px;
      vertical-align: top;
      box-sizing: border-box;
  }
  
  .option_title_try
  {
      display: block;
      font-size: 16px;
      font-weight: 500;
  }
  
  .option_description
  {
      display: block;
      font-size: 13px;
      line-height: 20px;
      color: #000c;
      margin-top: 5px;
  }
  
  #email_confirm_div .optionstry,#mobile_confirm_div .optionstry
  {
      padding: 22px 40px;
  }
  
  #email_confirm_div .img_option,#mobile_confirm_div .img_option
  {
      font-size: 20px;
      width: 20px;
      height: 20px;
  }
  #email_confirm_div .option_details_try,#mobile_confirm_div .option_details_try
  {
      line-height: 20px;
  }
  
  .otp_container::after,.mini_txtbox:after
  {
      content:attr(placeholder);
      height: 54px;
      line-height: 54px;
      position: absolute;
      color: #B9BCBE;
      left: 15px;
      top: 0px;
      z-index: 1;
  }
  
  .mini_txtbox:after{line-height: 42px;height:42px;}
  
  .hidePlaceHolder::after{
      z-index: -1 !important;
  }
  
  .otp_verify
  {
      margin-top: 10px;
  }
  
  .toggle_active 
  {
      background: #F9F9F9;
      border-radius: 2px;
  }
  
  .optionmod 
  {
      margin-left: 0px;
      box-sizing: border-box;
  }
  
  .option_title_try
  {
      color: #000000;
  }
  
  .mini_btn
  {
      margin-left: 10px;
      width: 30%;
      float: right;
      font-size: 12px;
      margin-bottom: 0px;
      margin-right: 0px;
  }
  
  .backoption
  {
      width: 30px;
      height: 30px;
      font-size: 21px;
      display: inline-block;
      float: left;
      color:#666666;
      padding: 4px 0px;
      box-sizing: border-box;
      margin-right: 5px;
      border-radius: 15px;
      cursor: pointer;
      font-weight: 500;
      text-align: center;
  }
  .backoption:hover
  {
      background: #f4f4f4;	
  }
  
  #select_reocvery_mobile .fieldcontainer, #other_options_div .fieldcontainer, #select_reocvery_email .fieldcontainer
  {
      width: auto;
      margin: 0 -40px;
      margin-bottom: 40px;
  }
  
  .text16
  {
      display: block;
      text-align: center;
      margin-bottom: 30px;
      color: #626262;
      font-size: 16px;
      font-weight:500;
      text-decoration: none;
  }
  
  .pointer 
  {
      cursor: pointer;
  }
  
  .pass_policy
  {
      color: #8c8c8c;
      font-size: 14px;
      padding-top: 10px;
  }
  
  .nomargin 
  {
      display: block;
      margin: 0px;
  }
  
  .tryanother, .extra_options
  {
      width: fit-content;
      margin: 0 auto;
      cursor: pointer;
      margin-top: 20px;
  }
  
  
  .bluetext_action 
  {
      display: inline-block;
      font-size: 14px;
      color: #EF7320;
      font-weight:500;
      line-height: 16px;
      cursor: pointer;
      margin-top: 5px;
  }
  
  .nonclickelem
  {
      color: #626262;
      pointer-events: none;
      cursor:none;
  }
  
  .bluetext_action a
  {
      text-decoration: none;
  }
  
  
  
  .recovery_container 
  {
      display: block;
      width: 350px;
      min-height: 350px;
      background-color: #fff;
      box-shadow: 0px 2px 30px 0px #2b2b2b17;
      margin: auto;
      position: relative;
      z-index: 1;
      /* margin-top: 7%; */
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 40%, rgba(240, 242, 255, 0.18) 80%);
       box-shadow: 3.9769999980926514px 3.9769999980926514px 34.79999923706055px rgba(0, 0, 0, 0.15)
  }
  
  .recovery_box 
  {
      width: 480px;
      min-height: 500px;
      height: auto;
      background: #fff;
      box-sizing: border-box;
      padding: 40px 40px;
      border-radius: 2px;
      transition: all .1s ease-in-out;
      float: left;
      overflow-y: auto;
      display: table-cell;
      border-right: 2px solid #f1f1f1;
      
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 40%, rgba(240, 242, 255, 0.18) 80%);
  }
  
  .menuicon 
  {
      display: inline-block;
      float: left;
      height: 14px;
      width: 14px;
      padding: 14px;
      font-size: 14px;
      text-align:center;
  }
  
  .user_info
  {
      display: inline-flex;
      justify-content: space-between;
      border: 1px solid #EEEEEE;
      margin-bottom: 20px;
      border-radius: 7px;
      cursor: pointer;
      box-sizing: border-box;
      max-width: 100%;
      flex-wrap: nowrap;
  }
  
  .user_info_space
  {
      margin-top: 20px;
  }
  
  .support_temp_info
  {
      margin-bottom: 30px;
      line-height:24px;
  }
  
  .menutext 
  {
      display: inline-block;
      font-size: 16px;
      padding: 12px 14px;
      line-height: 20px;
      width: auto;
      word-break: break-all;
  }
  
  .fieldcontainer
  {
      margin-bottom: 40px;
  }
  
  .change_user
  {
      position: relative;
      float: right;
      font-size: 14px;
      padding: 0px 14px 0px 0px;
      display: inline-block;
      color: #EF7320;
      line-height: 38px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .info_head 
  {
      display: block;
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 20px;
      line-height: 30px;
      overflow: auto;
      transition: all .1s ease-in-out;
  }
  
  .info_head #headtitle
  {
      display:block;
      padding-top: 40px !important;
  }
  .head_info 
  {
      font-size: 16px;
      margin: 10px 0px 0px 0px;
      line-height: 24px;
      font-weight: 400;
      color: #000000e6;
  
  }
  
  .user_info_space+.head_info
  {
      margin:0px
  }
  
  .otp_container
  {
      display: block;
      width: 100%;
      height: 54px;
      box-sizing: border-box;
      border-radius: 2px;
      font-size: 16px;
      outline: none;
      padding: 0px 15px;
      transition: all .2s ease-in-out;
      background: #F9F9F9;
      border: 1px solid #DDDDDD;
      text-indent: 0px;
  }
  
  .customOtp
  {
      border: none;
      outline: none;
      background: transparent;
      height: 100%;
      font-size: 16px;
      text-align: left;
      width: 22px;
      padding:0px;
  }
  .textindent42 
  {
      text-indent: 46px;
  }
  .textindent62 
  {
      text-indent: 56px;
  }
  .textintent52 
  {
      text-indent: 51px;
  }
  
  
  .box_header_load
  {
      display: block;
      height: auto;
      padding: 50px 0px;
      -webkit-animation-name: blink; /* Safari 4.0 - 8.0 */
      -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
      animation-name: blink;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function:linear;
      opacity: .05;
  }
  
  .box_head_load
  {
      display: block;
      width: 180px;
      height: 18px;
      border-radius: 8px;
      background-color: #000;
  }
  
  .blink_btn
  {
      -webkit-animation-name: blink; /* Safari 4.0 - 8.0 */
      -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
      animation-name: blink;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function:linear;
      opacity: .05;
  }
  .box_define_load
  {
      display: block;
      max-width: 800px;
      width: 100%;
      height: 16px;
      border-radius: 8px;
      background-color: #000;
      margin-top: 20px;
  }
  
  @keyframes blink
  {
      0%
      {
          opacity: .08;
      }
      50%
      {
          opacity: .01;
      }
      100%
      {
          opacity: .08;
      }
  }
  
  
   
  #loading_div, #Last_password_div, #mobile_confirm_div, #email_confirm_div, #confirm_otp_div, #other_options_div, #contact_support_div, #change_password_div, #recovery_device_div, #password_matched_div, #username_div, #terminate_session_div
  {
      display:none;
  }
  
  #multiple_reocvery_mobile, #single_reocvery_mobile, #multiple_reocvery_email, #single_reocvery_email
  {
          display:none;
  }
  
  .verify_mob_container, .verify_email_container, .select_device_othermodes
  {
      display:none;
  }
  
  .devices
  {
      position: relative; 
      padding: 0px;
      width: fit-content !important;
      width: -moz-fit-content !important;
      width: -webkit-fit-content !important;
      margin: auto;
      border-radius: 8px;
      box-sizing: border-box;
      margin-bottom: 30px;
      background: #FCFCFC;
  }
  .device_title {
      position: absolute;
      top: 12px;
      left: 48px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      color: #000000b3;
      line-height:14px;
      z-index:11;
  }
  .select2-container--device_select {
      margin: 0px;
      display: block;
      position: relative;
      margin: auto;
      cursor: pointer;
      border: 1px solid #DDDDDD;
      border-radius: 8px;
      overflow: hidden;
  }
  #recovery_device_select+.select2-container
  {
      width: fit-content !important;
      width: -moz-fit-content !important;
      width: -webkit-fit-content !important;
  }
  .select2-container--device_select .select2-selection__arrow{
      position: absolute;
      top: 0px;
      right: 14px;
      width: auto;
      height: 100%;
  }
  .select2-container--device_select .select2-selection__arrow b
  {
      border-color: transparent #00000066 #00000066 transparent;
      border-style: solid;
      transform: rotate(45deg);
      border-width: 2px;
      height: 4px;
      width: 4px;
      position: relative;
      border-radius: 1px;
      display: inline-block;
      top: 24px;
  }
  
  .select2-container--device_select .selection {
      margin: auto;
      height: 60px;
      box-sizing: border-box;
      min-width: 140px;
  }
  .select2-container--device_select .select2-selection
  {
      height: unset;
      padding: 12px 34px 12px 14px;
  }
  .select2-container--device_select .select_con
  {
      font-weight: 400;
      margin-left: 12px;
      margin-top: 16px;
  }
  .select2-container--device_select .select_icon
  {
      margin-top: 7px;
  }
  
  .select2-results__options
  {
      margin: 0px;
  }
  
  .select2-results__options .select_con
  {
      margin:0px;
  }
  
  .select2-dropdown .select_con{
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  .hideArrow .select2-selection
  {
      cursor: default;
      padding: 12px 14px;
  }
  .hideArrow .select2-selection__arrow
  {
      display: none;
  }
  .secondary_devices
  {
      display: none;
      width: 150px;
      margin: auto;
      padding: 8px 18px;
      border-radius: 18px;
      background-color: #F4F6F8;
      border: none;
      overflow: hidden;
      max-width: 200px;
      text-overflow: ellipsis;
      font-size: 16px;
      outline: none;
  }
  
  .secondary_devices .select2-container--open 
  {
      width: 200px;
  }
  
  .device_select
  {
      display: block;
      position: unset;
      width: auto !important;
  }
  
  .device_selection
  {
      padding: 8px 14px; border-radius: 18px;
  }
  
  .deviceparent
  {
      text-align: center;
      display: none;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
  }
  
  .deviceparent
  {
      display: block;
  }
  
  .deviceinfo
  {
      display: inline-block;
  }
  
  .devicetext
  {
      margin: 0 auto;
      margin-left: 30px;
  }
  
  .select_icon
  {
      float:left;font-size: 20;color: #499aff;
  }
  
  .select_con
  {
      float:left;
      width: auto;
      overflow: hidden;
      margin-left: 5px;
      text-overflow: ellipsis;
  }
  
  .options_selct 
  {
      max-width: 180px;
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      width: auto;
  }
  
  .contact_support_class
  {
      min-height: unset;
  }
  
  .contact_support_class .recovery_box
  {
      min-height: unset;
  }
  
  #mfa_totp_section
  {
      display: none;
  }
  
  /* Terminate_session page */
  
  #terminate_session_form  
  {
      overflow: auto;
  }
  
  #terminate_session_form .checkbox_div 
  {
      position: relative;
  }
  
  #terminate_session_form .checkbox_check
  {
      position: absolute;
      z-index: 1;
      opacity: 0;
      left: 15px;
      margin: 0px;
      height: 16px;
      cursor: pointer;
      width: 16px;
  }
  
  #terminate_session_form .checkbox
  {
      float: left;
      z-index: 0;
      height: 12px;
      width: 12px;
      display: inline-block;
      border: 2px solid #ccc;
      border-radius: 2px;
      position: relative;
      top: 1.5px;
      overflow: hidden;
      background-color: #fff;
  }
  
  #terminate_session_form .checkbox_check:hover ~ .checkbox {
      border: 2px solid #EF7320;
  }
  
  #terminate_session_form .checkbox_check:checked ~ .checkbox {
      background-color: #EF7320;
      border-color: #EF7320;
  }
  
  #terminate_session_form .checkbox .checkbox_tick {
      display: block;
      height: 3px;
      width: 8px;
      border-bottom: 2px solid #fff;
      border-left: 2px solid #fff;
      transform: rotate(-45deg);
      margin: 2px 1px;
  }
  
  #terminate_session_form  .checkbox_label
  {
      cursor: pointer;
      margin: 0px 6px;
      line-height: 20px;
      width: 85%;
      display: inline-block;
  }
  
  #terminate_session_form .showOneAuthLable
  {
      border: 1px solid #E7E7E7;
      border-radius: 10px 10px 0px 0px;
      box-sizing: border-box;
      max-width: 420px;
  }
  
  .oneAuthLable
  {
      display: inline-flex;
      max-width: 420px;
      padding: 15px;
      align-items: center;
      box-sizing: border-box;
      border: 1px solid #E7E7E7;
      border-top: none;
      border-radius: 0px 0px 15px 15px;
  }
  
  .oneauth_icon
  {
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 14px;
      background-size: 40px 40px;
  }
  
  .one_auth_icon_v2
  {
      background-image: url(../images/oneAuth2.4b2a6945d5ecd70b703ba18f5f11eb68.png);
  }
  
  .oneAuthLable .text_container 
  {
      flex: 1;
      margin: 0px 10px;
  }
  
  .oneAuthLable .text_header 
  {
      font-size: 12px;
      font-weight: 500;
      margin-bottom: 4px;
  }
  
  .oneAuthLable .text_desc 
  {
      font-size: 10px;
      line-height: 14px;
  }
  
  .oneAuthLable .togglebtn_div 
  {
      height: 16px;
      padding: 4px;
      width: 30px;
      display: inline-block;
      position: relative;
  }
  
  .oneAuthLable .real_togglebtn 
  {
      cursor: pointer;
      display: inline-block;
      position: relative;
      height: 16px;
      width: 30px;
      z-index: 1;
      opacity: 0;
      position: absolute;
      margin: 0px;
  }
  
  .real_togglebtn:checked ~ .togglebase 
  {
      background-color: #10bc83;
  }
  
  .real_togglebtn:checked ~ .togglebase .toggle_circle 
  {
      left: 16px;
  }
  
  .oneAuthLable .togglebase 
  {
      height: 16px;
      width: 30px;
      display: inline-block;
      background: #ccc;
      border-radius: 10px;
      position: absolute;
  }
  
  .oneAuthLable .toggle_circle 
  {
      transition: all .2s ease-in-out;
      height: 12px;
      width: 12px;
      background-color: #fff;
      border-radius: 10px;
      display: inline-block;
      position: absolute;
      left: 2px;
      top: 2px;
      box-shadow: 0px 0px 5px #999;
  }
  
  #terminate_session_submit
  {
      margin-top: 30px;
  }
  
  @media only screen and (max-width: 600px) 
  {
      body
      {
          -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
      }
      
      
      .bg_one
      {
          display: none;
      }
      
      
      .alert_message,.error_message
      {
          max-width: 300px;
          width: 75%;
      }
      .Alert,.Errormsg
      {
          max-width: 400px !important;
          padding: 0px;
          min-width: 300px;
      }
      
  
      .textbox,.otp_container
      {
            background-color: transparent;
             border: none;
             border-bottom: 2px solid #F4F6F8;
             border-radius: 0px;
      }
      
      .textbox:-webkit-autofill,.textbox:-webkit-autofill:hover, .textbox:-webkit-autofill:focus,.textbox:-webkit-autofill:active
      {
          -webkit-box-shadow: inset 0 0 0px 9999px white;
          -webkit-text-fill-color: black;
      }
      
      .textbox:valid
      {
          border: none;
          border-bottom: 2px solid #EF7320;
      }
      
      #captcha
      {
          border-radius:2px;outline:none;-webkit-appearance: none;-moz-appearance: none;
          appearance: none;
      }
      .changeloadbtn{border-radius: 22px;}
      
      .btn
      {
          margin-top:10px;border-radius: 4px;
      }
      .mini_btn {
          margin-top: 0px;
      }
      .optionstry:hover
      {
          background-color: #fff;
      }
      
      .img_option{    margin: 0px 10px 0px 0px !important;}
      
      .option_details_try
      {
          color: #555555;
          display: inline-block;
          margin: 0px;
      }
      
      #multiple_reocvery_mobile .fieldcontainer, #multiple_reocvery_email .fieldcontainer, #other_options_div .fieldcontainer
      {
          margin: 0 -30px;
          margin-bottom: 40px;
      }
      
      .optionmod
      {
          margin-left: 0px;
          padding:15px 30px;
          line-height: 24px;
      }
      
  
      .recovery_box 
      {   
          width: 100%;
          padding: 0px 30px;
          height: auto;
          border-right: none;
          padding-bottom: 40px;
      }
      
      .recovery_container 
      {
          width: 100%;
          box-shadow: none;
          margin: 0 auto;
          position: relative;
          z-index: 1;
          /* margin-top: 40px; */
          height: 100vh;
          overflow: hidden;
      }
      
      .info_head
      {
          margin-bottom:30px;
      }
  }
  
  .devices .select2-container--open
  {
      background: transparent;
  }
  @media 
      only screen and (-webkit-min-device-pixel-ratio: 2), 
      only screen and ( min--moz-device-pixel-ratio: 2), 
      only screen and ( -o-min-device-pixel-ratio: 2/1), 
      only screen and ( min-device-pixel-ratio: 2), 
      only screen and ( min-resolution: 192dpi), 
      only screen and ( min-resolution: 2dppx) {
      .restrict_icon {
             background: url(../images/URLError2x.5e762e74a83ee0cda60b8f7c9df299a8.png) no-repeat transparent center/auto 100%;
      }
  }
  .hide
  {
      display:none;
  }
  
  .hover-tool-tip {
      position: absolute;
      top: 15px;
      left: 335px;
      background: #fff;
      padding: 20px;
      box-shadow: 0px 0px 10px #0000001a;
      transition: opacity 0.1s;
      border-radius: 5px;
      z-index: 9;
      opacity: 0;
  }
  .hover-tool-tip::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      margin-left: -8px;
      top: 25px;
      left: 0;
      box-sizing: border-box;
      border: 6px solid black;
      border-color: #ffffff transparent transparent #ffffff;
      transform-origin: 0 0;
      transform: rotate(-45deg);
      box-shadow: -6px -6px 10px 0 #0000001a;
  }
  .hover-tool-tip.no-arrow::after {
    content: none;
  }
  .hover-tool-tip ul {
      padding: 0;
      margin: 0px 0px 0px 15px;
      list-style: none;
  }
  .hover-tool-tip p {
      margin: 0px 0px 10px 0px;
      font-size: 14px;
      font-weight: 500;
  }
  .hover-tool-tip ul li {
      font-size: 12px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      line-height: 25px;
  }
  .hover-tool-tip ul li.success::before {
      background-color: #0dbc83;
  }
  .hover-tool-tip ul li::before {
      content: "";
      margin-right: 10px;
      background-color: red;
      width: 8px;
      height: 8px;
      border-radius: 50%;
  }
  
  .titlename{
      display:none !important;
  }
  
  #lookup_div .head_info{
      display:none !important;
  }
  
  .info_head{
      /* padding-top:20px */
  }
  
  .rec_modes_other_options{
    display: none !important;
  }
  
  #login_id{
      text-indent: 0 !important;
     }
     
     .showcountry_code{
      display:none !important;
     }
{{% /panel_with_adjustment %}}

{{% panel_without_adjustment header="client-package.json" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
{
    "name": "zylkertechnologies",
    "version": "0.0.1",
    "homepage": "index.html",
    "login_redirect": "home.html"
}
{{% /panel_with_adjustment %}}

The client directory is now configured. 

Let’s go over how the function and the client code works:

* The end-user will first encounter the **Login Page** you have configured and styled in the console.
* To create an account, they will click the **Sign Up** option and be directed to the *Sign Up* page.

{{%note%}}{{%bold%}}Note:{{%/bold%}} End-users can either sign up to your application using their {{%link href="/en/cloud-scale/help/authentication/social-logins/introduction/" %}}Identity Provider Logins{{%/link%}} or use the conventional method of signing up to the application using their email ID.{{%/note%}}

* Once the information is inputted and they click **Sign Up**, or if they attempt to sign up using a Identity Provider Login of their choice, their details will be provided as a JSON input to the {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/" %}}Custom User Validation{{%/link%}} function ({{%badge%}}authorization_portal_function/index.js{{%/badge%}}).

* The function will only authenticate users if the condition you have coded is satisfied. For this tutorial, the users will only be authenticated if they signed up to the application using a Zylker registered email address.

* Upon successful authentication, an {{%link href="/en/cloud-scale/help/authentication/email-templates/introduction/" %}}Email Verification{{%/link%}} email will be sent to the account they used to sign up to the application.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Because we are using Embedded Login, a native Catalyst authentication type, no additional logic to trigger the appropriate emails is required. It will be handled by Catalyst automatically.{{%/note%}}

* Once the user verifies their email address by clicking the link provided in the email, they will be signed up to the application. Their details can be viewed in the {{%link href="/en/cloud-scale/help/authentication/user-management/introduction/" %}}User Management{{%/link%}} section of the *Authentication* component.

* The end-user can now log in to the application using their authenticated credentials.

* The end-user can also reset their password by clicking the **Forgot Password** option. 

In this event, the *Password Reset* email will be sent to their registered email. Following the steps mentioned in the email, they can easily reset their credentials.
{{%/tab%}}

{{%tab "React web app" %}}

Let’s configure the client component.

The React web {{%link href="/en/cli/v1/project-directory-structure/client-directory" %}}client directory{{%/link%}} contains the following files:

- The root directory of the client contains a {{%badge%}}client-package.json{{%/badge%}} file, which is a configuration file defining the name, version, default home page, and redirect page of the client component.
- The {{%badge%}}**zylkertechnologies**{{%/badge%}} client directory contains two subfolders, as per the default project structure of a React app:
    - The {{%badge%}}public{{%/badge%}} folder is generally used to hold files that can be openly accessed by browsers through public URLs, such as icon files of the web app, the {{%badge%}}index.html{{%/badge%}} file, the {{%badge%}}embeddediframe.css{{%/badge%}} and the {{%badge%}}fpwd.css{{%/badge%}} file.
    - The {{%badge%}}src{{%/badge%}} folder contains the application’s source files that will be included in the build folder when we compile the React app.
    - The client directory also contains the {{%link href="https://docs.npmjs.com/files/package.json" %}}{{%badge%}}package.json{{%/badge%}}{{%/link%}} dependency file and a  hidden {{%link href="https://docs.npmjs.com/files/package.json" %}}{{%badge%}}.gitignore{{%/badge%}}{{%/link%}} file.
- The files present in the {{%badge%}}**public**{{%/badge%}} folder include:
    - {{%link href="https://reactjs.org/docs/getting-started.html?#try-react" %}}Native React files{{%/link%}} such as setup {{%badge%}}Tests.js{{%/badge%}}, {{%badge%}}index.js{{%/badge%}}, {{%badge%}}reportWebVitals.js{{%/badge%}}, {{%badge%}}logo.svg{{%/badge%}}, and {{%badge%}}App.test.js{{%/badge%}}.
    - {{%badge%}}**index.html**{{%/badge%}} - Contains Catalyst web sdk that allows you to access Catalyst components.
    - We will be creating two additional files {{%badge%}}**embedddediframe.css**{{%/badge%}} and {{%badge%}}**fpwd.css**{{%/badge%}} that will contain the styling elements for the login and password reset forms of our application.
- The files present in the {{%badge%}}**src**{{%/badge%}} folder include:
    - Native React files such as {{%badge%}}setupTests.js{{%/badge%}}, {{%badge%}}reportWebVitals.js{{%/badge%}}, {{%badge%}}logo.svg{{%/badge%}}, and {{%badge%}}App.test.js{{%/badge%}}.
    - {{%badge%}}**App.js**{{%/badge%}} - Contains the hash routes to your application
    - {{%badge%}}**App.css**{{%/badge%}} - Contains the overall styling elements of your application
    - {{%badge%}}**index.js**{{%/badge%}} - The entry point of the react application.
    - {{%badge%}}**index.css**{{%/badge%}} - Contains the styling of the elements present in the {{%badge%}}index.js{{%/badge%}} file.
    - You will be creating the following files in the {{%badge%}}src{{%/badge%}} folder:
        - {{%badge%}}**Button.css**{{%/badge%}} - Contains the styling elements for the *Logout* button that will be present in the application.
        - {{%badge%}}**Button.js**{{%/badge%}} - Contains the React component for the *Logout* present in the application.
        - {{%badge%}}**Layout.js**{{%/badge%}} - Contains the React component for the application's logic
        - {{%badge%}}**LoginPage.js**{{%/badge%}} - Contains the React component for the login pages you generated in the Catalyst console.
        - {{%badge%}}**UserProfile.css**{{%/badge%}} - Contains the styling elements for the user information page that will be displayed once you log in to the application.
        - {{%badge%}}**UserProfile.js**{{%/badge%}} - Contains the React component to render the user details after you login.
        - {{%badge%}}**Signup.css**{{%/badge%}} - Contains the styling elements for the Signup page in the application.
        - {{%badge%}}**Signup.js**{{%/badge%}} - Contains the React component for the Signup pages you generated in the Catalyst console.

We will be coding in the {{%badge%}}index.html{{%/badge%}}, {{%badge%}}embeddediframe.css{{%/badge%}},{{%badge%}}fpwd.css{{%/badge%}}, {{%badge%}}App.js{{%/badge%}}, {{%badge%}}App.css{{%/badge%}}, {{%badge%}}index.css{{%/badge%}}, {{%badge%}}index.js{{%/badge%}}, {{%badge%}}Button.css{{%/badge%}}, {{%badge%}}Button.js{{%/badge%}}, {{%badge%}}Layout.js{{%/badge%}}, {{%badge%}}LoginPage.js{{%/badge%}}, {{%badge%}}UserProfile.css{{%/badge%}}, {{%badge%}}UserProfile.js{{%/badge%}}, {{%badge%}}Signup.js{{%/badge%}} and {{%badge%}}Signup.css{{%/badge%}} files. We will also be making a change in the {{%badge%}}client-package.json{{%/badge%}}. to ensure that the homepage of the application is the authenticated page.

{{%note%}}{{%bold%}}Note:{{%/bold%}} You can delete the native React files as they not required for building this application.{{%/note%}}

#### Install additional React packages

The {{%badge%}}react-router-dom{{%/badge%}} package needs to be installed in the {{%badge%}}AuthorizationPortal/zylkertechnologies{{%/badge%}} client directory using the CLI command given below:

{{%cli%}}npm install react-router-dom{{%/cli%}}

This command will install the {{%badge%}}react-router-dom{{%/badge%}} module, save the dependencies, and allow us to perform the required hash routing in our application.

This is the client directory after you have created the required files and deleted the unnecessary files.


{{%note%}}{{%bold%}}Note:{{%/bold%}} Please go through the all code given in this section to ensure you fully understand it.{{%/note%}}

Copy the code given below and paste it in {{%badge%}}index.html{{%/badge%}} located in the client directory ({{%badge%}}zylkertechnologies/public/{{%/badge%}}) using an IDE and save the file.

You will need to create two new files in the same folder and name them {{%badge%}}embeddediframe.css{{%/badge%}} and {{%badge%}}fpwd.css{{%/badge%}}. Copy and paste the code given below in the respective files and save them.

{{% panel_with_adjustment header="index.html" footer="button" class="language-xml line-numbers" scroll="set-scroll" %}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. -->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. -->
</body>
</html>

{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="embeddediframe.css" footer="button" class="language-css line-numbers" scroll="set-scroll" %}}
@font-face {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/robotomonoregular/font.eot");
  src: url("https://webfonts.zohowebstatic.com/robotomonoregular/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.woff")
      format("woff"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.svg#RobotoMono-Regular")
      format("svg");
}

@font-face {
  font-family: "LatoLgt";
  font-weight: 300;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latolight/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latolight/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latolight/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latolight/font.woff") format("woff"),
    url("https://webfonts.zohowebstatic.com/latolight/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latolight/font.svg#Lato-Light")
      format("svg");
}
@font-face {
  font-family: "LatoReg";
  font-weight: 400;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latoregular/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latoregular/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.woff")
      format("woff"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.svg#Lato-Regular")
      format("svg");
}
@font-face {
  font-family: "LatoSB";
  font-weight: 700;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latobold/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latobold/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latobold/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latobold/font.woff") format("woff"),
    url("https://webfonts.zohowebstatic.com/latobold/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latobold/font.svg#Lato-Bold")
      format("svg");
}

@font-face {
  font-family: "LatoB";
  font-weight: 900;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latoblack/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latoblack/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.woff") format("woff"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.svg#Lato-Black")
      format("svg");
}

@font-face {
  font-family: "signinicon";
  src: url(/images/signinicon.eot);
  src: url(/images/signinicon.eot) format("embedded-opentype"),
    url(/__catalyst/auth/static-file?file_name=signinicon.woff2) format("woff2"),
    url(/__catalyst/auth/static-file?file_name=signinicon.ttf)
      format("truetype"),
    url(/__catalyst/auth/static-file?file_name=signinicon.woff) format("woff"),
    url("../images/fonts/signinicon.651f82b8f8f51f33cd0b6331f95b5b4f.svg")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "signinicon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-hide:before {
  content: "\e907";
}
.icon-show:before {
  content: "\e914";
}
.icon-backarrow:before {
  content: "\e900";
}
.icon-backup:before {
  content: "\e901";
}
.icon-support:before {
  content: "\e915";
}
body {
  font-family: "Roboto", sans-serif;
  margin: 0px;
}
.bg_one {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: url("../images/bg.49756b7c711696d95133fa95451f8e13.svg")
    transparent;
  background-size: auto 100%;
  z-index: -1;
}
.signin_container {
  height: 25rem;
  display: block;
  width: 520px;
  background-color: #fff;
  box-shadow: 0px 2px 30px #ccc6;
  margin: auto;
  position: relative;
  z-index: 1;
  margin-top: auto;
  overflow: hidden;
}
.mod_container {
  width: 500px;
}
.checkbox_label {
  display: inline-block;
  font-size: 14px;
  margin: 0px 6px;
  float: left;
  cursor: pointer;
  line-height: 20px;
}
.signin_box {
  min-height: 520px;
  height: auto;
  background: #fff;
  box-sizing: border-box;
  border-radius: 2px;
  transition: all 0.1s ease-in-out;
  float: left;
  overflow-y: auto;
  display: table-cell;
  border-right: 2px solid #f1f1f1;
  width: 100%;
  padding: 0px 30px;
  height: auto;
  border-right: none;
}
.nopassword_message {
  display: table-cell;
  font-size: 14px;
  color: #222222;
  letter-spacing: 0px;
  line-height: 20px;
  height: auto;
  width: auto;
  margin-left: 10px;
  font-weight: 400;
  padding-left: 10px;
}
.portal_logo {
  display: block;
  height: 30px;
  width: auto;
  margin-bottom: 20px;
  background-size: auto 100%;
}
.pointer {
  cursor: pointer;
}
#forgotpassword {
  cursor: default;
}
#forgotpassword > a {
  cursor: pointer;
}
.text16 {
  display: block;
  text-align: center;
  margin-bottom: 30px;
  color: #626262;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.checkbox {
  float: left;
  z-index: 0;
  height: 12px;
  width: 12px;
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 2px;
  position: relative;
  top: 1.5px;
  overflow: hidden;
  background-color: #fff;
}
.show_hide_password {
  font-size: 34px;
  color: #a7a7a7;
  position: relative;
  top: -39px;
  right: 13px;
  float: right;
  cursor: pointer;
  height: 20px;
}
.pass_policy,
.pass_policy_error {
  color: #8c8c8c;
  font-size: 14px;
  padding-top: 10px;
}
.pass_policy_error {
  color: #ed7500;
  display: block;
}
.checkbox_check {
  position: absolute;
  z-index: 1;
  opacity: 0;
  left: 50px;
  margin: 0px;
  height: 16px;
  cursor: pointer;
  width: 16px;
}
.checkbox_div {
  display: none;
  height: 16px;
  width: auto;
  margin-bottom: 30px;
}
.checkbox_div {
  display: block;
}
#terminate_session_form .checkbox_mod {
  margin-top: 50px;
}
.checkbox_tick {
  display: block;
  height: 3px;
  width: 8px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  margin: 2px 1px;
}
.passexpsuccess {
  display: none;
  height: 106px;
  width: 178px;
  background: url("../images/passexpiry.db4c66debd4dd8880655f338ead6b973.png")
    no-repeat transparent;
  background-size: auto 100%;
  margin: 0px auto;
  margin-bottom: 20px;
}
.signin_head {
  display: block;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 30px;
  transition: all 0.1s ease-in-out;
}
.rightside_box {
  width: 390px;
  height: auto;
  float: right;
  box-sizing: border-box;
  padding: 40px;
  background-color: #fff;
  display: table-cell;
}
.service_name,
.backup_desc,
.pass_name {
  display: block;
  font-size: 16px;
  color: #000;
  font-weight: 400;
}
.titlename {
  display: block;
  font-size: 24px;
  color: #000;
  font-weight: 400;
  text-transform: capitalize;
  width: auto;
  margin-bottom: 20px;
}
.extramargin {
  margin-top: 10px;
}
.show_hide_password {
  font-size: 34px;
  color: #a7a7a7;
  position: relative;
  top: -39px;
  right: 13px;
  float: right;
  cursor: pointer;
  height: 20px;
}
.textbox_div {
  display: block;
  margin-bottom: 30px;
  position: relative;
}
.textbox_label {
  display: block;
  font-size: 14px;
  color: #626262;
  padding-bottom: 10px;
}
.textbox {
  display: block;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  border-radius: 2px;
  text-indent: 12px;
  font-size: 16px;
  outline: none;
  border: none;
  padding-right: 12px;
  transition: all 0.2s ease-in-out;
  background: #f1f1f1;
  border: 1px solid #e4e4e4;
}
.textbox:valid {
  border: 2px solid #f4f6f8;
}
.textindent42 {
  text-indent: 36px;
}
.textindent62 {
  text-indent: 56px;
}
.textintent52 {
  text-indent: 46px;
}
::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.errorborder:focus,
.textbox.errorborder {
  border-bottom: 2px solid #ff8484;
}
.btn {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 44px;
  border-radius: 4px;
  letter-spacing: 0.5;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  border: none;
  margin: auto;
  text-transform: uppercase;
  margin-bottom: 30px;
  transition: all 0.2s ease-in-out;
}
.signupbtn {
  width: 250px;
  margin-left: 0px;
}
.blue {
  box-shadow: 0px 2px 2px #fff;
  background-color: #159aff;
  color: #fff;
}
.grey {
  background-color: #f3f3f3;
  color: #3a3a3a;
  letter-spacing: 0px;
}
.green {
  box-shadow: 0px 2px 2px #fff;
  background-color: #00c573;
  color: #fff;
}
.blue:hover {
  background-color: #0966c2;
  cursor: pointer;
  box-shadow: 0px 2px 2px rgba(90, 183, 254, 0.2);
}
.changeloadbtn {
  display: block;
  height: 44px;
  width: 44px;
  border-radius: 22px;
  padding: 0px;
}
.changeloadbtn:before {
  content: "";
  height: 20px;
  width: 20px;
  display: inline-block;
  margin: 9px;
  border: 3px solid #fff;
  border-top: 3px solid #5ab7fe;
  border-radius: 50%;
  animation: spin 0.5s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.hellouser {
  margin-bottom: 30px;
}
.username {
  display: inline-block;
  max-width: 100%;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
  float: left;
}
.Notyou {
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
}
.signup_text {
  text-align: center;
  margin: 20px 0px;
  font-size: 16px;
}
.backbtn {
  display: none;
  float: left;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  position: absolute;
  padding: 0px 5px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.1s ease;
}
.zeroheight {
  width: 0px;
  height: 0px;
  overflow: hidden;
  display: block;
}
#captcha,
#bcaptcha {
  background: #fff;
  width: 60%;
  display: inline-block;
}
#captcha_img,
#bcaptcha_img {
  width: 40%;
  float: right;
  background-color: #ffffff;
  border-left: none;
}
#captcha_img img,
#bcaptcha_img img {
  height: 40px;
}
.reloadcaptcha {
  float: right;
  clear: both;
  margin-top: -37px;
  height: 30px;
  width: 30px;
  border-radius: 50px;
  background: url("../images/reload.eaef7ea18b680bc07558164c918909a6.png")
    no-repeat transparent 5px;
  background-size: 50%;
  display: inline-block;
  cursor: pointer;
}
#captcha_container {
  display: none;
}
.options {
  display: block;
  width: 100%;
  max-width: 500px;
  min-height: 80px;
  padding: 0px 50px;
  cursor: pointer;
}
.options:hover {
  background-color: #f9f9f9;
}
.option_details {
  display: inline-block;
  height: auto;
  width: 320px;
  margin-left: 15px;
}
.option_title {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.img_option {
  display: table-cell;
  height: 24px;
  width: 24px;
  color: #499aff;
  font-size: 24px;
  vertical-align: top;
}
.errorlabel {
  color: #e92b2b;
}
.fielderror {
  display: none;
  font-size: 14px;
  margin-top: 10px;
}
.fielderror a {
  text-decoration: none;
  color: #309ff4;
}
.bluetext {
  color: #309ff4;
  cursor: pointer;
}
#country_code_select {
  width: 50px;
  height: 40px;
  position: absolute;
  opacity: 0;
  display: none;
  z-index: 0;
}
.select_country_code {
  width: 50px;
  height: 40px;
  display: inline-block;
  float: left;
  position: absolute;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: black;
  display: none;
  z-index: 0;
}
.pic {
  width: 20px;
  height: 14px;
  background-size: 280px 252px;
  background-image: url("../images/Flags2x.0b8394efb0ea9167cef2465fb8f63d78.png");
  float: left;
}
.cc {
  float: right;
  color: #aeaeae;
}
.cn {
  margin-left: 10px;
}
.select2-results__option--highlighted {
  background: #f4f6f8;
}

.searchparent {
  height: auto;
}
.searchlbl {
  font-size: 10px;
  font-weight: bolder;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.cntrysearch {
  width: 380px;
  height: 32px;
  border-radius: 2px;
  font-size: 14px;
  box-sizing: border-box;
  padding: 8px 10px;
  background: #f7f7f7;
  outline: none;
  border: none;
  margin-top: 10px;
}

.select2-results__option {
  list-style-type: none;
  height: 40px;
  box-sizing: border-box;
  padding: 12px 20px;
  font-size: 14px;
  line-height: 16px;
}

.select2-search__field {
  width: 380px;
  height: 32px;
  border: none;
  outline: none;
  background: #f7f7f7;
  border-radius: 2px;
  margin: 10px 0 0 10px;
  font-size: 14px;
  padding: 10.5px 8px;
}

.select2-selection {
  display: inline-block;
  outline: none;
  /* background-color: #F4F6F8; */
  height: 40px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.selection {
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 0px;
  height: 43px;
}

#select2-combobox-results {
  padding-left: 0px;
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 400px;
  margin-top: 10px;
  margin-bottom: 0px;
  background: white;
}

.select2-container--open {
  z-index: 10;
  background: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13);
  width: auto;
  box-sizing: border-box;
}

.select2 {
  position: absolute;
  background: transparent;
  box-shadow: none;
  display: none;
  margin: 2px;
}
.select2-results__options {
  overflow-y: auto;
  max-height: 200px;
}

.selection {
  width: auto;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  margin: auto;
  display: block;
}
.select2-search--hide,
.select2-selection__clear {
  display: none;
}
#otp_container,
#enableotpoption,
#mfa_ga_container,
#mfa_otp_container,
#mfa_totp_container,
#recoverybtn,
#recovery_container,
#enableforgot,
#enablesaml,
.trustbrowser_ui,
#backup_ver_container,
#backup_container,
#enablemore,
.password_expiry_container,
.terminate_session_container {
  display: none;
}
.errorlabel {
  color: #e92b2b;
}
.fielderror {
  display: none;
  font-size: 14px;
  margin-top: 10px;
}
.field_error {
  color: #f37272;
  font-size: 14px;
  padding-top: 10px;
}
#recoverybtn,
#problemsignin,
.tryanother {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 40px;
}
.textbox_actions,
.textbox_actions_saml,
.textbox_actions_more {
  display: block;
  margin-top: 20px;
  height: 20px;
}
.bluetext_action {
  display: inline-block;
  float: left;
  font-size: 14px;
  color: #159aff;
  font-weight: 500;
  line-height: 16px;
  cursor: pointer;
}
.bluetext_action a {
  text-decoration: none;
}
.bluetext_action_right {
  float: right;
}
.textbox_actions {
  display: block;
  margin-top: 20px;
  height: 20px;
}
.Alert,
.Errormsg {
  display: block;
  margin: auto;
  height: auto;
  min-width: 200px;
  width: fit-content;
  width: -moz-fit-content;
  max-width: 600px;
  background-color: #032239;
  border-radius: 6px;
  position: fixed;
  top: -100px;
  left: 0px;
  right: 0px;
  transition: all 0.2s ease;
  padding: 0px 20px;
  z-index: 2;
}
.tick_icon,
.error_icon {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: #22c856;
  border-radius: 50%;
  background-size: 60px;
  margin: 15px;
  float: left;
}
.tick_icon:after {
  display: block;
  content: "";
  height: 5px;
  width: 9px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  margin: 7px 6px;
  box-sizing: border-box;
}

.alert_message,
.error_message {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  line-height: 18px;
  margin: 16px 0px;
  margin-right: 20px;
  max-width: 510px;
}
.error_icon {
  background-color: #ff676f;
}
.error_icon:before,
.error_icon:after {
  position: absolute;
  left: 44px;
  top: 20px;
  content: " ";
  height: 10px;
  width: 2px;
  background-color: #ffffff;
}
.error_icon:before {
  transform: rotate(45deg);
}
.error_icon:after {
  transform: rotate(-45deg);
}
.select2-results__options {
  padding-left: 0px;
}
.showcountry_code {
  width: 62px !important;
}
.textindent70 {
  text-indent: 70px;
}
.countrybox {
  width: 400px;
  height: 220px;
  overflow: auto;
}
.focusmanage {
  position: absolute;
  z-index: 10;
  width: 400px;
  height: 266px;
  box-sizing: border-box;
  padding: 10px;
  margin-top: -25px;
  background: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13);
  border-radius: 2px;
}
.recoveryhead {
  margin-bottom: 10px;
}
.nopassword_container {
  display: none;
  background: #ebf4fb;
  border: 1px solid #cbe8ff;
  border-radius: 5px;
  width: 400px;
  height: auto;
  position: absolute;
  bottom: 50px;
  box-sizing: border-box;
  padding: 20px;
}
.nopassword_icon {
  display: table-cell;
  margin: 0px;
  height: 30px;
  width: 30px;
  color: #0091ff;
  font-size: 30px;
  vertical-align: middle;
}
.mailsearch {
  width: 400px;
  height: 30px;
  padding: 0px 0px;
  border: none;
  position: absolute;
}

.bolder1 {
  font-weight: bolder;
}

#ui-id-1 {
  height: 200px;
  width: auto;
  outline: none;
  border: none;
  overflow-x: hidden;
  overflow-y: scroll;
}

.ui-menu-item-wrapper {
  overflow: auto;
}

.nonclickelem {
  color: #626262;
  pointer-events: none;
}

.trustdevicebox {
  width: 500px;
  min-height: auto !important;
}
.trustdevice {
  width: auto;
  float: left;
  margin-right: 18px;
  min-width: 100px;
  margin-bottom: 0px;
}

.loadwithbtn {
  display: inline-block;
  height: 22px;
  width: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  position: absolute;
  margin: -2px;
  box-sizing: border-box;
  border-left: 3px solid transparent;
  animation-name: rotate1;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
@keyframes rotate1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.waitbtn .waittext,
.loadbtntext {
  display: inline-block;
  text-indent: 25px;
}
#waitbtn {
  display: none;
}
.loadwithbtn:before {
  display: inline-block;
  content: "";
  height: 22px;
  width: 22px;
  border: 3px solid #ffffff30;
  border-radius: 50%;
  margin: -3px -11px;
  position: absolute;
  box-sizing: border-box;
}
.notnowbtn .loadwithbtn {
  border: 3px solid #3a3a3a;
  border-left: 3px solid transparent;
}
.trustdevice .loadwithbtn {
  display: none;
}

#recoverybtn,
#problemsignin,
.tryanother {
  display: none;
  bottom: 50px;
  width: fit-content;
  margin: 0px auto;
  cursor: pointer;
}
#recoverOption,
#verify_totp_container,
#verify_qr_container {
  display: none;
}
.backoption {
  width: 30px;
  height: 30px;
  font-size: 24px;
  display: inline-block;
  float: left;
  color: #666666;
  padding: 3px;
  box-sizing: border-box;
  margin-right: 5px;
  border-radius: 15px;
  cursor: pointer;
}
.backoption:hover {
  background: #f4f4f4;
}
.rec_head_text,
.backoption {
  display: table-cell;
}
.options,
.optionstry {
  display: table;
  width: 100%;
  height: auto;
  padding: 20px 50px;
  box-sizing: border-box;
  cursor: pointer;
}
.options:hover,
.optionstry:hover {
  background-color: #f9f9f9;
}
.option_details,
.option_details_try {
  height: auto;
  width: auto;
  padding-left: 10px;
  vertical-align: top;
  box-sizing: border-box;
}
.option_title_try {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.option_description {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: #696969;
  margin-top: 5px;
}
.img_option_try {
  margin: 12px 0px;
}
.img_option {
  font-size: 30px;
  color: #499aff;
}
.option_details {
  display: table-cell;
}
.problemsignincon,
.recoverymodes,
.addaptivetfalist,
#recoverymodeContainer {
  width: auto;
  margin: 0px -50px;
}
.line {
  background-color: #f1f1f1;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 20px;
}

/* Terminate_session */

.terminate_session_container .signin_head {
  margin-bottom: 20px;
}

#terminate_session_form .checkbox_div {
  position: relative;
  margin-bottom: 10px;
}

#terminate_session_form .checkbox_mod {
  margin-top: 30px;
}

#terminate_session_form .checkbox_check {
  left: 15px;
}

#terminate_session_form .checkbox_check:checked ~ .checkbox {
  background-color: #159aff;
  border-color: #159aff;
}

#terminate_session_form .showOneAuthLable {
  border: 1px solid #e7e7e7;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  max-width: 420px;
  height: auto;
  overflow: auto;
  margin-bottom: 0px;
}

.oneAuthLable {
  display: inline-flex;
  max-width: 420px;
  padding: 15px;
  align-items: center;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #e7e7e7;
  border-top: none;
  border-radius: 0px 0px 15px 15px;
}

.oneauth_icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background-size: 40px 40px;
}

.one_auth_icon_v2 {
  background-image: url(../images/oneAuth2.4b2a6945d5ecd70b703ba18f5f11eb68.png);
}

.oneAuthLable .text_container {
  flex: 1;
  margin: 0px 10px;
}

.oneAuthLable .text_header {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}

.oneAuthLable .text_desc {
  font-size: 10px;
  line-height: 14px;
}

.oneAuthLable .togglebtn_div {
  height: 16px;
  padding: 4px;
  width: 30px;
  display: inline-block;
  position: relative;
}

.oneAuthLable .real_togglebtn {
  cursor: pointer;
  display: inline-block;
  position: relative;
  height: 16px;
  width: 30px;
  z-index: 1;
  opacity: 0;
  position: absolute;
  margin: 0px;
}

.real_togglebtn:checked ~ .togglebase {
  background-color: #10bc83;
}

.real_togglebtn:checked ~ .togglebase .toggle_circle {
  left: 16px;
}

.oneAuthLable .togglebase {
  height: 16px;
  width: 30px;
  display: inline-block;
  background: #ccc;
  border-radius: 10px;
  position: absolute;
}

.oneAuthLable .toggle_circle {
  transition: all 0.2s ease-in-out;
  height: 12px;
  width: 12px;
  background-color: #fff;
  border-radius: 10px;
  display: inline-block;
  position: absolute;
  left: 2px;
  top: 2px;
  box-shadow: 0px 0px 5px #999;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
  not all,
  not all,
  not all,
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  .google_icon {
    background-color: #fff;
    box-shadow: 0px 0px 2px #00000012, 0px 2px 2px #00000024;
  }
  .google_icon .fed_icon {
    background: url("../images/signin_icons@2x.c0c72f3600a6f5ec03c9119d5a7d0518.png")
      no-repeat transparent;
    background-size: 205px auto;
    background-position: -10px -10px;
  }
  .MS_icon {
    background-color: #2f2f2f;
  }
  .MS_icon .fed_icon {
    background: url("../images/signin_icons@2x.c0c72f3600a6f5ec03c9119d5a7d0518.png")
      no-repeat transparent;
    background-size: 205px auto;
    background-position: -38px -10px;
  }
  .linkedin_fed_box {
    background-color: #0966c2;
  }
  .linkedin_fed_box .fed_icon {
    background: url("../images/signin_icons@2x.c0c72f3600a6f5ec03c9119d5a7d0518.png")
      no-repeat transparent;
    background-size: 205px auto;
    background-position: -67px -11px;
  }
  .large_box .linked_fed_icon {
    background-position: -9px -174px;
  }
  .fb_fed_box {
    background-color: #1877f2;
  }
  .fb_fed_box .fed_icon {
    background: url("../images/signin_icons@2x.c0c72f3600a6f5ec03c9119d5a7d0518.png")
      no-repeat transparent;
    background-size: 205px auto;
    background-position: -94px -10px;
  }
  .zoho_icon {
    background: url(../images/signin_icons@2x.c0c72f3600a6f5ec03c9119d5a7d0518.png)
      no-repeat transparent;
    background-size: 205px auto;
    background-position: -152px -174px;
  }
}

@media only screen and (max-width: 600px) {
  body {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }
  .nopassword_container {
    width: calc(100% - 60px);
    padding: 10px;
    box-sizing: border-box;
  }
  .signin_container {
    width: 100%;
    box-shadow: none;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    margin-top: 40px;
    height: 27rem;
    overflow: hidden;
  }

  #captcha_img,
  #captcha,
  #bcaptcha_img,
  #bcaptcha {
    border: 2px solid #f4f6f8;
    border-radius: 2px;
    text-indent: 3px;
    width: 50%;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .textbox,
  #verify_totp {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #f4f6f8;
    text-indent: 0px;
    border-radius: 0px;
  }
  .textbox:focus,
  #verify_totp {
    border: none;
    border-bottom: 2px solid #159aff;
  }

  .errorborder:focus,
  .textbox.errorborder {
    border-bottom: 2px solid #ff8484;
  }
  .backoption {
    margin-bottom: 10px;
  }
  .img_option {
    margin: 0px 10px 0px 0px !important;
  }
  .bg_one,
  .line {
    display: none;
  }
  .signin_head {
    margin-bottom: 30px;
  }
  .btn {
    margin-top: 10px;
    border-radius: 4px;
  }
  .changeloadbtn {
    border-radius: 22px;
  }
  .more {
    margin-right: 0px !important;
  }
  .textindent42 {
    text-indent: 36px;
  }
  .textindent62 {
    text-indent: 56px;
  }
  .textintent52 {
    text-indent: 46px;
  }
  .select2-selection {
    background-color: #f1f9ff;
  }
  .devices .select2-selection {
    background-color: #f1f9ff;
  }
  .select2-search__field {
    width: 280px;
  }
  .applynormal {
    width: 46% !important;
    min-width: 0px;
  }
  .borderless,
  .borderlesstry {
    line-height: 12px;
    font-size: 14px;
  }
  .alert_message,
  .error_message {
    max-width: 300px;
    width: 75%;
  }
  .Alert,
  .Errormsg {
    max-width: 400px !important;
    padding: 0px;
    min-width: 300px;
  }
  .error_icon:before,
  .error_icon:after {
    left: 24px;
  }
  ::placeholder {
    font-weight: 500;
  }
  .mobilehide {
    display: none !important;
  }
  #forgotpassword {
    margin-bottom: 0px;
  }
  #forgotpassword a {
    display: inline-block;
  }
  .fielderror {
    position: absolute;
    margin-top: 5px;
  }
  .trustdevicebox {
    width: auto;
    height: auto;
  }
  #recoverybtn,
  #problemsignin,
  .tryanother {
    position: initial !important;
    margin-top: 70px !important;
  }
  .problemsignincon,
  .recoverymodes,
  #recoverymodeContainer {
    width: 100%;
    margin-left: 0px;
  }
}
.hover-tool-tip {
  position: absolute;
  top: 15px;
  left: 335px;
  background: #fff;
  padding: 20px;
  box-shadow: 0px 0px 10px #0000001a;
  transition: opacity 0.1s;
  border-radius: 5px;
  z-index: 9;
  opacity: 0;
}
.hover-tool-tip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -8px;
  top: 25px;
  left: 0;
  box-sizing: border-box;
  border: 6px solid black;
  border-color: #ffffff transparent transparent #ffffff;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  box-shadow: -6px -6px 10px 0 #0000001a;
}
.hover-tool-tip.no-arrow::after {
  content: none;
}
.hover-tool-tip ul {
  padding: 0;
  margin: 0px 0px 0px 15px;
  list-style: none;
}
.hover-tool-tip p {
  margin: 0px 0px 10px 0px;
  font-size: 14px;
  font-weight: 500;
}
.hover-tool-tip ul li {
  font-size: 12px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: 25px;
}
.hover-tool-tip ul li.success::before {
  background-color: #0dbc83;
}
.hover-tool-tip ul li::before {
  content: "";
  margin-right: 10px;
  background-color: red;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.titlename,
.service_name {
  display: none !important;
}

.signin_head {
  padding-top: 20px;
}

#login_id {
  text-indent: 0 !important;
}

.showcountry_code {
  display: none !important;
}
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="fpwd.css" footer="button" class="language-css line-numbers" scroll="set-scroll" %}}
/* $Id$ */

@font-face {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/robotomonoregular/font.eot");
  src: url("https://webfonts.zohowebstatic.com/robotomonoregular/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.woff")
      format("woff"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/robotomonoregular/font.svg#RobotoMono-Regular")
      format("svg");
}

@font-face {
  font-family: "LatoLgt";
  font-weight: 300;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latolight/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latolight/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latolight/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latolight/font.woff") format("woff"),
    url("https://webfonts.zohowebstatic.com/latolight/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latolight/font.svg#Lato-Light")
      format("svg");
}
@font-face {
  font-family: "LatoReg";
  font-weight: 400;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latoregular/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latoregular/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.woff")
      format("woff"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latoregular/font.svg#Lato-Regular")
      format("svg");
}
@font-face {
  font-family: "LatoSB";
  font-weight: 700;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latobold/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latobold/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latobold/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latobold/font.woff") format("woff"),
    url("https://webfonts.zohowebstatic.com/latobold/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latobold/font.svg#Lato-Bold")
      format("svg");
}

@font-face {
  font-family: "LatoB";
  font-weight: 900;
  font-style: normal;
  src: url("https://webfonts.zohowebstatic.com/latoblack/font.eot");
  src: url("https://webfonts.zohowebstatic.com/latoblack/font.eot?#iefix")
      format("eot"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.woff2")
      format("woff2"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.woff") format("woff"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.ttf")
      format("truetype"),
    url("https://webfonts.zohowebstatic.com/latoblack/font.svg#Lato-Black")
      format("svg");
}

@font-face {
  font-family: "Zoho_Puvi_Regular";
  src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.eot");
  src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.eot")
      format("embedded-opentype"),
    url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2")
      format("woff2"),
    url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.otf")
      format("opentype");
  font-weight: normal;
  font-style: normal;
  /*   font-display: swap */
}

@font-face {
  font-family: "signinicon";
  src: url(/images/signinicon.eot);
  src: url(/images/signinicon.eot) format("embedded-opentype"),
    url(/images/signinicon.woff2) format("woff2"),
    url(/images/signinicon.ttf) format("truetype"),
    url(/images/signinicon.woff) format("woff"),
    url("../images/fonts/signinicon.651f82b8f8f51f33cd0b6331f95b5b4f.svg")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "signinicon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-device:before {
  content: "\e90a";
}
.icon-reload:before {
  content: "\e912";
}
.icon-backarrow:before {
  content: "\e900";
}
.icon-email:before {
  content: "\e904";
}
.icon-hide:before {
  content: "\e907";
}
.icon-otp:before {
  content: "\e90c";
}
.icon-show:before {
  content: "\e914";
}

/* $Id$ */

body {
  margin: 0px;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #0003;
}

.bg_one {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  /* background: url("../images/bg.49756b7c711696d95133fa95451f8e13.svg")
      transparent; */
  background-size: auto 100%;
  z-index: -1;
}

.titlename {
  display: block;
  font-size: 24px;
  color: #000;
  font-weight: 400;
  text-transform: capitalize;
  width: auto;
  margin-bottom: 20px;
}

.Alert,
.Errormsg {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  height: auto;
  min-width: 200px;
  width: fit-content;
  width: -moz-fit-content;
  max-width: 600px;
  background-color: #032239;
  border-radius: 6px;
  position: fixed;
  top: -100px;
  left: 0px;
  right: 0px;
  transition: all 0.2s ease;
  padding: 0px 20px;
  z-index: 2;
}

.tick_icon,
.error_icon {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: #22c856;
  border-radius: 50%;
  background-size: 60px;
  margin: 0px 15px;
  float: left;
  position: relative;
}

.tick_icon:after {
  display: block;
  content: "";
  height: 5px;
  width: 9px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  margin: 7px 6px;
  box-sizing: border-box;
}

.alert_message,
.error_message {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  line-height: 18px;
  margin: 16px 0px;
  margin-right: 20px;
  max-width: 510px;
}

.error_icon {
  background-color: #ff676f;
}
.error_icon:before,
.error_icon:after {
  position: absolute;
  left: 9px;
  top: 5px;
  content: " ";
  height: 10px;
  width: 2px;
  background-color: #ffffff;
}
.error_icon:before {
  transform: rotate(45deg);
}
.error_icon:after {
  transform: rotate(-45deg);
}

.loader {
  width: 36px;
  height: 36px;
  border: 4px solid #159aff;
  border-bottom: 4px solid transparent;
  border-radius: 50%;
  display: block;
  box-sizing: border-box;
  animation: rotate 1s linear infinite;
  position: absolute;
  top: 0px;
  z-index: 7;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
}

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

.blur {
  top: 0px;
  left: 0px;
  bottom: 0px;
  background: #fff;
  width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  z-index: 3;
  opacity: 0.9;
  display: block;
}

.bold_font {
  font-weight: 500;
}

.searchparent {
  height: auto;
}

.textbox_div {
  display: block;
  margin-bottom: 30px;
  position: relative;
}
.textbox {
  display: block;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  border-radius: 2px;
  text-indent: 12px;
  font-size: 16px;
  outline: none;
  border: none;
  padding-right: 12px;
  transition: all 0.2s ease-in-out;
  background: #f9f9f9;
  border: 1px solid #dddddd;
}
.textbox:hover,
.textbox:valid,
.textbox:focus {
  border: 1px solid #b9b9b9;
}

#last_password {
  padding-right: 40px;
}

::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.errorborder {
  border: 2px solid #ff8484 !important;
}

.textbox:-webkit-autofill,
.textbox:-webkit-autofill:hover,
.textbox:-webkit-autofill:focus,
.textbox:-webkit-autofill:active {
  -webkit-box-shadow: inset 0 0 0px 9999px #f9f9f9;
  -webkit-text-fill-color: black;
  background-color: #f9f9f9 !important;
}

.fielderror {
  display: none;
  font-size: 14px;
  margin-top: 10px;
}

.fielderror a {
  text-decoration: none;
  color: #309ff4;
}

#captcha_container {
  display: none;
  border: 1px solid #dddddd;
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 10px;
  border-radius: 4px;
}

#captcha {
  width: 100%;
  display: inline-block;
  height: 40px;
  padding: 0px 12px;
  text-indent: 0px;
  background: #f9f9f9;
}

#captcha_img {
  background-color: #ffffff;
  border: none;
  height: 60px;
  width: 150px;
  margin-left: 20px;
}

#captcha_img img {
  height: 50px;
  width: 150px;
  box-sizing: border-box;
  margin: 0px;
}

.reloadcaptcha {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  background-color: #f2f2f2;
  font-size: 30px;
  box-sizing: border-box;
  color: #0006;
}

.reloadcaptcha:hover {
  color: #000000b3;
}

.load_captcha_btn {
  animation: spin 0.5s linear infinite;
}

#Last_password_div .head_info {
  margin: 0px;
}

.zeroheight {
  width: 0px;
  height: 0px;
  overflow: hidden;
  display: block;
}

.btn {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 44px;
  border-radius: 4px;
  letter-spacing: 0.5;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  border: none;
  margin: auto;
  text-transform: uppercase;
  margin-bottom: 30px;
  transition: width 0.2s ease-in-out;
}

.blue {
  background-color: #159aff;
  color: #fff;
}

.grey {
  background-color: #f3f3f3;
  color: #3a3a3a;
  letter-spacing: 0px;
}

.green {
  box-shadow: 0px 2px 2px #fff;
  background-color: #00c573;
  color: #fff;
}

.blue:hover {
  background: #118be9;
}

.changeloadbtn {
  display: block;
  height: 44px;
  width: 44px;
  border-radius: 22px;
  padding: 0px;
}

.changeloadbtn:before {
  content: "";
  height: 20px;
  width: 20px;
  display: inline-block;
  margin: 9px;
  border: 3px solid #fff;
  border-top: 3px solid #5ab7fe;
  border-radius: 50%;
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.doneBtn {
  position: relative;
}

.doneBtn:before {
  content: "";
  opacity: 1;
  height: 15px;
  width: 6px;
  border: unset;
  border-radius: unset;
  transform-origin: left top;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  left: 12px;
  top: 23px;
  margin: 0px;
  position: absolute;
  transform: scaleX(-1) rotate(135deg);
  animation: tickmark 0.8s ease;
}

@keyframes tickmark {
  0% {
    height: 0px;
    width: 0px;
    border-radius: unset;
    opacity: 1;
  }
  20% {
    height: 0px;
    width: 6px;
    opacity: 1;
    border-radius: unset;
  }
  40% {
    height: 15px;
    width: 6px;
    opacity: 1;
    border-radius: unset;
  }
  100% {
    height: 15px;
    width: 6px;
    opacity: 1;
    border-radius: unset;
  }
}

.doneWithContent span:before {
  content: "";
  opacity: 1;
  height: 14px;
  width: 5px;
  border: unset;
  border-radius: unset;
  transform-origin: left top;
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  display: inline-block;
  margin: 0px;
  position: relative;
  transform: scaleX(-1) rotate(135deg);
  top: 12px;
  left: -21px;
}
.doneWithContent {
  padding-left: 21px;
  position: relative;
}
.doneWithContent:after {
  position: absolute;
  height: 100%;
  content: "";
  display: block;
  left: 0px;
  top: 0px;
  background: #00000008;
  animation-name: btn_loading;
  animation-duration: 4.3s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.restrict_icon {
  display: block;
  height: 102px;
  width: 100%;
  background: url(../images/URLError.76c2ce33de912ad7ae9d2fbfd93ec2c1.png)
    no-repeat transparent;
  background-size: auto 100%;
  margin: auto;
  margin-top: 30px;
  background-position: center;
}
.error_portion {
  display: none;
}
.error_content {
  text-align: center;
}
.error_content .error_header {
  font-size: 20px;
  font-weight: 500;
  margin-top: 30px;
  line-height: 26px;
}
.error_content .error_desc {
  font-size: 16px;
  margin: 10px 0px 30px 0px;
  line-height: 24px;
  font-weight: 500;
  color: #000000cc;
}
.retry_button {
  line-height: 44px;
}
.doneWithContent:hover {
  background: #159aff;
}

.doneWithContent span {
  width: 100%;
  display: block;
  transition: width 0.2s ease-in-out;
  white-space: nowrap;
}
@keyframes btn_loading {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.resend_label {
  display: block;
  text-align: center;
}
.push_resend {
  font-size: 14px;
  color: #626262;
  font-weight: 500;
  line-height: 16px;
  cursor: none;
}

.bottom_option {
  cursor: pointer;
  width: max-content;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: #0091ff;
}

.bottom_line_opt {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0px;
  bottom: 40px;
}

.errorlabel {
  color: #e92b2b;
}

.show_hide_password {
  font-size: 24px;
  color: #00000066;
  position: relative;
  top: -34px;
  right: 13px;
  float: right;
  cursor: pointer;
  line-height: 23px;
}
.show_hide_password:hover {
  color: #000000b3;
}

.select2-results__option {
  list-style-type: none;
  height: 40px;
  box-sizing: border-box;
  padding: 12px 20px;
  font-size: 14px;
  line-height: 16px;
}

.select2-search__field {
  width: 380px;
  height: 32px;
  border: none;
  outline: none;
  background: #f7f7f7;
  border-radius: 2px;
  margin: 10px 8px;
  font-size: 14px;
  padding: 10.5px 8px;
}

.select2-selection {
  display: inline-block;
  outline: none;
  background-color: #f9f9f9;
  height: 40px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.selection {
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 0px;
  height: 43px;
}

#select2-combobox-results {
  padding-left: 0px;
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 400px;
  margin-top: 10px;
  margin-bottom: 0px;
  background: white;
}

.select2-container--open {
  z-index: 10;
  background: #ffffff;
  box-shadow: 0px 5px 8px 2px #0000000d;
  width: auto;
  box-sizing: border-box;
}

.select2 {
  position: absolute;
  background: transparent;
  box-shadow: none;
  display: none;
  margin: 2px;
}
.select2-results__options {
  overflow-y: auto;
  max-height: 200px;
}

.selection {
  width: auto;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  margin: auto;
  display: block;
}
.select2-search--hide,
.select2-selection__clear {
  display: none;
}

#country_code_select {
  width: 50px;
  height: 40px;
  position: absolute;
  opacity: 0;
  display: none;
  z-index: 0;
}
.select_country_code {
  width: 50px;
  height: 40px;
  display: inline-block;
  float: left;
  position: absolute;
  line-height: 39px;
  text-align: center;
  font-size: 16px;
  color: black;
  display: none;
  z-index: 0;
}

.pic {
  width: 20px;
  height: 14px;
  background-size: 280px 252px;
  background-image: url("../images/Flags2x.0b8394efb0ea9167cef2465fb8f63d78.png");
  float: left;
}
.cc {
  float: right;
  color: #aeaeae;
}
.cn {
  margin-left: 10px;
}
.select2-results__option--highlighted {
  background: #f4f6f8;
}

.searchparent {
  height: auto;
}

.select2-results__options {
  padding-left: 0px;
}

.optionstry {
  display: table;
  width: 100%;
  height: auto;
  padding: 20px 50px;
  box-sizing: border-box;
  cursor: pointer;
}

.optionstry:hover {
  background-color: #f9f9f9;
}

.img_option_try {
  margin: 12px 0px;
}

.img_option {
  display: table-cell;
  width: 30px;
  color: #499aff;
  font-size: 30px;
  vertical-align: top;
  height: 30px;
}

.option_details_try {
  height: auto;
  width: auto;
  padding-left: 12px;
  vertical-align: top;
  box-sizing: border-box;
}

.option_title_try {
  display: block;
  font-size: 16px;
  font-weight: 500;
}

.option_description {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: #000c;
  margin-top: 5px;
}

#email_confirm_div .optionstry,
#mobile_confirm_div .optionstry {
  padding: 22px 40px;
}

#email_confirm_div .img_option,
#mobile_confirm_div .img_option {
  font-size: 20px;
  width: 20px;
  height: 20px;
}
#email_confirm_div .option_details_try,
#mobile_confirm_div .option_details_try {
  line-height: 20px;
}

.otp_container::after,
.mini_txtbox:after {
  content: attr(placeholder);
  height: 54px;
  line-height: 54px;
  position: absolute;
  color: #b9bcbe;
  left: 15px;
  top: 0px;
  z-index: 1;
}

.mini_txtbox:after {
  line-height: 42px;
  height: 42px;
}

.hidePlaceHolder::after {
  z-index: -1 !important;
}

.otp_verify {
  margin-top: 10px;
}

.toggle_active {
  background: #f9f9f9;
  border-radius: 2px;
}

.optionmod {
  margin-left: 0px;
  box-sizing: border-box;
}

.option_title_try {
  color: #000000;
}

.mini_btn {
  margin-left: 10px;
  width: 30%;
  float: right;
  font-size: 12px;
  margin-bottom: 0px;
  margin-right: 0px;
}

.backoption {
  width: 30px;
  height: 30px;
  font-size: 21px;
  display: inline-block;
  float: left;
  color: #666666;
  padding: 4px 0px;
  box-sizing: border-box;
  margin-right: 5px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
}
.backoption:hover {
  background: #f4f4f4;
}

#select_reocvery_mobile .fieldcontainer,
#other_options_div .fieldcontainer,
#select_reocvery_email .fieldcontainer {
  width: auto;
  margin: 0 -40px;
  margin-bottom: 40px;
}

.text16 {
  display: block;
  text-align: center;
  margin-bottom: 30px;
  color: #626262;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.pointer {
  cursor: pointer;
}

.pass_policy {
  color: #8c8c8c;
  font-size: 14px;
  padding-top: 10px;
}

.nomargin {
  display: block;
  margin: 0px;
}

.tryanother,
.extra_options {
  width: fit-content;
  margin: 0 auto;
  cursor: pointer;
  margin-top: 20px;
}

.bluetext_action {
  display: inline-block;
  font-size: 14px;
  color: #159aff;
  font-weight: 500;
  line-height: 16px;
  cursor: pointer;
  margin-top: 5px;
}

.nonclickelem {
  color: #626262;
  pointer-events: none;
  cursor: none;
}

.bluetext_action a {
  text-decoration: none;
}

.recovery_container {
  display: block;
  width: 480px;
  height: 350px;
  background-color: #fff;
  box-shadow: 0px 2px 30px 0px #2b2b2b17;
  margin: auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.recovery_box {
  width: 480px;
  min-height: 500px;
  height: auto;
  background: #fff;
  box-sizing: border-box;
  padding: 40px 40px;
  border-radius: 2px;
  transition: all 0.1s ease-in-out;
  float: left;
  overflow-y: auto;
  display: table-cell;
  border-right: 2px solid #f1f1f1;
}

.menuicon {
  display: inline-block;
  float: left;
  height: 14px;
  width: 14px;
  padding: 14px;
  font-size: 14px;
  text-align: center;
}

.user_info {
  display: inline-flex;
  justify-content: space-between;
  border: 1px solid #eeeeee;
  margin-bottom: 20px;
  border-radius: 7px;
  cursor: pointer;
  box-sizing: border-box;
  max-width: 100%;
  flex-wrap: nowrap;
}

.user_info_space {
  margin-top: 20px;
}

.support_temp_info {
  margin-bottom: 30px;
  line-height: 24px;
}

.menutext {
  display: inline-block;
  font-size: 16px;
  padding: 12px 14px;
  line-height: 20px;
  width: auto;
  word-break: break-all;
}

.fieldcontainer {
  margin-bottom: 40px;
}

.change_user {
  position: relative;
  float: right;
  font-size: 14px;
  padding: 0px 14px 0px 0px;
  display: inline-block;
  color: #0091ff;
  line-height: 38px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info_head {
  display: block;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 30px;
  overflow: auto;
  transition: all 0.1s ease-in-out;
}

.info_head #headtitle {
  display: block;
}
.head_info {
  font-size: 16px;
  margin: 10px 0px 0px 0px;
  line-height: 24px;
  font-weight: 400;
  color: #000000e6;
}

.user_info_space + .head_info {
  margin: 0px;
}

.otp_container {
  display: block;
  width: 100%;
  height: 54px;
  box-sizing: border-box;
  border-radius: 2px;
  font-size: 16px;
  outline: none;
  padding: 0px 15px;
  transition: all 0.2s ease-in-out;
  background: #f9f9f9;
  border: 1px solid #dddddd;
  text-indent: 0px;
}

.customOtp {
  border: none;
  outline: none;
  background: transparent;
  height: 100%;
  font-size: 16px;
  text-align: left;
  width: 22px;
  padding: 0px;
}
.textindent42 {
  text-indent: 46px;
}
.textindent62 {
  text-indent: 56px;
}
.textintent52 {
  text-indent: 51px;
}

.box_header_load {
  display: block;
  height: auto;
  padding: 50px 0px;
  -webkit-animation-name: blink; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 0.05;
}

.box_head_load {
  display: block;
  width: 180px;
  height: 18px;
  border-radius: 8px;
  background-color: #000;
}

.blink_btn {
  -webkit-animation-name: blink; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 0.05;
}
.box_define_load {
  display: block;
  max-width: 800px;
  width: 100%;
  height: 16px;
  border-radius: 8px;
  background-color: #000;
  margin-top: 20px;
}

@keyframes blink {
  0% {
    opacity: 0.08;
  }
  50% {
    opacity: 0.01;
  }
  100% {
    opacity: 0.08;
  }
}

#loading_div,
#Last_password_div,
#mobile_confirm_div,
#email_confirm_div,
#confirm_otp_div,
#other_options_div,
#contact_support_div,
#change_password_div,
#recovery_device_div,
#password_matched_div,
#username_div,
#terminate_session_div {
  display: none;
}

#multiple_reocvery_mobile,
#single_reocvery_mobile,
#multiple_reocvery_email,
#single_reocvery_email {
  display: none;
}

.verify_mob_container,
.verify_email_container,
.select_device_othermodes {
  display: none;
}

.devices {
  position: relative;
  padding: 0px;
  width: fit-content !important;
  width: -moz-fit-content !important;
  width: -webkit-fit-content !important;
  margin: auto;
  border-radius: 8px;
  box-sizing: border-box;
  margin-bottom: 30px;
  background: #fcfcfc;
}
.device_title {
  position: absolute;
  top: 12px;
  left: 48px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #000000b3;
  line-height: 14px;
  z-index: 11;
}
.select2-container--device_select {
  margin: 0px;
  display: block;
  position: relative;
  margin: auto;
  cursor: pointer;
  border: 1px solid #dddddd;
  border-radius: 8px;
  overflow: hidden;
}
#recovery_device_select + .select2-container {
  width: fit-content !important;
  width: -moz-fit-content !important;
  width: -webkit-fit-content !important;
}
.select2-container--device_select .select2-selection__arrow {
  position: absolute;
  top: 0px;
  right: 14px;
  width: auto;
  height: 100%;
}
.select2-container--device_select .select2-selection__arrow b {
  border-color: transparent #00000066 #00000066 transparent;
  border-style: solid;
  transform: rotate(45deg);
  border-width: 2px;
  height: 4px;
  width: 4px;
  position: relative;
  border-radius: 1px;
  display: inline-block;
  top: 24px;
}

.select2-container--device_select .selection {
  margin: auto;
  height: 60px;
  box-sizing: border-box;
  min-width: 140px;
}
.select2-container--device_select .select2-selection {
  height: unset;
  padding: 12px 34px 12px 14px;
}
.select2-container--device_select .select_con {
  font-weight: 400;
  margin-left: 12px;
  margin-top: 16px;
}
.select2-container--device_select .select_icon {
  margin-top: 7px;
}

.select2-results__options {
  margin: 0px;
}

.select2-results__options .select_con {
  margin: 0px;
}

.select2-dropdown .select_con {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hideArrow .select2-selection {
  cursor: default;
  padding: 12px 14px;
}
.hideArrow .select2-selection__arrow {
  display: none;
}
.secondary_devices {
  display: none;
  width: 150px;
  margin: auto;
  padding: 8px 18px;
  border-radius: 18px;
  background-color: #f4f6f8;
  border: none;
  overflow: hidden;
  max-width: 200px;
  text-overflow: ellipsis;
  font-size: 16px;
  outline: none;
}

.secondary_devices .select2-container--open {
  width: 200px;
}

.device_select {
  display: block;
  position: unset;
  width: auto !important;
}

.device_selection {
  padding: 8px 14px;
  border-radius: 18px;
}

.deviceparent {
  text-align: center;
  display: none;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.deviceparent {
  display: block;
}

.deviceinfo {
  display: inline-block;
}

.devicetext {
  margin: 0 auto;
  margin-left: 30px;
}

.select_icon {
  float: left;
  font-size: 20;
  color: #499aff;
}

.select_con {
  float: left;
  width: auto;
  overflow: hidden;
  margin-left: 5px;
  text-overflow: ellipsis;
}

.options_selct {
  max-width: 180px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  width: auto;
}

.contact_support_class {
  min-height: unset;
}

.contact_support_class .recovery_box {
  min-height: unset;
}

#mfa_totp_section {
  display: none;
}

/* Terminate_session page */

#terminate_session_form {
  overflow: auto;
}

#terminate_session_form .checkbox_div {
  position: relative;
}

#terminate_session_form .checkbox_check {
  position: absolute;
  z-index: 1;
  opacity: 0;
  left: 15px;
  margin: 0px;
  height: 16px;
  cursor: pointer;
  width: 16px;
}

#terminate_session_form .checkbox {
  float: left;
  z-index: 0;
  height: 12px;
  width: 12px;
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 2px;
  position: relative;
  top: 1.5px;
  overflow: hidden;
  background-color: #fff;
}

#terminate_session_form .checkbox_check:hover ~ .checkbox {
  border: 2px solid #159aff;
}

#terminate_session_form .checkbox_check:checked ~ .checkbox {
  background-color: #159aff;
  border-color: #159aff;
}

#terminate_session_form .checkbox .checkbox_tick {
  display: block;
  height: 3px;
  width: 8px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  margin: 2px 1px;
}

#terminate_session_form .checkbox_label {
  cursor: pointer;
  margin: 0px 6px;
  line-height: 20px;
  width: 85%;
  display: inline-block;
}

#terminate_session_form .showOneAuthLable {
  border: 1px solid #e7e7e7;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  max-width: 420px;
}

.oneAuthLable {
  display: inline-flex;
  max-width: 420px;
  padding: 15px;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #e7e7e7;
  border-top: none;
  border-radius: 0px 0px 15px 15px;
}

.oneauth_icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background-size: 40px 40px;
}

.one_auth_icon_v2 {
  background-image: url(../images/oneAuth2.4b2a6945d5ecd70b703ba18f5f11eb68.png);
}

.oneAuthLable .text_container {
  flex: 1;
  margin: 0px 10px;
}

.oneAuthLable .text_header {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}

.oneAuthLable .text_desc {
  font-size: 10px;
  line-height: 14px;
}

.oneAuthLable .togglebtn_div {
  height: 16px;
  padding: 4px;
  width: 30px;
  display: inline-block;
  position: relative;
}

.oneAuthLable .real_togglebtn {
  cursor: pointer;
  display: inline-block;
  position: relative;
  height: 16px;
  width: 30px;
  z-index: 1;
  opacity: 0;
  position: absolute;
  margin: 0px;
}

.real_togglebtn:checked ~ .togglebase {
  background-color: #10bc83;
}

.real_togglebtn:checked ~ .togglebase .toggle_circle {
  left: 16px;
}

.oneAuthLable .togglebase {
  height: 16px;
  width: 30px;
  display: inline-block;
  background: #ccc;
  border-radius: 10px;
  position: absolute;
}

.oneAuthLable .toggle_circle {
  transition: all 0.2s ease-in-out;
  height: 12px;
  width: 12px;
  background-color: #fff;
  border-radius: 10px;
  display: inline-block;
  position: absolute;
  left: 2px;
  top: 2px;
  box-shadow: 0px 0px 5px #999;
}

#terminate_session_submit {
  margin-top: 30px;
}

@media only screen and (max-width: 600px) {
  body {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }

  .bg_one {
    display: none;
  }

  .alert_message,
  .error_message {
    max-width: 300px;
    width: 75%;
  }
  .Alert,
  .Errormsg {
    max-width: 400px !important;
    padding: 0px;
    min-width: 300px;
  }

  .textbox,
  .otp_container {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #f4f6f8;
    border-radius: 0px;
  }

  .textbox {
    transition: unset;
  }
  .textbox:-webkit-autofill,
  .textbox:-webkit-autofill:hover,
  .textbox:-webkit-autofill:focus,
  .textbox:-webkit-autofill:active {
    -webkit-box-shadow: inset 0 0 0px 9999px white;
    -webkit-text-fill-color: black;
  }

  .textbox:valid,
  .textbox:hover {
    border: none;
    border-bottom: 2px solid #159aff;
  }

  #captcha {
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .changeloadbtn {
    border-radius: 22px;
  }

  .btn {
    margin-top: 10px;
    border-radius: 4px;
  }
  .mini_btn {
    margin-top: 0px;
  }
  .optionstry:hover {
    background-color: #fff;
  }

  .img_option {
    margin: 0px 10px 0px 0px !important;
  }

  .option_details_try {
    color: #555555;
    display: inline-block;
    margin: 0px;
  }

  #multiple_reocvery_mobile .fieldcontainer,
  #multiple_reocvery_email .fieldcontainer,
  #other_options_div .fieldcontainer {
    margin: 0 -30px;
    margin-bottom: 40px;
  }

  .optionmod {
    margin-left: 0px;
    padding: 15px 30px;
    line-height: 24px;
  }

  .recovery_box {
    width: 100%;
    padding: 0px 30px;
    height: auto;
    border-right: none;
    padding-bottom: 40px;
  }

  .recovery_container {
    width: 100%;
    box-shadow: none;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    margin-top: 40px;
    height: auto;
    overflow: hidden;
  }

  .info_head {
    margin-bottom: 30px;
  }
}

.devices .select2-container--open {
  background: transparent;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  .restrict_icon {
    background: url(../images/URLError2x.5e762e74a83ee0cda60b8f7c9df299a8.png)
      no-repeat transparent center/auto 100%;
  }
}
.hide {
  display: none;
}

.hover-tool-tip {
  position: absolute;
  top: 15px;
  left: 335px;
  background: #fff;
  padding: 20px;
  box-shadow: 0px 0px 10px #0000001a;
  transition: opacity 0.1s;
  border-radius: 5px;
  z-index: 9;
  opacity: 0;
}
.hover-tool-tip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -8px;
  top: 25px;
  left: 0;
  box-sizing: border-box;
  border: 6px solid black;
  border-color: #ffffff transparent transparent #ffffff;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  box-shadow: -6px -6px 10px 0 #0000001a;
}
.hover-tool-tip.no-arrow::after {
  content: none;
}
.hover-tool-tip ul {
  padding: 0;
  margin: 0px 0px 0px 15px;
  list-style: none;
}
.hover-tool-tip p {
  margin: 0px 0px 10px 0px;
  font-size: 14px;
  font-weight: 500;
}
.hover-tool-tip ul li {
  font-size: 12px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: 25px;
}
.hover-tool-tip ul li.success::before {
  background-color: #0dbc83;
}
.hover-tool-tip ul li::before {
  margin-right: 10px;
  background-color: red;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.titlename {
  display: none !important;
}

/* #lookup_div {
    display: none !important;
  } */

#lookup_div .head_info {
  font-size: 0;
}

#lookup_div .head_info::before {
  content: "Enter your email address";
  font-size: 15px;
}

.info_head {
  padding-top: 20px;
}

.rec_modes_other_options {
  display: none !important;
}

.recovery_container {
  height: 29rem;
}

.Last_password_div {
  margin-top: -30px;
}
{{%/panel_with_adjustment%}}

Copy the code given below and paste it in {{%badge%}}App.css{{%/badge%}}, {{%badge%}}App.js{{%/badge%}}, {{%badge%}}index.js{{%/badge%}}, {{%badge%}}index.css{{%/badge%}}, {{%badge%}}Button.css{{%/badge%}}, {{%badge%}}Button.js{{%/badge%}}, {{%badge%}}Layout.js{{%/badge%}}, {{%badge%}}LoginPage.js{{%/badge%}}, {{%badge%}}UserProfile.css{{%/badge%}}, {{%badge%}}UserProfile.js{{%/badge%}}, {{%badge%}}Signup.css{{%/badge%}} and {{%badge%}}Signup.js{{%/badge%}} respectively, located in client directory ({{%badge%}}zylkertechnologies/src/{{%/badge%}}) using an IDE and save the file.

{{% panel_with_adjustment header="App.css" footer="button" class="language-css line-numbers" scroll="set-scroll" %}}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #c0c0c0;
  height: inherit;
}
.inputs {
  width: 90%;
  padding: 15px;
  margin: 15px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  border-radius: 8px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 1;
}

#login {
  height: 29rem;
}
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="App.js" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
import { HashRouter, Routes, Route, Navigate } from "react-router-dom";

import Layout from "./Layout";
import Signup from "./Signup";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Layout />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="" element={<Navigate to="/" replace />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </HashRouter>
  );
}

export default App;
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="index.js" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
import "./App.css";

import React from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="Button.css" footer="button" class="language-css line-numbers" scroll="set-scroll" %}}
button {
  background-color: #4CAF50;
    color: white;
    padding: 8px 14px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    font-size: 16px;
    width: 120px;
}
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="Button.js" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
import { useCallback } from "react";
import "./Button.css";

function Button({ btnvalue }) {
  const logout = useCallback(() => {  
    window.catalyst.auth.signOut('/');
  }, []);
  return (
    <div id="logoutbtn">
      <button onClick={logout} id="logout">
        {btnvalue.title}
      </button>
    </div>
  );
}

export default Button;
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="Layout.js" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
import UserProfile from "./UserProfile";
import LoginPage from "./LoginPage.js";
import { useEffect, useState, useRef } from "react";

function Layout() {
  const [isFetching, setIsFetching] = useState(true);
  const [isUserAuthenticated, setIsUserAuthenticated] = useState(false);
  const [userDetails, setUserDetails] = useState({
    firstName: "",
    lastName: "",
    mailid: "",
    timeZone: "",
    createdTime: "",
  });

  useEffect(() => {
    window.catalyst.auth
      .isUserAuthenticated()
      .then((result) => {
        setUserDetails({
          firstName: result.content.first_name,
          lastName: result.content.last_name,
          mailid: result.content.email_id,
          timeZone: result.content.time_zone,
          createdTime: result.content.created_time,
        });
        setIsUserAuthenticated(true);
      })
      .catch((err) => {})
      .finally(() => {
        setIsFetching(false);
      });
  }, []);
  return (
    <>
      {isFetching ? (
        <p>Loading ....</p>
      ) : isUserAuthenticated ? (
        <UserProfile userDetails={userDetails} />
      ) : (
        <LoginPage />
      )}
    </>
  );
}

export default Layout;
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="LoginPage.js" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
import { useEffect } from "react";
import { Link } from "react-router-dom";


const LoginPage = () => {
useEffect(() => {
//config is optional
const config =      
{
css_url : "/app/embeddediframe.css", // Login page customization css file path, if not provided default css will be rendered
is_customize_forgot_password : false, // Default value is false. Keep this value as true, if you wish to customize Forgot Password page
forgot_password_id : "login", // Element id in which forgot password page should be loaded, by default will render in the "loginDivElementId"
forgot_password_css_url : "/app/fpwd.css" // Forgot password page customization css file path, if not provided default css will be rendered
} 
catalyst.auth.signIn("login", config);  
}, []);
return (
<div className="container">
   
<img
width="80px"
height="80px"
src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
/>

<h1 className="title">User Profile Management</h1>
<div id="login"></div>
<p className="homepage">
<b>
Don't have an account?{" "}
<Link
to="/signup"
style={{ color: "blue", textDecorationLine: "underline" }}
>
Sign-up
</Link>{" "}
now!
</b>
</p>

</div>
);
};
export default LoginPage;
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="UserProfile.css" footer="button" class="language-css line-numbers" scroll="set-scroll" %}}
.card {
  margin: auto;
  text-align: center;
  font-family: arial;
  text-align: center;
  font-weight: bold;
}

.title {
  font-size: 23px;
  color: black;
}
#userimg {
  height: 20%;
  width: 15%;
}

div.forgotpwd {
  display: none;
}

/* Full-width input fields */
input[type="text"] {
  width: 90%;
  padding: 15px;
  margin: 15px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  border-radius: 8px;
}

/* Add a background color when the inputs get focus */
input[type="text"]:focus,
input[type="password"]:focus {
  background-color: #ddd;
  outline: none;
}

button:hover {
  opacity: 1;
}

/* Float cancel and signup buttons and add an equal width */
.seperatebtn {
  width: 10%;
  padding: 8px;
  border-radius: 8px;
}

.signupbtn {
  width: 10%;
  padding: 8px;
  border-radius: 8px;
}

.signupfnbtn {
  width: 20%;
  padding: 8px;
  border-radius: 8px;
}

.pwdfnbtn {
  width: 40%;
  padding: 8px;
  border-radius: 8px;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #474e5d;
}

/* Modal Content/Box */
.modal-content {
  background-color: #c0c0c0;
  margin: 5% auto 15% auto;
  /* 5% from the top, 15% from the bottom and centered */
  width: 25%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

p.homepage {
  font-size: 23px;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 100px) {
  .signupbtn {
    width: 100%;
  }
}
.container {
  text-align: center;
}
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="UserProfile.js" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
import Button from "./Button";
import "./UserProfile.css";

function UserProfile({ userDetails }) {
return (
<div className="card">
<br></br>
<h1 className="title">User Profile Information</h1>
<img
id="userimg"
width="200px"
height="450px"
src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
/>

<p className="title" id="fname">
{"First Name : " + userDetails.firstName}
</p>
<p className="title" id="lname">
{"Last Name: " + userDetails.lastName}
</p>
<p className="title" id="mailid">
{"Email Address: " + userDetails.mailid}
</p>
<p className="title" id="tzone">
{"Time Zone: " + userDetails.timeZone}
</p>
<p className="title" id="ctime">
{"Joined On: " + userDetails.createdTime}
</p>
<Button btnvalue={{ title: "Logout" }}></Button>
</div>
);
}
export default UserProfile;
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="Signup.js" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
import "./Signup.css";
import React, { useState } from "react";
function Signup() {
const [displayText, setDisplayText] = useState("");
const [form, setForm] = useState({
firstName: "",
lastName: "",
email: "",
});
const [showForm, setShowForm] = useState(true);
const handleSubmit = async (event) => {
event.preventDefault();
setShowForm(false);
setDisplayText(
"An account verification email has been sent to your email address"
);
var data = {
first_name: form.firstName,
last_name: form.lastName,
email_id: form.email,
platform_type: "web",
};
const auth = window.catalyst.auth;
var signupResponse = await auth.signUp(data);
debugger;
if (signupResponse.status == 200) {
setTimeout(function () {
window.location.href = "index.html";
}, 3000);
} else {
alert(signupResponse.message);
}
};
return (
<div id="signup" className="signup">
{showForm ? (
<div>
<center>
<img
width="80px"
height="80px"
src="https://cdn2.iconfinder.com/data/icons/user-management/512/profile_settings-512.png"
/>
<h1>User Profile Management</h1>
</center>
<form onSubmit={handleSubmit} className="modal-content">
<center>
<h1>Sign Up</h1>
<p>Please fill this form to sign up for a new account.</p>
</center>
<label htmlFor="firstName">
<b>First Name</b>
<input
name="firstName"
className="inputs"
placeholder="Enter First Name"
value={form.firstName}
onChange={(e) => {
    setForm({
    ...form,
    firstName: e.target.value,
    });
}}
required
/>
</label>
<label htmlFor="lastName">
<b>Last Name</b>
<input
className="inputs"
placeholder="Enter Last Name"
value={form.lastName}
onChange={(e) => {
    setForm({
    ...form,
    lastName: e.target.value,
    });
}}
required
/>
</label>
<label htmlFor="email">
<b>Email</b>
<input
className="inputs"
placeholder="Enter email address"
value={form.email}
onChange={(e) => {
    setForm({
    ...form,
    email: e.target.value,
    });
}}
required
/>
</label>
<p>
By creating an account, you agree to our{" "}
<a
href="https://www.zoho.com/catalyst/terms.html"
target="_blank"
rel="noopener noreferrer"
id="link"
>
Terms & Conditions
</a>
.
</p>
<center>
<input type="submit" value="Sign Up" className="signupfnbtn" />
</center>
</form>{" "}
</div>
) : (
<p>{displayText}</p>
)}
</div>
);
}
export default Signup;

{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="Signup.css" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
input[type="submit"] {
  background-color: green;
  color: white;
  width: 40%;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
  border: none;
  cursor: pointer;
}
#link {
  font-size: medium;
  color: blue;
}
.modal-content {
  background-color: #c0c0c0;
  margin: 30px auto;
  /* 5% from the top, 15% from the bottom and centered */
  width: 25%;
  /* Could be more or less, depending on screen size */
}
.signupfnbtn {
  width: 30%;
  padding: 8px;
  border-radius: 8px;
  background-color: green;
  height: 100%;
}
p {
  text-align: center;
  font-size: medium;
  font-weight: bold;
}
{{%/panel_with_adjustment%}}

{{% panel_with_adjustment header="client-package.json" footer="button" class="language-javascript line-numbers" scroll="set-scroll" %}}
{
    "name": "zylkertechnologies",
    "version": "0.0.1",
    "homepage": "index.html",
    "login_redirect": "index.html"
}
{{%/panel_with_adjustment%}}

The client directory is now configured.

Let’s go over the working of the function and the client code:

* The end-user will first encounter the *Login Page* that you configured and styled in the console.
* To create an account, they will click the **Sign Up** option and be directed to the *Sign Up* page.

{{%note%}}{{%bold%}}Note:{{%/bold%}} End-users can either sign up to your application using their {{%link href="/en/cloud-scale/help/authentication/social-logins/introduction/" %}}Identity Provider Logins{{%/link%}} or use the conventional method of signing up to the application using their email address.{{%/note%}}

* Once the information is inputted and they click **Sign Up**, or if they attempt to sign up using a Identity Provider Login of their choice, their details will be provided as a JSON input to the {{%link href="/en/cloud-scale/help/authentication/whitelisting/custom-user-validation/introduction/" %}}Custom User Validation{{%/link%}} function ({{%badge%}}authorization_portal_function/index.js{{%/badge%}}).

* The function will only authenticate users if the condition you have coded is satisfied. For this tutorial, the users will only be authenticated if they signed up to the application using a Zylker registered email address.

* Upon successful authentication, an {{%link href="/en/cloud-scale/help/authentication/email-templates/introduction/" %}}Email Verification{{%/link%}} email will be sent to the account they used to sign up to the application.

{{%note%}}{{%bold%}}Note:{{%/bold%}} Because we are using Embedded Login, a native Catalyst authentication type, no additional logic to trigger the appropriate emails is required. It will be handled by Catalyst automatically.{{%/note%}}

* Once the user verifies their email address by clicking the link provided in the email, they will be signed up to the application. Their details can be viewed in the {{%link href="/en/cloud-scale/help/authentication/user-management/introduction/" %}}User Management{{%/link%}} section of the *Authentication* component.

* The end-user can now log in to the application using their authenticated credentials.

* The end-user can also reset their password by clicking the **Forgot Password** option. In this event, the *Password Reset* email will be sent to their registered email. Following the steps mentioned in the email, they can easily reset their credentials.
{{%/tab%}}
{{%/tabs%}}


--------------------------------------------------------------------------------
title: "Test the Application"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.682Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/test-app/"
service: "All Services"
related:
- Serve CLI Resources (/en/cli/v1/serve-resources/introduction)

--------------------------------------------------------------------------------


# Test the Application

Before you deploy the application to the remote console, you can test the application on a local server and check if everything works using the Catalyst CLI. For detailed information on {{%badge%}}catalyst serve{{%/badge%}}, refer to the {{%link href="/en/cli/v1/serve-resources/introduction" %}}Serve Resources help page{{%/link%}}.

To serve the Catalyst project locally, execute the following command from your project directory:

{{%cli%}}catalyst serve{{%/cli%}}

The authorization portal application will now be served at default {{%badge%}}port 3000{{%/badge%}}. The local endpoint URLs of the components will be displayed in the CLI.

{{%tabs%}}
{{%tab "Basic web app" %}}



{{%note%}}{{%bold%}}Note:{{%/bold%}} Every time you access the homepage or any of the sub-pages of your client, or the function, the CLI will display a live log of the accessed URL, along with the HTTP method that is used to access it.{{%/note%}}

You can now open the client component’s local URL in a browser to access the application.

<br />

### Test Case 1

#### Sign up using email address

1. Click **Sign Up** to create a new account.
<br />

2. Enter the required details and click **Sign Up**.


3. The {{%link href="/en/cloud-scale/help/authentication/email-templates/introduction/" %}}Email Verification{{%/link%}} email will be sent to the email address you used to sign up.


4. Click the link in the email
<br />

5. Follow the instructions and set your password


Once the password is set, you will be signed in to the application.
<br />

You can verify this by viewing the user information in the {{%link href="/en/cloud-scale/help/authentication/user-management/introduction/" %}}User Management{{%/link%}} section of the *Authentication* component in the console.
<br />

### Test Case 2

#### Test Custom User Validation

1. Sign up to the application using an email address that will induce a failure instance.
<br />

{{%note%}}{{%bold%}}Note:{{%/bold%}} For the purpose of this tutorial, we have coded a logic for the Custom User Validation function where if the user's email provider is anyone other than Zylker Technology ({{%badge%}}@zylker.com{{%/badge%}}) the end-user will not be able to sign up to the application.{{%/note%}}

2. You will not be able to sign up to the application using any email address other than the one coded to permit in the function logic.
<br />

### Test Case 3

#### Sign up to the application using Identity Provider Logins

1. You can click a identity provider login that you had configured to begin the sign up process. For this test, we are signing up using the {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-zoho-social-login" %}}Zoho Identity Provider login{{%/link%}}.
<br />

2. Click **Accept**.
<br />

You will be logged in to the application.
<br />

You can verify the end-user has been added by viewing their details in the *User Management* section of the Authentication component in the console.

### Test Case 4

#### Password reset functionality

1. Click the **Forgot Password** option.


2. Enter the email address
<br />

3. Enter the captcha.
<br />

4. You can still unlock an option if you remember any earlier password you had used to create this account. However, to test this functionality, click **Continue to reset password**.
<br />

5. Click **SEND OTP** to send the OTP to your email address.
<br />

6. Enter the OTP received in your email and click **Verify**.
<br />

7. You can create your new password now and click **Change Password**.
<br />

You will be redirected to the login page, where you can log in to the application using the new password.
{{%/tab%}}

{{%tab "React web app" %}}



{{%note%}}{{%bold%}}Note:{{%/bold%}} Every time you access the homepage or any of the sub-pages of your client, or the function, the CLI will display a live log of the accessed URL, along with the HTTP method that is used to access it.{{%/note%}}

You can now open the client component’s local URL in a browser to access the application.

<br />

### Test Case 1

#### Sign up using email address

1. Click **Sign Up** to create a new account.
<br />

2. Enter the required details and click **Sign Up**.


3. The {{%link href="/en/cloud-scale/help/authentication/email-templates/introduction/" %}}Email Verification{{%/link%}} email will be sent to the email address you used to sign up.


4. Click the link in the email
<br />

5. Follow the instructions and set your password


Once the password is set, you will be signed in to the application.
<br />

You can verify this by viewing the user information in the {{%link href="/en/cloud-scale/help/authentication/user-management/introduction/" %}}User Management{{%/link%}} section of the *Authentication* component in the console.
<br />

### Test Case 2

#### Test Custom User Validation

1. Sign up to the application using an email address that will induce a failure instance.
<br />

{{%note%}}{{%bold%}}Note:{{%/bold%}} For the purpose of this tutorial, we have coded a logic for the Custom User Validation function where if the user's email provider is anyone other than Zylker Technology ({{%badge%}}@zylker.com{{%/badge%}}) the end-user will not be able to sign up to the application.{{%/note%}}

2. You will not be able to sign up to the application using any email address other than the one coded to permit in the function logic.
<br />

### Test Case 3

#### Sign up to the application using Identity Provider Logins

1. You can click a identity provider login that you had configured to begin the sign up process. For this test, we are signing up using the {{%link href="/en/cloud-scale/help/authentication/social-logins/configuring-social-logins/#enable-zoho-social-login" %}}Zoho Identity Provider login{{%/link%}}.
<br />

2. Click **Accept**.
<br />

You will be logged in to the application.
<br />

You can verify the end-user has been added by viewing their details in the *User Management* section of the Authentication component in the console.

### Test Case 4

#### Password reset functionality

1. Click the **Forgot Password** option.


2. Enter the email address
<br />

3. Enter the captcha.
<br />

4. You can still unlock an option if you remember any earlier password you had used to create this account. However, to test this functionality, click **Continue to reset password**.
<br />

5. Click **SEND OTP** to send the OTP to your email address.
<br />

6. Enter the OTP received in your email and click **Verify**.
<br />

7. You can create your new password now and click **Change Password**.
<br />

You will be redirected to the login page, where you can log in to the application using the new password.
{{%/tab%}}
{{%/tabs%}}

--------------------------------------------------------------------------------
title: "Deploy the Application"
description: "Create a simple web application using the features of Catalyst Embedded Authentication that provides user sign-up, application login, password reset, and implements sign-in using common identity providers."
last_updated: "2026-03-18T07:41:08.689Z"
source: "https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/deploy-app/"
service: "All Services"
related:
- Deploy CLI Resources (/en/cli/v1/deploy-resources/introduction/)
- Web Client Hosting (/en/cloud-scale/help/web-client-hosting/introduction)

--------------------------------------------------------------------------------


# Deploy the Application

To {{%link href="/en/cli/v1/deploy-resources/introduction/" %}}deploy your Catalyst project{{%/link%}} from the CLI, run the following command in your terminal from your project directory:

{{%cli%}}catalyst deploy{{%/cli%}}

The function is deployed first, followed by the client component. The URL endpoints of the components will be displayed in the CLI:

{{%tabs%}}
{{%tab "Basic web app" %}}



{{%note%}}{{%bold%}}Note{{%/bold%}} You can also use the {{%badge%}}catalyst deploy --only client{{%/badge%}} CLI command to deploy the client component alone, as the function component was already deployed.{{%/note%}}

You can now open the client component’s URL in a browser to access the deployed application. The authorization portal application can now be accessed from its web app URL.


The authorization portal application is now functional and should work without any errors.
{{%/tab%}}

{{%tab "React web app" %}}


{{%note%}}{{%bold%}}Note{{%/bold%}} You can also use the {{%badge%}}catalyst deploy --only client{{%/badge%}} CLI command to deploy the client component alone, as the function component was already deployed.{{%/note%}}

You can now open the client component’s URL in a browser to access the deployed application. The authorization portal application can now be accessed from its web app URL.


The authorization portal application is now functional and should work without any errors.
{{%/tab%}}
{{%/tabs%}}