/* grid de articulos */
input#keywordUsers{
    width: 100%;
}

.agbc_usuarios_container{
    font-family: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
    display: block;
    max-width: 1200px;
    margin: auto;
}
.agbc_usuarios_container .agbc_usuarios_card a{
    text-decoration: none;
}
.agbc_usuarios_container .agbc_usuarios_card{
    background-color: #fff;
    box-sizing: border-box;
    margin: 5px 1%;
    position: relative;
}
.agbc_usuarios_container .agbc_usuarios_card:hover{
    background:#dedede;
}

.agbc_usuarios_container .agbc_usuarios_card img{
    height: 96px;
    margin-bottom: 10px;
    width: 96px;
    margin: 8px 16px;
}
.agbc_usuarios_container .agbc_usuarios_card .agbc_articulos__caption{
    padding: 1% 0;
}
.agbc_usuarios_container .agbc_usuarios_card a.agbc_articulos_link_category{
    font-weight: bold;
    color: #5ba8c4;
    font-size: 16px;
    padding: 8px 16px;
}
.agbc_usuarios_container .agbc_usuarios_card h4.agbc_articulos__titulo,
.agbc_usuarios_container .agbc_usuarios_card p.agbc_organizaciones_info,
.agbc_usuarios_container .agbc_usuarios_card p.agbc_users_redes{   
    padding: 8px 16px;
    margin:0px;    
}
p.agbc_organizaciones_info span.empresa{
    font-weight: bold;
}

.agbc_users_redes{
    margin: 0px;
    height: auto;
    min-height: 15px;
    font-size: 1.5em;
    font-weight: bold;
}

.agbc_users_redes button{
    background-color: transparent;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

.agbc_users_redes a,
.agbc_users_redes button
{
    color:#2aaac5;
}
.agbc_users_redes a:hover,
.agbc_users_redes button:hover{
    color:#3a90a2;
}
.agbc_users_redes a.inactive,
.agbc_users_redes button.inactive{
    color: #c5c5c5;
    cursor: default;
}
.agbc_users_redes a.inactive:hover,
.agbc_users_redes button.inactive:hover
{
    color: #c5c5c5;
    cursor: default;
}

span.agbcusers_serach_leyend{
    color: gray;
    padding-bottom: 3px;
    border-bottom: 1px solid gray;
    margin-bottom: 5px;
}
span.agbcusers_serach_leyend strong,
span.agbcusers_serach_leyend em{
    font-weight: bold;
    color: #2aaac5;
    font-size: 1.1em;
}
span.agbcusers_serach_leyend a{
    text-decoration: none;
}


/* FORGOT PASSWORD */
form.agbc-users label{
    color: #7a7a7a;
    font-family: "Roboto", Sans-serif;
    font-size: 24px;
    font-weight: 400;
    
}
form.agbc-users button{
    background-color: #6EC1E4;
    line-height: 1;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
}

form.agbc-users label,
form.agbc-users input, 
form.agbc-users button
{
    width: 100%;
    margin-bottom: 10px;
}

form.agbc-users p.error,
p.login-info.success
{
    background: rgb(254, 216, 216);
    border:#f00 1px solid;
    color:#f00;    
    margin-bottom: 10px;    
    padding: 1%;
    text-align: center;
    width: 98%;
}
p.login-info.success{
    background: rgb(196, 255, 214);
    border:rgb(6, 163, 56) 1px solid;
    color:rgb(6, 163, 56);
}

@media only screen and (min-width: 600px){
    .agbc_usuarios_container{
        display: grid; /*Establecemos el contenedor a grid*/
        grid-template-columns: repeat(2, 1fr);
    }
    .agbc_usuarios_container .agbc_usuarios_card{
        border-bottom: 1px solid #99C9DA;
    }    
}

@media only screen and (min-width: 768px) {
    .agbc_usuarios_container{
        grid-template-columns: repeat(3, 1fr); /*repeat en 4 ya que queremos cuatro columnas y todas del mismo ancho 1fr*/
    }
    .agbc_usuarios_container .agbc_usuarios_card{
        max-width: 390px;
    }
}