<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="./img/afx-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"></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">
    <div style="height: 150px; width: 100%; background-color: transparent; z-index: 50; width: 100%; position: fixed;" id="addView2">
            <input id="example-element-toggle2" type="checkbox" />
            <div id="example-toggled-element2">
                <div style="display: table; border-bottom: 1px solid rgba(180, 180, 180, 0.5); padding-bottom: 8px; width: 85%; margin-left: auto;margin-right: auto;">
                    <div style="display: table-cell; width: 90%">
                        <li class="bar" style="display: block; color: #D5DCE5;"><a class="poppins-regular rtext" id="name2"></a></li>
                    </div>
                    <div style="display: table-cell; width: 10%">
                        <li class="bar" style="display: block"><a class="rIcon"><i class="fas fa-sign-out-alt" id="logouticon2"></i></a></li>
                    </div>
                </div>
                <div>
                    <li  style="display: block; color: #D5DCE5; margin-left: 8%;"><a class="poppins-regular rtext" id="homeR">Inicio</a></li>
                </div>
                <div>
                    <li  style="display: block; color: #D5DCE5; margin-left: 8%;"><a class="poppins-regular rtext" id="balanceR">Balance</a></li>
                </div>
                <div>
                    <li  style="display: block; color: #D5DCE5; margin-left: 8%;"><a class="poppins-bold rtext" id="preferencesR">Preferencias</a></li>
                </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" style=" float: right; position: absolute; right: 10px; bottom: 0px; display: none;"> 
                                    <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="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="textLevel2">
                                            <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="textLevel3">
                                            <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: 33%; 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: 33%; 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: 33%; 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">
                        <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> 
    </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>

<!-- 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="footCopy">
   <h6 style="margin:0" id="ts">©  2020. Totalsoftware de Venezuela -  Todos los derechos Reservados</h6>
</div>

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