<div class="table">
    <div class="tableRow" style="height: 10%">
        <div class="tableCell">
             
             <p class="titlePage"> Comunicaciones </p>
             
        </div>
    </div>
    
    <div class="tableRow">
        <div class="tableCell">
            
                <div class=centeredImage style="height: 100%">
                    <div class="headerFilter">
                        <div class="subTitlePage">
                            <p style="font-weight: 400;"> Preferencias </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="6" selected> Más reciente </option>
                                    <option value="1" > Dsc </option>
                                    <option value="2" > Email </option>
                                    <option value="3" > Teléfono 1 </option>
                                    <option value="4" > Teléfono 2 </option>
                                    <option value="5" > Teléfono 3 </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="cellCnt">
                                <div class="tableCurrencies">
                                    
                                    <div class="headerTableCurrencies tabtext tabselect">
                                        
                                        <div class="circledown" id="addData">
                                            <i class="fas fa-plus blue" aria-hidden="true"></i>
                                        </div>
                                        
                                    </div>
                                    
                                    <div class="headerTableCurrencies" style="border: none; padding-top: 0px">
                                        <div class="inputContainer">
                                            <p style="font-size: 70%"> </p>
                                        </div>
                                        
                                        <div class="inputContainer">
                                           <p id="msgErrorLevelFilter" class="msgError" style="font-size: 70%; display: none"> Error al cargar los niveles </p>
                                        </div>
                                        
                                        
                                        <div class="inputContainer">
                                            <p style="font-size: 70%">  </p>
                                        </div>
                                    </div>
                                    <div class="rowCurrencie headtop headlist">
                                        <div class="cell1">
                                            <span class="colHead"> Departamento </span>
                                        </div>
                                            
                                        <div class="cell2">
                                            <span class="colHead"> Correo </span>    
                                        </div>
                                        
                                        <div class="cell3">
                                            <span class="colHead"> SMS </span>    
                                        </div>
                                            
                                        <div class="cell4">
                                            <span class="colHead">  </span>    
                                        </div>
                                        
                                        <div class="cell5">
                                            <span class="colHead">  </span>    
                                        </div>
                                        
                                        <div class="cell6">
                                            <span class="colHead"> Help Desk </span>    
                                        </div>
                                        
                                    </div>
                                    
                                    <p id="messageApi" ></p>
                                    <div class="bodyTableCurrencies" id="bodyTableCurrencies">
                                        <div class="rowCurrencieNoDefine rowImpar" style="display: none" id="noCurrencieDefine">
                                            <p id="msgInTable"> msg Error </p>
                                        </div>
                                    </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>
<div id="modalconfir" class="modal">
    <div class="bodyModal confirbox">
        <p class="tittlemodal" id="tittlemodal"> Agregar </p>
        <div class="bodyCells">
            <div class="subCells">
                <div class="inputContainer selectorbox1">
                    <input class="inputRow inputElement inputQty inputModal" style="padding-left: 0;text-indent: 15px;" placeholder="Departamento" id="addDepartment" name="addDepartment">
                </div>

                <div class="inputContainer selectorbox1">
                    <input class="inputRow inputElement inputQty inputModal" style="padding-left: 0;text-indent: 15px;" placeholder="Agregar correo" id="addMail" name="addMail">
                </div>
                
                <div class="tiltle">
                    <p class="phoneText">Teléfonos</p>
                </div>
                <div class="phoneSect">
                    <div class="inputContainer tabtext">
                                    <select class="inputElement selectOrderBy" id="phoneOne" name="phoneOne" style="border:none;width:70px"> 
                                        <option value="0412"> 0412 </option>
                                        <option value="0414"> 0414 </option>
                                        <option value="0424"> 0424 </option>
                                        <option value="0416"> 0416 </option>
                                        <option value="0426"> 0426 </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 class="inputContainer selectorbox1 contPhone">
                        <input class="inputRow inputElement inputQty inputModal inputPhone" style="padding-left: 0;text-indent: 15px;" maxlength="7" id="phoneOneNumber" name="phoneOneNumber">
                    </div>
                </div>
                <div class="phoneSect">
                    <div class="inputContainer tabtext">
                                    <select class="inputElement selectOrderBy" id="phoneTwo" name="phoneTwo"  style="border:none;width:70px"> 
                                        <option value="0412"> 0412 </option>
                                        <option value="0414"> 0414 </option>
                                        <option value="0424"> 0424 </option>
                                        <option value="0416"> 0416 </option>
                                        <option value="0426"> 0426 </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 class="inputContainer selectorbox1 contPhone">
                        <input class="inputRow inputElement inputQty inputModal inputPhone" style="padding-left: 0;text-indent: 15px;" maxlength="7" id="phoneTwoNumber" name="phoneTwoNumber">
                    </div>
                </div>
                <div class="phoneSect">
                    <div class="inputContainer tabtext">
                                    <select class="inputElement selectOrderBy" id="phoneThree" name="phoneThree"  style="border:none;width:70px"> 
                                        <option value="0412"> 0412 </option>
                                        <option value="0414"> 0414 </option>
                                        <option value="0424"> 0424 </option>
                                        <option value="0416"> 0416 </option>
                                        <option value="0426"> 0426 </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 class="inputContainer selectorbox1 contPhone">
                        <input class="inputRow inputElement inputQty inputModal inputPhone" style="padding-left: 0;text-indent: 15px;" id="phoneThreeNumber" maxlength="7" name="phoneThreeNumber">
                    </div>
                </div>
                <div class="inputContainer selectorbox1">
                    <input class="inputRow inputElement inputQty inputModal" style="padding-left: 0;text-indent: 15px;" placeholder="Usuario Help Desk" id="addDesk" name="addDesk">
                </div>
             </div>   
        </div>
        <div class="errorMsg"><span class="msgError" style="display:block" id="msgError">Error</span></div>
        <div class="buttonsBox" id="buttonsCreate">
            <div class="subCells" id="buttonDelete">
                <div class="buttondelete buttonsPop" id="deleteM">
                    ELIMINAR
                </div>
            </div>
            <div class="subCells" id="buttonSave">
                <div class="buttonacept buttonsPop" id="aceptM">
                    GUARDAR
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="txid">