.ant-select {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    outline: 0
}

.ant-select ul,
.ant-select ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.ant-select>ul>li>a {
    padding: 0;
    background-color: #fff
}

.ant-select-arrow {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 50%;
    right: 11px;
    margin-top: -6px;
    color: rgba(0, 0, 0, .25);
    font-size: 12px;
    line-height: 1;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.ant-select-arrow>* {
    line-height: 1
}

.ant-select-arrow svg {
    display: inline-block
}

.ant-select-arrow::before {
    display: none
}

.ant-select-arrow .ant-select-arrow-icon {
    display: block
}

.ant-select-arrow .ant-select-arrow-icon svg {
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

.ant-select-selection {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-top-width: 1.02px;
    border-radius: 4px;
    outline: none;
    -webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ant-select-selection:hover {
    border-color: #40a9ff;
    border-right-width: 1px !important
}

.ant-select-focused .ant-select-selection,
.ant-select-selection:focus,
.ant-select-selection:active {
    border-color: #40a9ff;
    border-right-width: 1px !important;
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, .2)
}

.ant-select-selection__clear {
    position: absolute;
    top: 50%;
    right: 11px;
    z-index: 1;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    color: rgba(0, 0, 0, .25);
    font-size: 12px;
    font-style: normal;
    line-height: 12px;
    text-align: center;
    text-transform: none;
    background: #fff;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: color .3s ease, opacity .15s ease;
    transition: color .3s ease, opacity .15s ease;
    text-rendering: auto
}

.ant-select-selection__clear::before {
    display: block
}

.ant-select-selection__clear:hover {
    color: rgba(0, 0, 0, .45)
}

.ant-select-selection:hover .ant-select-selection__clear {
    opacity: 1
}

.ant-select-selection-selected-value {
    float: left;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ant-select-no-arrow .ant-select-selection-selected-value {
    padding-right: 0
}

.ant-select-disabled {
    color: rgba(0, 0, 0, .25)
}

.ant-select-disabled .ant-select-selection {
    background: #f5f5f5;
    cursor: not-allowed
}

.ant-select-disabled .ant-select-selection:hover,
.ant-select-disabled .ant-select-selection:focus,
.ant-select-disabled .ant-select-selection:active {
    border-color: #d9d9d9;
    -webkit-box-shadow: none;
    box-shadow: none
}

.ant-select-disabled .ant-select-selection__clear {
    display: none;
    visibility: hidden;
    pointer-events: none
}

.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice {
    padding-right: 10px;
    color: rgba(0, 0, 0, .33);
    background: #f5f5f5
}

.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice__remove {
    display: none
}

.ant-select-selection--single {
    position: relative;
    height: 32px;
    cursor: pointer
}

.ant-select-selection--single .ant-select-selection__rendered {
    margin-right: 24px
}

.ant-select-no-arrow .ant-select-selection__rendered {
    margin-right: 11px
}

.ant-select-selection__rendered {
    position: relative;
    display: block;
    margin-right: 11px;
    margin-left: 11px;
    line-height: 30px
}

.ant-select-selection__rendered::after {
    display: inline-block;
    width: 0;
    visibility: hidden;
    content: ".";
    pointer-events: none
}

.ant-select-lg {
    font-size: 16px
}

.ant-select-lg .ant-select-selection--single {
    height: 40px
}

.ant-select-lg .ant-select-selection__rendered {
    line-height: 38px
}

.ant-select-lg .ant-select-selection--multiple {
    min-height: 40px
}

.ant-select-lg .ant-select-selection--multiple .ant-select-selection__rendered li {
    height: 32px;
    line-height: 32px
}

.ant-select-lg .ant-select-selection--multiple .ant-select-selection__clear,
.ant-select-lg .ant-select-selection--multiple .ant-select-arrow {
    top: 20px
}

.ant-select-sm .ant-select-selection--single {
    height: 24px
}

.ant-select-sm .ant-select-selection__rendered {
    margin-left: 7px;
    line-height: 22px
}

.ant-select-sm .ant-select-selection--multiple {
    min-height: 24px
}

.ant-select-sm .ant-select-selection--multiple .ant-select-selection__rendered li {
    height: 16px;
    line-height: 14px
}

.ant-select-sm .ant-select-selection--multiple .ant-select-selection__clear,
.ant-select-sm .ant-select-selection--multiple .ant-select-arrow {
    top: 12px
}

.ant-select-sm .ant-select-selection__clear,
.ant-select-sm .ant-select-arrow {
    right: 8px
}

.ant-select-disabled .ant-select-selection__choice__remove {
    color: rgba(0, 0, 0, .25);
    cursor: default
}

.ant-select-disabled .ant-select-selection__choice__remove:hover {
    color: rgba(0, 0, 0, .25)
}

.ant-select-search__field__wrap {
    position: relative;
    display: inline-block
}

.ant-select-selection__placeholder,
.ant-select-search__field__placeholder {
    position: absolute;
    top: 50%;
    right: 9px;
    left: 0;
    max-width: 100%;
    height: 20px;
    margin-top: -10px;
    overflow: hidden;
    color: #bfbfbf;
    line-height: 20px;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis
}

.ant-select-search__field__placeholder {
    left: 12px
}

.ant-select-search__field__mirror {
    position: absolute;
    top: 0;
    left: 0;
    white-space: pre;
    opacity: 0;
    pointer-events: none
}

.ant-select-search--inline {
    position: absolute;
    width: 100%;
    height: 100%
}

.ant-select-search--inline .ant-select-search__field__wrap {
    width: 100%;
    height: 100%
}

.ant-select-search--inline .ant-select-search__field {
    width: 100%;
    height: 100%;
    font-size: 100%;
    line-height: 1;
    background: transparent;
    border-width: 0;
    border-radius: 4px;
    outline: 0
}

.ant-select-search--inline>i {
    float: right
}

.ant-select-selection--multiple {
    min-height: 32px;
    padding-bottom: 3px;
    cursor: text;
    zoom: 1
}

.ant-select-selection--multiple::before,
.ant-select-selection--multiple::after {
    display: table;
    content: ""
}

.ant-select-selection--multiple::after {
    clear: both
}

.ant-select-selection--multiple .ant-select-search--inline {
    position: static;
    float: left;
    width: auto;
    max-width: 100%;
    padding: 0
}

.ant-select-selection--multiple .ant-select-search--inline .ant-select-search__field {
    width: .75em;
    max-width: 100%
}

.ant-select-selection--multiple .ant-select-selection__rendered {
    height: auto;
    margin-bottom: -3px;
    margin-left: 5px
}

.ant-select-selection--multiple .ant-select-selection__placeholder {
    margin-left: 6px
}

.ant-select-selection--multiple>ul>li,
.ant-select-selection--multiple .ant-select-selection__rendered>ul>li {
    height: 24px;
    margin-top: 3px;
    line-height: 22px
}

.ant-select-selection--multiple .ant-select-selection__choice {
    position: relative;
    float: left;
    max-width: 99%;
    margin-right: 4px;
    padding: 0 20px 0 10px;
    overflow: hidden;
    color: rgba(0, 0, 0, .65);
    background-color: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    cursor: default;
    -webkit-transition: padding .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: padding .3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.ant-select-selection--multiple .ant-select-selection__choice__disabled {
    padding: 0 10px
}

.ant-select-selection--multiple .ant-select-selection__choice__content {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-transition: margin .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: margin .3s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.ant-select-selection--multiple .ant-select-selection__choice__remove {
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    right: 4px;
    color: rgba(0, 0, 0, .45);
    font-weight: bold;
    line-height: inherit;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    display: inline-block;
    font-size: 12px;
    font-size: 10px \9;
    -webkit-transform: scale(0.83333333) rotate(0deg);
    -ms-transform: scale(0.83333333) rotate(0deg);
    transform: scale(0.83333333) rotate(0deg)
}

.ant-select-selection--multiple .ant-select-selection__choice__remove>* {
    line-height: 1
}

.ant-select-selection--multiple .ant-select-selection__choice__remove svg {
    display: inline-block
}

.ant-select-selection--multiple .ant-select-selection__choice__remove::before {
    display: none
}

.ant-select-selection--multiple .ant-select-selection__choice__remove .ant-select-selection--multiple .ant-select-selection__choice__remove-icon {
    display: block
}

:root .ant-select-selection--multiple .ant-select-selection__choice__remove {
    font-size: 12px
}

.ant-select-selection--multiple .ant-select-selection__choice__remove:hover {
    color: rgba(0, 0, 0, .75)
}

.ant-select-selection--multiple .ant-select-selection__clear,
.ant-select-selection--multiple .ant-select-arrow {
    top: 16px
}

.ant-select-allow-clear .ant-select-selection--single .ant-select-selection-selected-value {
    padding-right: 16px
}

.ant-select-allow-clear .ant-select-selection--multiple .ant-select-selection__rendered,
.ant-select-show-arrow .ant-select-selection--multiple .ant-select-selection__rendered {
    margin-right: 20px
}

.ant-select-open .ant-select-arrow-icon svg {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.ant-select-open .ant-select-selection {
    border-color: #40a9ff;
    border-right-width: 1px !important;
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, .2)
}

.ant-select-combobox .ant-select-arrow {
    display: none
}

.ant-select-combobox .ant-select-search--inline {
    float: none;
    width: 100%;
    height: 100%
}

.ant-select-combobox .ant-select-search__field__wrap {
    width: 100%;
    height: 100%
}

.ant-select-combobox .ant-select-search__field {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1), height 0s;
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1), height 0s
}

.ant-select-combobox.ant-select-allow-clear .ant-select-selection:hover .ant-select-selection__rendered,
.ant-select-combobox.ant-select-show-arrow .ant-select-selection:hover .ant-select-selection__rendered {
    margin-right: 20px
}

.ant-select-dropdown {
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .65);
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 1050;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    font-variant: initial;
    background-color: #fff;
    border-radius: 4px;
    outline: none;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}

.ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-bottomLeft,
.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-bottomLeft {
    -webkit-animation-name: antSlideUpIn;
    animation-name: antSlideUpIn
}

.ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-topLeft,
.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-topLeft {
    -webkit-animation-name: antSlideDownIn;
    animation-name: antSlideDownIn
}

.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-bottomLeft {
    -webkit-animation-name: antSlideUpOut;
    animation-name: antSlideUpOut
}

.ant-select-dropdown.slide-up-leave.slide-up-leave-active.ant-select-dropdown-placement-topLeft {
    -webkit-animation-name: antSlideDownOut;
    animation-name: antSlideDownOut
}

.ant-select-dropdown-hidden {
    display: none
}

.ant-select-dropdown-menu {
    max-height: 250px;
    margin-bottom: 0;
    padding-left: 0;
    overflow: auto;
    list-style: none;
    outline: none
}

.ant-select-dropdown-menu-item-group-list {
    margin: 0;
    padding: 0
}

.ant-select-dropdown-menu-item-group-list>.ant-select-dropdown-menu-item {
    padding-left: 20px
}

.ant-select-dropdown-menu-item-group-title {
    height: 32px;
    padding: 0 12px;
    color: rgba(0, 0, 0, .45);
    font-size: 12px;
    line-height: 32px
}

.ant-select-dropdown-menu-item-group-list .ant-select-dropdown-menu-item:first-child:not(:last-child),
.ant-select-dropdown-menu-item-group:not(:last-child) .ant-select-dropdown-menu-item-group-list .ant-select-dropdown-menu-item:last-child {
    border-radius: 0
}

.ant-select-dropdown-menu-item {
    position: relative;
    display: block;
    padding: 5px 12px;
    overflow: hidden;
    color: rgba(0, 0, 0, .65);
    font-weight: normal;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-transition: background .3s ease;
    transition: background .3s ease
}

.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: #e6f7ff
}

.ant-select-dropdown-menu-item:first-child {
    border-radius: 4px 4px 0 0
}

.ant-select-dropdown-menu-item:last-child {
    border-radius: 0 0 4px 4px
}

.ant-select-dropdown-menu-item-selected {
    color: rgba(0, 0, 0, .65);
    font-weight: 600;
    background-color: #fafafa
}

.ant-select-dropdown-menu-item-disabled {
    color: rgba(0, 0, 0, .25);
    cursor: not-allowed
}

.ant-select-dropdown-menu-item-disabled:hover {
    color: rgba(0, 0, 0, .25);
    cursor: not-allowed
}

.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: #e6f7ff
}

.ant-select-dropdown-menu-item-divider {
    height: 1px;
    margin: 1px 0;
    overflow: hidden;
    line-height: 0;
    background-color: #e8e8e8
}

.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item {
    padding-right: 32px
}

.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item .ant-select-selected-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    color: transparent;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 0 .1px 0, .1px 0 0, 0 -0.1px 0, -0.1px 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .2s;
    transition: all .2s
}

.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover .ant-select-selected-icon {
    color: rgba(0, 0, 0, .87)
}

.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-disabled .ant-select-selected-icon {
    display: none
}

.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected .ant-select-selected-icon,
.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:hover .ant-select-selected-icon {
    display: inline-block;
    color: #1890ff
}

.ant-select-dropdown--empty.ant-select-dropdown--multiple .ant-select-dropdown-menu-item {
    padding-right: 12px
}

.ant-select-dropdown-container-open .ant-select-dropdown,
.ant-select-dropdown-open .ant-select-dropdown {
    display: block
}

.xgpc-msg-center__mask {
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
    margin: 0;
    padding: 0
}

.xgpc-msg-center__confirmPopup {
    position: absolute;
    width: 400px;
    height: 180px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: var(--corner-border-radius-primary);
    background-color: var(--background-color-primary);
    padding-top: 40px
}

.xgpc-msg-center__confirmPopup_title {
    text-align: center;
    color: var(--content-color-primary);
    font-size: 16px;
    line-height: 24px;
    height: 64px;
    padding: 0 20px;
    font-weight: 500
}

.xgpc-msg-center__confirmPopup_btnWrapper {
    text-align: center
}

.xgpc-msg-center__confirmPopup_btnWrapper button {
    width: 100px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background-color: #f2f2f2;
    border-radius: var(--corner-border-radius-secondary);
    color: var(--content-color-primary);
    font-size: 14px;
    border: none;
    font-weight: 500
}

.xgpc-msg-center__confirmPopup_btnWrapper button.confirm {
    background-color: var(--brand-color);
    color: var(--content-color-inverse)
}

.xgpc-msg-center__confirmPopup_btnWrapper button+button {
    margin-left: 16px
}

@font-face {
    font-family: "xgpc-msg-center";
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_web_message_center/assets/ad95d37b4c7429a6984c.eot);
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_web_message_center/assets/ad95d37b4c7429a6984c.eot?#iefix) format("eot"), url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_web_message_center/assets/aa0ce6262bde14f7c18a.woff2) format("woff2"), url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_web_message_center/assets/5dc8cedf299f0a929cb0.woff) format("woff"), url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_web_message_center/assets/36bd9224b09621c2061a.ttf) format("truetype"), url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_web_message_center/assets/6ad038f6c4bdbcfb8d22.svg#xgpc-msg-center) format("svg")
}

.xgpc-msg-center [class^=icon-]::before,
.xgpc-msg-center [class*=icon-]::before {
    font-family: "xgpc-msg-center";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none
}

.xgpc-msg-center .icon-add::before {
    content: ""
}

.xgpc-msg-center .icon-close::before {
    content: ""
}

.xgpc-msg-center .icon-play::before {
    content: ""
}

.xgpc-msg-center .icon-right_arrow::before {
    content: ""
}

.xgpc-msg-center .icon-right_arrow_creator::before {
    content: ""
}

.xgpc-msg-center__main .xgpc-msg-center__mask {
    -webkit-animation: maskEnter 300ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: maskEnter 300ms cubic-bezier(0.4, 0, 0.2, 1)
}

.xgpc-msg-center__main .xgpc-msg-center__wrapper {
    -webkit-animation: wrapperEnter 300ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: wrapperEnter 300ms cubic-bezier(0.4, 0, 0.2, 1)
}

.xgpc-msg-center__main.hidden .xgpc-msg-center__mask {
    -webkit-animation: maskOut 250ms cubic-bezier(0.4, 0, 1, 1);
    animation: maskOut 250ms cubic-bezier(0.4, 0, 1, 1)
}

.xgpc-msg-center__main.hidden .xgpc-msg-center__wrapper {
    -webkit-animation: wrapperOut 250ms cubic-bezier(0.4, 0, 1, 1);
    animation: wrapperOut 250ms cubic-bezier(0.4, 0, 1, 1)
}

.xgpc-msg-center__wrapper {
    display: flex;
    background-color: #fff;
    width: 784px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-animation: wrapperEnter 300ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: wrapperEnter 300ms cubic-bezier(0.4, 0, 0.2, 1)
}

@media(min-width: 1440px) {
    .xgpc-msg-center__wrapper {
        width: 900px
    }
}

.xgpc-msg-center__sideBar {
    overflow: auto
}

.xgpc-msg-center__content {
    flex: 1
}

.xgpc-msg-center__close {
    position: absolute;
    top: 17px;
    right: 24px;
    cursor: pointer
}

.xgpc-msg-center .flex-1 {
    flex: 1
}

@-webkit-keyframes maskEnter {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes maskEnter {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes wrapperEnter {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes wrapperEnter {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes maskOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes maskOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes wrapperOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@keyframes wrapperOut {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

body {
    --content-color-primary: #0c0d0f;
    --content-color-secondary: #606266;
    --content-color-tertiary: #747e8c;
    --content-color-quaternary: #ecedf0;
    --content-color-inverse: #fff;
    --brand-color: #fe3355;
    --assist-color: #236ddb;
    --background-color-primary: #fff;
    --background-color-secondary: #f6f6f6;
    --corner-border-radius-primary: 4px;
    --corner-border-radius-secondary: 2px;
    --line-color: #f0f2f7
}

body .creator {
    --content-color-primary: #0c0d0f;
    --content-color-secondary: #44474d;
    --content-color-tertiary: #73767a;
    --content-color-quaternary: #ebebeb;
    --content-color-inverse: #fff;
    --brand-color: #fe3355;
    --assist-color: #236ddb;
    --background-color-primary: #fff;
    --background-color-secondary: #f8f8f8;
    --corner-border-radius-primary: 4px;
    --corner-border-radius-secondary: 2px;
    --line-color: #f0f2f7
}

@font-face {
    font-family: "ByteNumber-Light";
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_web_message_center/assets/2d6c598a6f00b07b4a51.ttf) format("truetype");
    font-style: normal;
    font-weight: normal
}

@font-face {
    font-family: "ByteNumber-Medium";
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_web_message_center/assets/47b9dea42bf518319d57.ttf) format("truetype");
    font-style: normal;
    font-weight: normal
}

@font-face {
    font-family: "ByteNumber-Bold";
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_web_message_center/assets/64af42fbe872e4da55a6.ttf) format("truetype");
    font-style: normal;
    font-weight: normal
}

.xg-audio-comment {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(254, 51, 85, 0.12) 0%, rgba(183, 65, 255, 0.12) 100%);
    border: 1px solid rgba(0, 0, 0, .04);
    border-radius: 4px;
    height: 48px;
    box-sizing: border-box;
    min-width: 132px;
    max-width: 320px;
    padding: 8px 16px 8px 12px
}

.xg-audio-comment-play-pause {
    cursor: pointer;
    width: 32px;
    height: 32px;
    background: #fff;
    box-shadow: 0px 3px 6px rgba(13, 11, 25, .04), 0px 4px 26px rgba(195, 175, 228, .04);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.xg-audio-comment-progress {
    position: relative;
    height: 2px;
    background: rgba(0, 0, 0, .04);
    border-radius: 6px;
    margin: 8px 8px
}

.xg-audio-comment-progress-container {
    flex: 1;
    cursor: pointer
}

.xg-audio-comment-progress-point {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    top: calc(50% - 12px/2);
    background: #fff;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, .06)
}

.xg-audio-comment-progress-played {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 2px;
    background: linear-gradient(270deg, #9D9BF6 -0.98%, #FF71BC 36.7%, #FC7470 63.25%, #FFA86D 100%);
    border-radius: 2px
}

.xg-audio-comment-duration {
    font-size: 13px;
    color: rgba(0, 0, 0, .5);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}