<div class="content" id="content" style="margin-left: 229px;min-width: max-content;">
    <div class="table" style="margin-left: auto;margin-right: auto;width: 90%;">
        <div class="tableRow" style="height: 10%">
            <div class="tableCell">
                 <p class="titlePage" style="margin: 0;"> Seguridad </p>
            </div>
        </div>
        <div class="tableRow">
            <div class="tableCell">
                    <div class="centeredImage" style="height: auto;width: auto;min-width: 100%;margin-left: auto;margin-right: auto;display:none;">
                        <div class="headerFilter">
                            <div class="subTitlePage">
                                <p> Roles y  Usuarios</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="4"> Más reciente </option>
                                        <option value="1" selected> Nombre </option>
                                        <option value="2"> Correo </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="cellContainerUser cellUserLeft">
                                    <div class="tableCurrencies" style="margin-left:0">
                                        <div class="headerTableCurrencies" style="margin: 0;width: 100%;">
                                            <div class="tableCell" style="width:auto">
                                                <input class="inputRow" placeholder="Nombre" id="addRolName" name="addCurrencieName">
                                            </div>
                                            <div class="tableCell" style="width:30%">
                                                <div class="inputRow selectOrderBy placehColor" id="addRolPriv" name="addCurrencieStatus">
                                                    <span>Privilegios</span> 
                                                    <div class="iconContainerArrow" style="bottom: 0;">
                                                        <i class="fas fa-caret-down" id="arrowOrderBy"></i>
                                                    </div>
                                                    <div class="privList" id="privListAdd">
                                                        <div class="privArrow"></div>
                                                        <div class="privListCnt">
                                                            <div class="privTbl" id="tblAddPriv">
                                                                <div class="privCnt">
                                                                    <div class="privCell" style="width:50%">
                                                                        <div class="privNameCnt">Ctas. internas</div>
                                                                    </div>
                                                                    <div class="privCell" style="width:42%">
                                                                        <div class="privDscCnt">Ver</div>
                                                                    </div>
                                                                    <div class="privCell" style="width:8%">
                                                                        <div class="switchCont">
                                                                            <div class="switch active" privid="26">
                                                                                <div class="switchBal balActive"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="privCnt">
                                                                    <div class="privCell" style="width:50%">
                                                                        <div class="privNameCnt">Ctas. internas</div>
                                                                    </div>
                                                                    <div class="privCell" style="width:42%">
                                                                        <div class="privDscCnt">Eliminar</div>
                                                                    </div>
                                                                    <div class="privCell" style="width:8%">
                                                                        <div class="switchCont">
                                                                            <div class="switch active" privid="25">
                                                                                <div class="switchBal balActive"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tableCell" style="width:60px">
                                                <p style="display: inherit; width: 10%; text-align: right;">
                                                    <i class="fas fa-plus-circle iconAdd" id="iconAddRol"></i>
                                                </p>
                                            </div>
                                        </div>
                                        <p id="messageApiRol"></p>
                                        <div class="bodyTableCurrencies" id="bodyTableRoles">
                                            <div class="rowCurrencieNoDefine rowImpar" style="display: none" id="noRolesDefine">
                                                <p id="msgInTable"> msg Error </p>
                                            </div>
                                            <div class="rowCurrencie rowImpar" id="liRol0" data-id="6" style="display: flex;">
                                                <input disabled="" class="inputRow" id="inputNameRol0"><div class="inputRow inputRol selectOrderBy" id="inputPriv0" rolid="6">
                                                    Privilegios
                                                <div class="privList" id="privListAdd">
                                                    <div class="privArrow"></div>
                                                    <div class="privListCnt">
                                                        <div class="privTbl" id="tblAddPriv"><div class="privCnt">
                                                                <div class="privCell" style="width:50%">
                                                                    <div class="privNameCnt">Ctas. internas</div>
                                                                </div>
                                                                <div class="privCell" style="width:42%">
                                                                    <div class="privDscCnt">Ver</div>
                                                                </div>
                                                                <div class="privCell" style="width:8%">
                                                                    <div class="switchCont">
                                                                        <div class="switch active" privid="26" style="pointer-events: none; cursor: none;">
                                                                            <div class="switchBal balActive"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <p id="p9" style="display: inherit; width: 10%;">
                                                    <i class="fas fa-edit" id="iconEditR9"></i>
                                                    <i class="fas fa-trash-alt" id="iconDeleteR9"></i>
                                                </p>
                                                <p id="pEdit9" style="visibility: hidden; position: absolute; width: 10%; display: inherit;">
                                                    <i class="fas fa-check-circle" id="iconDoneR9" style="color: rgb(66, 135, 206);"></i>
                                                    <i class="far fa-times-circle" id="iconCancelR9" style="color: rgb(66, 135, 206);"></i>
                                                </p>
                                            </div>
                                            <p id="msgErrorliRol9" class="msgError"></p>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="tablePages">
                                        <div class="cellPages">
                                            <div class="rowContainer paginator" id="paginatorRol">
                                                <div class="pageCntBox" align="center" style="margin-left:auto;margin-right:auto">
                                                    <p>
                                                        <i class="fas fa-angle-left editCurrencie"></i>
                                                    </p>
                                                    
                                                    <div class="numbersPaginator" id="numbersPaginatorRol">
                                                        <div class="pages pSelect" data-page="1" style="cursor: pointer;">1</div>
                                                        <div class="pages" data-page="2" style="cursor: pointer;">2</div>
                                                    </div>
                                                    
                                                    
                                                    <p>
                                                        <i class="fas fa-angle-right editCurrencie"></i>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="cellContainerUser cellUserRight">
                                    <div class="tableCurrencies" style="padding-right:5px;margin-right:0">
                                        <div class="headerTableCurrencies" style="margin:0;width:100%">
                                            <div class="tableCell" style="width:38px">
                                                <div class="switchCell">
                                                    <div class="switchCont">
                                                        <div class="switch active" id="swichUserAdd">
                                                            <div class="switchBal balActive"></div>
                                                        </div>
                                                    </div>
                                                </div>  
                                            </div>
                                            <div class="tableCell" style="width:28%">
                                                <input class="inputRow" placeholder="Nombre Completo" id="addUsersName" name="addUsersName">
                                            </div>
                                            <div class="tableCell" style="width:auto">
                                                <input class="inputRow inputEmail" placeholder="Correo Electrónico" id="addUserEmail" name="addUserEmail" >
                                            </div>
                                            <div class="tableCell" style="width:20%">
                                                <select class="inputRow selectOrderBy placehColor inputRol" id="addUserRol" name="addUserRol" >
                                                </select>
                                            </div>
                                            <div class="tableCell" style="width:60px">
                                                <p style="display: inherit; width: 10%; text-align: right;">
                                                    <i class="fas fa-plus-circle iconAdd" id="iconAddUser"></i>
                                                </p>
                                            </div>
                                        </div>
                                        <p id="messageApi"></p>
                                        <div class="bodyTableCurrencies" id="bodyTableUsers">
                                            <div class="rowCurrencieNoDefine rowImpar" style="display: none" id="noUserDefine">
                                                <p id="msgInTableU"> msg Error </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tablePages">
                                        <div class="cellPages">
                                            <div class="rowContainer paginator" id="paginator">
                                                <div class="pageCntBox" align="center">
                                                    <p>
                                                        <i class="fas fa-angle-left editCurrencie"></i>
                                                    </p>
                                                    
                                                    <div class="numbersPaginator" id="numbersPaginatorUser">
                                                        <div class="pages pSelect" data-page="1" style="cursor: pointer;">1</div>
                                                        <div class="pages" data-page="2" style="cursor: pointer;">2</div>
                                                    </div>
                                                    
                                                    
                                                    <p>
                                                        <i class="fas fa-angle-right editCurrencie"></i>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            
                        </div>
                    </div>
                
            </div>
        </div>
    
        
        <div class="tableRowFooter" style="height: 10%;min-height: 50px;display: table;">
            <div class="tableCell">
                <div class="copyright">
                    <p style="margin-top: 20px;margin-bottom: 20px;margin: 0;">© 2020. Totalsoftware de Venezuela - Todos los derechos reservados </p>
                </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"> Aceptar </button>
        <button id="buttonCancelModal" align="center"> Cancelar </button>
    </div>
    
  </div>

</div>