#divFriends {
    width: 100%;
    height: 300px;
    overflow:auto;
}

.friend-info button {
    box-shadow: none;
}

.friend-container svg {
    margin-right: 5px;
    width: 48px;
    height: 48px;
}

/* simple friend-card styling */
.friend-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.friend-info {
    display: flex;
    align-items: center;
    width:100%;
}

.friend-info img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    margin-right: 12px;
}

.friend-info svg {
    width: 48px;
    height: 48px;
    object-fit: cover;
    margin-right: 12px;
}

.friend-info .display-name {
    font-size: 1rem;
    font-weight: 500;
}

/* hide the default caret so it’s just three dots */
.friend-menu-btn::after {
    display: none;
}

.friend-menu-btn {
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 8px;
}

/* loading spinner */
#friend-loading-spinner {
    text-align: center;
    padding: 16px;
    display: none;
}

li button {
    width:100%;
    height:102%;
}