/*---------------------------------------------------------------------- user Box */
.userBox {
    width:100%;
    height:36px;
    display: grid;
	grid-template-columns:  1fr  750px        1fr;
    grid-template-areas: "  .    userFondo  .";
}
.userFondo {
    grid-area: userFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  750px;
    grid-template-areas: "  userFila";
}
.userFondoGris {
    grid-area: userFondo;
    display: grid;
    width:100%;
    height:100%;
    grid-template-columns:  750px;
    grid-template-areas: "  userFila";
    background:#E7E7E7;
}
.userFila {
    grid-area: userFila;
    width:100%;
    height:100%;
    display: grid;
	grid-template-columns:  190px     320px      210px       30px;
    grid-template-areas: "  userName  userEmail  userPerfil  userEdit";
    place-items: center start;
}
.userName, .userNameI { 
    grid-area: userName;
    display: grid;
    font-size: 17px;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    overflow: hidden;
    padding-left:8px;
}
.userNameI {  color:#999;  }
.userEmail, .userEmailI { 
    grid-area: userEmail;
    display: grid;
    font-size: 17px;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    overflow: hidden;
}
.userEmailI { color:#999;  }
.userPerfil, .userPerfilI { 
    grid-area: userPerfil;
    display: grid;
    font-size: 17px;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    overflow: hidden;
}
.userPerfilI { color:#999;  }
.userEdit { 
    grid-area: userEdit;
    display: grid;
}
.userEdit:hover {
    cursor: pointer;
}
#userEliminar {
    display: none;
}
@media (max-width: 400px) {
    .userBox {
        grid-template-columns:  100%;
        grid-template-areas: "  userFondo";
    }
    .userFondo {
        grid-template-columns:  100%;
    }
    .userFondoGris {
        grid-template-columns:  100%;
        background:#F4F4F4;
    }
    .userFila {
        grid-template-columns:  180px     1fr         30px;
        grid-template-areas: "  userName  userPerfil  userEdit";
    }
    .userName {     font-size: 16px;    }
    .userEmail {    display: none;      }
    .userPerfil {   font-size: 16px;    }
}
.mensaje {
    font-size:13px;
    padding: 5px 0px 6px 6px;
}