<header style="z-index: 10"> 
    <div class="container-div">
        <div class="logo headerd">
            <div class="innerheaderd">
                <img class="logo-header" src="./img/afx-logo.png">
            </div>
        </div>
    </div>
</header> 

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

<div class="pageCnt" style="margin-top: 100px; visibility: hidden;">
    <div class="centerCell">
        <div class="card">
            <div class="space"></div>
            <div class="timeline">
                <div class="wsleft"></div>
                <div class="dtimeline">
                    <i class="fas fa-check check check-icon" ></i>
                    <h6 class="text-timeline poppins-bold">Datos Básicos</h6>
                </div>
                <div class="dtimeline">
                    <i class="fas fa-check no-check check-icon"></i>
                    <h6 class="text-timeline poppins-medium">Datos de Residencia</h6>
                </div>
                <div class="dtimeline">
                    <i class="fas fa-check no-check check-icon"></i>
                    <h6 class="text-timeline poppins-medium">Información Profesional</h6>
                </div>
                <div class="dtimeline">
                    <i class="fas fa-check no-check check-icon"></i>
                    <h6 class="text-timeline poppins-medium">Soporte de información</h6>
                </div>
                <div class="dtimeline">
                    <i class="fas fa-check no-check check-icon"></i>
                    <h6 class="text-timeline poppins-medium">Datos Transaccionales</h6>
                </div>
                <div class="dtimeline">
                    <i class="fas fa-check no-check check-icon"></i>
                    <h6 class="text-timeline poppins-medium">Declaración Jurada</h6>
                </div>
                <div class="wsright" ></div>
            </div>
            
            <div class="title">
                <h3 class="poppins-bold">Datos Básicos</h3>
            </div>
            
            <div class="regForm">
                <div class="tableForm">
                    <div class="tableForm">
                        <div class="cellForm cellForm50">
                            <div class="divForm" id="dvenezuelan">
                                <div class="divIcon inputSelect">
                                    <i class="iconStatus" id="venezuelanIcon"></i>
                                </div>
                                <p class="poppins-bold" id="venezuelanLabel">Ciudadano Venezolano</p>
                                <select id="venezuelan" name="venezuelan" class="form-input poppins-regular">
                                    <option value="" class="poppins-medium" disabled selected>Selecciona</option>
                                    <option class="poppins-medium" value="1">Si</option>
                                    <option class="poppins-medium" value="0">No</option>
                                 </select>
                                 <p class="poppins-regular error" id="evenezuelan"></p>
                            </div>
                        </div>
                        <div class="cellForm cellForm50">
                            <div class="divForm" id="damerican">
                                <div class="divIcon inputSelect">
                                    <i class="iconStatus" id="americanIcon"></i>
                                </div>
                                <p class="poppins-bold" id="americanLabel">Ciudadano Americano</p>
                                <select id="american" name="american" class="form-input poppins-regular">
                                    <option value="" class="poppins-medium" disabled selected>Selecciona</option>
                                    <option class="poppins-medium" value="1">Si</option>
                                    <option class="poppins-medium" value="0">No</option>
                                 </select>
                                 <p class="poppins-regular error" id="eamerican"></p>
                            </div>
                        </div>
                        
                    </div>
                    <div class="tableForm">
                        <div class="cellForm cellForm50">
                            <div id="dfirstName" class="divForm" >
                                <div class="divIcon inputNormal">
                                    <i class="iconStatus" id="firstNameIcon"></i>
                                </div>
                                <p class="poppins-bold" id="firstNameLabel">Primer Nombre</p>
                                <input type="text" name="firstName" placeholder="Primer Nombre" class="form-input poppins-regular" id="firstName">
                                <p class="poppins-regular error" id="efirstName"></p>
                            </div>
                        </div>
                        <div class="cellForm cellForm50">
                            <div class="divForm" id="dsecondName">
                                <div class="divIcon inputOptional">
                                    <i class="iconStatus" id="secondNameIcon"></i>
                                </div>
                                <p class="poppins-bold" id="secondNameLabel">Segundo Nombre</p>
                                <div class="doptional">
                                    <p class="poppins-italic">Opcional</p>
                                </div>
                                <input type="text" name="secondName" placeholder="Segundo Nombre" class="form-input poppins-regular" id="secondName">
                            </div>
                        </div>
                        
                    </div>
                    <div class="tableForm">
                        <div class="cellForm cellForm50">
                            <div class="divForm" id="dfirstSurname">
                                <div class="divIcon inputNormal">
                                    <i class="iconStatus" id="firstSurnameIcon"></i>
                                </div>
                                <p class="poppins-bold" id="firstSurnameLabel">Primer Apellido</p>
                                <input type="text" name="firstSurname" placeholder="Primer Apellido" class="form-input poppins-regular" id="firstSurname">
                                <p class="poppins-regular error" id="efirstSurname"></p>
                            </div>
                        </div>
                        <div class="cellForm cellForm50">
                            <div class="divForm" id="dsecondSurname">
                                <div class="divIcon inputOptional">
                                    <i class="iconStatus" id="secondSurnameIcon"></i>
                                </div>
                                <p class="poppins-bold" id="secondSurnameLabel">Segundo Apellido</p>
                                <div class="doptional">
                                    <p class="poppins-italic">Opcional</p>
                                </div>
                                <input type="text" name="secondSurname" placeholder="Segundo Apellido" class="form-input poppins-regular" id="secondSurname">
                            </div>
                        </div>
                    </div>
                    <div class="tableForm">
                        <div class="cellForm cellForm25">
                            <div class="divForm" id="didentif">
                                <div class="divIcon inputSelect">
                                    <i class="iconStatus" id="identifIcon"></i>
                                </div>
                                <p class="poppins-bold" id="identifLabel">Identificación</p>
                                <select id="identif" name="identif" class="form-input poppins-regular">
                                    <option value="" class="poppins-medium" disabled selected>Selecciona</option>
                                    <option class="poppins-medium" value="1">CI</option>
                                    <option class="poppins-medium" value="2">Pasaporte</option>
                                    <option class="poppins-medium" value="3">Licencia</option>
                                 </select>
                                 <p class="poppins-regular error" id="eidentif"></p>
                            </div>
                        </div>
                        <div class="cellForm cellForm25">
                            <div class="divForm" id="dnumber">
                                <div class="divIcon inputNormal">
                                    <i class="iconStatus" id="numberIcon"></i>
                                </div>
                                <p class="poppins-bold" id="numberLabel">Número</p>
                                <input type="text" name="number" placeholder="Ej: 5.555.555" class="form-input poppins-regular" id="number">
                                <p class="poppins-regular error" id="enumber"></p>
                            </div>
                        </div>
                        <div class="cellForm cellForm50">
                            <div class="divForm" id="dcountry">
                                <div class="divIcon inputSelect">
                                    <i class="iconStatus" id="countryIcon"></i>
                                </div>
                                <p class="poppins-bold" id="countryLabel">País de Emisión del Documento</p>
                                <select id="country" name="country" class="form-input poppins-regular">
                                </select>
                                <p class="poppins-regular error" id="ecountry"></p>
                            </div>
                        </div>
                    </div>
                    <div class="tableForm">
                        <div class="cellForm cellForm25">
                            <div class="divForm" id="ddateEmission">
                                <div class="divIcon inputCalendar">
                                    <i class="iconStatus" id="dateEmissionIcon"></i>
                                </div>
                                <p class="poppins-bold" id="dateEmissionLabel">Fecha de Emisión</p>
                                <input type="date" name="dateEmission" class="form-input poppins-regular" id="dateEmission" placeholder="DD/MM/YYYY" name="begin" >
                                <p class="poppins-regular error" id="edateEmission"></p>
                            </div>
                        </div>
                        <div class="cellForm cellForm25">
                            <div class="divForm" id="ddateExpiration">
                                <div class="divIcon inputCalendar">
                                    <i class="iconStatus" id="dateExpirationIcon"></i>
                                </div>
                                <p class="poppins-bold" id="dateExpirationLabel">Fecha de Expiración</p>
                                <input type="date" name="dateExpiration" class="form-input poppins-regular" id="dateExpiration">
                                <p class="poppins-regular error" id="edateExpiration"></p>
                            </div>
                        </div>
                         <div class="cellForm cellForm25">
                            <div class="divForm" id="dgender">
                                <div class="divIcon inputSelect">
                                    <i class="iconStatus" id="genderIcon"></i>
                                </div>
                                <p class="poppins-bold" id="genderLabel">Sexo</p>
                                <select id="gender" name="gender" class="form-input poppins-regular">
                                    <option value="" class="poppins-medium" disabled selected="true">Selecciona</option>
                                    <option class="poppins-medium" value="M">Masculino</option>
                                    <option class="poppins-medium" value="F">Femenino</option>
                                 </select>
                                 <p class="poppins-regular error" id="egender"></p>
                            </div>
                        </div>
                        <div class="cellForm cellForm25">
                            <div class="divForm" id="ddateB">
                                <div class="divIcon inputCalendar">
                                    <i class="iconStatus" id="dateBIcon"></i>
                                </div>
                                <p class="poppins-bold" id="dateBLabel">Fecha de Nacimiento</p>
                                <input type="date" name="dateB" class="form-input poppins-regular" id="dateB">
                                <p class="poppins-regular error" id="edateB"></p>
                            </div>
                        </div>

                    </div>
                    <div class="tableForm">
                        <div class="cellForm cellForm50">
                            <div class="divForm" id="dcountry">
                                <div class="divIcon inputSelect">
                                    <i class="iconStatus" id="countryBIcon"></i>
                                </div>
                                <p class="poppins-bold" id="countryBLabel">País de Nacimiento</p>
                                <select id="countryB" name="countryB" class="form-input poppins-regular">
                                 </select>
                                 <p class="poppins-regular error" id="ecountryB"></p>
                            </div>
                        </div>
                        <div class="cellForm cellForm25">
                            <div class="divForm" id="dstatus">
                                <div class="divIcon inputSelect">
                                    <i class="iconStatus" id="statusIcon"></i>
                                </div>
                                <p class="poppins-bold" id="statusLabel">Estado Civil</p>
                                <select id="status" name="status" class="form-input poppins-regular">
                                    <option value="" class="poppins-medium" disabled selected>Selecciona</option>
                                    <option class="poppins-medium" value="1">Soltero</option>
                                    <option class="poppins-medium" value="2">Casado</option>
                                    <option class="poppins-medium" value="3">Divorciado</option>
                                    <option class="poppins-medium" value="4">Viudo</option>
                                 </select>
                                 <p class="poppins-regular error" id="estatus"></p>
                            </div>
                        </div>
                        <div class="cellForm cellForm25">
                            <div class="divForm" id="dphone">
                                <div class="divIcon inputNormal">
                                    <i class="iconStatus" id="phoneIcon"></i>
                                </div>
                                <p class="poppins-bold" id="phoneLabel">Teléfono</p>
                                <input type="text" name="phone" placeholder="EJ. +1 305 555 5555" class="form-input poppins-regular" id="phone">
                                <p class="poppins-regular error" id="ephone"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tableForm infReq">
                <div class="cellForm cellForm33">
                    <p class="poppins-regular"><span style="font-size: 100%; color: #7D8B9E;" class="roboto-bold">(1)</span> Requerido Nivel 1</p>
                </div>
                <div class="cellForm cellForm33">
                    <p class="poppins-regular"><span style="font-size: 100%; color: #4287CE;" class="roboto-bold" >(2)</span> Requerido Nivel 2 </p>
                </div>
                <div class="cellForm cellForm33">
                    <p class="poppins-regular"><span style="font-size: 100%; color: rgb(1, 42, 63);" class="roboto-bold" >(3)</span> Requerido Nivel 3 </p>
                </div>
            </div>
            <hr>
            <div class="buttons">
                <div id="previous"><button type="submit" id="previous-button" class="cancel-button poppins-medium whiteButton">REGRESAR</button></div>
                <div id="later"><button type="submit" id="later-button" class="cancel-button poppins-medium whiteButton">COMPLETAR LUEGO</button></div>
                <div id="next"><button type="submit" id="next-button" class="accept-button poppins-medium blueButton">CONTINUAR</button></div>
            </div>
        </div>
    </div>
</div>

<!-- CONFIRMAR LUEGO -->

<div class="completeLater" style="display: none;">
    <div class="clickClose">
        <div class="cardWithdraw content">
            <div style="margin: 0px 33px;">
                <div>
                    <p class="poppins-regular messageInfAttention">
                        Es posible que alguno de los datos suministrados se pierda al completar el registro en otro momento
                        <br><br>
                        ¿Está seguro que desea continuar luego?
                    </p>
                </div>
                <div class="buttonAcceptCompleteLater">
                    <div class="button-submit">
                        <button type="button" class="submit poppins-medium blueButton" id="completeLaterAccept">SI, COMPLETAR LUEGO</button>
                    </div>
                </div>
                <div class="buttonCancelCompleteLater">
                    <div class="button-submit">
                        <button type="button" class="submitW poppins-medium whiteButton" id="completeLaterCancel">CANCELAR</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">Su sesión está próxima a expirar</p>
            </div>
            <div class="expSessionB">
                <p class="poppins-regular">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">©  2020. Totalsoftware de Venezuela -  Todos los derechos Reservados</h6>
</div>