<header style="z-index: 10">   
    <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-bold" id="home">Inicio</a></li>
                <li><a class="poppins-regular" id="balance">Balance</a></li>
                <li><a class="poppins-regular" 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">ES</div></a></li>
            </ul> 
        </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: 90px; visibility: hidden;">
    
    <!-- TOGGLE MOBILE -->
    
    <div id="addView2">
        <input id="example-element-toggle2" type="checkbox"/>
        <div id="example-toggled-element2">
            <div class="ete2div">
                <div class="ete2divName">
                    <li class="bar"><a class="poppins-regular rtext" id="name2"></a></li>
                </div>
                <div class="ete2divLogout">
                    <li class="bar"><a class="rIcon"><i class="fas fa-sign-out-alt" id="logouticon2"></i></a></li>
                </div>
            </div>
            <div>
                <li class="liR" style="display: block; color: #D5DCE5; margin-left: 8%;"><a class="poppins-bold rtext" id="homeR">Inicio</a></li>
            </div>
            <div>
                <li class="liR" style="display: block; color: #D5DCE5; margin-left: 8%;"><a class="poppins-regular rtext" id="balanceR">Balance</a></li>
            </div>
            <div>
                <li class="liR" style="display: block; color: #D5DCE5; margin-left: 8%;"><a class="poppins-regular rtext" id="preferencesR">Preferencias</a></li>
            </div>
        </div>
    </div>
    
    <div class="centerCell">
        <div class="card">
            
            <div class="principalTitle">
                <h3 class="poppins-bold" id="titlePage">Comprar Criptomoneda</h3>
            </div>
            
            <div class="space"></div>
            <div class="timeline">
                <div class="wsleft"></div>
                <div class="dtimeline">
                    <i class="fas fa-check check-done check-icon" ></i>
                    <h6 class="text-timeline poppins-bold" id="step1">Paso 1</h6>
                </div>
                <div class="dtimeline">
                    <i class="fas fa-check check-done check-icon"></i>
                    <h6 class="text-timeline poppins-bold" id="step2">Paso 2</h6>
                </div>
                <div class="dtimeline">
                    <i class="fas fa-check check check-icon"></i>
                    <h6 class="text-timeline poppins-bold" id="step3">Paso 3</h6>
                </div>
                <div class="dtimeline">
                    <i class="fas fa-check no-check check-icon"></i>
                    <h6 class="text-timelineG poppins-medium" id="step4">Paso 4</h6>
                </div>
                <div class="dtimeline">
                    <i class="fas fa-check no-check check-icon"></i>
                    <h6 class="text-timelineG poppins-medium" id="step5">Paso 5</h6>
                </div>
                <div class="wsright" ></div>
            </div>
            
            <div class="regForm">
                <div class="tableForm">
                    <div class="tableForm">
                        <p class="titleText poppins-bold" id="t1">¿Con qué moneda desea pagar?</p>
                    </div>
                    <div class="tableForm">
                        <p class="titleText poppins-regular" style="margin-top: 7px;" id="t2">Indique con cuál de sus monedas desea completar la operación</p>
                    </div>
                    <div class="tableCrOut">
                        <div class="tableForm">
                            <div class="tableForm" style="padding: 0px 2%;">
                                <div class="cellForm cellFormCurrency">
                                    <p class="poppins-bold titleCripto" id="currencyLabel">Moneda</p>
                                </div>
                                <div class="cellForm cellFormBalance">
                                    <p class="poppins-bold titleCripto" id="balanceLabel">Saldo</p>
                                </div>
                                <div class="cellForm cellFormAvailable">
                                    <p class="poppins-bold titleCripto" id="avLabel">Disponible</p>
                                </div>
                            </div>
                            <div class="tableForm" id="table">
                                <div class="tableForm rowCr" style="display: none">
                                    <div class="cellForm cellFromSymB">
                                        <p class="roboto-regular bodyCripto"></p>
                                    </div>
                                    <div class="cellForm cellFromNameB">
                                        <p class="roboto-regular bodyCripto"></p>
                                    </div>
                                    <div class="cellForm cellFormBalanceB">
                                        <p class="roboto-regular bodyCripto"></p>
                                    </div>
                                    <div class="cellForm cellFormAvailableB">
                                        <p class="roboto-regular bodyCripto"></p>
                                    </div>
                                    <div class="cellForm cellFormSelectB divSelectButton">
                                        <div class="selectButton">
                                            <button type="submit" class="crypto cancel-button poppins-medium whiteButton">
                                                SELECCIONAR
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="poppins-regular error" id="error"></p>
                        </div>
                    </div>
                    
                    <div class="buttons">
                        <div id="previous"><button type="submit" id="previous-button" class="cancel-button poppins-medium whiteButton">REGRESAR</button></div>
                        <div id="next"><button type="submit" id="next-button" class="accept-button poppins-medium blueButton">CONTINUAR</button></div>
                    </div> 
                    
                    <div class="buttonsR">
                        <div>
                            <button type="submit" id="previous-buttonR" class="cancel-button poppins-medium whiteButton">REGRESAR</button>
                        </div>
                        <div>
                            <button type="submit" id="next-buttonR" class="accept-button poppins-medium blueButton">CONTINUAR</button>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <div class="float blueButton" id="floatButton">
        <i class="fa fa-lightbulb my-float"><button class="submit popuptext poppins-medium blueButton" id="buttonAdv">MODO AVANZADO<i class="fas fa-times-circle floatClose" id="floatClose"></i></button></i>
    </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>