.familymember {
    display: flex;
    justify-content: center;
}
.familymember.hide {
    display: none;
}
.familymember .familyContainer {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    border-radius: 8px;
    width: 240px;
    padding: 20px 30px;
    height: 254px;
    box-shadow: 4px 4px 4px 0 #dff4ff;
    -webkit-transition: background-color 0.4s;
    /* Safari */
    transition: background-color 0.4s;
}

.familymember .familyContainer:hover {
    background-color: #dedede;
}

.familymember .familymember-body {
    margin-top: 20px;
    line-height: 1.3;
    text-transform: none;
}

.familymember .image {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 6px auto 6px;
    background-size: cover;
    background-repeat: no-repeat;
}

.familymember .screen_name {
    display: flex;
    justify-content: center;
    font-family: "Metropolis Bold";
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.27px;
    text-align: center;
    color: #1471db;
    padding-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    word-break: break-word;
    margin: 0 auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.familymember .member_options.hide {
    display: none;
}

.familymember .member_options .optionOne,
.familymember .member_options .optionTwo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

.familymember .member_options.optOne .optionTwo,
.familymember .member_options.optTwo .optionOne {
    display: none;
}

.familymember .member_options .label {
    font-family: "Metropolis Regular";
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.24px;
    color: #333333;
    width: 100%;
}

.familymember .declineButton,
.familymember .acceptButton,
.familymember .editButton,
.familymember .deleteButton {
    width: 20px;
    height: 20px;
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/decline_icon_v1.png);
    background-size: 20px 20px;
    margin: 4px 20px 12px;
    cursor: pointer;
    background-repeat: no-repeat;
}

.familymember .deleteButton {
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
}

.familymember .acceptButton {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/v2/navigation/accept-icon@3x.png);
}

.familymember .acceptButton::after,
.familymember .declineButton::after,
.familymember .editButton::after,
.familymember .deleteButton::after {
    position: relative;
    top: 20px;
    right: 9px;
    content: "Accept";
    font-family: "Metropolis Regular";
    font-size: 12px;
    letter-spacing: 0.18px;
    color: #333333;
}
.familymember .declineButton::after {
    content: "Decline";
}
.familymember .editButton::after {
    content: "Edit";
    right: 2px;
}
.familymember .deleteButton::after {
    content: "Delete";
    right: 7px;
    top: 22px;
}

.familymember .editButton {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/edit_icon_LM_v2.png);
}

.familymember .deleteButton {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/delete_icon_LM_v2.png);
}

/* DARK MODE */
.dark .familymember .familyContainer {
    background-color: #1f2120;
    box-shadow: none;
}
.dark .familymember .screen_name,
.dark .familymember .member_options .label,
.dark .familymember .acceptButton::after,
.dark .familymember .declineButton::after,
.dark .familymember .editButton::after,
.dark .familymember .deleteButton::after {
    color: rgba(255, 255, 255, 0.87);
}

.dark .familymember .editButton {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/edit_icon_DM_v2.png);
}

.dark .familymember .deleteButton {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/delete_icon_DM_v2.png);
}