.dark-mode {
    --qcs-color-666: #666;
    --qcs-color-555: #555;
    --qcs-color-444: #444;
    --qcs-color-333: #333;
    --qcs-color-222: #222;
    --qcs-color-eee: #eee;
    --qcs-color-ddd: #ddd;
    --qcs-color-ccc: #ccc;
    --qcs-color-bbb: #bbb;
    --qcs-color-aaa: #aaa;
    --qcs-filter-50: 50%;
    --qcs-filter-70: 70%;
}
input, textarea {
    -webkit-appearance: none
}
textarea {
    resize: vertical
}
textarea[autoheight] {
    resize: none;
    line-height: 1.4;
    overflow: hidden
}
input[type=checkbox], input[type=radio] {
    border: 1px solid #999;
    border-radius: 3px;
    background: #fff;
    clear: none;
    cursor: pointer;
    display: inline-block;
    line-height: 0;
    height: 16px;
    outline: 0;
    padding: 0 !important;
    text-align: center;
    width: 16px;
    min-width: 16px;
    -webkit-appearance: none;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1);
    transition: border-color .3s, background .3s, opacity .2s;
    vertical-align: -.15em;
    position: relative
}
input[type=radio] {
    border-radius: 50%
}
input[type=checkbox]::before {
    font-family: "qcs" !important;
    content: '\e61e';
    opacity: 0;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0);
    z-index: 1;
    left: -5%;
    transition: .2s;
    text-align: center;
    width: 100%
}
input[type=checkbox]:checked {
    background: #268df7;
    border-color: #268df7;
    box-shadow: none
}
input[type=checkbox]:checked::before {
    opacity: 1;
    transform: translateY(-50%) scale(.7)
}
input[type=radio]::before {
    content: '';
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin: 3px;
    background-color: #268df7;
    line-height: 1.14285714;
    float: left;
    opacity: 0;
    transition: opacity .2s
}
input[type=radio]:checked::before {
    opacity: 1
}
input[type=checkbox]:hover, input[type=radio]:hover {
    opacity: .8
}
input[type=radio]:checked, input[type=radio]:focus, input[type=radio]:hover {
    border-color: #268df7
}
input:-internal-autofill-previewed, input:-internal-autofill-selected {
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #4e5358 !important
}
input:checked ~ .form-switch {
    background: #268df7;
}
.form-switch {
    border-radius: 100px;
    width: 40px;
    height: 20px;
    transition: .3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: rgba(189, 189, 189, .4);
}
input:checked ~ .form-switch::after {
    left: 22px;
}
.form-switch::after {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 100px;
    top: 2px;
    left: 2px;
    position: absolute;
    background: #fff;
    transition: .3s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
ol, ul {list-style: none;}
dl {margin-bottom: 28px;}
dt {font-weight: bold;}
dd {margin-bottom: 24px;}
table, th, td {border: 1px solid #e7e7e7;}
table {border-collapse: separate;border-spacing: 0;border-width: 1px 0 0 1px;margin: 0 0 10px;}
caption, th, td {font-weight: normal;text-align: left;}
th {border-width: 0 1px 1px 0;font-weight: 700;}
td {border-width: 0 1px 1px 0;}
th, td {padding: 5px;}
del { text-decoration: line-through;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;hyphens: none;quotes: none;}
a img {border: 0;}
img {backface-visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;}
.lazy {image-rendering: -webkit-optimize-contrast;}
a {color: #333;text-decoration: none;}
:focus, a:focus {outline: none;}
a:hover {color: #3690cf;}
.clear {clear: both;display: block;}
button::-moz-focus-inner, input::-moz-focus-inner {padding: 0;border: none;}
a, button, input {-webkit-tap-highlight-color: rgba(255, 0, 0, 0);}
input:-webkit-autofill {box-shadow: inset 0 0 0 1000px #f1f1f1;}
input:-webkit-autofill:focus {box-shadow: inset 0 0 0 1000px #fff;}
input {filter: none;}
.tip-yellow { z-index: 10000;}
.avatar {image-rendering: -webkit-optimize-contrast;width: var(--this-size); height: var(--this-size); border-radius: 50%;}
.usnone { user-select: none}
.title-style:after {
    content: '';
    position: absolute;
    width: 5px;
    height: 100%;
    background: var(--qcs-core);
    left: -10px;
    border-radius: 2px;
}
ol, ul {list-style: none}
.dfc { display: flex; align-items: center;}
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qc-btn {min-width: 60px;
    height: 29px;
    box-sizing: border-box;
    background-image: linear-gradient(135deg, #54bab8 10%, #28c7e4 100%);
    box-shadow: unset;
    font-size: 12px;
    color: #ffffff;
    border: 0 none;
    cursor: pointer;
    border-radius: 5px;
    line-height: 13px;
    padding: 8px 12px;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}
a.qc-btn:link, a.qc-btn:visited { color: #fff;}
.qcs-btn-green {background-image: linear-gradient(135deg, #76e48bd4 10%, #3da251 100%);box-shadow: -1px 2px 10px 0 #77e48bbd}
.qc-btn:active, .qc-btn:hover {opacity: 0.5}
/**弹窗样式*/
.modal-backdrop {opacity: .5;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1040;background-color: rgba(255, 255, 255, .75)}
.modal-mask { background-color: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}
.flex {align-items: center;justify-content: center}
.qcx_modal {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1050;display: flex;overflow: hidden;-webkit-overflow-scrolling: touch;outline: 0}
.qcx_modal-dialog {position: relative;width: 600px;/*margin: 10px;*/transition: transform .5s cubic-bezier(.32, .85, .45, 1.18), width .3s;z-index: 9999}
.qcx_modal-content {position: relative;background-color: var(--qcs-color-333, #fff);background-clip: padding-box;border-radius: 6px;min-height: 150px;box-shadow: 0 3px 9px rgba(0, 0, 0, .2);outline: 0;max-height: calc(100vh - 20px);overflow: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch}
.qcx_modal-body {position: relative;padding: 15px}
.qcx_modal .close {float: right;font-size: 21px;font-weight: 700;line-height: 1;color: #000;text-shadow: 0 1px 0 #fff;opacity: .2;transition: .3s;}
.qcx_modal .close:focus, .qcx_modal .close:hover {color: #000;text-decoration: none;cursor: pointer;opacity: .5;transform: rotate(270deg);color: inherit;}
.qcx_modal .modal-colorful-header .close {
    font-size: 16px;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 99999;
}
.qcx_modal button.close {font-weight: normal;padding: 0;cursor: pointer;background: 0 0;border: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none; color: var(--qcs-color-eee, #222); background: unset;
    height: unset;
    line-height: unset;
    font-size: 12px;margin-top: 5px}
.qcs-fullscreen .qcx_modal-dialog {
    width: 100% !important;
    height: 100% !important;
    max-width: unset !important;
    position: absolute;
    display: block;
    left: 0 !important;
    top: 0 !important;
}
.qcs-fullscreen .qcx_modal-content {
    height: 100% !important;
    max-width: calc(100vw - 20px);
    max-width: calc(100vw - 40px);
}
.qcs-fullscreen .qcx_modal-body {
    /* height: calc(100% - 30px);*/
    height: 100%;
}
.qcs-fullscreen .modal-buts.but-average {
    background: var(--qcs-color-222, #fff);
    position: fixed;
    width: 100%;
    bottom: 15px;
}
.colorful-bg, .modal-colorful-header {background-size: 120%;overflow: hidden;position: relative;color: #fff;background: linear-gradient(135deg, #59c3fb 10%, #268df7 100%)}
.modal-colorful-header {border-radius: 5px 5px 0 0;background-size: 120%;position: absolute;left: 0;right: 0;top: 0;height: 100px;display: flex;align-items: center;justify-content: center;}
.colorful-bg > .colorful-make {bottom: 0;height: 290px;width: 323px;top: 60%;}
.colorful-bg > .colorful-make::before {right: -558px;bottom: 0;height: 300px;width: 677px;top: -325px;transform: rotate(341deg);opacity: .6;}
.colorful-bg > .colorful-make::after {left: -262px;bottom: 0;height: 214px;width: 402px;top: -170px;transform: rotate(326deg);opacity: .4;}
.colorful-bg > .colorful-make, .colorful-bg > .colorful-make::after, .colorful-bg > .colorful-make::before {position: absolute;color: #fff;background: linear-gradient(135deg, #59c3fb 10%, #268df7 100%);border-radius: 100%;content: ' ';}
.modal-colorful-header > button.close, .modal-colorful-header > button.fullscreen {position: absolute;right: 10px;top: 0;color: #fff;opacity: .6;font-size: 18px;z-index: 9;line-height: 13px; height: 20px;}
.modal-colorful-header .em2x {margin-bottom: 15px;}
.modal-colorful-header .em2x i {font-size: 30px;}
.modal-colorful-header + * { margin-top: 100px; }
.modal-colorful-headers { display: flex;
    border-radius: 5px 5px 0 0;
    background-size: 120%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    color: var(--qcs-color-eee, #222);}
.modal-colorful-headers > button.close, .modal-colorful-headers > button.fullscreen, .modal-colorful-headers > button.refresh {position: absolute;right: 10px;top: 6px; color: var(--qct-global-font-color, #333);opacity: .6;font-size: 18px;z-index: 9;line-height: 12px;}
.modal-colorful-headers .em2x {margin-bottom: 15px;}
.modal-colorful-headers .mt10 {margin-top: 0}
.modal-colorful-headers .em2x i {font-size: 20px;
    margin-right: 5px;}
.modal-colorful-headers + * { margin-top: 30px; }
.modal-colorful-headers .text-center {
    text-align: left;
    line-height: 40px;
    display: flex;
    margin-left: 10px;
    align-items: center;
}
.modal-colorful-headers .text-center img {
    margin-right: 5px;max-height: 14px;max-width: 14px;
}
.modal-colorful-headers .text-center .mt10 {
    margin-top: 0;
    font-size: 14px;
    font-weight: bold;
}
.modal-colorful-headers .modal-action {
    display: flex;
    align-items: center;
    color: var(--qcs-color-eee, #222);
    background: unset; margin-right: 10px;
}
.modal-colorful-headers .modal-action button.refresh,
.modal-colorful-headers .modal-action button.fullscreen,
.modal-colorful-headers .modal-action button.close {
    font-weight: normal;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none; padding: 0 2px;
    -moz-appearance: none;
    appearance: none;
    color: var(--qcs-color-eee, #222);
    background: unset;
    height: unset;
    line-height: unset;
    font-size: 12px;
    margin-top: 0px;opacity: .9;
}
.qcx_modal button.fullscreen {padding: 0;cursor: pointer;background: 0 0;border: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.qcx_modal button.fullscreen { right: 35px; top: -3px; color: var(--qct-global-font-color, #333);}
.qcx_modal button.refresh {padding: 0;cursor: pointer;background: 0 0;border: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.qcx_modal button.refresh { right: 35px; top: -3px; color: var(--qct-global-font-color, #333);}
.colorful-bg > .colorful-make + * {position: relative;}
.text-center {text-align: center;line-height: 10px}
.box-body {padding: 0 15px}
.font-bold {font-weight: 700}
.border-bottom {border-bottom: 1px solid #F4F4F4;font-size: 14px}
.padding-h10 {padding-top: 10px;padding-bottom: 10px}
.flex0 {display: flex}
.flex .flex1 {flex: auto;overflow: hidden}
.text-right {text-align: right}
.focus-color {color: #0066ff}
/*弹窗样式结束*/
.qcx-module-box {width: 100%;height: 90px;border: 1px solid #f3f3f3;float: left;}
.qcx-module-box .box-img {width: 80px;height: 70px;margin: 10px 0;float: left}
.qcx-module-box .box-img img {width: 80px;height: 70px}
.qcx-module-box .box-c {text-align: left;height: 70px;margin: 10px;float: left;width: calc(100% - 190px)}
.qcx-module-box .box-c spans { font-size: 12px;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
.qcx-module-box .box-c strong {font-size: 14px;font-weight: bold}
.qcx-module-box .box-kg {width: 90px; margin: 10px 0; padding: 12px 9px; float: left; border-left: 2px solid #f3f3f3; text-align: center;}
.qcx-module-box .box-kg em {font-size: 12px;display: inline-block; background: #fff; border: 1px solid #c3c3c3; border-radius: 3px; line-height: 35px; padding: 0 10px;}
.mkcards .qcx-module {display: flex; justify-content: center; margin: 40px 0;}
.mkcards .qcx-module-box {width: 280px; height: unset; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--qcs-br); box-shadow: 0 0 5px 2px rgb(0 0 0 / 5%);}
.mkcards .qcx-module-box .box-kg {float: left; border-left: unset;margin: 10px 0 20px;}
.mkcards .qcx-module-box .box-c strong {font-size: 20px;}
.mkcards .qcx-module-box .box-c {height: unset;width: 100%;padding: 0 10px; line-height: 2; text-align: center;margin: 10px 0;}
.mkcards .qcx-module-box .box-kg em {border: 0; color: #a3a3a3; line-height: 25px; padding: 0 10px; border-radius: var(--qcs-br); box-shadow: 0 0 5px 2px rgb(0 0 0 / 5%);}
.mkcards .qcx-module-box .box-img {height: 80px; margin: 20px 0 0; float: left; border-radius: 50px; padding: 10px; box-shadow: 0 0 5px 2px rgb(0 0 0 / 5%);}
.qcx-module-box .box-img img {width: 100%; height: 100%;}
/*媒体库*/
.image-table {display: flex;margin-bottom: 10px;margin-top: -10px;justify-content: center}
.trix-dialog-image-box > div {
    max-height: 300px;
    overflow-y: scroll;
}
.image-table > div {margin-left: 10px;
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    position: relative;}
.image-table > div.picked:before {content: '';width: 5px;height: 5px;background: red;position: absolute;top: 28px;border-radius: 100%}
.image-upload-box { display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ebebeb !important;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    margin-bottom: 15px !important;
    flex-direction: column;
    padding: 20px 0;!important;}
.image-upload-box > div {margin: 10px 0;pointer-events: none; color: #999;}
.qcup-hidden-always {display: none}
.image-upload-box svg {fill: #ebebeb; pointer-events: none;}
.image-upload-box.files-container {
    position: relative;
    margin: 15px 2px;padding: 0;
    background-color: rgb(229 229 229 / 20%);
}
.image-upload-box.files-container span {
    padding: 0 !important;
    background: unset !important;
    pointer-events: none;
    font-weight: initial;font-size: 12px;
}
.preview-container .previews .onyx-dropzone-info > .details {
    max-width: calc(100% - 65px) !important;
}
.previews .dz-name {
    display: flex;
}
.previews .dz-name span[data-dz-name], .previews .dz-error-message[data-dz-errormessage] {
    font-size: 12px; font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.previews .dz-name span[data-dz-size] {
    margin-right: -25px;
}
#open_media_library {
    z-index: 9999;
}
.qcx-image-update #warnings {
    padding-top: 0;
}
.qcx-image-update #warnings span {
    margin: 5px 0;
    width: 100%;
    background: #ff000057;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;
    font-weight: normal;
}
.editor-images-list .media-empty > img {
    max-width: 200px;
    text-align: center;
}
.editor-images-list .media-empty {
    width: 100%;
    text-align: center;
}
.editor-images-list { display: flex;
    flex-flow: wrap;
    align-items: center;}
.editor-images-list li { width: calc(20% - 8px);
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    margin: 4px;
    border-radius: 4px;
    box-shadow: 0 0 0 2px #f5f5f5;}
.editor-image {height: 0;padding-top: 100%;position: relative; }
.editor-images-list li.li-video, .editor-images-list li.li-file {
    width: calc(50% - 8px);
}
.editor-images-list li .editor-video, .editor-images-list li .editor-file {
    padding: 4px;
    height: unset; display: flex;
    flex-direction: column;
}
.editor-images-list li .editor-video-title, .editor-images-list li .editor-file-title {
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    color: #666;
    height: 30px;
}
.editor-images-list li .editor-video-title img, .editor-images-list li .editor-file-title img {
    width: 20px;
    height: 20px;
    position: unset;
}
.editor-images-list li .editor-video-title span, .editor-images-list li .editor-file-title span {
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分省略号 */
    word-break: break-all; /* break-all(允许在单词内换行。) */
    display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
    height: 100%;
}
.editor-images-list li .editor-video-details, .editor-images-list li .editor-file-details {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;margin-top: 5px;
}
.editor-images-list li.picked {
    box-shadow: 0 0 0 2px #f04494;
}
.editor-images-list li.picked .active-index {
    color: #fff;
    position: absolute;
    right: -1px;
    top: -1px;
    z-index: 1;
    background: #f04494;
    border-radius: 0 1px 0 4px;
    padding: 2px 3px;
    font-size: 12px;
    line-height: 12px;
    min-width: 16px;
    text-align: center;
}
/*
.editor-images-list li.picked::after {content: "✓";position: absolute;width: 20px;height: 20px;color: rgb(255, 255, 255);top: 5px;right: 5px;display: flex;align-items: center;justify-content: center;background: rgb(244, 67, 54);border-radius: 100%;border-width: 1px;border-style: solid;border-color: rgb(255, 255, 255);border-image: initial;left: unset; opacity: 1;}
*/
.editor-image img {max-width: 100%;height: auto;object-fit: cover;border: 0;vertical-align: text-top;position: absolute;height: 100%;width: 100%;top: 0;left: 0;border-radius: 4px;}
.editor-filter li::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); opacity: 0.8; border-radius: 4px;overflow: hidden;}
.editor-filter li:hover::after { backdrop-filter: unset; opacity: 1;}
.image-nav { padding: 0; display: flex; justify-content: center;margin-top: 5px;}
.empty + .image-nav {
    display: none;
}
.image-nav button { background: #fff;
    border: 0;
    height: 24px;
    line-height: 2px;
    border-radius: 30px;
    padding: 2px 15px;}
.image-nav button:hover { color: #1a1a1a; opacity: 0.85; box-shadow: 0 0 0 0 rgb(0 0 0 / 20%); background: rgba(50, 50, 50, 0.06);color: #0cad64}
.trix-dialog-input {padding: 0;display: flex;align-items: center;border: 1px solid #ebebeb;border-radius: 3px}
.trix-dialog-input textarea {padding: 10px;border: 0;width: 100%;min-height: 150px;background: #fff}
.dialog-desc {font-size: 12px !important;margin-top: 4px;text-align: right;color: #ccc;white-space: normal;margin-bottom: 0 !important}
/*媒体库结束*/
.qcbm-container {width: 100%;min-height: 300px}
.qcbm-title {font-size: 14px;font-weight: bold;color: #cc5522}
.qcbm-content {font-size: 13px;color: #333;margin-top: 6px}
.anchorBL { display: none !important;}
.qcbm-container img {max-width: unset !important}
/*地图标注*/
/*加载中*/
.qctc-table {width: 100%}
.qctc-body {position: relative;display: flex;vertical-align: middle}
.qctc-tr {position: relative;display: flex;margin: 10px 5px 20px;width: calc(100% - 10px)}
.qctc-th {margin-top: 10px;margin-right: 10px;margin-bottom: 10px;width: 65px;text-align: left;text-overflow: ellipsis;white-space: nowrap;overflow: hidden}
.qctc-td {width: calc(100% - 80px)}
/*顶部进度条*/
.topprogress {
    background: #2B91AF;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    height: 1px;
    z-index: 99099;
    -webkit-transition: width 0.25s ease 0s;
    transition: width 0.25s ease 0s;
}
.topprogress.topscrolled:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, #2ca2b4, #5598de 24%, #7f87ff 45%, #f65aad 76%, #ec3d43);
}
/*消息中心*/
.qcuc-button-img {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.qcuc-button-img img {
    width: 100px;
    height: 100px;
}
.msg-private {display: flex; width: 100%;}
.msg-private-left {width: 250px; margin-right: 10px;}
.msg-list {display: flex; padding: 5px 10px; background: #f8f8f8a3; border-radius: 4px;margin: 5px 0;}
.msg-list badge {position: absolute; transform: translate(-7px, -7px); padding: 2px; background: #fd6480;}
.msg-list:hover {background: rgba(248, 248, 248, 0.96);}
.msg-listflex {flex: 1; overflow: hidden;}
.msg-listflex span {float: right; font-size: 12px; color: #b1b1b1}
.msg-listflex dt {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.msg-listflex dd {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #999}
.msg-private-right {width: calc(100% - 250px); position: relative;}
.msg-private-window-header {display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center;}
.msg-header-block {opacity: 0; width: 33.33333%; font-size: 12px;}
.msg-header-block i {font-size: 12px;}
.msg-header-center {display: flex; align-items: center; width: 33.33333%; justify-content: center; line-height: 12px;}
.msg-header-center .avatar-img { margin-right: 5px;--this-size: 20px;}
.msg-header-center .avatar-img img { width: var(--this-size); height: var(--this-size); border-radius: 50%;}
.msg-header-right {position: relative; text-align: right; width: 33.33333%; float: right; padding-right: 9px;}
.msg-header-right .dropdown-menu, .from-private .dropdown-menu {display: none; position: absolute; top: 25px; right: 5px; padding: 5px; margin-top: 6px; font-size: 14px; text-align: center; background-color: #fff; background-clip: padding-box; border-radius: 4px; color: #aaa; box-shadow: 0 0 10px 8px #b3b3b326; min-width: 100px; transition: .3s; list-style: none !important; z-index: 992;}
.msg-header-right .dropdown-menu::before, .from-private .dropdown-menu::before {content: " "; display: inline-block; width: 12px; height: 12px; background: #fff; position: absolute; transform: rotate(45deg); border-radius: 2px; top: -6px; right: 5px;}
.msg-header-right .dropdown-menu > li > a {text-shadow: none; display: flex; align-items: center; padding: 6px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap;}
.msg-private-window-content {height: 400px; background: #f3f3f3; box-shadow: none; border-radius: 4px; padding: 15px 10px; margin-bottom: 10px; overflow-x: hidden; overflow-y: auto;}
.private-item-time {font-size: 12px; color: #b1b1b1; text-align: center;}
.private-item-list {margin: 10px 0;}
.private-item-list .avatar-img { --this-size: 32px;}
.private-item-list.right .avatar-img {float: right;}
.private-item-list.left .avatar-img {float: left;}
.private-content {max-width: calc(80% - 60px); display: inline-block; word-wrap: break-word; white-space: pre-wrap; padding: 6px 10px; border-radius: 4px; margin: 0 8px; position: relative; text-align: left; min-height: 32px; min-width: 32px; background: #fff;}
.private-item-list.right .private-content::before {left: auto; right: -4px;}
.private-content::before {content: ' '; display: inline-block; width: 9px; height: 9px; background: #fff; position: absolute; top: 12px; transform: rotate(45deg); left: -4px; border-radius: 2px;}
.private-content .readed-badge {position: absolute; font-size: 12px; right: 100%; top: 8px; width: 2.5em; transform: scale(.9); color: #2997f7;}
.msg-private-window-footer {position: relative;}
.form-control {height: auto; display: block; width: 100%; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #f5f6f7; background-image: none; border: 1px solid transparent; border-radius: 4px; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.from-right {float: right;}
.from-right .send-private {color: #2997f7; background: rgba(41, 151, 247, 0.1); padding: 5px 15px; display: flex; align-items: center;}
.from-private .qc-btn-smilie, .from-private .qc-btn-image, .from-private .qc-btn-code {display: inline-block; position: relative; margin-right: 5px;}
.from-private .qc-btn-smilie .qc-btn, .from-private .qc-btn-image a, .from-private .qc-btn-code a {color: #888; background: rgba(136, 136, 136, 0.1); padding: 5px 15px; display: flex; align-items: center;}
.from-private .dropdown-menu {top: unset; bottom: 40px; right: auto;text-align: left;}
.from-private .dropdown-menu::before {top: unset; left: 30px; bottom: -4px;}
.from-private .qc-btn-smilie .dropdown-menu {width: 224px;}
.from-private .qc-btn-code .dropdown-menu {width: 300px;}
.from-private .qc-btn-image .dropdown-menu {width: 300px;}
.from-private .qc-btn-smilie .dropdown-menu .dropdown-smilie {margin-bottom: 10px; overflow-x: hidden; overflow-y: auto; display: flex; flex-wrap: wrap; height: 220px;}
.from-private .qc-btn-smilie .smilie-icon {color: #888; display: flex; align-items: center; width: 35px; height: 35px; padding: 3px;}
.from-private .qc-btn-smilie .smilie-icon a {color: #888; background: rgba(136, 136, 136, 0.1); display: flex; align-items: center; width: 35px; height: 35px; padding: 0;}
.open > .dropdown-menu {display: block;}
.msg-private-window-content::-webkit-scrollbar, .dropdown-smilie::-webkit-scrollbar { width: 2px; height: 2px; background-color: rgba(0, 0, 0, .2);}
.msg-private-window-content::-webkit-scrollbar-track, .dropdown-smilie::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: var(--qcs-color-444, #F5F5F5);}
.msg-private-window-content::-webkit-scrollbar-thumb, .dropdown-smilie::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: var(--qcs-color-444, #b3b3b3);}
@media screen and (max-width: 768px) {
    .msg-private {display: block;}
    .msg-private-left {width: 100%;}
    .msg-private-right {width: 100%;}
    .msg-header-block {opacity: 1;}
    .msg-private.toggle #user_private_lists, .msg-private:not(.toggle) #user_private_window {display: none; opacity: 0;}
}
#open_openprivate .modal-colorful-headers + * { margin-top: 10px;}
.has-ripple {position: relative;overflow: hidden;-webkit-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}
.ripple {display: block;position: absolute;pointer-events: none;border-radius: 50%;-webkit-transform: scale(0);-o-transform: scale(0);transform: scale(0);background: #fff;opacity: 1}
.ripple-animate {-webkit-animation: ripple;-o-animation: ripple;animation: ripple}
@-webkit-keyframes ripple {
    100% {opacity: 0;-webkit-transform: scale(2);transform: scale(2)}
}
@-o-keyframes ripple {
    100% {opacity: 0;-o-transform: scale(2);transform: scale(2)}
}
@keyframes ripple {
    100% {opacity: 0;transform: scale(2)}
}
@media screen and (max-width: 1024px) {
    .hide1024 {
        display: none !important;
    }
}
@media screen and (max-width: 768px) {
    .hide768 {
        display: none !important;
    }
    .br0 {
        border-radius: 0 !important;
    }
}
@media screen and (max-width: 480px) {
    .hide480 {
        display: none !important;
    }
    .fz12-sm {
        font-size: 12px;
    }
}
.b-gray {background: #818b95}
.b-red {background: #ff5473 !important;}
.b-yellow {background: #ff6f06}
.b-cyan {background: #08c4c1}
.b-blue {background: #2997f7}
.b-blue-2 {background: #5c7cff}
.b-green {background: #12b928}
.d-purple {color: #d448f5}
.d-gray {color: #818b95}
.d-red {color: #ff5473 !important;}
.d-yellow {color: #ff6f06}
.d-cyan {color: #08c4c1}
.d-blue {color: #2997f7}
.d-blue-2 {color: #5c7cff}
.d-green {color: #12b928}
.d-purple {color: #d448f5}
.c-gray {color: #888 !important;background: rgba(136, 136, 136, .1)}
.c-white {color: #fff !important;background: rgba(255, 255, 255, 0.1)}
.c-red {color: #ff5473 !important;background: rgba(255, 84, 115, .1)}
.c-red-2 {color: #d6064c !important;background: rgba(194, 41, 46, 0.1)}
.c-yellow {color: #ff6f06 !important;background: rgba(255, 111, 6, 0.1)}
.c-yellow-2 {color: #c58516 !important;background: rgba(179, 103, 8, 0.1)}
.c-blue {color: #2997f7 !important;background: rgba(41, 151, 247, .1)}
.c-blue-2 {color: #5c7cff !important;background: rgba(77, 130, 249, .1)}
.c-cyan {color: #04b9b6 !important;background: rgba(8, 196, 193, 0.1)}
.c-green {color: #18a52a !important;background: rgba(18, 185, 40, .1)}
.c-green-2 {color: #6a933e !important;background: rgba(72, 135, 24, .1)}
.c-purple {color: #e434e1 !important;background: rgba(213, 72, 245, 0.1)}
.c-purple-2 {color: #8e4aff !important;background: rgba(154, 72, 245, 0.1)}
.lg-red {
    background: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%)
}
.lg-pink {
    background: linear-gradient(135deg, #ff5e7f 30%, #ff967e 100%)
}
.lg-yellow {
    background: linear-gradient(135deg, #f59f54 10%, #ff6922 100%)
}
.lg-blue {
    background: linear-gradient(135deg, #59c3fb 10%, #268df7 100%)
}
.lg-cyan {
    background: linear-gradient(140deg, #039ab3 10%, #58dbcf 90%)
}
.lg-green {
    background: linear-gradient(135deg, #60e464 10%, #5cb85b 100%)
}
.lg-purple {
    background: linear-gradient(135deg, #f98dfb 10%, #ea00f9 100%)
}