<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> Ocupaciones </p>
                        </div>
                        
                        <div class="inputsContainer">
                           <div class="inputContainer">
                               <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="2" > Más reciente </option>
                                    <option value="1" selected> Nombre </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" selected> Asc </option>
                                    <option value="desc"> 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="cellContainer" style="min-width: 480px;">
                                <div class="tableCurrencies">
                                    <div class="langBox" style="margin: 0px 20px;margin-bottom: 12px;">
                                        <p class="lang" id="espDsc" data-group="dsc">Español</p>
                                        <p class="lang" id="engDsc" data-group="dsc">Inglés</p>
                                    </div>
                                    <div class="headerTableCurrencies">
                                        <div class="tableCell" style="width:70%;">
                                            <input class="inputRow dscEsp" placeholder="Agregar Ocupación Esp" id="addCountryNameesp" name="addCountryName">
                                            <input class="inputRow dscEng" style="display:none;" placeholder="Agregar Ocupación Eng" id="addCountryNameeng" name="addCountryName">
                                        </div>
                                        <div class="tableCell" style="width:60px">
                                            <p class="icAddCnt icontop">
                                                <i class="fas fa-plus-circle iconAdd" id="iconAddCountry"></i>
                                            </p>
                                        </div>
                                    </div>
                                    <p id="messageApi" class="tableLine" style="display:none"></p>
                                    <div class="tableLine rowImpar" style="display: none" id="noCurrencieDefine">
                                        <p id="msgInTable" style="margin-left: auto;margin-right: auto;"> msg Error </p>
                                    </div>
                                    <div class="bodyTableCountries" id="bodyTableCountries">
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        
                        <div class="rowContainer" style="height: 20%;">
                            <div class="cellContainer"  >
                                <div class="rowContainer paginator" id="paginator">
                                    <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 delete">

  <!-- Modal content -->
  <div class="modal-content delete">
      <div class="headerModal" > 
        <span></span>
        <span id="closeModal">&times;</span>
        
      </div>
    <div class="bodyModal">
        <p>¿Está seguro que desea eliminar esta información?<br><br></p>
        <p><b>Ocupación: <span id="countryDelete"></span></b></p>
    </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>