.contact-overview-bar,
.contact-card{

    display:grid;

    grid-template-columns:
        2fr
        1.5fr
        1.2fr
        2fr
        1.2fr
        120px;

    gap:20px;

    align-items:center;

}


.contact-overview-bar{

    margin-top:30px;

    padding:18px 24px;

    background:#fff;

    border:1px solid #eef2f7;

    border-radius:14px 14px 0 0;

    color:#667085;

    font-size:14px;

    font-weight:600;

}


.contact-card{

    padding:18px 24px;

    background:#fff;

    border-left:1px solid #eef2f7;
    border-right:1px solid #eef2f7;
    border-bottom:1px solid #eef2f7;

    transition:.2s;

}


.contact-card:hover{

    background:#fafcff;

}


.contact-main{

    display:flex;

    align-items:center;

    gap:14px;

}


.contact-avatar{

    width:42px;
    height:42px;

    display:flex;

    justify-content:center;
    align-items:center;

    flex-shrink:0;

    border-radius:50%;

    background:#D3E2FF;

    color:#366bd4;

    font-weight:700;

    font-size:17px;

}


.contact-main h3{

    margin:0 0 3px;

    font-size:15px;

    color:#101828;

}


.contact-main p{

    margin:0;

    font-size:13px;

    color:#667085;

}


.contact-category{

    display:inline-flex;

    padding:6px 10px;

    border-radius:8px;

    background:#f5f7fb;

    color:#475467;

    font-size:12px;

    font-weight:600;

}


.contact-actions{

    display:flex;

    justify-content:flex-end;

    gap:8px;

}


.no-contacts{

    padding:40px;

    text-align:center;

    color:#667085;

    background:#fff;

    border:1px solid #eef2f7;

    border-top:none;

}