Catalyst

by Zoho
×
Cancelar

ACCEDER A ESTA PÁGINA
  • Tutoriales
  • FAQ
  • Herramientas de desarrollo
    CLI
    SDK
    Java Node.js Python Web Android iOS Flutter
    API REST
    Utilidades
    Extensiones Herramientas Integraciones
    • Ir a la consola

    Aviso:

    Para brindarle información de soporte completa de manera más rápida, el contenido de esta página ha sido traducido al español mediante traducción automática. Para consultar la información de soporte más precisa, consulte la versión en inglés de este contenido.

    Configurar el Client

    Vamos a configurar el componente client.

    El directorio del client contiene:

    • El archivo index.html que contiene el código HTML para la aplicación frontend
    • El archivo main.css que contiene el código CSS para la aplicación frontend
    • El archivo main.js que contiene el código JavaScript
    • El archivo de configuración client-package.json

    Escribiremos código en index.html y main.js. También haremos un cambio en client-package.json para asegurar que la página de inicio de la aplicación sea la página autenticada.

    Necesitarás crear los archivos adicionales home.html,embeddediframe.css,fpwd.css en la carpeta /client de tu proyecto. Los archivos embeddediframe.css y fpwd.css contienen las configuraciones de estilo para los formularios de inicio de sesión y restablecimiento de contraseña de la aplicación respectivamente.

    Discutiremos el código al final de esta sección.

    Nota: Por favor, revisa el código proporcionado en esta sección para asegurarte de que lo comprendes completamente.

    Copia el código a continuación y pégalo en los archivos correspondientes ubicados en el client/directory de tu proyecto usando un IDE y guarda los archivos.

    index.html
    copy
    <!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”, // Ruta del archivo CSS de personalización de la página de inicio de sesión, si no se proporciona se renderizará el CSS predeterminado
is_customize_forgot_password: false, // El valor predeterminado es false. Mantén este valor como true si deseas personalizar la página de Olvidé mi contraseña
forgot_password_id: “login”, // ID del elemento en el que se debe cargar la página de Olvidé mi contraseña, por defecto se renderizará en el “loginDivElementId”
forgot_password_css_url: “/app/fpwd.css”, // Ruta del archivo CSS de personalización de la página de Olvidé mi contraseña, si no se proporciona se renderizará el CSS predeterminado
};
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>
    View more
    home.html
    copy
    <!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>
    View more
    main.css
    copy
    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%);
}
    View more
    main.js
    copy
    async function signupAction() {
    

    //Obtener los datos del usuario desde la página HTML
var firstName = document.getElementById(“firstname”).value;
var lastName = document.getElementById(“lastname”).value;
var email = document.getElementById(“mailid”).value;
    

    //Crear un JSON para usar los datos en el registro del usuario
var data = {
first_name: firstName,
last_name: lastName,
email_id: email,
platform_type: “web”,
};
var auth = catalyst.auth;
    

    //El método signup registrará al usuario con los datos especificados
var signupresponse = await auth.signUp(data);
    

    if (signupresponse.status == 200) {
//Si el registro es exitoso, se le pedirá al usuario que revise su correo electrónico
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() {
//El método catalyst.auth.isUserAuthenticated() permite que solo los usuarios autenticados, es decir, los usuarios que han iniciado sesión, accedan a las páginas
//Puedes cargar este método en el body de tu página para permitir que solo los usuarios autenticados accedan a una página específica
catalyst.auth
.isUserAuthenticated()
.then((result) => {
//Si el usuario ha iniciado sesión, estos contenidos de la página se mostrarán al usuario
    

      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) => {
  //Si el usuario no ha iniciado sesión, esto se mostrará al usuario y será redirigido a la página de inicio de sesión
  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() {
//El método signOut se usa para cerrar la sesión del usuario en la aplicación
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”;
}
    View more
    embeddediframe.css
    copy
    @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;
}
    View more
    fpwd.css
    copy
    /*$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;
 }
    View more
    client-package.json
    copy
    {
“name”: “zylkertechnologies”,
“version”: “0.0.1”,
“homepage”: “index.html”,
“login_redirect”: “home.html”
}

    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: End-users can either sign up to your application using their Identity Provider Logins or use the conventional method of signing up to the application using their email ID.

    • 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 Custom User Validation function (authorization_portal_function/index.js).

    • 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 Email Verification email will be sent to the account they used to sign up to the application.

    Note: 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.

    • Once the user verifies su 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 User Management 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.

    Let’s configure the client component.

    The React web client directory contains the following files:

    • The root directory of the client contains a client-package.json file, which is a configuration file defining the name, version, default home page, and redirect page of the client component.
    • The zylkertechnologies client directory contains two subfolders, as per the default project structure of a React app:
      • The public 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 index.html file, the embeddediframe.css and the fpwd.css file.
      • The src 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 package.json dependency file and a hidden .gitignore file.
    • The files present in the public folder include:
      • Native React files such as setup Tests.js, index.js, reportWebVitals.js, logo.svg, and App.test.js.
      • index.html - Contains Catalyst web sdk that allows you to access Catalyst components.
      • We will be creating two additional files embedddediframe.css and fpwd.css that will contain the styling elements for the login and password reset forms of our application.
    • The files present in the src folder include:
      • Native React files such as setupTests.js, reportWebVitals.js, logo.svg, and App.test.js.
      • App.js - Contains the hash routes to your application
      • App.css - Contains the overall styling elements of your application
      • index.js - The entry point of the react application.
      • index.css - Contains the styling of the elements present in the index.js file.
      • You will be creating the following files in the src folder:
        • Button.css - Contains the styling elements for the Logout button that will be present in the application.
        • Button.js - Contains the React component for the Logout present in the application.
        • Layout.js - Contains the React component for the application’s logic
        • LoginPage.js - Contains the React component for the login pages you generated in the Catalyst console.
        • UserProfile.css - Contains the styling elements for the user information page that will be displayed once you log in to the application.
        • UserProfile.js - Contains the React component to render the user details after you login.
        • Signup.css - Contains the styling elements for the Signup page in the application.
        • Signup.js - Contains the React component for the Signup pages you generated in the Catalyst console.

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

    Note: You can delete the native React files as they not required for building this application.

    Install additional React packages

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

    copy
    $
    npm install react-router-dom

    This command will install the react-router-dom 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. client_directory_auth

    Note: Please go through the all code given in this section to ensure you fully understand it.

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

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

    index.html
    copy
    <!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>
    View more
    embeddediframe.css
    copy
    @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 {
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;
}
    View more
    fpwd.css
    copy
    /* $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;
}
    

    @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;
}
    View more

    Copy the code given below and paste it in App.css, App.js, index.js, index.css, Button.css, Button.js, Layout.js, LoginPage.js, UserProfile.css, UserProfile.js, Signup.css y Signup.js respectivamente, ubicados en el directorio del cliente (zylkertechnologies/src/) usando un IDE y guarda el archivo.

    App.css
    copy
    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;
}
    View more
    App.js
    copy
    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;
    View more
    index.js
    copy
    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>
);
    View more
    Button.css
    copy
    button {
background-color: #4CAF50;
color: white;
padding: 8px 14px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 16px;
width: 120px;
}
    View more
    Button.js
    copy
    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;
    View more
    Layout.js
    copy
    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;
    View more
    LoginPage.js
    copy
    import { useEffect } from “react”;
import { Link } from “react-router-dom”;
    

    const LoginPage = () => {
useEffect(() => {
//config is optional
const config =   
    
{
css_url : “/app/embeddediframe.css”, // Ruta del archivo CSS de personalización de la página de inicio de sesión, si no se proporciona se renderizará el CSS predeterminado
is_customize_forgot_password : false, // El valor predeterminado es false. Mantén este valor como true si deseas personalizar la página de Olvidé mi contraseña
forgot_password_id : “login”, // ID del elemento en el que se debe cargar la página de Olvidé mi contraseña, por defecto se renderizará en el “loginDivElementId”
forgot_password_css_url : “/app/fpwd.css” // Ruta del archivo CSS de personalización de la página de Olvidé mi contraseña, si no se proporciona se renderizará el CSS predeterminado
}
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;
    View more
    UserProfile.css
    copy
    .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;
}
    View more
    UserProfile.js
    copy
    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;
    View more
    Signup.js
    copy
    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;
    View more
    Signup.css
    copy
    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;
}
    View more
    client-package.json
    copy
    {
“name”: “zylkertechnologies”,
“version”: “0.0.1”,
“homepage”: “index.html”,
“login_redirect”: “index.html”
}
    View more

    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: End-users can either sign up to your application using their Identity Provider Logins or use the conventional method of signing up to the application using their email address.

    • 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 Custom User Validation function (authorization_portal_function/index.js).

    • 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 Email Verification email will be sent to the account they used to sign up to the application.

    Note: 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.

    • 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 User Management 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.

    Última actualización 2026-03-24 17:38:39 +0530 IST

    ANTERIOR

    SIGUIENTE

    ENLACES RELACIONADOS

    Client Directory Structure