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

    View Java as .md

    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.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 =
“Se ha enviado un correo electrónico de verificación de cuenta a tu dirección de correo electrónico”;
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 =
    "No has iniciado sesión. Por favor, inicia sesión para continuar. Redirigiéndote a la página de inicio de sesión...";
  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
    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;
}
/* === Diseño de Tarjeta === /
.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;
}
/ === Campos de Entrada === /
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;
}
/ === Botones === /
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);
}
/ Botones Especiales /
.logoutbtn {
width: 100%;
padding: 14px;
border-radius: 8px;
background-color: #e53935;
color: #fff;
}
.signupbtn,
.seperatebtn,
.signupfnbtn,
.pwdfnbtn {
border-radius: 8px;
padding: 8px;
}
/ === Contenedores === /
#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;
}
/ Botón de Cerrar /
.close {
position: absolute;
right: 25px;
top: 15px;
font-size: 35px;
font-weight: bold;
color: #fff;
cursor: pointer;
}
.close:hover {
color: #f44336;
}
/ Misceláneo */
.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
    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;
}
    

    @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
    App.css
    copy
    // …existing code (App.css panel onwards)…
    View more

    El directorio del client está ahora configurado.

    Repasemos el funcionamiento de la función y el código del client:

    • El usuario final primero encontrará la Login Page que configuraste y personalizaste en la consola.
    • Para crear una cuenta, hará clic en la opción Sign Up y será dirigido a la página de Sign Up.
    Nota: Los usuarios finales pueden registrarse en tu aplicación usando sus Identity Provider Logins o usar el método convencional de registro en la aplicación usando su dirección de correo electrónico.

    • Una vez que la información es ingresada y hacen clic en Sign Up, o si intentan registrarse usando un Identity Provider Login de su elección, sus datos se proporcionarán como entrada JSON a la función Custom User Validation (authorization_portal_function/Custom_User_Validation_Java.java).

    • La función solo autenticará a los usuarios si se cumple la condición que has codificado. Para este tutorial, los usuarios solo serán autenticados si se registraron en la aplicación usando una dirección de correo electrónico registrada en Zylker.

    • Tras la autenticación exitosa, se enviará un correo electrónico de Email Verification a la cuenta que usaron para registrarse en la aplicación.

    Nota: Debido a que estamos usando Embedded Login, un tipo de autenticación nativo de Catalyst, no se requiere lógica adicional para activar los correos electrónicos apropiados. Catalyst lo manejará automáticamente.

    • Una vez que el usuario verifica su dirección de correo electrónico haciendo clic en el enlace proporcionado en el correo, quedará registrado en la aplicación. Sus datos pueden verse en la sección User Management del componente Authentication.

    • El usuario final ahora puede iniciar sesión en la aplicación usando sus credenciales autenticadas.

    • El usuario final también puede restablecer su contraseña haciendo clic en la opción Forgot Password. En este caso, el correo electrónico de Password Reset se enviará a su correo registrado. Siguiendo los pasos mencionados en el correo, pueden restablecer fácilmente sus credenciales.

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

    ANTERIOR

    SIGUIENTE

    ENLACES RELACIONADOS

    Client Directory Structure