.avatar{
    margin:2rem;
}
.avatar > img{
    border-radius:50%;
}

.avatar-lg > img{
    width:6rem;   
}

.avatar-md > img{
    width:4rem;
}

.avatar-sm > img{
    width:3rem;
}

.avatar-status{
    border-radius: 50%;
    padding:8px;
    position: absolute;
    bottom:4px;
    right:8px;
}

.status-online {
    background-color: #32b643;
}

.status-offline {
    background-color: #bcc3ce;
}

.status-dnd {
    background-color: #ff0000;
}

.avatar-md > .avatar-status {
    padding:6px;
}

.avatar-sm > .avatar-status{
    padding:4px;
}