.pix_local_player {
    max-width: 400px;
    width: 100%;
    margin-top: 10px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.video_play_btn {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 98;
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.video_play_btn i {
    font-size: 28px;
    color: #ffffff;
    background: #252553c2;
    padding: 3px 8px;
    border-radius: 5px;
}

.add-gallery-link {
    display: flex;
    align-items: center;
}

.add-gallery-link a {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 8px;
    color: #2d25ff;
}

span.mo-tips .add-gallery-link a i {
    margin: 0;
    color: #2d25ff;
}

.add-gallery-link span {
    font-size: 12px;
}

textarea#moment_gallery_link {
    resize: none;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 5px;
    background: #f5f5ff;
    border-color: #e1deff;
    outline: none;
    height: 60px;
    overflow-y: clip;
}

textarea#moment_gallery_link:focus {
    border-color: #2d25ff;
}

.gallery-link-box {
    margin: 0 -7px;
    margin-top: 15px;
    display: none;
}

button.fileuploader-action.fileuploader-urlitem-remove {
    background: #fe7676;
    box-shadow: -1px 1px 6px rgba(254, 118, 118, .8);
    border-radius: 50%;
}

.fileuploader-items .fileuploader-item .fileuploader-action.fileuploader-urlitem-remove i {
    font-size: 14px;
    text-shadow: none;
}

.gallery-link-box .btn-group {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.gallery-link-box .btn-group a {
    padding: 5px 15px;
    background: #e6eaff;
    color: #4144d3;
    border-radius: 5px;
    border: 1px solid #c8c2ff;
}

.gallery-link-box .btn-group a.cancel {
    margin-left: 5px;
    color: #696bb1;
    padding: 5px 8px;
    display: flex;
    align-items: center;
}

.moment-file-down-box {
    padding: 8px;
    background: linear-gradient(45deg, #eeecff, #fafaff);
    border-radius: 7px;
    border: 1px solid #e7e5fb;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 6px 10px 1px #ccc3f430;
    margin-bottom: 10px;
}

.moment-file-down-box .left {
    display: flex;
}

.moment-file-down-box .left span {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #1b42ff, #7891ff);
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
}

.moment-file-down-box .left .info {
    margin-left: 8px;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.moment-file-down-box .left .info .size {
    font-size: 13px;
    color: #7378ab;
}

.moment-file-down-box .right {
    display: flex;
}

.moment-file-down-box .right .mo-file-down-link {
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0 10px;
    align-items: center;
    color: #717aa2;
    background: transparent;
    border-radius: 5px;
    transition: all .2s;
    font-size: 14px;
}

.moment-file-down-box .right .mo-file-down-link:hover {
    color: #3559ff;
    background: #e4e9fc;
    transition: all .2s;
}

.post-content.mos-content p {
    color: #18191c;
    font-size: 15px;
    line-height: 25px;
    margin: 0;
}

.post-content.mos-content {
    margin-top: 10px;
    display: block;
    width: 100%;
}

a.mo-inner-link {
    color: #3b42bd;
    display: inline-block;
}

a.mo-inner-link i{
    vertical-align: bottom;
}

.mos-content img.wp-smiley {
    width: 18px;
    vertical-align: text-top;
}

.mo-huati-s {
    display: flex;
    position: relative;
    align-items: center;
}

.mo-huati-s input {
    width: 100%;
    font-size: 14px;
    padding: 7px;
    border-radius: 7px;
    background: #f1efff;
    border-color: #ebebff;
    outline: none;
    padding-left: 28px;
}

.motags-content {
    margin-top: 10px;
    height: 250px;
    overflow-y: scroll;
}

.mo-huati-s i {
    position: absolute;
    left: 8px;
}

.mo-huati-item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 5px 8px;
    cursor: pointer;
}

.mo-huati-item:hover {
    background-color: #f0f2ff;
}

.mo-huati-item .left  {
    display: flex;
    margin-right: 5px;
    top: 1px;
    position: relative;
}

.mo-huati-item .left i {
    padding: 2px;
    font-size: 12px;
    background: #3b4fff;
    color: #fff;
    border-radius: 3px;
    line-height: 1;
}

.mo-huati-item .right .title {
    font-size: 14px;
    color: #2b2a2a;
}

.mo-huati-item .right .count-mo {
    font-size: 12px;
    color: #9498c3;
}

a.mo-tag-btn.active {
    border-color: #4e5aff;
}

a.remove-motag {
    display: flex;
    margin-left: 3px;
}

a.mo-tag-btn .remove-motag i {
    margin: 0;
    background: #9badea;
    color: #fff;
    font-size: 13px;
    padding: 1px;
    transform: scale(0.9);
}

a.moment-less , a.moment-more {
    font-size: 15px;
    color: #554bda;
}

a.read-more__link {
    color: #2d2bcb;
    font-size: 15px;
}

.momoent_title {
    margin-bottom: 3px;
}

.momoent_title a {
    color: #2a3099;
    font-size: 16px;
}

a.mo-huati-link {
    font-size: 12px;
    display: flex;
    color: #555ec9;
    margin-bottom: 3px;
    background: #eef;
    padding: 2px 10px;
    border-radius: 20px;
    line-height: 20px;
    align-items: center;
    justify-items: start;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    margin-top: 15px;
}

a.mo-huati-link i {
    line-height: 1;
    font-size: 12px;
    margin-right: 2px;
}

a.mo-huati-link:hover {
    color: #3b48e2;
    background: #e0e0fd;
}

.moment-footer {
    padding: 7px 15px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(45deg, #f6f5ff, #fef8ff);
    border-radius: 5px;
    border: 1px solid #fdf3ff;
}

.moment-footer .left {
    display: flex;
    font-size: 14px;
    align-items: center;
}

.moment-footer .right {
    display: flex
;
    align-items: stretch;
}

span.sticky_m_icon {
    background: linear-gradient(90deg, #ff2c2c, #ff794a);
    color: #fff;
    padding: 3px 9px 3px 8px;
    border-radius: 20px;
    font-size: 12px;
    margin-right: 5px;
    display: flex
;
    border-top-left-radius: 0px;
}

span.hot_m_icon {
    background: linear-gradient(90deg, #353535, #383838);
    color: #ffd2a1;
    padding: 3px 10px 3px 8px;
    border-radius: 5px;
    font-size: 12px;
    margin-right: 5px;
    display: flex
;
    align-items: center;
}

span.hot_m_icon i {
    margin-right: 2px;
}

.moment-footer .left a {
    color: #898bc9;
    display: flex;
}

a.moment-like-btn span {
    font-size: 13px;
    margin-left: 3px;
} 

.moment-footer .item .like-btn[action="liked"] {
    color: #ff3c2e;
}

.moment-footer .item .like-btn[action="liked"] i {
    animation: icon-expand-animation 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.moment-footer .item .like-btn span {
    font-size: 13px;
    margin-left: 2px;
}

.moment-footer .loading {
    transform: scale(0.7);
}

.moment-footer .item {
    display: flex;
    margin-right: 20px;
}

a.moment-comment-btn {
    color: #ffffff;
    display: flex;
    align-items: center;
    background: linear-gradient(45deg, #5a5783, #5c5f89);
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 13px;
}


span.comment-count {
    font-size: 12px;
    margin-left: 3px;
}


/* 片刻评论 */

#comment_form_tmp {
    display: none;
}

.moment_comments_wrap {
    margin-top: 15px;
    background: linear-gradient(45deg, #f6f5ff, #fef8ff);
    border-radius: 7px;
    padding: 20px;
}

.moment-comments .comments-title {
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #6266a7;
}

.moment-comments .comments-title i {
    margin-right: 3px;
}

span.noticom {
    margin-left: 5px;
}

span.noticom a {
    color: #6266a7;
}

.toi_comments_main {
    margin-top: 18px;
}

.comarea textarea#comment.mo-com-textarea {
    height: 40px;
    line-height: 22px;
    font-size: 14px;
}

.moment-comments a.edit-profile {
    width: 40px;
}

.moment-comments img.v-avatar.avatar.avatar-50 {
    min-width: 40px;
    height: 40px;
    border-radius: 5px;
}

.topic_comments_foobar {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.moment-comments input#push_comment , .moment-comments a#cancel-comment-reply-link {
    padding: 10px 15px;
}

.moment-comments .comment-list .profile img {
    border-radius: 5px;
}

.moment-comments .comment-list .com_right .body p {
    font-size: 14px;
}

.moment-comments .comarea textarea#comment {
    background: #efedff;
}

.moment-comments .comment-list li ul {
    margin-left: 30px;
}

.moment-comments .comment-list li {
    border-bottom: 1px solid #e3e4f9;
}

.respond_box {
    z-index: 98;
    position: relative;
}

.ppo-rich-text {
    margin-bottom: 10px;
}

.mo-top-banner {
    width: 100%;
    height: 200px;
    position: relative;
}

.mo-top-banner .banner-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.mo-banner-info {
    bottom: 20px;
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    justify-content: center;
}

.mo-banner-info .top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.mo-banner-info .left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.mo-banner-info .left {
    display: flex;
}

.mo-banner-info .left .icon-img {
    width: 52px;
    height: 52px;
}

.mo-banner-info .left .info {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.mo-banner-info .term-name {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.mo-banner-info .term-info {
    color: #dddbff;
    font-size: 14px;
}

.mo-banner-info .term-info span {
    margin-right: 8px;
}

.mo-banner-info .term-info span a {
    color: #b6abff;
}

.mo-banner-info .right span {
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    color: #e3e5ff;
    padding: 5px 15px;
    font-size: 14px;
    background: #0300238a;
    border-radius: 5px;
    backdrop-filter: blur(8px);
}

.mo-banner-info .right span b {
    font-weight: 400;
    display: flex;
}

.mo-banner-info .right span small {
    text-align: right;
}

.mo-banner-info .right {
    display: flex;
}

.mo-banner-des {
    font-size: 14px;
    margin-top: 10px;
    color: #dddbff;
}

.bt-cover {
    position: absolute;
    background: linear-gradient(360deg, #151025, transparent);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.moment-cat-filter {
    padding: 15px 40px;
    border-top: 1px solid #f2f2ff;
    border-bottom: 1px solid #f2f2ff;
    background: linear-gradient(90deg, #f8f8ff, #fdfbff);
}

.moment-cat-filter .filter-inner {
    display: flex;
}

.moment-cat-filter .filter-item {
    color: #3f3e8d;
    font-size: 14px;
    padding: 6px 15px;
    display: flex;
    border-radius: 7px;
}

.moment-cat-filter .filter-item.active {
    background: #696eff;
    color: #fff;
}

.no-moment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20%;
}

.no-moment img {
    width: 200px;
}

.wid_title {
    font-size: 16px;
    color: #3a3466;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wid_title:empty {
    display: none;
}

.wid_title::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #92b2f4;
    border-radius: 2px;
    flex-shrink: 0;
    transition: ease-in-out .2s;
}

.wid-box:hover .wid_title::before {
    transform: rotate(45deg);
    background: #324aff;
    transition: ease-in-out .2s;
}

.wid-item {
    display: flex;
    margin-top: 10px;
}

.mo-sug-list-box.wid-item {
    display: flex;
    flex-direction: column;
}

.mo_sug_item a  {
    display: flex;
    transition: all .2s;
    padding: 5px 0;
}

.mo_sug_item a:hover {
    padding: 5px;
    background: #ededff;
    border-radius: 7px;
}

.mo_sug_item .left {
    width: 42px;
    height: 42px;
    margin-right: 8px;
}

.mo_sug_item .left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.mo_sug_item .right {
    display: flex;
    flex-direction: column;
}

.mo_sug_item .right .title {
    font-size: 15px;
    color: #3a3466;
}

.mo_sug_item .right .count-mo {
    font-size: 12px;
    color: #8c89ae;
}

.mo_sug_item {
    margin-bottom: 15px;
}

a.all-moments-cat {
    font-size: 14px;
    color: #343c92;
    background: linear-gradient(45deg, #ede9ff, #eff0ff);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #e6e2ff;
    text-align: center;
}

.allmo-content {
    background: #f6f7ff;
}

.allmo-content .left-nav {
    padding: 25px;
    display: flex;
    flex-direction: column;
    background: #f6f7ff;
}

.allmo-content .left-nav li {
    margin-bottom: 10px;
}

.allmo-content .left-nav li span {
    display: flex;
    width: 100%;
    font-size: 15px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all .2s;
}

.allmo-content .left-nav li span:hover {
    background: #e8e9ff;
    border-radius: 5px;
    color: #1b42ff;
}

.mos-title {
    font-size: 16px;
    font-weight: 600;
    color: #524c8a;
    margin-bottom: 15px;
}

.allmo-content .inner-list {
    display: flex;
    column-gap: 15px;
}

.allmo-tags-item {
    display: flex;
    flex: 1;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #f9f1fe, #f2f0fe);
    padding: 10px;
    border: 1px solid #e5e1ff;
    max-width: calc((100% / 3) - 15px);
    flex-wrap: wrap;
    position: relative;
    transition: all .2s;
}

.allmo-tags-item .left {
    width: 48px;
    height: 48px;
}

.allmo-tags-item .right {
    margin-left: 8px;
}

.allmo-content .right-content {
    padding: 40px;
    background: #fbfaff;
}

.allmo-content .content-inner {
    margin-bottom: 25px;
}

.allmo-content .bottom {
    width: 100%;
    display: flex;
    font-size: 13px;
    color: #6a6da6;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e6e8ff;
    align-items: center;
    justify-content: space-between;
}

.allmo-content .circle-owner {
    font-size: 14px;
    color: #5f5e97;
    display: flex;
    align-items: center;
}

.allmo-content a.link-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.allmo-content .user-avatar {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border-radius: 50%;
}

.allmo-content .bottom small {
    background: #eff1ff;
    padding: 2px 5px;
    border: 1px solid #c9c4f6;
    border-radius: 3px;
}

.allmo-tags-item:hover {
    border-color: #9285ff;
}

.mo-user-box {
    margin-bottom: 15px;
}

.mo-user-box .left-info {
    display: flex;
    align-items: center;
}

.mo-user-box .left {
    width: 42px;
    height: 42px;
    margin-right: 10px;
}

.mo-user-box .left img {
    border-radius: 7px;
}

.mo-user-box .u-num {
    font-size: 12px;
    color: #868abd;
}

.mo-user-box .mo-user-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.mo-user-box .right-btn {
    display: flex;
    column-gap: 8px;
}

.mo-user-box .right-btn a {
    display: flex;
    font-size: 13px;
    background: #faf8ff;
    padding: 7px 12px;
    border-radius: 5px;
    border: 1px solid #efeeff;
    color: #968fc6;
    position: relative;
}

.mo-user-box .right-btn a i {
    margin-right: 3px;
}

.mo-user-box .right-btn a:hover {
    border-color: #5d78ff;
    color: #5d78ff;
}

.mo-user-join-drop , .mo-user-create-drop {
    width: 100%;
    background: #fff;
    box-shadow: 0px 7px 20px 1px #bcb4e042;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #eeebff;
}

.user-unjoined {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
    background: linear-gradient(45deg, #fff7f3, #fff3f3);
    padding: 30px 20px;
    border-radius: 7px;
    border: 1px solid #fff0e8;
}

.user-unjoined .title {
    margin-bottom: 10px;
    color: #834736;
    display: flex;
}

.user-unjoined .title i {
    margin-right: 3px;
}

.user-unjoined .tips {
    font-size: 13px;
    padding: 3px 15px;
    background: #ffecdb;
    border-radius: 5px;
    color: #956a5e;
    border: 1px solid #f9dfd7;
}

a.free-join , a.pay-join , a.verify-join {
    font-size: 14px;
    background: linear-gradient(90deg, #ff3821, #ff8c67);
    padding: 7px 15px;
    color: #fff;
    border-radius: 5px;
    margin-top: 15px;
}

a.wait-join {
    font-size: 14px;
    background: linear-gradient(90deg, #7766ac, #a588b2);
    padding: 7px 15px;
    color: #fff;
    border-radius: 5px;
    margin-top: 15px;
    cursor: wait;
}

.mo-price-list {
    display: flex;
    column-gap: 10px;
    margin: 15px 0;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.mo-price-list a.price-item {
    font-size: 13px;
    background: #ffebd8;
    padding: 4px 10px;
    color: #763629;
    border-radius: 20px;
    border: 1px solid #fadece;
}

.mo-price-list a.price-item.active {
    border-color: #ff6c25;
    color: #ff3314;
}

.mo-price-list a.price-item:hover {
    border-color: #ff6c25;
}

.mo-price-list a.price-item span {
    font-weight: 600;
}

.mo-price-list img.ppo-pay-icon {
    height: 14px;
    margin-right: 2px;
}

.mo-limits-list .lv-allow {
    display: flex;
    column-gap: 10px;
    margin: 15px 0;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.mo-limits-list .lv-allow li {
    font-size: 12px;
    background: #383550;
    padding: 4px 12px;
    color: #fdc17d;
    border-radius: 20px;
    border: 1px solid #4c4c4c;
}

a.no-limits-join {
    font-size: 14px;
    background: #9a7b69;
    padding: 7px 15px;
    color: #fff;
    border-radius: 5px;
    margin-top: 15px;
    cursor: no-drop;
}

.mo-topbar-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 5px;
    flex-wrap: wrap;
}

.mo-topbar-list .empty {
    text-align: center;
    width: 100%;
    font-size: 15px;
    color: #8b84b8;
}

.mo-user-box .right-btn a.mo-topbar-item {
    color: #464a93;
    padding: 7px 8px;
    background: #edeeff;
    font-size: 13px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: calc(33.33% - 4px);
    justify-content: flex-start;
    margin-bottom: 5px;
    border: 1px solid #dfddff;
}

.mo-user-box .right-btn a.mo-topbar-item:hover {
    border-color: #1b42ff;
}

.mo-user-box .right-btn a.mo-topbar-item .left {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    display: flex;
}

.mo-user-box .right-btn a.mo-topbar-item img {
    border-radius: 50%;
}

.mo-user-join-drop .pix-page-loader , .mo-user-create-drop .pix-page-loader {
    padding: 15px 0;
}

.join-tips {
    margin: 15px 0;
    background: linear-gradient(45deg, #fff4f3, #ffecec);
    padding: 10px;
    display: flex;
    justify-content: center;
    font-size: 14px;
    color: #912f20;
    border-radius: 5px;
    align-items: center;
    order: 1px solid #ffe8e8;
}

.join-tips i {
    margin-right: 5px;
}

.left-tool a.mo-btn.disabled {
    color: #7b76be73;
    cursor: default;
}

.left-tool a.mo-btn.disabled:hover {
    color: #7b76be73;
}

.cr-moment {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cr-moment span {
    padding-bottom: 15px;
}

.cr-moment a {
    font-size: 14px;
    padding: 7px 15px;
    background: #2220ff;
    color: #ffffff;
    border-radius: 7px;
}

.img_list a:nth-last-child(1):first-child {
    width: 50%;
}

.card-wrap {
    margin-top: 15px;
}

.card-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 300px;
    width: 100%;
    padding: 5px;
    background: #f5f6ff;
    border-radius: 7px;
    border: 1px solid #ebeafe;
    margin-bottom: 8px;
    position: relative;
    cursor: move;
}

.card-box .card-img {
    width: 38px;
    height: 38px;
    margin-right: 8px;
}

.card-box .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-width: 38px;
    border-radius: 5px;
}

.card-box .card-info {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

.card-box .card-info .title {
    font-size: 14px;
    color: #242424;
}

.card-box .card-info .des {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #8587af;
}

span.de_card {
    right: 0px;
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4d3fff;
    color: #fff;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: pointer;
}

span.de_card i {
    font-size: 12px;
}

.card_list .card-box .de_card {
    display: none;
}

.card_list .card-box {
    cursor: pointer;
}

.card_list .card-box .card-url {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.card_list .card-box {
    transition: all .2s;
    background: linear-gradient(90deg, #edf0ff, #f8ecff);
}

.card_list .card-box:hover {
    border-color: #d8defd;
    transition: all .2s;
    box-shadow: 0px 5px 20px 1px #b3aad947;
}

.edit-drop-box {
    display: none;
    border-radius: 7px;
    box-shadow: 0 5px 12px rgb(121 112 179 / 15%);
    border: 1px solid #edebff;
    min-width: 120px;
    padding: 15px;
}

.edit-drop-box a {
    padding: 2px 0;
}

.edit-drop-box a i {
    margin-right: 3px;
}

.edit-drop-box a:hover {
    color: #1b42ff;
}

.moment-edit-content {
    width: 50%;
    margin: 0 auto;
    margin-top: 40px;
}

.moment-edit-inner  {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 7px 20px 1px #d7ceff30;
    position: relative;
}

.moment-edit-content .edit-page-title {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 25px;
}

.moment-edit-content .edit-page-bottom {
    text-align: center;
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

.moment-edit-content .edit-page-bottom a {
    padding: 10px 25px;
    font-size: 14px;
    background: #a5b4ff;
    color: #3d3eaf;
    border-radius: 40px;
    border: 1px solid #ab99ff;
    display: flex;
}

.moment-edit-content .edit-page-bottom a i {
    margin-right: 3px;
}

.moment-edit-warp {
    background: #f6f7ff;
    display: grid;
}

.moment-edit-inner .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffffffbf;
    top: 0;
    left: 0;
    border-radius: 8px;
    z-index: 2;
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #40ad46;
}

.moment-edit-inner .overlay span {
    font-size: 16px;
    margin-left: 5px;
    color: #5a5e8d;
}

.jconfirm-title-c.moment-delete-title .jconfirm-title {
    font-size: 18px !important;
    font-weight: 600;
}

button.btn.delete-moment-sure {
    background: #4650ff;
    color: #fff;
}

.mo-video-type {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin: 8px 0;
    justify-content: center;
}
.mo-video-type span {
    padding: 3px 15px;
    background: #ecebff;
    color: #6778bf;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 5px;
}

.mo-video-type span.active {
    background: #1d1bff;
    color: #fff;
}

input.bili_mo , input.netease_mo {
    width: 100%;
    border-radius: 5px;
    font-size: 14px;
    padding: 6px 8px;
    outline: none;
    border-color: #d6dbff;
    background: #f5f5ff;
}

a.mo-fancy-video {
    display: flex;
    justify-content: center;
    align-items: center;
}

i.ri-play-mini-line.pix-mvideo-btn {
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #bdb6d99e;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #ffffff;
    border: 3px solid #ffffff;
}

.audio-preview-box {
    display: flex;
    align-items: center;
}

a.remove-audio {
    display: flex;
    width: 22px;
    height: 22px;
    background: #ff5b5b;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    color: #fff;
}

input.netease_mo {
    width: 50%;
}

.mo-netease {
    display: flex;
    align-items: stretch;
}

a.preview-music {
    display: flex;
    background: #3152ff;
    align-items: center;
    font-size: 14px;
    color: #fff;
    margin-left: 10px;
    padding: 0 10px;
    border-radius: 7px;
}

.mo-index-audio-wrap {
    display: inline-block;
    overflow: hidden;
    height: 66px;
    border-radius: 7px;
    border: 1px solid #eceaff;
    box-shadow: 0px 7px 12px 0px #d7ceff42;
}

.mo-index-audio-wrap iframe {
    width: 100%;
}

.mo-audio-wrap {
    margin-top: 15px;
}

.cr-moment-modal {
    padding: 0;
    border-radius: 7px;
    overflow: hidden;
    width: 650px;
}

.cr-moment-modal .uk-modal-title {
    color: #95552c;
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    padding: 20px;
    margin: 0;
    background: linear-gradient(17deg, #fff6e6, #ffe9ea);
}

.cr-moment-modal .uk-modal-close {
    border-radius: 5px;
    background: #f6f4ff;
}

.cr-footer.uk-modal-footer.uk-text-right {
    padding: 30px 20px;
}

.cr-moment-modal .cr-moment-btn {
    border-radius: 5px;
    background: #471eff;
    margin-left: 10px;
}

.cr-moment-box.uk-overflow-auto {
    padding: 40px;
}

.mos-banner {
    width: 100%;
    height: 150px;
    background: #f5f3ff;
    border-radius: 5px;
    position: relative;
    margin-bottom: 15px;
}

a.upload-mos-banner {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: #9997cf;
}

a.upload-mos-banner:hover  {
    backdrop-filter: hue-rotate(125deg);
}

a.upload-mos-logo:hover {
    background: #f6e7d8;
    color: #dc7a1e;
}

a.upload-mos-logo {
    position: absolute;
    bottom: -15px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 25px;
    background: #d0d1ff;
    border-radius: 7px;
    font-size: 20px;
    color: #7c7dab;
    border: 2px solid #ffffff;
}

.cr-title {
    margin: 10px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e9ecff;
    padding-bottom: 10px;
    font-size: 18px;
}

.cr-title span {
    margin-right: 5px;
    width: 12px;
    height: 12px;
    display: block;
    background: #ffc79b;
    border-radius: 20px;
    border: 3px solid #586eff;
}

.mos-banner.mos-block {
    margin-bottom: 50px;
}

.mos-block {
    margin: 20px 0 40px;
}

.cr-momenmt-wrap input:not(.mos-limits-input){
    width: 50%;
    border-radius: 5px;
    font-size: 14px;
    padding: 8px;
    outline: none;
    border-color: #d6dbff;
    background: #f5f5ff;
}

.cr-momenmt-wrap textarea {
    width: 100%;
    border-radius: 5px;
    font-size: 14px;
    padding: 8px;
    outline: none;
    border-color: #d6dbff;
    background: #f5f5ff;
    height: 100px;
    resize: none;
}

.cr-momenmt-wrap label {
    margin: 20px 0;
    display: block;
}

.cr-momenmt-wrap  .tips {
    margin: 5px 0;
    font-size: 13px;
    color: #bda792;
}

.mos-type-info{
    border-radius: 7px;
    background: #f5f3ff;
    padding: 5px;
}

.mos-cat , .mos-join , .mos-type-info{
    display: flex;
    column-gap: 8px;
    flex-wrap: wrap;
    flex-direction: row;
}

.mos-cat-btn , .mos-type-btn , .mos-btn {
    outline: none;
    border-color: #dcdeff;
    background: #f5f5ff;
    font-size: 14px;
    display: flex;
    padding: 10px 18px;
    border-radius: 7px;
    margin-bottom: 8px;
    cursor: pointer;
    color: #9ca0c9;
}

.mos-cat-btn.active , .mos-type-btn.active , .mos-btn.active {
    background: #471eff;
    color: #fff;
}

button:active, .button:active {
    transform: translateY(1px);
}

.join-limits {
    margin: 15px 0;
    font-size: 14px;
    color: #807ea0;
}

.mos-type-info[action="pay"] {
    column-gap: normal;
}

.mos-type-info[action="free"] {
    padding: 15px;
}

.mos-type-info[action="pay"] label {
    width: 50%;
    padding: 0 10px;
    margin: 10px 0;
}

.mos-type-info[action="pay"] label p {
    margin-bottom: 5px;
    font-size: 14px;
}

.mos-type-info[action="pay"] input {
    width: 100%;
    background: #fdfdff;
}

.mos-type-info[action="pay"] .tips {
    display: block;
    padding-left: 10px;
    width: 100%;
}

.mos-type-info[action="limits"] {
    padding: 15px 15px;
}

.mos-type-info[action="limits"] label {
    font-size: 14px;
    cursor: pointer;
    margin-top: 3px;
    margin-bottom: 8px;
}

input.uk-checkbox.mos-limits-input {
    border-radius: 5px;
    margin-right: 3px;
}

.mos-show {
    display: flex;
    column-gap: 8px;
}

.mos-type-info[action="limits"] .tips {
    display: block;
    width: 100%;
}

.cr-momenmt-wrap input.up-mos-banner , .cr-momenmt-wrap input.up-mos-logo {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    z-index: 2;
}

.cr-momenmt-wrap .upload-mos-logo {
    z-index: 3;
}

.upload-mos-banner i , .upload-mos-logo i {
    z-index: 2;
}

img.mos-banner-pre , img.mos-logo-pre {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    border-radius: 5px;
}

.mos-s-content {
    top: 50px;
    position: absolute;
    width: 100%;
    z-index: 2;
    background: #fff;
    height: 300px;
    overflow-y: auto;
}

.mos-s-tag-content {
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 2;
    background: #fff;
    height: 200px;
    overflow-y: auto;
}

.mo-huati-s .mos-s-tag-content i {
    position: relative;
    left: 0;
}

.trans-scroll-bar::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.trans-scroll-bar::-webkit-scrollbar {
    background: transparent;
}

.trans-scroll-bar::-webkit-scrollbar-thumb {
    background: #5b32ff00;
}

.trans-scroll-bar:hover::-webkit-scrollbar-thumb {
    background: #3555ff;
}

.mos-home-hot-cat {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 40px;
    padding-bottom: 0;
}

.mos-home-hot-cat .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mos-home-hot-cat .top a {
    font-size: 14px;
    color: #626bc0;
    display: flex;
}

.mos-home-hot-cat .top span {
    display: flex;
    color: #4c4e7c;
}

.top-mos-cat {
    display: flex;
    flex: 1 1 30%;
    background: #fff;
    padding: 7px;
    border-radius: 30px;
    border: 1px solid #edecff;
    position: relative;
    overflow: hidden;
}

.top-mos-cat .left {
    width: 38px;
    height: 38px;
    z-index: 1;
}

.top-mos-cat .left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.top-mos-cat .right {
    display: flex;
    font-size: 14px;
    color: #ffffff;
    margin-left: 8px;
    z-index: 1;
    flex-direction: column;
}

.top-mos-cat .bg-banner {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.top-mos-cat .bg-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(3);
    filter: brightness(0.6) blur(4px);
    opacity: 0.7;
    transition: all .2s;
}

.top-mos-cat:hover .bg-banner img {
    opacity: 1;
    transition: all .2s;
}

.top-mos-cat .info {
    font-size: 12px;
    color: #c1c1cb;
}

.mos-notice-bar {
    padding: 0 40px;
    padding-top: 40px;
}

.mos-notice-bar .inner {
    border: 1px solid #ffffff;
    font-size: 15px;
    background: linear-gradient(90deg, #81ff60, #d8ff8e);
    padding: 10px 20px;
    border-radius: 15px;
    color: #0d6a01;
    display: flex;
    position: relative;
}

.mos-notice-bar .inner img {
    width: 42px;
    filter: brightness(1.2);
    transition: all .2s;
}

.mos-notice-bar .inner .left {
    position: absolute;
    top: 0px;
    left: 15px;
}

.mos-notice-bar .inner .right {
    padding-left: 50px;
    display: flex;
    width: 100%;
}

.mos-notice-bar:hover img {
    transform: scale(1.1);
    transition: all .2s;
}

.mos-notice-bar .content {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#top-mos-cat-slide .bg-banner {
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

div#top-mos-cat-slide {
    height: 150px;
}

#top-mos-cat-slide .bg-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

#top-mos-cat-slide .bottom {
    position: absolute;
    bottom: 0;
    width: auto;
    padding: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    background: #e1e2ff96;
    left: 0;
    right: 0;
    backdrop-filter: blur(5px);
    border-radius: 15px;
}

#top-mos-cat-slide .left {
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

#top-mos-cat-slide .left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

#top-mos-cat-slide .right {
    font-size: 13px;
    color: #1a1a1a;
}

#top-mos-cat-slide .right .info {
    font-size: 12px;
    color: #444175;
}

#top-mos-cat-slide .swiper-button-next {
    right: 0px;
    opacity: 0;
    top: 30%;
    background: #ffffffb5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: all .2s;
}

#top-mos-cat-slide .swiper-button-prev {
    left: 0px;
    opacity: 0;
    top: 30%;
    background: #ffffffb5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: all .2s;
}

#top-mos-cat-slide .swiper-button-next:after, #top-mos-cat-slide .swiper-button-prev:after {
    color: #2e2e2e;
}

.mos-swiper-box .swiper-pagination {
    bottom: -25px;
}

.mos-swiper-box .swiper-pagination .swiper-pagination-bullet-active {
    background: #3b4bff;
}

.mos-swiper-box {
    width: 100%;
    position: relative;
}

#top-mos-cat-slide:hover .swiper-button-next {
    right: 90px;
    opacity: 1;
    transition: all .2s;
}
#top-mos-cat-slide:hover .swiper-button-prev {
    opacity: 1;
    left: 90px;
    transition: all .2s;
}

#top-mos-cat-slide:hover .sw-button-disabled {
    opacity: .3;
    transition: all .2s;
}

.moment-push-form {
    background: linear-gradient(1deg, #ffffff 50%, #f0f1ff);
}

.manage-page-title {
    margin: 20px;
    background: #f6f7ff;
    border-radius: 7px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
}

.manage-page-title .cat-nav {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.manage-page-title .cat-nav a {
    font-size: 13px;
    color: #313131;
    padding: 5px 15px;
    border-radius: 20px;
}

.manage-page-title .cat-nav a.active {
    color: #ffffff;
    background: #3736f2;
}

.manage-page-title .cat-thum {
    width: 42px;
    height: 42px;
    margin-right: 10px;
}

.manage-page-title .cat-thum img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.manage-page-title .cat-info {
    display: flex;
}

.manage-page-title .cat-name {
    display: flex;
        flex-direction: column;
}

.manage-page-title .cat-name small {
    color: #888888;
}

.mo-wait-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #ececff;
}

.mo-wait-item:last-child {
    border: none;
}

.mo-wait-item .left {
    display: flex;
    align-items: center;
}

.mo-wait-item .left .avatar {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.mo-wait-item .left .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

.mo-wait-item .left .name {
    color: #7b7fa4;
    font-size: 13px;
}

.mo-wait-item .left .name a {
    color: #31417e;
    font-size: 15px;
}

.mo-wait-item .info {
    display: flex;
    flex-direction: column;
}

.moment-manage-inner {
    padding: 40px;
    padding-top: 0;
}

.mo-wait-item .time {
    font-size: 12px;
    color: #a0a2d1;
}

.mo-wait-item .right {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.pending-footer .btn-group {
    display: flex;
    column-gap: 8px;
}

.mo-wait-item .right a , .pending-footer a , a.mo-del-user {
    font-size: 13px;
    padding: 5px 15px;
    background: #efefff;
    color: #473dff;
    border-radius: 20px;
    display: flex;
    border: 1px solid;
}

.mo-wait-item .right a.mo-refuse-join , .pending-footer a.mo-pending-remove , a.mo-del-user {
    background: #ffefef;
    color: #ff6262;
}

.moment-manage-inner .nodata {
    display: flex;
    align-items: center;
    justify-content: center;

}

.moment-manage-inner .nodata img {
    width: 220px;
}

.mo-user-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ffeae4;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fffaf9;
}

.mo-user-item:hover {
    background: #fff5f2;
    transition: all .2s;
}

.mo-user-item .left {
    display: flex;
}

.mo-user-item .left .info a {
    color: #31417e;
    font-size: 15px;
}

.mo-user-item .avatar {
    display: flex;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.mo-user-item .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

span.comfirm-text {
    font-size: 15px;
    color: #6c6589;
    margin-bottom: 10px;
    display: block;
}

small.comfirm-tips {
    color: #bf9682;
    margin-top: 5px;
    display: block;
}

input.mo-remove-info.uk-input {
    font-size: 15px;
    padding: 10px;
}

.gl-paginate {
    margin: 40px 0;
}

.gl-paginate .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

.gl-paginate .page-numbers li a, .gl-paginate span.page-numbers.current {
    padding: 4px 12px;
    display: flex;
    background: #f4f7ff;
    border: 1px solid #e0e0ff;
    border-radius: 7px;
    height: 32px;
    min-width: 32px;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    color: #33386b;
}

.gl-paginate span.page-numbers.current {
    background: #364dff;
    color: #fff;
}

.edit-page-title.nodata {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
}

.edit-page-title.nodata img {
    width: 200px;
}

.review-page-btn {
    position: relative;
}

span.mo-pending-notice {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ff2d2d;
    border-radius: 50%;
    top: -6px;
    right: 5px;
    border: 2px solid #fff;
}

.mo-manage span.mo-pending-notice {
    right: -5px;
}

.user-moment-item .moment_item {
    padding: 20px;
    border: 1px solid #ebebfc;
    border-radius: 8px;
    background: linear-gradient(322deg, #f8f8ff, #faf9ffbf);
}

.user-moment-item .moment-single-inner {
    flex-direction: column;
}

.user-moment-item .top-header {
    display: flex;
}

.user-moment-item .top-meta {
    flex: 1;
}