client/src/components/Contact/Contact.css

.contact{
    height:70px;
    width:100%;
    padding:0.8em;
    display:flex;
    align-items: center;
    column-gap: 1em;
    border-bottom:2px solid rgba(179, 179, 179, 0.41) ;
    overflow: hidden;
    cursor: pointer;
}


.contact.active{
    background-color: rgba(179, 179, 179, 0.41);    
    border-color:transparent;

}

.contact:last-child{
    border:none;
}

.contact>div{
    width:70%;
    /* background-color: black; */
    height:100%;
}

.contact__img{
    height:100%;
    aspect-ratio: 1;
    background-color: aliceblue;
    border-radius: 50%;

}

.contact__name{
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact__lastmsg{
    /* display: none; */
    overflow: hidden;
    text-overflow: ellipsis;
    color:rgb(234, 234, 234);
    font-size:0.9em;
    white-space: nowrap;
}
.contact__lastmsg.new{
    /* color:rgb(0, 255, 132); */
    font-weight: 700;
    font-size:1.1em;
}