.entitycard {
    text-transform: uppercase;
    cursor: pointer;
}

.entitycard .entitycard-card {
    background-color: #f0f0f0;
    border-radius: 32px;
    margin: 10px 0;
    width: 309px;
    padding: 22px 47px 67px 48px;
    height: 370px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    -webkit-transition: background-color 0.4s;
    /* Safari */
    transition: background-color 0.4s;
}

.entitycard .entitycard-card.minimun-padding {
    padding: 20px 21px 17px;
}

.entitycard .entitycard-card.medium-padding {
    padding: 35px 21px 17px;
}

.entitycard .entitycard-card:hover {
    background-color: #dedede;
}

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

.entitycard .entity-icon {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 10px auto 6px;
    background-size: cover;
    background-repeat: no-repeat;
}

.entitycard .entity-icon.selectUser {
    cursor: pointer;
}

.entitycard .entity-icon.add-entity-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/plus_icon_DM_accessibility_m_v1.png);
    background-color: #0d4962;
    width: 80px;
    height: 80px;
    margin-top: 10px;
}

.entitycard .entitycard-card .entitycard-head {
    text-align: center;
}

.entitycard .entitycard-card .entitycard-head.add-entity-header {
    cursor: pointer;
}

.entitycard .entitycard-body .col-6,
.entitycard .entitycard-body .attribute-value {
    font-size: 14px;
    padding: 0;
}

.entitycard .entitycard-head .date-range {
    font-size: 12px;
}

.entitycard .entity-name-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.entitycard .entity-name-container .expert-icon {
    position: absolute;
    left: 35px;
}

.entitycard .entity-name {
    display: flex;
    justify-content: center;
    font-family: "Metropolis Bold";
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.36px;
    text-align: center;
    color: #0d4962;
    height: 30px;
    padding-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80%;
    word-break: break-word;
    margin: 0 auto;
}

.entitycard .entity-friend {
    display: flex;
    justify-content: center;
    font-family: "Metropolis Regular";
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0.24px;
    text-align: center;
    color: #333333;
    text-transform: none;
}

.entitycard .entity-joined {
    text-transform: uppercase;
    font-family: "Metropolis Regular";
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 3.6px;
    color: #333333;
}

.entitycard .expert-icon {
    font-size: 26px;
}

.entitycard .entity-field {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    cursor: pointer;
    height: 32px;
}

.entitycard .entity-field.friendRequest {
    display: flex;
    flex-direction: column;
    cursor: unset;
    margin-top: 35px !important;
}

.entitycard .is-friend-icon {
    background-image: url("https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/v2/navigation/check-circle-green@3x.png");
    width: 24px;
    height: 24px;
    background-size: cover;
    margin-right: 8px;
}

.entitycard .add-friend-icon {
    background-image: url("https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/join_icon_blue_v2.png");
    width: 24px;
    height: 24px;
    background-size: cover;
    margin-right: 8px;
    background-color: #0d4962;
    border-radius: 50%;
}

.entitycard .request-friend-icon {
    background-image: url("https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/request_icon_v2.png");
    width: 24px;
    height: 24px;
    background-size: cover;
    margin-right: 8px;
    border: 1px solid #0d4962;
    border-radius: 50%;
}

.entitycard .entity-delete {
    position: absolute;
    left: 70%;
    top: 7%;
    font-size: 30px;
    display: none;
    cursor: pointer;
}

.entitycard .add-entity {
    height: calc(100% - 20px);
    align-items: center;
    display: flex;
    justify-content: center;
}

.entitycard .attribute {
    margin: 5px 0;
    letter-spacing: 2px;
}

.entitycard .attribute-value,
.entitycard .attribute-status {
    display: inline-block;
}

.entitycard .attribute-status {
    width: 12px;
    height: 12px;
    background-size: 12px 12px;
    margin-left: 5px;
}

.entitycard .attribute-status.failed {
    background-image: url(https://s3.amazonaws.com/bg-public-assets/d/en_US/p/error.png);
}

.entitycard .attribute-status.ok {
    background-image: url(https://s3.amazonaws.com/bg-public-assets/d/en_US/p/ok.png);
}

.entitycard .attribute-status.warning {
    background-image: url(https://s3.amazonaws.com/bg-public-assets/d/en_US/p/warning.png);
}

.tab-header i,
.tab-header .tab-title {
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
}

.md-purple.md-inactive:hover i,
.md-purple.md-inactive:hover .tab-title,
.md-blue.md-inactive:hover i,
.md-blue.md-inactive:hover .tab-title,
.md-green.md-inactive:hover i,
.md-green.md-inactive:hover .tab-title {
    color: rgba(0, 0, 0, 0.54);
}

.md-blue i,
.md-blue .tab-title {
    color: rgba(26, 115, 232, 0.54);
}

.md-green i,
.md-green .tab-title {
    color: rgba(30, 142, 62, 0.54);
}

.md-purple i,
.md-purple .tab-title {
    color: rgba(209, 70, 214, 0.54);
}

.material-icons {
    margin-right: 4px;
}

.md-purple.md-inactive i,
.md-purple.md-inactive .tab-title,
.md-blue.md-inactive i,
.md-blue.md-inactive .tab-title,
.md-green.md-inactive i,
.md-green.md-inactive .tab-title {
    color: rgba(0, 0, 0, 0.26);
}

.add-entity-body .search-container,
.add-entity-body .add-container,
.add-entity-body .invite-container {
    display: none;
}

.add-entity-body.search-active .search-container,
.add-entity-body.add-active .add-container,
.add-entity-body.invite-active .invite-container {
    display: block;
}

.entitycard .buttonText {
    margin: 5px 0 0 0;
    text-align: center;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 0.18px;
    text-transform: none;
    color: #333;
}

.entitycard .requestedText {
    font-family: "Metropolis Regular";
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0.24px;
    text-transform: none;
    color: #333;
}

.entitycard .responseContainer {
    display: flex;
}

.entitycard .responseContainer .rejectSection,
.entitycard .responseContainer .acceptSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55px;
}

.entitycard .responseContainer .acceptSection {
    margin-right: 10px;
}

.entitycard .rejectButton,
.entitycard .acceptButton {
    width: 24px;
    height: 24px;
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/decline_icon_v1.png);
    background-size: 24px 24px;
}

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

.entitycard .entitycard-head .entity-options {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 35px;
}

.entitycard .entitycard-head .entity-options .options-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.entitycard .entitycard-head .entity-options .options-container .activities-icon,
.entitycard .entitycard-head .entity-options .options-container .zenride-icon,
.entitycard .entitycard-head .entity-options .options-container .zentrek-icon {
    width: 24px;
    height: 24px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 6px;
}

.entitycard .entitycard-head .entity-options .options-container .activities-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/activity_icon_portal_v1.svg);
}
.entitycard .entitycard-head .entity-options .options-container .zenride-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/zenride_icon_portal_v1.svg);
}
.entitycard .entitycard-head .entity-options .options-container .zentrek-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/zentrek_icon_portal_v1.svg);
}

.entitycard .entitycard-head .entity-options .options-container .option-label {
    font-family: "Metropolis Regular";
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0.24px;
    text-transform: none;
}

.entitycard .entitycard-head .entity-options .options-container:hover .activities-icon {
    width: 24px;
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/activity_icon_blue_portal_v2.png);
}
.entitycard .entitycard-head .entity-options .options-container:hover .zentrek-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/zentrek_icon_blue_portal_v1.png);
}
.entitycard .entitycard-head .entity-options .options-container:hover .zenride-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/zenride_icon_blue_portal_v1.png);
}
.entitycard .entitycard-head .entity-options .options-container:hover .option-label {
    color: #0eb5fe;
}

.entitycard .entitycard-head .entity-options .options-container.hide {
    display: none;
}

.entitycard .description {
    font-family: "Metropolis Regular";
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0.3px;
    width: 215px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-height: 25px;
    margin-top: 20px;
    color: #0d4962;
}

.entitycard .purposes {
    display: flex;
    align-items: center;
    width: 215px;
    overflow-x: scroll;
    margin-top: 20px;
}
.entitycard .purposes.center {
    justify-content: center;
}

.entitycard .purposes::-webkit-scrollbar {
    display: none;
}

.entitycard .purposes.hide {
    display: none;
}

.entitycard .purposes .purpose {
    font-family: "Metropolis Regular";
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.16px;
    color: #0d4962;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid #0d4962;
    text-transform: lowercase;
    margin-left: 5px;
    min-width: max-content;
}

/* DARK MODE */
.dark .entitycard .entitycard-card {
    background-color: rgba(14, 181, 254, 0.08);
}
.dark .entitycard .entity-name,
.dark .entitycard .entity-name-container .expert-icon,
.dark .entitycard .entity-friend,
.dark .entitycard .entity-delete,
.dark .entitycard .entitycard-head .entity-options .options-container .option-label,
.dark .entitycard .buttonText,
.dark .entitycard .requestedText,
.dark .entitycard .description {
    color: rgba(255, 255, 255, 0.87);
}
.dark .entitycard .entity-icon.add-entity-icon,
.dark .entitycard .add-friend-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/add_s_v1.png);
}
.dark .entitycard .request-friend-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/requested_icon_DM_m_v1.png);
}
.dark .entitycard .entitycard-head .entity-options .options-container .activities-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/activity_icon_DM_v1.png);
}
.dark .entitycard .entitycard-head .entity-options .options-container .zenride-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/zenride_icon_DM_v1.png);
}
.dark .entitycard .entitycard-head .entity-options .options-container .zentrek-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/zentrek_icon_DM_v1.png);
}
.dark .entitycard .entitycard-head .entity-options .options-container:hover .activities-icon {
    width: 24px;
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/activity_icon_blue_portal_v2.png);
}
.dark .entitycard .entitycard-head .entity-options .options-container:hover .zentrek-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/zentrek_icon_blue_portal_v1.png);
}
.dark .entitycard .entitycard-head .entity-options .options-container:hover .zenride-icon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/zenride_icon_blue_portal_v1.png);
}
.dark .entitycard .entitycard-head .entity-options .options-container:hover .option-label {
    color: #0eb5fe;
}
.dark .entitycard .purposes .purpose {
    color: rgba(255, 255, 255, 0.87);
    border: 1px solid rgba(255, 255, 255, 0.87);
}