style.css

p {
    margin: 0;
    padding: 0;
}

body {
    background-color: #142027;
}
.row>* {
    margin: 0;
    padding: 0;
}

.contatos {
    border-right: 1px solid #8696a059;;
}

.contatos header {
    background-color: #202c33;
    color: #fff;
    height: 59px;    
}

.contatos span {
    padding: 8px;
    cursor: pointer;
}

.pesquisa {
    border-bottom: 1px solid #8696a059;
}

.icon-pesquisa {
    background-color: #202c33;
    border-radius: 8px;
    
}

.icon-pesquisa input {
    background-color: transparent;
    border: 0px;
    width: 100%;
    color:#fff;
}

.contatos .header-grupo {
    background-color: transparent;
    color: #fff;
    height: 70px;    
}

.contatos .img-grupo {
    width: 49px;
    margin: 0px 15px;
    border-radius: 50%;
}

.contatos .info-grupo p {
    padding-bottom:12px;
    margin-right: 10px;
    border-bottom: 1px solid #8696a02d;
}



.chat main{
    background-image: url(assets/background.webp);
    opacity: 0.4;
    height: calc(100vh - 121px);
}

.img-grupo {
    width: 40px;
    margin: 0px 15px;
    border-radius: 50%;
}

.header-grupo {
    background-color: #202c33;
    color: #fff;
    height: 59px;    
}

.header-grupo span {
    margin: 0px 8px;    
}

.header-grupo small {
    font-size: 12px;
    color:#8696A0;
}

.info-grupo p {
    font-size: 13px;
    color:#8696A0;
}

footer {
    height: 62px;
    background-color: #202c33;
}

footer input{   
    color:#fff;
    background-color: #2a3942;
    padding: 9px 12px 11px;
    margin: 5px 10px;
    border: 1px solid #2a3942;
    border-radius: 8px;
    width: 100%;
}

footer input::placeholder{
    color:#8696A0;
}

footer span {
    margin:0px 10px;
}