<?php
    if (file_exists("./content/header.php")){
        include_once("./content/header.php");
    }
?>
<!-- HEADER 
<header> 
    <div class="container-div">
        <div class="bars headerd">
            <div class="innerheaderd">
                <i class="fas fa-bars innerbars" id="togglebar"></i>
            </div>
        </div>
        <div class="logo headerd">
            <div class="innerheaderd">
                <img class="logo-header" src="./settings/img/logo.png">
            </div>
        </div> 
        <div class="menuLeft headerd ">
             <ul class="innerheaderd">
                  <li><a class="poppins-regular" id="home">Inicio</a></li>
                  <li><a class="poppins-regular" id="balance">Balance</a></li>
                  <li><a class="poppins-bold" id="preferences">Preferencias</a></li>
            </ul> 
        </div>
        <div class="menuRight headerd">
            <ul class="innerheaderd">
                  <li class="bar"><a class="poppins-regular rtext" id="name"></a></li>
                  <li class="bar"><a class="rIcon"><i class="fas fa-sign-out-alt" id="logouticon"></i></a></li>
                  <li><a class="rIcon"><i class="fas fa-envelope" id="message" style="position: relative;"><div class="messageNotification" id="messageNotification"><p class="roboto-regular"></p></div></i></a></li>
                  <li><a class="poppins-bold rlanguage"><div id="langIcon"></div></a></li>
            </ul> 
        </div>
    </div>
</header> -->
<div class="pageCnt" style="display: none;position:relative;">
<div class="hiddenBg"  style="display:none"></div>
    <div class="hiddenBox" style="display:none">
        <div class="privListBg"></div>
        <div class="privListBg"></div>
        <div class="privList" style="display: block; opacity: 1;">
            <div class="privArrow"></div>
            <div class="privListCnt">
                <div class="stepsTut roboto-regular" id="stepsTut"></div>
                <div class="guideTit roboto-bold" id="titTut">¡Bienvenido!</div>
                <div class="guideDsc roboto-regular" >
                    <div id="tutInfo">
                    Para comenzar a disfrutar de todos los benecios de compra y venta de criptomonedas debe completar su registro 
                    </div>
                    <br>
                    <span id="lblEndTut">Estoy enterado de cómo funciona la aplicación.</span>
                </div>
                
                <div class="guideBtnTbl">
                <div class="bannTblBtnCell" style="width:50%;">
                        <button type="button" class="submit poppins-medium blueButton" style="border-color: #FFFFFF;" id="endTutorial">SALTAR</button>
                    </div>
                    <div class="bannTblBtnCell" style="width:50%;">
                        <button type="button" class="submit poppins-medium blueButton" style="border-color: #FFFFFF;" id="nextStepTut">SIGUIENTE</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="centerCell">
        <div class="card">
            <div class="tableForm">
                <div class="cellForm">
                    <div class="miniCard principalMiniCard card1">
                        <div class="table100">
                            <h1 class="title" id="prefTitle">Datos Básicos</h1>
                        </div>
                        <div class="table100">
                            <div class="display: table-cell; width: 30%">
                                <div class="table100">
                                    <div class="cellForm" id="namePersonCompany">
                                        <p class="poppins-bold nameCardOne" id='dataName'>
                                            
                                        </p>
                                    </div>
                                </div>
                                <div class="table100">
                                    <div class="cellForm">
                                        <p class="poppins-regular emailCard" id='dataEmail'>
                                            
                                        </p>
                                        <p class="poppins-regular emailCard" id="dataPhone">
                                            
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="levelDiv" id="iddataDivCardTwo">
                                <p class="poppins-regular levelP" id="levelP" style="cursor:pointer">
                                   
                                </p>
                                <div id="addView3" class="addView3"> 
                                    <input id="example-element-toggle3" type="checkbox" />
                                    <div id="example-toggled-element3">
                                        
                                        <div style="padding: 15px 30px;" id="textLevel0">
                                            <div class="table100">
                                                <h1 style="padding-top: 0px; color: #262624; margin: 0px; text-align: left; font-size: 44%" class="poppins-bold" id="level0CardLabel">Nivel 0</h1>
                                            </div>
                                            <div class="table100">
                                                <p class="poppins-regular" style="margin: 0; font-size: 43%;"></p>
                                            </div>
                                        </div>
                                        <div style="padding: 15px 30px;" id="textLevel1">
                                            <div class="table100">
                                                <h1 style="padding-top: 0px; color: #262624; margin: 0px; text-align: left; font-size: 44%" class="poppins-bold" id="level0CardLabel">Nivel 0.5</h1>
                                            </div>
                                            <div class="table100">
                                                <p class="poppins-regular" style="margin: 0; font-size: 43%;"></p>
                                            </div>
                                        </div>
                                        <div  style="padding: 15px 30px;" id="textLevel2">
                                            <div class="table100">
                                                <h1 style="padding-top: 0px; color: #262624; margin: 0px; text-align: left; font-size: 44%" class="poppins-bold" id="level1CardLabel">Nivel 1</h1>
                                            </div>
                                            <div class="table100">
                                                <p class="poppins-regular" style="margin: 0; font-size: 43%;"></p>
                                            </div>
                                            <!--<div class="table100">
                                                <p class="poppins-regular" style="margin: 0; font-size: 43%;"> - Verificación por correo electrónico permitido 10% del total para ser liberado US $2.000</p>
                                            </div>-->
                                        </div>
                                        <div  style="padding: 15px 30px;" id="textLevel3">
                                            <div class="table100">
                                                <h1 style="padding-top: 0px; color: #262624; margin: 0px; text-align: left; font-size: 44%" class="poppins-bold" id="level2CardLabel">Nivel 2</h1>
                                            </div>
                                            <div class="table100">
                                                <p class="poppins-regular" style="margin: 0; font-size: 43%;"></p>
                                            </div>
                                            <!--<div class="table100">
                                                <p class="poppins-regular" style="margin: 0; font-size: 43%;"> - Verificación por correo electrónico permitido 10% del total para ser liberado US $20.000</p>
                                            </div>-->
                                        </div>
                                        <div  style="padding: 15px 30px;" id="textLevel4">
                                            <div class="table100">
                                                <h1 style="padding-top: 0px; color: #262624; margin: 0px; text-align: left; font-size: 44%" class="poppins-bold" id="level3CardLabel">Nivel 3</h1>
                                            </div>
                                            <div class="table100">
                                                <p class="poppins-regular" style="margin: 0; font-size: 43%;"></p>
                                            </div>
                                            <!--<div class="table100">
                                                <p class="poppins-regular" style="margin: 0; font-size: 43%;"> - Verificación por correo electrónico permitido 10% del total para ser liberado US $70.000</p>
                                            </div>-->
                                        </div>
                                    </div>
                                </div>
                                <div class="levelDivs">
                                    <div style="display: table-cell;" class="levelInvisible"></div>
                                    <div class="whiteLevel"></div>
                                    <div class="levelSpace"></div>
                                    <div class="grayLevel levelbar"></div>
                                    <div class="levelSpace"></div>
                                    <div class="grayLevel levelbar"></div>
                                    <div class="levelSpace"></div>
                                    <div class="grayLevel levelbar"></div>
                                    <div class="lastLevelSpace" ></div>
                                </div>
                                <div class="table100" style="visibility: initial !important">
                                    <!--<div class="infDivLevel"></div>
                                    <div class="infDivLevel" style="width: 11px; line-height: 10px;">
                                        <i class="fas fa-download" style="font-size: 9px; color: #8693A4"></i>
                                    </div>
                                    <div class="infDivLevel" style=" border-radius: 3px; width: 37px; line-height: 10px;">
                                        <p class="poppins-regular infPLevel" >$50,000</p>
                                    </div>
                                    <div class="infDivLevel" style=" border-radius: 3px; width: 55px; line-height: 10px;"></div>
                                    <div class="infDivLevel" style=" width: 11px; line-height: 10px;">
                                        <i class="fas fa-download" style="font-size: 9px; color: #8693A4"></i>
                                    </div>
                                    <div class="infDivLevel" style="border-radius: 3px; width: 37px; line-height: 10px;">
                                        <p class="poppins-regular infPLevel" >$2.000</p>
                                    </div>
                                    <div class="infDivLevel" style="border-radius: 3px; width: 40px; line-height: 10px;"></div>-->
                                    <div class="infDivLevel"></div>
                                    <div class="infDivLevel" style=" border-radius: 3px; line-height: 10px;">
                                        <p class="poppins-bold infPLevel" id="levelP1" ></p>
                                    </div>
                                    <div class="infDivLevel" style="border-radius: 3px; width: 40px; line-height: 10px;"></div>
                                </div>
                                <div class="table100" style="visibility: initial !important">
                                    <div class="infDivLevel"></div>
                                    <div class="infDivLevel" style=" border-radius: 3px; line-height: 10px;">
                                        <p class="poppins-regular infPLevel" id="levelP2" ></p>
                                    </div>
                                    <div class="infDivLevel" style="border-radius: 3px; width: 40px; line-height: 10px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="table100">
                            <hr class="hrData">
                        </div>
                        <div class="table100" id="informationUser">
                            <div class="table100 dataDivCardOne">
                                <div class="cellForm cellForm20">
                                    <p class="poppins-regular labelData" id="idLabel">
                                        Identificación
                                    </p>
                                    <p class="poppins-bold infData" id="dataIdent">
                                        J-302458975
                                    </p>
                                </div>
                                <div class="cellForm cellForm20">
                                    <p class="poppins-regular labelData"  id="countryLabel">
                                        País de Emisión
                                    </p>
                                    <p class="poppins-bold infData" id="dataCountryE">
                                        Venezuela
                                    </p>
                                </div>
                                <div class="cellForm cellForm60">
                                    <p class="poppins-regular labelData" id="adLabel">
                                        Dirección
                                    </p>
                                    <p class="poppins-bold infData" id='dataAddress'>
                                        123 NW 23 Ave. Doral FL 33192
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="table100">
                            <hr class="hrData">
                        </div>
                        <div class="table100 tableButton marginAuto">
                            <div style="display: table-cell; width: 25%; vertical-align: middle;">
                                <div class="button-submitPrincipal">
                                    <button type="button" class="submit poppins-medium blueButton" id="changePassword">CAMBIAR CONTRASEÑA</button>
                                 </div>
                            </div>
                            <div style="display: table-cell; width: 25%; vertical-align: middle;">
                                <div class="button-submitPrincipal">
                                    <button type="button" class="submit poppins-medium blueButton" id="Active2FA">ACTIVAR 2FA</button>
                                    <button type="button" class="submit poppins-medium blueButton noShow" id="Deactive2FA">DESACTIVAR 2FA</button>
                                 </div>
                            </div>
                            <div style="display: table-cell; width: 25%; vertical-align: middle;">
                                <div class="button-submitPrincipal">
                                    <button type="button" class="submit poppins-medium blueButton" id="registry">VER REGISTRO</button>
                                 </div>
                            </div>
                            <div style="display: table-cell; width: 25%; vertical-align: middle;">
                                <div class="button-submitPrincipal">
                                    <button type="button" class="submit poppins-medium blueButton" id="seeTerms">VER TÉRMINOS Y <br/> CONDICIONES</button>
                                 </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
            <div class="tableForm">
                <div class="cellForm">
                    <div class="miniCard principalMiniCard card2" style="margin-bottom: 12px;">
                        <div class="table100">
                            <h1 class="title" id="dataAcR">Datos de Cuentas de Retiro</h1>
                            <div class="table100">
                                <p class="roboto-regular alert" id="infP"> &nbsp; &nbsp; &nbsp;<i class="fas fa-exclamation-triangle alert-icon"></i> &nbsp; &nbsp;Únicamente cuentas a nombre del titular registrado en AFX</p>
                            </div>
                        </div>
                        <div class="table62">
                            <div class="cellForm cellForm50 statusDiv">
                                <p class="poppins-medium statusP" id="statusLabel">Estatus</p>
                            </div>
                            <div class="cellForm" style="bottom; width: 50%; padding-bottom: 20px;">
                                <p class="poppins-medium addP" id="addLabel">Agregar
                                    <i class="fas fa-plus addI" id="add"></i>
                                </p>
                            </div>
                        </div>
                        <div id="addView" style="width: 45%; float: right;position: absolute; right: 10px; bottom: 0px;">
                            <input id="example-element-toggle" type="checkbox" />
                            <div id="example-toggled-element">
                              
                                <div style="position: absolute; right: 9px; top: 7px; font-size: 50%; cursor: pointer; color: #D5DCE5;">
                                    <i class="fas fa-times" id="close"></i>
                                </div>
                                <div class="table100">
                                    <h1 style="padding-top: 15px; color: #262624; margin: 0px; text-align: center; font-size: 50%" id="modalTit"></h1>
                                    <p class="modalName poppins-bold" id="modalName"></p>
                                    <p class="modalId roboto-bold" id="modalid"></p>
                                    <hr class="modalHr">
                                </div>
                                <div class="table100" style="margin-top: 8px;">
                                    <div class="cellForm cellForm50 divSelect" style="text-align: center; padding: 0 3%; vertical-align: super;">
                                        <select class="form-input poppins-medium" style="" id="status">
                                            <option value="" class="poppins-medium" selected="true" disabled="" id="formStatusSel">Estatus</option>
                                            <option class="poppins-medium" value="1" id="formStatusSel1">Activa</option>
                                            <option class="poppins-medium" value="0" id="formStatusSel2">Inactiva</option>
                                         </select>
                                    </div>
                                    <div class="cellForm cellForm50 divSelect"  style="text-align: center; padding: 0 3%; vertical-align: super;">
                                        <select class="form-input poppins-medium" name="country" id="country">
                                         </select>
                                    </div>
                                </div>
                                <div class="table100" style="margin-top: 15px;">
                                    <div class="cellForm cellForm50 divSelect" style="text-align: center; padding: 0 3%; vertical-align: super;">
                                        <select class="form-input poppins-medium" name="bank" id="bank">
                                         </select>
                                    </div>
                                    <div class="cellForm cellForm50 divSelect" style="text-align: center; padding: 0 3%; vertical-align: super;">
                                        <select class="form-input poppins-medium" name="currency" id="currency">
                                         </select>
                                    </div>
                                </div>
                                <div class="table100" style="margin-top: 15px;">
                                    <div class="cellForm cellForm50 divInput" style="text-align: center; padding: 0 3%; vertical-align: super;">
                                        <input type="text" class="form-input poppins-regular" id="detail1">
                                    </div>
                                    <div class="cellForm cellForm50 divInput" style="text-align: center; padding: 0 3%; vertical-align: super;">
                                        <input type="text" class="form-input poppins-regular" id="detail2">
                                    </div>
                                </div>
                                 <div class="table100" style="margin-top: 15px;">
                                    <div class="cellForm cellForm50 divInput" style="text-align: center; padding: 0 3%; vertical-align: super;">
                                        <input type="text" class="form-input poppins-regular" id="detail3">
                                    </div>
                                    <div class="cellForm cellForm50 divInput" style="text-align: center; padding: 0 3%; vertical-align: super;">
                                        <input type="text" class="form-input poppins-regular" id="detail4">
                                    </div>
                                </div>
                                <div class=" divButtonSubmit table100 marginAuto" style="vertical-align: middle; margin-top: 10px; width: 90%;">
                                    <p class="poppins-regular error" id="generalerror" style="display: table-row"></p>
                                <div style="display: table-cell; width: 100%;">
                                    <div class="button-submit" style="margin-left: auto; margin-right: auto;">
                                        <button type="button" class="submit poppins-medium blueButton" id="addAccount">AGREGAR</button>
                                     </div>
                                </div>
                            </div>
                          </div>
                        </div>
                        <div id="datas">
                            <div class="tblCnt">
                                <div class="table100" id='tableMarks'>
                                    <div class="divTable divTable0" style="width: 5%;">
                                        <i class="fas fa-check-circle" style="font-size: 55%; top: -4px; position: relative;"></i>
                                    </div>
                                    <div class="divTable divTable1" style="width: 5%;">
                                        <i class="fas fa-qrcode" style="font-size: 55%; top: -4px; position: relative;"></i>
                                    </div>
                                    <div class="divTable divTable2" style="width: 6%;" id="divCurrency">
                                        <p style="margin: 0px; color: #4A4A4A; font-size: 42%; text-align: left; margin-left: 10%;" class="poppins-regular"></p>
                                    </div>
                                    <div class="divTable divTable3" style="width: 15%;" id="divBank">
                                        <p style="margin: 0px; color: #4A4A4A; font-size: 42%; text-align: left;" class="poppins-regular"></p>
                                    </div>
                                    <div class="divTable divTable4" style="width: 54%;" id="divNumber">
                                        <p style="margin: 0px; color: #4A4A4A; font-size: 42%; text-align: left; margin-right: 10px" class="poppins-regular recortWord"></p>
                                    </div>
                                    <div class="divTable divTable5" style="width: 5%;" >
                                        <div class="toggle">
                                            <label class="switch">
                                              <input type="checkbox" id="checkbox">
                                              <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="divTable divTable6" style="width: 5%;">
                                        <i class="far fa-edit" style="font-size: 55%; float: right;  cursor: pointer; color: #4287CE; position: relative;"></i>
                                    </div>
                                    <div class="divTable divTable7" style="width: 5%;">
                                        <i class="fas fa-trash-alt" style="font-size: 55%; float: right; cursor: pointer ;color: #4287CE; position: relative;"></i>
                                    </div>
                                </div>
                                <p class="poppins-regular errorspecial"></p>
                            </div>
                        </div>
                    </div>
                </div> 
            </div> 
            
            <div class="tableForm">
                <div class="cellForm">
                    <div class="miniCard principalMiniCard card2">
                        <div class="table100">
                            <h1 class="title" id="dataAcR2" style="margin-bottom: 25px;">Notificaciones</h1>
                        </div>
                        <div class="table621">
                            <div class="cellForm cellForm80 statusDiv2 statusDiv21">
                                <p class="poppins-medium statusP2" style="padding-left: 10px;" id="statusLabel21">Evento</p>
                            </div>
                            <div class="cellForm cellForm10 statusDiv2 statusDiv22 ">
                                <p class="poppins-medium statusP2 labelS" id="statusLabel22">Email</p>
                            </div>
                            <div class="cellForm cellForm10 statusDiv2 statusDiv23">
                                <p class="poppins-medium statusP2 labelS" id="statusLabel23">SMS</p>
                            </div>
                        </div>
                        <div id="datasNot">
                            <div class="tblCnt" style="width: 100%;">
                                <div class="table100" style="width: 101%; min-height: 35px;">
                                    <div class="divTable divTable21" style="width: 80%;">
                                        <p style=" margin: 0px" class="poppins-regular not-text"></p>
                                    </div>
                                    <div class="divTable divTable41" style="width: 10%;text-align: center;" >
                                        <div class="toggle2">
                                            <label class="switch">
                                              <input type="checkbox">
                                              <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="divTable divTable51" style="width: 10%;text-align: center;" >
                                        <div class="toggle2">
                                            <label class="switch">
                                              <input type="checkbox">
                                              <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </div> 
            
        </div> 
    </div>  
</div>

<div class="changepassword" style="width: 100%; height: 100vh;">
    <div style="vertical-align: middle; display: table-cell;">
        <div class="login-card content">
          <div class="login-form-div">
             <div class="inptCnt">
                <p class="login-form-label password" id="actPassLabel">Contraseña Actual</p>
                <input type="password" name="password" placeholder="Contraseña" class="password-input form-input poppins-regular" id="passwordOld">
                <div class="inptIc">
                   <i class="far fa-eye-slash" id="changeOldPass"></i>
                </div>
             </div>
             <p class="poppins-regular error" id="epasswordold"></p>
             <div class="inptCnt">
                <p class="login-form-label password" id="newPassLabel">Nueva Contraseña</p>
                <input type="password" name="password" placeholder="Nueva Contraseña" class="password-input form-input poppins-regular" id="password">
                <div class="inptIc">
                   <i class="far fa-eye-slash" id="changePass"></i>
                </div>
             </div>
             <p class="poppins-regular error" id="epassword"></p>
             <div class="inptCnt">
                <p class="login-form-label password" id="confirmNewPass">Confirmar Nueva Contraseña</p>
                <input type="password" name="password" placeholder="Confirmar Nueva Contraseña" class="password-input form-input poppins-regular" id="passwordNew">
                <div class="inptIc">
                   <i class="far fa-eye-slash" id="changeNewPass"></i>
                </div>
             </div>
             <p class="poppins-regular error" id="epasswordnew"></p>
             <div class="button-submit-login">
                <button type="button" class="submitPassword submit-login blueButton" id="change">CAMBIAR</button>
             </div>
             <div class="button-submit-signin">
                <button type="button" id="goback" class="submitPassword submit-signin whiteButton">CANCELAR</button>
             </div>
          </div>
       </div>
   </div>
</div>

<!-- 2FA POPUPS 2FAPopup-->

<div class="twoFAPopup" style="width: 100%; height: 100vh;">
    <div style="vertical-align: middle; display: table-cell;">
        <div class="login-card FACard content">
          <div class="login-form-div twofaSect">
             <div class="inptCnt">
                <p class="login-form-label title2FA" id="title2fa1">Autenticación en 2 pasos</p>
                <div class="timeline">
                    <div class="dtimeline">
                        <i class="fas fa-check check check-icon" ></i>
                        <h6 class="text-timeline poppins-bold twoFa" id="down2fa1">Descargar aplicación</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check no-check check-icon"></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="qrscan2fa1" >Escanear código QR</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check no-check check-icon"></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="safekey2fa1" >Clave de recuperación</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check no-check check-icon"></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="cfrm2fa1" >Habilitar Autenticador</h6>
                    </div>
                    
                </div>
                <p class="Text2FA poppins-medium" id="text2fa1">Al activar 2 factores de autenticación usted contará
                con una capa adicional de seguridad para validar su identidad.
                <br><br>Por favor descargue e instale la aplicación <b>Google Authenticator</b> para continuar </p>
             </div>
             <div class="imagesDownload">
                <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=es_VE&gl=US" target="_blank"><img class="appIcon" src="./img/android.svg"></a>
                <a href="https://apps.apple.com/es/app/google-authenticator/id388497605" target="_blank"><img class="appIcon" src="./img/ios.svg"></a>
             </div>
             <div class="buttons2FA">
                 <div class="button-submit-signin button2FA">
                    <button type="button" id="goback1" class="submitPassword submit-signin whiteButton">CANCELAR</button>
                 </div>
                 <div class="button-submit-login button2FA">
                    <button type="button" class="submitPassword submit-login blueButton" id="continueOne">CONTINUAR</button>
                 </div>
             </div>
          </div>
       </div>
   </div>
</div>
<div class="twoFAPopup1 newPopup" style="width: 100%; height: 100vh; display:none;">
    <div style="vertical-align: middle; display: table-cell;">
        <div class="login-card FACard content">
          <div class="login-form-div twofaSect">
             <div class="inptCnt">
                <p class="login-form-label title2FA" id="title2fa2">Autenticación en 2 pasos</p>
                <div class="timeline">
                    <div class="dtimeline">
                        <i class="fas fa-check check-done check-icon" ></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="down2fa2">Descargar aplicación</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check check check-icon"></i>
                        <h6 class="text-timeline poppins-bold twoFa" id="qrscan2fa2" >Escanear código QR</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check no-check check-icon"></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="safekey2fa2" >Clave de recuperación</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check no-check check-icon"></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="cfrm2fa2" >Habilitar Autenticador</h6>
                    </div>
                </div>
                <p class="Text2FA poppins-medium" id="textScan2fa2">Escanee el código QR en la aplicación <b>Google Authenticator</b>.
                De presentar algún inconveniente al escanear el código por favor introduzca el número manualmente</p>
                
                <div class="qrSect">
                    <div class="divQrCode" id="qrcode"></div>
                </div>
                <p class="qrText poppins-medium" id="qrText"></p>
             </div>
             <div class="buttons2FA">
                 <div class="button-submit-signin button2FA">
                    <button type="button" id="goback2" class="submitPassword submit-signin whiteButton">REGRESAR</button>
                 </div>
                 <div class="button-submit-login button2FA">
                    <button type="button" class="submitPassword submit-login blueButton" id="continueTwo">CONTINUAR</button>
                 </div>
             </div>
          </div>
       </div>
   </div>
</div>
<div class="twoFAPopup1 newPopup1" style="width: 100%; height: 100vh; display:none;">
    <div style="vertical-align: middle; display: table-cell;">
        <div class="login-card FACard content">
          <div class="login-form-div twofaSect">
             <div class="inptCnt">
                <p class="login-form-label title2FA" id="title2fa3">Autenticación en 2 pasos</p>
                <div class="timeline">
                    <div class="dtimeline">
                        <i class="fas fa-check check-done check-icon" ></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="down2fa3">Descargar aplicación</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check check-done check-icon"></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="qrscan2fa3" >Escanear código QR</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check check check-icon"></i>
                        <h6 class="text-timeline poppins-bold twoFa" id="safekey2fa3" >Clave de recuperación</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check no-check check-icon"></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="cfrm2fa3" >Habilitar Autenticador</h6>
                    </div>
                </div>
                <p class="Text2FA poppins-medium" id="textKey2fa3">Por favor no olvide guardar esta clave en un lugar seguro,
                la misma le permitirá recuperar su <b>Google Authenticator</b> en caso de que pierda el teléfono.<br><br>
                Si necesita reestablecer su <b>Google Authenticator</b> deberá comunicarse con el departamento de soporte
                (reestablecerlo puede tomar hasta 7 días)</p>
             </div>
             <div class="inputBox auth">
                <input type="text" class="pwdAuth" id="pwdSaveAuth" disabled>
            </div>
             <div class="buttons2FA">
                 <div class="button-submit-signin button2FA">
                    <button type="button" id="goback3" class="submitPassword submit-signin whiteButton">REGRESAR</button>
                 </div>
                 <div class="button-submit-login button2FA">
                    <button type="button" class="submitPassword submit-login blueButton" id="continueThree">CONTINUAR</button>
                 </div>
             </div>
          </div>
       </div>
   </div>
</div>
<div class="twoFAPopup1 newPopup2" style="width: 100%; height: 100vh; display:none;">
    <div style="vertical-align: middle; display: table-cell;">
        <div class="login-card FACard content">
          <div class="login-form-div twofaSect">
             <div class="inptCnt">
                <p class="login-form-label title2FA" id="title2fa4">Autenticación en 2 pasos</p>
                <div class="timeline">
                    <div class="dtimeline">
                        <i class="fas fa-check check-done check-icon" ></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="down2fa4">Descargar aplicación</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check check-done check-icon"></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="qrscan2fa4" >Escanear código QR</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check check-done check-icon"></i>
                        <h6 class="text-timeline poppins-medium twoFa" id="safekey2fa4" >Clave de recuperación</h6>
                    </div>
                    <div class="dtimeline">
                        <i class="fas fa-check check check-icon" id="lastIconActive"></i>
                        <h6 class="text-timeline poppins-bold twoFa" id="twoFA4Active" >Habilitar Autenticador</h6>
                    </div>
                </div>
                <p class="Text2FA poppins-medium" id="titleActive">Active su Autenticación en 2 pasos con <b>Google Authenticator</b></p>
             </div>
             <div class="verifyG box show" id="boxActive">
                 <div class="verifySide">
                     <p class="Text2FA verifyText alignText poppins-bold" id="2faVerifyTit" >Verificación de Google</p>
                     <p class="Text2FA alignText poppins-medium" id="2faVerifyInst">Introduzca el código de 6 dígitos desde la aplicación <b>Google Authenticator</b></p>
                 </div>
                 <div class="verifySide verifySideC">
                     <div class="inputBox">
                         <input type="text" class="typingZone" id="codeAuthenticator">
                         <!--<p class="Text2FA blue poppins-medium" id="sendActives">Enviar</p>-->
                     </div>
                 </div>
             </div>
             <p class="errorCode poppins-regular vHidden" id="errorCode">.</p>
             <div class="success noShow" id="boxActiveCorrect">
                <p class="login-form-label title2FA" id="congr2faTit">¡Felicidades!</p>
                <p class="Text2FA poppins-bold" id="congr2faSubt">Operación completada</p>
                <p class="Text2FA verifyText poppins-medium" id="congr2faMsg">Se ha activado la autenticación en dos pasos para acceder a su cuenta de AFX.</p>
            </div>
             <div class="buttons2FA" id="lastButtonsActive">
                 <div class="button-submit-signin button2FA">
                    <button type="button" id="goback4" class="submitPassword submit-signin whiteButton">REGRESAR</button>
                 </div>
                 <div class="button-submit-login button2FA">
                    <button type="button" class="submitPassword submit-login blueButton" id="sendActive">CONTINUAR</button>
                 </div>
             </div>
             <div class="buttons2FA noShow" id="finalButtonsActive">
                 <div class="button-submit-login button2FAFinal">
                    <button type="button" class="submitPassword submit-login blueButton" id="finalActive">FINALIZAR</button>
                 </div>
             </div>
          </div>
       </div>
   </div>
</div>


<div class="twoFAPopup3 newPopup3" style="width: 100%; height: 100vh; display:none;">
    <div style="vertical-align: middle; display: table-cell;">
        <div class="login-card FACard content">
          <div class="login-form-div twofaSect">
             <div class="inptCnt">
                <p class="login-form-label title2FA" id="title2faDis">Desactivar Autenticación en 2 pasos</p>
            <div class="verifyG boxAlert" id="boxAlert">
             <p class="text poppins-medium" id="boxMsgDis2fa"><b>Le recordamos que al desactivar la verificación con 2 factores de autenticación usted aumenta el riesgo de accesos no autorizados a su cuenta. Le recomendamos reactivarlo lo antes posible, para evitar que AFX Trade bloquee su cuenta por 24 horas hasta verificar alguna actividad considerada como inusual o sospechosa.</b></p>
            </div>
                <p class="Text2FA poppins-medium" id="titleDeactive">Desactive su Autenticación en 2 pasos con <b>Google Authenticator</b></p>
             </div>
             <div class="verifyG box show" id="boxDeactive">
                 <div class="verifySide">
                     <p class="Text2FA verifyText alignText poppins-bold" id="2faVerifyDisTit" >Verificación de Google</p>
                     <p class="Text2FA alignText poppins-medium" id="2faVerifyDisInst">Introduzca el código de 6 dígitos desde la aplicación <b>Google Authenticator</b></p>
                 </div>
                 <div class="verifySide">
                     <div class="inputBox">
                         <input type="text" class="typingZone" id="codeAuthenticatorDeactive">
                         <!--<p class="Text2FA blue poppins-medium" id="sendDeactives">Enviar</p>-->
                     </div>
                 </div>
             </div>
             <p class="errorCode poppins-regular vHidden" id="errorCodeDeactive">.</p>
             <div class="success noShow two" id="boxDeactiveCorrect">
                <p class="login-form-label title2FA" id="deact2faTit">¡Felicidades!</p>
                <p class="Text2FA poppins-bold" id="deact2faSubt">Operación completada</p>
                <p class="Text2FA verifyText poppins-medium" id="deact2faMsg">Se ha desactivado la autenticación en dos pasos para acceder a su cuenta de AFX.</p>
            </div>
             <div class="buttons2FA" id="lastButtonsDeactive">
                 <div class="button-submit-signin button2FA">
                    <button type="button" id="goback5" class="submitPassword submit-signin whiteButton">CANCELAR</button>
                 </div>
                 <div class="button-submit-login button2FA">
                    <button type="button" class="submitPassword submit-login blueButton" id="sendDeactive">CONTINUAR</button>
                 </div>
             </div>
             <div class="buttons2FA noShow" id="finalButtonsDeactive">
                 <div class="button-submit-login button2FAFinal">
                    <button type="button" class="submitPassword submit-login blueButton" id="finalDeactive">FINALIZAR</button>
                 </div>
             </div>
          </div>
       </div>
   </div>
</div>

<!-- SESION EXPIRADA -->

<div class="expired cardOperations">
    <div class="clickClose">
        <div class="cardWithdraw content">
            <div class="expSessionT">
                <p class="poppins-bold" id="expired1">Su sesión está próxima a expirar</p>
            </div>
            <div class="expSessionB">
                <p class="poppins-regular" id="expired2">Presione Continuar si desea permanecer activo por 15 minutos más.</p>
            </div>
            <div class="buttonOpValid">
                <div class="button-submit-expired">
                    <button type="button" class="submit-expired poppins-medium blueButton" id="expSessionButton">CONTINUAR</button>
                </div>
            </div>
       </div>
   </div>
</div>

<div class="waitScreen" id="waitScreen">
    <div class="spinChar">
        <i class="fas fa-circle-notch fa-spin"></i>
    </div>
</div>