.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 .activitiesContainer,
.friendsummary .favoritesContainer {
    width: 50%;
}

.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;
}

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

@media (max-width: 1024px) {
    .friendsummary {
        padding-inline: 0;
    }
    .friendsummary .headerContainer {
        flex-wrap: nowrap;
    }
    .friendsummary .activitiesContainer {
        order: 2;
        width: 100%;
    }
    .friendsummary .activitiesContainer .activitieshistory {
        padding-inline: 20px;
    }
    .friendsummary .favoritesContainer {
        order: 1;
        width: 100%;
    }
    .friendsummary .totalsContainer .usertotals {
        padding-inline: 16px;
    }
    .friendsummary .totalsContainer .usertotals .totals-title {
        display: none;
    }
    .friendsummary .totalsContainer .usertotals .metric .icon {
        width: 32px;
        height: 32px;
    }
}

@media only screen and (max-width: 768px) {
    .admin .main-container {
        padding: 15px 16px;
    }
    .friendsummary .headerContainer {
        width: 100%;
        box-shadow: none;
    }
    .friendsummary .totalsContainer {
        width: 95%;
    }
    .friendsummary .totalsContainer .usertotals {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 0;
        width: 100%;
    }
    .friendsummary .totalsContainer .usertotals .totals-title {
        display: initial;
        color: #333;
    }
    .friendsummary .headerTitle {
        margin-bottom: 10px;
    }
    .friendsummary .userInfoContainer {
        flex-direction: column-reverse;
        gap: 24px;
        margin-top: 15px;
    }
    .modal.unfriendPopup.popupmessage .modal-content,
    .modal.unfriendPopup.popupmessage .modal-body {
        height: auto;
        width: 90vw;
    }
    .modal.unfriendPopup .modalContainer .title {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0.2px;
    }
    .modal.unfriendPopup .modalContainer .info {
        font-size: 17px;
        line-height: 21px;
        letter-spacing: 0.17px;
    }
    .friendsummary .headerContainer {
        padding: 0;
        flex-direction: column;
    }
    .friendsummary .totalsContainer .usertotals .metric .value {
        font-size: 24px;
    }
    .friendsummary .totalsContainer .usertotals .metric .count {
        font-size: 24px;
    }
    .usertotals .metrics-container {
        width: 100%;
    }
}

/* 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;
}