.character-detail-popup-content .basic-info-outer {
    height: 100vw;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.character-detail-popup-content .basic-info-outer::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(to bottom, transparent, var(--popup-bg));*/
    background: var(--popup-bg);
    content: '';
    opacity: 0.6;

}

.character-detail-popup-content .basic-info-outer .basic-info-wrapper .basic-info-tag {
    position: absolute;
    top: var(--popup-padding);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    background: var(--text-color-2);
}

.character-detail-popup-content .basic-info-outer .basic-info-wrapper .basic-info-tag i {
    font-size: 11px;
    margin-right: 3px;
}

.character-detail-popup-content .basic-info-outer .basic-info-wrapper .public-status-tag {
    left: var(--popup-padding);
}

.close-character-detail-btn {
    background: rgba(255, 255 ,255, 0.8);
    --size: 20px;
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
    right:  var(--popup-padding);
    position: absolute;
    border-radius: 50%;
    top: var(--popup-padding);
}

.close-character-detail-btn i {
    font-size: 10px;
    color: #0A0A0A;
}

.character-detail-popup-content .basic-info-outer .basic-info-wrapper .public-status-tag.public {
    background: rgba(123, 221, 123, 0.21);
    color: limegreen;
}

.character-detail-popup-content .basic-info-outer .basic-info-wrapper .public-status-tag.public i {
    color: inherit;
}

.character-detail-popup-content .basic-info-outer .basic-info-wrapper .more-btn {
    background: transparent;
    right: var(--popup-padding);
    padding: 0;
    font-size: 18px;
}

.character-detail-popup-content .basic-info-outer .basic-info-wrapper .report-btn {
    right: var(--popup-padding);
}


.character-detail-popup-content .basic-info-outer .basic-info-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--popup-bg));
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: center;
    padding: var(--popup-padding);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.character-detail-popup-content .basic-info-outer .basic-info-wrapper .character-avatar {
    width: 180px;
    height: 180px;
    background: var(--text-color-2);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    position: relative;
    /*border: 2px solid var(--popup-bg);*/
    margin-bottom: 20px;
}


.character-detail-popup-content .basic-info-outer .basic-info-wrapper .character-avatar .character-voice-bar {
    position: absolute;
    bottom: -5px;
    /*width: 60px;*/
    height: 35px;
    border-radius: 20px;
    background: linear-gradient(to right, var(--theme-color), #b086d5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border: 1px solid var(--bg-color);

    font-weight: bold;

}


.character-detail-popup-content .basic-info-outer .basic-info-wrapper .character-avatar .character-voice-bar .duration {
    /*font-weight: bold;*/
    margin-left: 5px;
    font-size: 12px;
}


.character-detail-popup-content .basic-info-outer .basic-info-wrapper .nickname {
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.character-detail-popup-content .basic-info-outer .basic-info-wrapper .short-desc {
    text-align: center;
    font-size: 12px;
    opacity: 0.6;
    padding: 0 10px;
}


.character-detail-popup-content .basic-info-outer .basic-info-wrapper .creator {
    margin-top: 10px;
    opacity: 0.3;
    font-size: 12px;
}


.character-detail-popup-content .basic-info-outer .basic-info-wrapper .creator span {
    font-size: inherit;
}

.character-detail-popup-content .character-detail-item {
    padding: 0 var(--popup-padding);
    margin-bottom: 30px;
}


.character-detail-popup-content .character-detail-item-wrapper {
    margin-bottom: 8px;
    display: flex;
    /*align-items: center;*/
    justify-content: space-between
}

.character-detail-popup-content .character-detail-item-wrapper .character-detail-item .character-detail-title {
    opacity: 0.4;
    margin-bottom: 4px;
}

.character-detail-popup-content .character-detail-item-wrapper .character-detail-item .character-detail-value {

}


.character-detail-popup-content .character-detail-item-wrapper .character-detail-item .character-tags-wrapper {
    display: flex;
    flex-wrap: wrap;

}


.character-detail-popup-content .character-detail-item-wrapper .character-detail-item .character-tags-wrapper .character-tag {
    flex-shrink: 0;
    margin-right: 5px;
    padding: 3px 5px;
    border-radius: 3px;
    background: var(--text-color-1);
    font-size: 12px;
    margin-bottom: 5px;
}


.character-detail-popup-content .share-character-btn {
    height: 40px;
    background: transparent;
    border: 1px solid var(--text-color-5);
    font-size: 12px;
    width: 150px;
    font-weight: normal;
}

.character-detail-popup-content .share-character-btn i {
    margin-right: 5px;
    font-size: 12px;
}

.character-detail-popup-content .character-detail-bottom-btn-wrapper {
    display: flex;
    align-items: center;
}


.character-detail-popup-content .character-detail-bottom-btn-wrapper .primary-btn {
    flex: 1;
}


.character-detail-popup-content .character-detail-bottom-btn-wrapper .favorite-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    width: 35px;
}

.character-detail-popup-content .character-detail-bottom-btn-wrapper .favorite-btn i {
    font-size: 18px;
}


.character-detail-popup-content .character-detail-bottom-btn-wrapper .favorite-btn span {
    font-size: 10px;
}

.character-detail-popup-content .character-detail-bottom-btn-wrapper .favorite-btn .after-favorite {
    display: none;
}


.character-detail-popup-content .character-detail-bottom-btn-wrapper .favorite-btn.active .before-favorite {
    display: none;
}


.character-detail-popup-content .character-detail-bottom-btn-wrapper .favorite-btn.active .after-favorite {
    display: block;
}


.share-character-popup-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--popup-padding);
    height: 100%;
}


.character-detail-inner-popup-avatar {
    --size: 100px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}


.character-detail-inner-popup-avatar .icon {
    --size: 30px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: var(--popup-bg);*/
    background: rgb(237, 237, 237);
    position: absolute;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--popup-bg);
}

.character-detail-inner-popup-avatar .icon i {
    font-size: 12px;
    color: #0A0A0A;
}


.share-character-popup-content .share-text {
    margin-bottom: 3px;
    text-align: center;
    font-size: 12px;

}

.share-character-popup-content .share-text i {
    font-size: 12px;
    margin: 0 2px;
}

.share-character-popup-content .character-cid {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--text-color-3);
    border-radius: 4px;
    margin-top: 20px;
}


.share-character-popup-content .character-cid i {
    font-size: 10px;
    margin-left: 5px;
    opacity: 0.6;
}

.character-detail-select-character-btn {
    background: transparent;
    border: 1px solid var(--text-color-5);
    color: var(--text-color);
}


.character-detail-select-character-btn.active {
    background: var(--sub-btn-bg);
    color: var(--sub-btn-text-color);
}

.character-detail-select-character-btn * {
    color: inherit;
}

.character-detail-select-character-btn ._active {
    display: none;
}


.character-detail-select-character-btn.active .default {
    display: none;
}


.character-detail-select-character-btn.active ._active {
    display: inline-block;
}