.friendsummary {
    display: flex;
    flex-wrap: wrap;
    padding-inline: 7%;
}

.friendsummary .headerContainer {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 38px 30px;
    border-radius: 8px;
    box-shadow: 4px 4px 4px 0px rgba(225, 237, 255, 0.8);
}

.friendsummary .unfriendIcon {
    position: absolute;
    background-image: url("https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/v2/activity/Unfriend_blue_lm.png");
    background-size: contain;
    width: 36px;
    height: 36px;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.friendsummary .totalsContainer {
    display: flex;
    align-items: center;
}

.friendsummary .userInfoContainer {
    display: flex;
    align-items: center;
    gap: 13px;
}

.friendsummary .verticalLine {
    width: 4px;
    height: 80%;
    margin-block: auto;
    background-color: #dff4ff;
}

.friendsummary .userInfoContainer .userImage {
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.friendsummary .userInfoContainer .userInfo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.friendsummary .userInfoContainer .userInfo .userName {
    color: #4b4a4a;
    font-family: "Metropolis Bold";
    font-size: 24px;
    line-height: 24px; /* 100% */
    letter-spacing: 0.36px;
}

.modal.unfriendPopup.popupmessage .modal-content,
.modal.unfriendPopup.popupmessage .modal-body {
    height: auto;
}

.modal.unfriendPopup .modalContainer .title {
    color: #1471db;
    text-align: center;
    font-family: "Metropolis Semi Bold";
    font-size: 24px;
    line-height: 32px; /* 133.333% */
    letter-spacing: 0.24px;
}

.modal.unfriendPopup .modalContainer .info {
    color: #4b4a4a;
    text-align: center;
    font-family: "Metropolis Regular";
    font-size: 20px;
    line-height: 21px; /* 105% */
    letter-spacing: 0.2px;
}

/* DARK MODE */
.dark .friendsummary .headerTitle,
.dark .friendsummary .userInfoContainer .userInfo .userName,
.dark .modal.unfriendPopup .modalContainer .info {
    color: #ffffff;
}

.dark .friendsummary .headerContainer {
    background-color: #1f2120;
    box-shadow: none;
}

.dark .friendsummary .verticalLine {
    background-color: #2a2c2b;
}

.dark .friendsummary .unfriendIcon {
    background-image: url("https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/v2/activity/Unfriend_blue_dm.png");
}

.dark .modal.unfriendPopup .modalContainer .title {
    color: #1683ff;
}

@media only screen and (max-width: 768px) {
    .friendsummary .headerTitle {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 900px) {
    .admin .main-container {
        padding: 15px 70px;
    }

    .row {
        row-gap: 50px;
    }

    .friendsummary .verticalLine {
        display: none;
    }
}