<div class="table">
    <div class="tableRow" style="height: 10%">
        <div class="tableCell">
             
             <p class="titlePage"> Mantenimiento </p>
             
        </div>
    </div>
    
    <div class="tableRow">
        <div class="tableCell">
            
                <div class=centeredImage style="height: 100%">
                    <div class="headerFilter">
                        <div class="subTitlePage">
                            <p> Cuentas Internas </p>
                        </div>
                        
                        <div class="inputsContainer">
                           <div class="inputContainer tabtext">
                               <label for="search" class="ordered"> Buscar </label>
                                <input class="inputElement searching" type="text" id="search" name="search" style="border: none"> 
                                <div class="iconContainerSearch">
                                    <i class="fas fa-search" id="iconSearch"></i>
                                </div>
                            </div>
                            
                            <div class="inputContainer tabtext">
                               <label for="orderBy" class="ordered"> Ordenar por </label>
                                <select class="inputElement selectOrderBy" id="orderBy" name="orderBy" placeholder="Nombre" style="border: none"> 
                                    <option value="5" selected> Más reciente </option>
                                    <option value="1" > País </option>
                                    <option value="2" > Forma de pago </option>
                                    <option value="4" > Moneda </option>
                                    <option value="3" > Estatus </option>
                                </select>
                                <div class="iconContainerArrow">
                                    <i class="fas fa-caret-down" id="arrowOrderBy"></i>
                                </div>
                            </div>
                            
                            <div class="inputContainer tabtext">
                                <select class="inputElement selectOrderBy" id="orderDirect" name="orderBy" placeholder="Nombre" style="border:none;width:70px" > 
                                    <option value="asc"> Asc </option>
                                    <option value="desc" selected> Desc </option>
                                </select>
                                <div class="iconContainerArrow" style="width: 15px;text-align: center;">
                                    <i class="fas fa-caret-down" style="width:auto" id="arrowOrderDir"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="tableContainer">
                        <div class="rowContainer" style="height: 80%">
                            <div class="cellContainerAcc" style="width: 65% !important; min-width: 480px;">
                                <div class="tableCurrencies">
                                    <div class="headerTableCurrencies" style="border:0">
                                        <div class="inputRowCurrencie" style="font-weight:400" id="addCurrencieName" name="addCurrencieName">Estatus</div>
                                        
                                        <p class="addBtnCnt">
                                            Agregar
                                            <i class="fas fa-plus-circle" id="iconAddCurrencie"></i>
                                        </p>
                                    </div>
                                    <p id="messageApi" style="display: none"></p>
                                    <div class="bodyTableCurrencies" id="bodyTableCurrencies">
                                        <!--<div class="rowCurrencie" id="liCurrencie" >
                                            <label class="switch">
                                              <input type="checkbox" checked>
                                              <span class="slider round"></span>
                                            </label>
                                            
                                            <input disabled="true" class="inputRowCurrencie" value="Venezuela">
                                            
                                            <input disabled="true" class="inputRowCurrencie" value="Mercantil">
                                            
                                            <input disabled="true" class="inputRowCurrencie" value="BsS">
                                            
                                            <p style='display: inherit;'>
                                                <i class='fas fa-edit editCurrencie'></i>
                                                <i class='fas fa-trash-alt deleteCurrencie'></i>
                                            </p> 
                                        </div>-->
                                        
                                        <div class="rowCurrencieNoDefine rowImpar" style="display: none" id="noCurrencieDefine">
                                            <p id="msgInTable"> msg Error </p>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <div class="cellContainer">
                                <div class=contentSectionAdd id="addSection">
                                    <div class="contentAdd">
                                        
                                        <div class="triangle-left"></div>
                                        <div class="divTitleAdd">
                                            <p class="titleAdd"> x </p>
                    
                                            <span id="closeSectionAdd">&times;</span>
                                        </div>
                                        
                                        <div class="divBodyAdd" style="display: table; width: 100%; height: 75%; padding-top: 12px; margin-bottom: 60px">
                                            <div style="display: table-row; width: 100%">
                                                <div style="display: table-cell; width: 50%; margin: auto">
                                                    <div class="inputContainer" style="margin:auto">
                                                        <select class="inputElement selectOrderBy" id="StatusAdd" name="orderBy" title="Estatus" style="width: 90%"> 
                                                            <option value="1" selected> Activo </option>
                                                            <option value="0" > Inactivo </option>
                                                        </select>
                                                        <div class="iconContainerArrow" style="right: 18%;">
                                                            <i class="fas fa-caret-down" id="arrowStatus"></i>
                                                        </div>
                                                    </div>
                                                    <p class="msgError" id="msgStatus"> Campo Requerido </p>
                                                    
                                                    <div class="inputContainer">
                                                        <select class="inputElement selectOrderBy" type="text"  name="search" id="payMethodsAdd" style="width: 90%" placeholder="Forma de Pago"> 
                                                            <option value="" selected>Forma de pago</option>
                                                        </select>
                                                        
                                                        <div class="iconContainerArrow" style="right: 18%;">
                                                            <i class="fas fa-caret-down" id="arrowPayMethods"></i>
                                                        </div>
                                                    </div>
                                                    <p class="msgError" id="msgPayMethod"> Campo Requerido </p>
                                                    
                                                    <div class="inputContainer">
                                                        <input class="inputElement" type="text"  name="search"  id="detail1"  style="width: 85%"> 
                                                    </div>
                                                    <p class="msgError" id="msgDet1"> Campo Requerido </p>
                                                    
                                                    <div class="inputContainer">
                                                        <input class="inputElement" type="text"  name="search" id="detail3" style="width: 85%"> 
                                                    </div>
                                                    <p class="msgError" id="msgDet2"> Campo Requerido </p>
                                                </div>
                                                
                                                <div style="display: table-cell; width: 50%; margin: auto">
                                                    <div class="inputContainer" style="margin:auto">
                                                        <select class="inputElement selectOrderBy"  name="Pais" title="Pais" id="CountryAdd" style="width: 90%"> 
                                                            <option value="" selected>País</option>
                                                        </select>
                                                        
                                                        <div class="iconContainerArrow" style="right: 18%;">
                                                            <i class="fas fa-caret-down" id="arrowCountry"></i>
                                                        </div>
                                                    </div>
                                                    <p class="msgError" id="msgCountry"> Campo Requerido </p>
                                                    
                                                    <div class="inputContainer" style="margin:auto">
                                                        <select class="inputElement selectOrderBy"  name="Currencie" id="CurrencieAdd" title="Moneda" style="width: 90%"> 
                                                            <option value="">Moneda</option>
                                                        </select>
                                                        
                                                        <div class="iconContainerArrow" style="right: 18%; ">
                                                            <i class="fas fa-caret-down" id="arrowCurrencie"></i>
                                                        </div>
                                                    </div>
                                                    <p class="msgError" id="msgCurrencie"> Campo Requerido</p>
                                                    
                                                    <div class="inputContainer">
                                                        <input class="inputElement" type="text"  name="search" id="detail2"  style="width: 82%"> 
                                                    </div>
                                                    <p class="msgError" id="msgDet2">Campo Requerido </p>
                                                    
                                                    <div class="inputContainer">
                                                        <input class="inputElement" type="text"  name="search" id="detail4" style="width: 82%"> 
                                                    </div>
                                                    <p class="msgError" id="msgDet4">Campo Requerido </p>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="footerContentAdd">
                                            <div class="contentButtonAdd">
                                                <button id="buttonAceptAdd"> Aceptar </button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                                
                            </div>
                        </div>
                        
                        <div class="rowContainer" style="height: 20%;">
                            <div class="cellContainer"  align="center">
                                <div class="rowContainer paginator" id="paginator"  align="center">
                                    <div class="pageCntBox" align="center">
                                        <p>
                                            <i class='fas fa-angle-left editCurrencie'></i>
                                        </p>
                                        
                                        <div arrowsEvent="false" id="numbersPaginator">
                                               
                                        </div>
                                        
                                        
                                        <p>
                                            <i class='fas fa-angle-right editCurrencie'></i>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
      <div class="headerModal" > 
        <span></span>
        <span id="closeModal">&times;</span>
        
      </div>
    <div class="bodyModal">
        <p>¿Está seguro que desea eliminar esta información?</p>   
        
        <ul id="dataDelete" class="removedata">
            
        </ul>
    </div>
    <div class="footerModal" align="center">
        <button id="buttonAceptModal" align="center" class="aligndelete"> Aceptar </button>
        <button id="buttonCancelModal" align="center" class="aligndelete"> Cancelar </button>
    </div>
    
  </div>

</div>