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

    Configuremos 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

    Programaremos en index.html y main.js. También haremos un cambio en el 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 respectivos 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, // Por defecto value is false. Keep this value as true, if you wish to customize Forgot Password page
forgot_password_id: “login”, // ID del elemento donde se cargará la página de contraseña olvidada, por defecto se renderizará en “loginDivElementId”
forgot_password_css_url: “/app/fpwd.css”, // Ruta del archivo CSS de personalización de la página de contraseña olvidada, si no se proporciona se renderizará el CSS por defecto
};
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 para 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 solo a usuarios autenticados, es decir, los usuarios que han iniciado sesión, acceder a las páginas
//Puedes cargar este método en el cuerpo de tu página para permitir que solo usuarios autenticados accedan a una página específica
catalyst.auth
.isUserAuthenticated()
.then((result) => {
//Si el usuario ha iniciado sesión, este contenido de la página se mostrará 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
    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
    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”
}

    El directorio del client está ahora configurado.

    Repasemos cómo funcionan la función y el código del client:

    • El usuario final primero encontrará la Login Page que has configurado y personalizado en la consola.
    • Para crear una cuenta, harán clic en la opción Sign Up y serán dirigidos a la página de Sign Up.
    Nota: Los usuarios finales pueden registrarse en tu aplicación usando sus inicios de sesión de Identity Provider o usar el método convencional de registro en la aplicación usando su email ID.

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

    • La función solo autenticará a los usuarios si la condición que has codificado se cumple. 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 de Zylker.

    • Tras una 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. Será manejado por Catalyst 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 de 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.

    Configuremos el componente client.

    El directorio del client de React contiene los siguientes archivos:

    • El directorio raíz del client contiene un archivo client-package.json, que es un archivo de configuración que define el nombre, la versión, la página de inicio predeterminada y la página de redirección del componente client.
    • El directorio del client zylkertechnologies contiene dos subcarpetas, según la estructura de proyecto predeterminada de una aplicación React:
      • La carpeta public se usa generalmente para almacenar archivos que pueden ser accedidos abiertamente por los navegadores a través de URLs públicas, como archivos de iconos de la aplicación web, el archivo index.html, el archivo embeddediframe.css y el archivo fpwd.css.
      • La carpeta src contiene los archivos fuente de la aplicación que se incluirán en la carpeta build cuando compilemos la aplicación React.
      • El directorio del client también contiene el archivo de dependencias package.json y un archivo oculto .gitignore.
    • Los archivos presentes en la carpeta public incluyen:
      • Archivos nativos de React como Tests.js, index.js, reportWebVitals.js, logo.svg y App.test.js.
      • index.html - Contiene el SDK web de Catalyst que te permite acceder a los componentes de Catalyst.
      • Crearemos dos archivos adicionales embedddediframe.css y fpwd.css que contendrán los elementos de estilo para los formularios de inicio de sesión y restablecimiento de contraseña de nuestra aplicación.
    • Los archivos presentes en la carpeta src incluyen:
      • Archivos nativos de React como setupTests.js, reportWebVitals.js, logo.svg y App.test.js.
      • App.js - Contiene las rutas hash de tu aplicación
      • App.css - Contiene los elementos de estilo generales de tu aplicación
      • index.js - El punto de entrada de la aplicación React.
      • index.css - Contiene los estilos de los elementos presentes en el archivo index.js.
      • Crearás los siguientes archivos en la carpeta src:
        • Button.css - Contiene los elementos de estilo para el botón Logout que estará presente en la aplicación.
        • Button.js - Contiene el componente React para el botón Logout presente en la aplicación.
        • Layout.js - Contiene el componente React para la lógica de la aplicación
        • LoginPage.js - Contiene el componente React para las páginas de inicio de sesión que generaste en la consola de Catalyst.
        • UserProfile.css - Contiene los elementos de estilo para la página de información del usuario que se mostrará una vez que inicies sesión en la aplicación.
        • UserProfile.js - Contiene el componente React para renderizar los datos del usuario después de iniciar sesión.
        • Signup.css - Contiene los elementos de estilo para la página de Signup en la aplicación.
        • Signup.js - Contiene el componente React para las páginas de Signup que generaste en la consola de Catalyst.

    Programaremos en los archivos 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 y Signup.css. 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.

    Nota: Puedes eliminar los archivos nativos de React ya que no son necesarios para construir esta aplicación.

    Instalar paquetes adicionales de React

    El paquete react-router-dom necesita ser instalado en el directorio del client AuthorizationPortal/zylkertechnologies usando el comando CLI que se muestra a continuación:

    copy
    $
    npm install react-router-dom

    Este comando instalará el módulo react-router-dom, guardará las dependencias y nos permitirá realizar el enrutamiento hash requerido in our application.

    Este es el directorio del client después de haber creado los archivos requeridos y eliminado los archivos innecesarios. client_directory_auth

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

    Copia el código que se muestra a continuación y pégalo en index.html ubicado en el directorio del client (zylkertechnologies/public/) usando un IDE y guarda el archivo.

    Necesitarás crear dos archivos nuevos en la misma carpeta y nombrarlos embeddediframe.css y fpwd.css. Copia y pega el código que se muestra a continuación en los archivos respectivos y guárdalos.

    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 {
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: “Zoho_Puvi_Regular”;
src: url(“https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.eot");
src: url(“https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.eot")
format(“embedded-opentype”),
url(“https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2")
format(“woff2”),
url(“https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.otf")
format(“opentype”);
font-weight: normal;
font-style: normal;
/*   font-display: swap */
}
    

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

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

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

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

    /$Id$/
    

    body {
margin: 0px;
}
    

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

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

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

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

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

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

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

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

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

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

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

    .bold_font {
font-weight: 500;
}
    

    .searchparent {
height: auto;
}
    

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

    #last_password {
padding-right: 40px;
}
    

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

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

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

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

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

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

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

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

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

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

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

    #Last_password_div .head_info {
margin: 0px;
}
    

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

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

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

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

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

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

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

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

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

    .doneBtn {
position: relative;
}
    

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

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

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

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

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

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

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

    .errorlabel {
color: #e92b2b;
}
    

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

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

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

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

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

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

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

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

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

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

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

    .searchparent {
height: auto;
}
    

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

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

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

    .img_option_try {
margin: 12px 0px;
}
    

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

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

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

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

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

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

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

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

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

    .otp_verify {
margin-top: 10px;
}
    

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

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

    .option_title_try {
color: #000000;
}
    

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

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

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

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

    .pointer {
cursor: pointer;
}
    

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

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

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

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

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

    .bluetext_action a {
text-decoration: none;
}
    

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

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

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

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

    .user_info_space {
margin-top: 20px;
}
    

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

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

    .fieldcontainer {
margin-bottom: 40px;
}
    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .select2-results__options {
margin: 0px;
}
    

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

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

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

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

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

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

    .deviceparent {
display: block;
}
    

    .deviceinfo {
display: inline-block;
}
    

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

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

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

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

    .contact_support_class {
min-height: unset;
}
    

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

    #mfa_totp_section {
display: none;
}
    

    /* Terminate_session page */
    

    #terminate_session_form {
overflow: auto;
}
    

    #terminate_session_form .checkbox_div {
position: relative;
}
    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    #terminate_session_submit {
margin-top: 30px;
}
    

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

    .bg_one {
display: none;
}
    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .titlename {
display: none !important;
}
    

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

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

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

    .info_head {
padding-top: 20px;
}
    

    .rec_modes_other_options {
display: none !important;
}
    

    .recovery_container {
height: 29rem;
}
    

    .Last_password_div {
margin-top: -30px;
}
    View more

    Copia el código que se muestra a continuación y pégalo en 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 client (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, // Por defecto value is false. Keep this value as true, if you wish to customize Forgot Password page
forgot_password_id : “login”, // ID del elemento donde se cargará la página de contraseña olvidada, por defecto se renderizará en “loginDivElementId”
forgot_password_css_url : “/app/fpwd.css” // Ruta del archivo CSS de personalización de la página de contraseña olvidada, si no se proporciona se renderizará el CSS por defecto
}
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

    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án clic en la opción Sign Up y serán dirigidos a la página de Sign Up.
    Nota: Los usuarios finales pueden registrarse en tu aplicación usando sus inicios de sesión de Identity Provider 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 inicio de sesión de Identity Provider de su elección, sus datos serán proporcionados como entrada JSON a la función de Custom User Validation (authorization_portal_function/main.py).

    • La función solo autenticará a los usuarios si la condición que has codificado se cumple. 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 de Zylker.

    • Tras una 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. Será manejado por Catalyst 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 de 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-30 13:40:30 +0530 IST

    ANTERIOR

    SIGUIENTE

    ENLACES RELACIONADOS

    Client Directory Structure