@charset "utf-8";
/*Yahoo(YUI) CSS Reset:*/

/*Webkit,Opera9.5+,Ie9+*/
::selection {
    background: #00D7D5;
    color: #fff;
}

/*Mozilla Firefox*/
::-moz-selection {
    background: #ffa24d;
    color: #fff;
}


body,
header,
footer,
figure,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    padding: 0;
    margin: 0;
}

i,
b {
    font-style: normal;
    font-weight: normal
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,
img {
    border: none;
}

legend {
    display: none
}

address,
caption,
cite,
code,
dfn,
th,
var,
i {
    font-weight: normal;
    font-style: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 100%;
}

q:before,
q:after {
    content: ""
}

a {
    text-decoration: none;
    color: #333
}

abbr,
acronym {
    border: 0;
}

.less12px {
    -webkit-text-size-adjust: none;
}

/*chrome私有属性，允许font-size<12px*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block
}

.clear {
    clear: both
}

/* 20190103 add by js */
a:hover {
    text-decoration: none
}

.dn {
    display: none;
}

/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
    border-radius: 3px;
    /*border: 2px solid #000;*/
    background: rgba(30, 49, 80, .95);
    color: #fff;
}

.tooltipster-default a {
    color: #42FF9D;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    padding-bottom: 1px;
}

.tooltipster-default a:hover {
    border-bottom-color: #fff;
}

/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {

    font-size: 13px;
    line-height: 1.6em;
    padding: 8px 10px;
    overflow: hidden;
    /*max-width: 300px;*/
}

/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
    /* border-color: ... !important; */
}


/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
    cursor: help;
    margin-left: 4px;
}


/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
    padding: 0;
    /*font-size: 0;
	line-height: 0;*/
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999999;
    pointer-events: none;
    width: auto;
    overflow: visible;
}

.tooltipster-base .tooltipster-content {
    overflow: hidden;
}


/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 0;
    z-index: -1;
}

.tooltipster-arrow span,
.tooltipster-arrow-border {
    display: block;
    width: 0;
    height: 0;
    position: absolute;
}

.tooltipster-arrow-top span,
.tooltipster-arrow-top-right span,
.tooltipster-arrow-top-left span {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 8px solid;
    bottom: -7px;
}

.tooltipster-arrow-top .tooltipster-arrow-border,
.tooltipster-arrow-top-right .tooltipster-arrow-border,
.tooltipster-arrow-top-left .tooltipster-arrow-border {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-top: 9px solid;
    bottom: -7px;
}

.tooltipster-arrow-bottom span,
.tooltipster-arrow-bottom-right span,
.tooltipster-arrow-bottom-left span {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid;
    top: -7px;
}

.tooltipster-arrow-bottom .tooltipster-arrow-border,
.tooltipster-arrow-bottom-right .tooltipster-arrow-border,
.tooltipster-arrow-bottom-left .tooltipster-arrow-border {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid;
    top: -7px;
}

.tooltipster-arrow-top span,
.tooltipster-arrow-top .tooltipster-arrow-border,
.tooltipster-arrow-bottom span,
.tooltipster-arrow-bottom .tooltipster-arrow-border {
    left: 0;
    right: 0;
    margin: 0 auto;
}

.tooltipster-arrow-top-left span,
.tooltipster-arrow-bottom-left span {
    left: 6px;
}

.tooltipster-arrow-top-left .tooltipster-arrow-border,
.tooltipster-arrow-bottom-left .tooltipster-arrow-border {
    left: 5px;
}

.tooltipster-arrow-top-right span,
.tooltipster-arrow-bottom-right span {
    right: 6px;
}

.tooltipster-arrow-top-right .tooltipster-arrow-border,
.tooltipster-arrow-bottom-right .tooltipster-arrow-border {
    right: 5px;
}

.tooltipster-arrow-left span,
.tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-left: 8px solid;
    top: 50%;
    margin-top: -7px;
    right: -7px;
}

.tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important;
    border-left: 9px solid;
    margin-top: -8px;
}

.tooltipster-arrow-right span,
.tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-right: 8px solid;
    top: 50%;
    margin-top: -7px;
    left: -7px;
}

.tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important;
    border-right: 9px solid;
    margin-top: -8px;
}


/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */

.tooltipster-fade {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity;
}

.tooltipster-fade-show {
    opacity: 1;
}

.tooltipster-grow {
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-backface-visibility: hidden;
}

.tooltipster-grow-show {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-swing {
    opacity: 0;
    -webkit-transform: rotateZ(4deg);
    -moz-transform: rotateZ(4deg);
    -o-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    transform: rotateZ(4deg);
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
}

.tooltipster-swing-show {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
    -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
    transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
    top: 0;
    -webkit-transition-property: top;
    -moz-transition-property: top;
    -o-transition-property: top;
    -ms-transition-property: top;
    transition-property: top;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-fall-show {
}

.tooltipster-fall.tooltipster-dying {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    top: 0px !important;
    opacity: 0;
}

.tooltipster-slide {
    left: -40px;
    -webkit-transition-property: left;
    -moz-transition-property: left;
    -o-transition-property: left;
    -ms-transition-property: left;
    transition-property: left;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-slide.tooltipster-slide-show {
}

.tooltipster-slide.tooltipster-dying {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    left: 0px !important;
    opacity: 0;
}


/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
    opacity: 0.5;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

@charset "utf-8";

html {
    font-size: 62.5%
}

body {
    font-size: 14px;
    font-family: "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;
    color: #374051;
    background-color: #eff4f5;
    /*word-break: break-all*/
}

pre,
code {
    word-break: break-word
}

.pre {
    white-space: pre-wrap
}

@font-face {
    font-family: 'Open Sans';
    src: url(../fonts/opensans-light-webfont.woff) format('woff'), url(../fonts/opensans-light-webfont.ttf) format('truetype');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: 'Open Sans';
    src: url(../fonts/opensans-regular-webfont.woff) format('woff'), url(../fonts/opensans-regular-webfont.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

.add-conditions {
    margin-left: 5px;
    color: #0096C4
}

.add-conditions:hover {
    color: #48b6d7
}

.add-conditions:before {
    content: "\e613";
    font-family: kf5;
    font-size: 12px;
    height: 18px;
    width: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 100%;
    color: #fff;
    background: #21d376;
    margin-right: 0;
    display: inline-block;
    float: left;
    position: relative
}

.select-child-list p {
    margin-bottom: 5px;
    padding-left: 2px
}

.select-child-list ul {
    padding: 5px 0;
    border: 1px solid #e2eaec;
    height: 250px;
    overflow-y: auto
}

.select-child-list li {
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
}

.select-child-list li > a {
    padding: 8px 10px;
    display: block
}

.select-child-list li > a:hover {
    background: #eff4f5
}

.select-child-list li > a:after {
    content: "\e6bd";
    font-family: kf5;
    height: 20px;
    line-height: 20px;
    width: 20px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    float: right;
    background: #fff;
    border: 1px solid #e2eaec;
    border-radius: 100%
}

.select-child-list li > a:hover:after {
    border-color: #ced6d8
}

.select-child-list .active > a::after {
    background: #21d376;
    border-color: #21d376 !important
}

progress {
    width: 70px;
    border: 0;
    background-color: #21b1d3;
    color: #21d376
}

.scrollbar-auto {
    overflow-y: auto;
    border-right: 1px solid #e2eaec;
    /* position: absolute; */
    /* bottom: 0;
	left: 0;
	top: 0;
	right: 0 */
}

#im-panel-main-chatcontentpane-toplevel .scrollbar-auto {
    border: none;
}

progress::-moz-progress-bar {
    background: #21b1d3
}

progress::-webkit-progress-bar {
    background: #e6e6e6
}

progress::-webkit-progress-value {
    background: #21b1d3
}

.hint {
    font-size: 12px;
    color: #999;
    clear: both;
    margin-top: 3px
}

/* 20190324 add by JS：为了美化对话框架中输入框的信息提示icon而加 */
.hint i {
    vertical-align: text-bottom;
    font-size: 16px;
    color: #bbb;
    margin-right: 4px;
}

::-webkit-scrollbar {
    width: 6px;
    height: 5px;
    background: 0
}

/* 20200318 由原“background: rgba(0, 0, 0, .15);”改为了现值 */
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .10);
    /*border-radius: 40px;*/
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .2)
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, 0)
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0)
}

::-webkit-scrollbar-track-piece {
    border-left: 0
}

.cf:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.cb {
    clear: both
}

.fl {
    float: left;
}

.fr {
    float: right
}

.tc {
    text-align: center
}

.tl {
    text-align: left
}

.tr {
    text-align: right
}

.fn {
    float: none
}

.gray {
    color: #999 !important;
}

/* add by jackjiang 20190318 */
.red {
    color: #F43530
}

.green {
    color: #21d376
}

.orange {
    color: #ffa900
}

.blue {
    color: #21b1d3
}

.purple {
    color: #9e5ae3
}

.link {
    color: #0096C4;
    margin-left: 20px;
}

.link:hover {
    color: #48b6d7
}

/* add by jackjiang 20190318： 为了美化右侧详情面板下方的prohibit内的删除链接样式而加了以下2项 */
.link_red {
    color: #F43530
}

.link_red:hover {
    color: #f97c7c
}

.pr {
    position: relative
}

.ml5 {
    margin-left: 5px !important
}

.ml10 {
    margin-left: 10px !important
}

.ml15 {
    margin-left: 15px !important
}

.ml20 {
    margin-left: 20px !important
}

.mr5 {
    margin-right: 5px !important
}

.mr10 {
    margin-right: 10px !important
}

.mr15 {
    margin-right: 15px !important
}

.mr20 {
    margin-right: 20px !important
}

.mt5 {
    margin-top: 5px !important
}

.mt10 {
    margin-top: 10px !important
}

.mt15 {
    margin-top: 15px !important
}

.mt20 {
    margin-top: 20px !important
}

.mb5 {
    margin-bottom: 5px !important
}

.mb10 {
    margin-bottom: 10px !important
}

.mb15 {
    margin-bottom: 15px !important
}

.mb20 {
    margin-bottom: 20px !important
}

.mw200 {
    max-width: 200px !important
}

.mw800 {
    max-width: 800px !important
}

.ofh {
    overflow: hidden !important
}

.ofv {
    overflow: visible !important
}

.tran2 {
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.tran4 {
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.dib {
    display: inline-block
}

.empty-block,
.empty_block {
    padding: 5px;
    text-align: center;
    color: #aaa
}

.empty-block:before,
.empty_block:before {
    content: "\e619";
    font-family: kf5;
    font-size: 40px;
    margin-bottom: 5px;
    color: #ccc;
    display: block
}

.preloader {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto 5px;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: preloader-spin 1s steps(12, end) infinite;
    animation: preloader-spin 1s steps(12, end) infinite
}

.preloader:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat
}

@-webkit-keyframes preloader-spin {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes preloader-spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.date-picker-wrapper.single-month .time {
    display: block
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.flex1 > * {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-col3 > * {
    width: 33.3333333%
}

.copyright {
    font-size: 12px;
    text-align: center;
    padding-bottom: 20px
}

.copyright > a {
    color: #C6C8CD;
    text-shadow: 1px 1px 0 #fff
}

iframe {
    border: 0
}

input {
    outline: 0
}

input,
select,
button,
textarea {
    outline: 0;
    font-family: "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;
    color: rgba(0, 0, 0, 0.65);
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    border-width: 1px;
}

input.has-error,
select.has-error,
button.has-error,
textarea.has-error {
    border-color: #F43530 !important
}

input.has-change,
select.has-change,
button.has-change,
textarea.has-change {
    border-color: #21d376 !important
}

select {
    border-color: #d8e0e2;
    background: #fff
}

select:hover {
    border-color: #ced6d8
}

input[type=search] {
    -webkit-appearance: none;
    appearance: none
}

datalist {
    -webkit-appearance: none;
    appearance: none
}

/*input[type=text], input[type=number], input[type=email], input[type=search], input[type=password], textarea { outline: 0; background: #fff; border-radius: 3px; border: 1px solid #ced6d8; -webkit-transition: all ease .4s; -moz-transition: all ease .4s; -o-transition: all ease .4s; transition: all ease .4s }
input[type=text].disabled, input[type=number].disabled, input[type=email].disabled, input[type=search].disabled, input[type=password].disabled, textarea.disabled, input[type=text][disabled], input[type=number][disabled], input[type=email][disabled], input[type=search][disabled], input[type=password][disabled], textarea[disabled] { background: #f5f5f5; color: #999; border-color: #bac2c4; box-shadow: none }
input[type=text]:hover, input[type=number]:hover, input[type=email]:hover, input[type=search]:hover, input[type=password]:hover, textarea:hover { border-color: #bac2c4 }
input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=search]:focus, input[type=password]:focus, textarea:focus { border-color: #21d376; box-shadow: 0 0 3px rgba(33, 211, 118, .35) }
*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

input.modify {
    background: #fff;
    width: 100%;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    border: 1px solid #fff;
    border-radius: 3px
}

input.modify:hover {
    background: #fff;
    border-color: #ccd0d9
}

input.modify:focus {
    border-color: #1890ff;
    box-shadow: 0 0 3px rgba(24, 144, 255, .35)
}

input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    height: 14px;
    width: 14px;
    border-radius: 2px;
    border: 1px solid #ced6d8;
    background: #fff;
    display: inline-block;
    outline: 0;
    font-family: kf5;
    position: relative;
    top: 1px
}

input[type=checkbox]:hover {
    border-color: #a6aeb0
}

input[type=checkbox].mediacy {
    border-color: #1890ff;
    background: #1890ff
}

input[type=checkbox].mediacy:after {
    content: "\e6c4";
    font-size: 12px;
    color: #fff;
    line-height: 14px;
    width: 14px;
    text-align: center;
    position: absolute;
    left: -1px;
    top: -1px
}

input[type=checkbox]:checked {
    border-color: #1890ff;
    background: #1890ff
}

input[type=checkbox]:checked:after {
    content: "\e6bd";
    color: #fff;
    line-height: 14px;
    width: 14px;
    font-size: 12px;
    position: absolute;
    left: -1px;
    top: -1px;
    text-align: center
}

input[type=radio] {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 100%;
    border: 1px solid #ccd0d9;
    display: inline-block;
    margin-right: 4px;
    position: relative;
    top: 2px
}

input[type=radio]:checked {
    border-color: #1890ff !important
}

input[type=radio]:checked:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -4px;
    margin-left: -4px;
    height: 8px;
    width: 8px;
    border-radius: 100%;
    background: #1890ff
}

input {
    transition: .5s;
    resize: none;
    outline: none;
}

input:active {
    border: 1px solid #61b3fe;
    box-shadow: 0 0 3px #9dccfe;
}

/*input:focus {*/
/*    border: 1px solid #61b3fe;*/
/*    box-shadow: 0 0 3px #9dccfe;*/
/*}*/


.radio-box:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.radio-box > label {
    float: left;
    margin-right: 20px
}

.radio-box > label:hover [type=radio] {
    border-color: #b8bcc5
}

.radio-box > label > span {
    font-size: 12px
}

.textarea-box > textarea {
    border: 1px solid #ccd0d9;
    width: 100%;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.textarea-box > textarea:hover {
    background: #fff;
    border-color: #ccd0d9
}

.textarea-box > textarea:focus {
    border-color: #1890ff;
    box-shadow: 0 0 3px rgba(24, 144, 255, .35)
}

textarea {
    outline: 0;
    border-radius: 4px
}

::-webkit-input-placeholder {
    color: #b0b0b0
}

:-moz-placeholder {
    color: #b0b0b0
}

::-moz-placeholder {
    color: #b0b0b0
}

:-ms-input-placeholder {
    color: #b0b0b0
}

.form-ui > ul > li {
    margin-bottom: 15px;
    position: relative
}

.form-ui > ul > li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.form-ui .drop-btn-default {
    margin-bottom: 5px
}

.form-ui .left {
    width: 85px;
    padding-right: 5px;
    float: left;
    position: absolute;
    left: 0
}

.form-ui .right {
    float: left;
    max-width: 375px;
    padding-left: 5px;
    padding-left: 100px
}

.form-ui .right label {
    margin-right: 15px
}

.form-ui label {
    float: left;
    padding-top: 5px
}

.form-ui input[type=text],
.form-ui input[type=password] {
    height: 34px;
    width: 260px;
    padding: 0 8px;
    font-size: 14px
}

.form-ui textarea {
    width: 292px;
    height: 100px;
    padding: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px
}

.page-alert-box,
.top-alert-box {
    position: fixed;
    top: 15px;
    width: 500px;
    left: 50%;
    margin-left: -250px;
    z-index: 9999
}

.alert-bar {
    border-radius: 3px;
    padding: 10px 30px 10px 35px;
    margin-bottom: 15px;
    box-shadow: 0 0 12px rgba(0, 0, 0, .3);
    background: #fff !important;
    display: none;
    position: relative
}

.alert-bar:before {
    content: "\e619";
    font-family: kf5;
    font-size: 20px;
    margin-right: 5px;
    float: left;
    margin-top: -1px;
    color: #21d376;
    position: absolute;
    left: 10px;
    top: 10px
}

.alert-bar .alert-bar-close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 16px;
    color: #999
}

.alert-bar .alert-bar-close:hover {
    color: #F43530
}

.alert-bar.alert-success {
    background: #fff;
    color: #21d376
}

.alert-bar.alert-success:before {
    color: #21d376
}

.alert-bar.alert-info {
    background: #fff;
    color: #21b1d3
}

.alert-bar.alert-info:before {
    color: #21b1d3
}

.alert-bar.alert-warning {
    background: #fff;
    color: #ffa900
}

.alert-bar.alert-warning:before {
    color: #ffa900
}

.alert-bar.alert-danger {
    background: #fff;
    color: #F43530
}

.alert-bar.alert-danger:before {
    color: #F43530
}

.alert {
    border-radius: 3px;
    padding: 10px 15px 10px 35px;
    margin-bottom: 15px;
    position: relative;
    text-align: left
}

.alert:before {
    content: "\e619";
    font-family: kf5;
    font-size: 20px;
    margin-right: 5px;
    float: left;
    margin-top: -1px;
    color: #ffa900;
    position: absolute;
    left: 10px;
    top: 10px
}

.alert a {
    color: #0096C4
}

.alert a:hover {
    color: #48b6d7
}

.alert-success {
    background: #E1F9D8
}

.alert-success:before {
    color: #21d376
}

.alert-info {
    background: #D4F7FF
}

.alert-info:before {
    color: #21b1d3
}

.alert-warning {
    background: #FFF5E8
}

.alert-warning:before {
    color: #ffa900
}

.alert-danger {
    background: #FFE7E8
}

.alert-danger:before {
    color: #F43530
}

.spinner {
    width: 30px;
    height: 30px;
    background-color: #35c5e7;
    margin: 30px auto 20px;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out
}

@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }

    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }

    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }

    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }

    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
    }
}

#title-tooltip {
    color: #333;
    position: absolute;
    z-index: 100000;
    font-size: 12px;
    background: #EFEFEF;
    line-height: 1;
    padding: 3px 5px;
    border: 1px solid #bbb;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25)
}

.tooltipster-content {
    font-family: "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif
}

.tooltip.help {
    color: #36D5AC;
    margin-left: 4px
}

.tooltip-sm-theme {
    background: rgba(30, 49, 80, .95);
    font-size: 12px;
    color: #fff;
    border-radius: 3px;
    line-height: 1.6em;
    padding: 3px 5px
}

.tooltip-ticket-theme {
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    border: 1px solid #C8D6D9;
    border-radius: 4px;
    position: absolute;
    z-index: 999
}

.tooltip-ticket-theme .tooltipster-content {
    border-radius: 3px;
    position: relative;
    z-index: 10
}

.tooltip-ticket-theme .tooltipster-arrow span {
    height: 10px;
    width: 10px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    border: 1px solid #C8D6D9 !important;
    position: absolute;
    left: 50%;
    top: -4px;
    margin-left: -5px;
    background: #faf9f9;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.tooltip-ticket-theme .tooltipster-arrow-top span {
    bottom: -6px;
    background: #fff;
    top: auto
}

.tooltip-ticket-theme .tooltipster-arrow-border + span {
    display: none !important
}

.ticket_tip {
    width: 360px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    background: #fff;
    color: #333
}

.ticket_tip h3 {
    height: 40px;
    line-height: 40px;
    background: #faf9f9;
    font-size: 16px;
    border-bottom: 1px solid #eff4f5;
    padding: 0 15px;
    border-radius: 3px 3px 0 0
}

.ticket_tip .status {
    float: right;
    position: relative;
    top: 11px;
    margin-right: 0
}

.ticket_tip div {
    padding: 10px 15px
}

.ticket_tip h3 + div {
    border-bottom: 1px solid #eff4f5
}

.ticket_tip p {
    font-size: 13px;
    line-height: 1.6em
}

input[type=checkbox].switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    height: 28px;
    width: 54px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #eff4f5;
    border: 1px solid #e2eaec;
    border-radius: 40px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    cursor: pointer
}

input[type=checkbox].switch:after {
    content: "";
    height: 28px;
    width: 28px;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    position: absolute;
    left: 0;
    top: -1px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px)
}

input[type=checkbox].switch:checked {
    background: #21d376;
    border-color: #17c96c
}

input[type=checkbox].switch:checked:after {
    -webkit-transform: translateX(26px);
    -moz-transform: translateX(26px);
    -ms-transform: translateX(26px);
    -o-transform: translateX(26px);
    transform: translateX(26px)
}

.btn {
    /*-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;*/
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    border: 1px solid #ced6d8;
    padding: 0 15px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    color: #333;
    border-radius: 4px;
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
}

.btn:hover {
    border-color: #bac2c4;
    color: #333
}

.btn:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset
}

/*.btn.active { border-color: #21d376 }*/
.btn.disabled {
    background: #f5f5f5 !important;
    border-color: #e1e1e1 !important;
    color: #999 !important;
    cursor: not-allowed !important
}

.btn > .status {
    margin-left: 5px;
    margin-right: 0;
    color: #fff
}

.btn > span {
    /*color: #9B9B9B;*/
    color: #28a0ff;
    margin-left: 5px
}

.btn > [class^=icon-] {
    margin-right: 5px
}

.btn.fr {
    margin-left: 12px;
    margin-right: 0
}

.btn.fl {
    margin-right: 12px
}

.btn-sm {
    height: 28px;
    line-height: 26px;
    padding: 0 10px;
    font-size: 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.btn-hollow {
    background: #fff !important;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

/* add by jackjiang 20190318: 1 line */
.btn-round {
    border-radius: 20px;
}

.btn-group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.btn-group .btn {
    margin: 0;
    float: left;
    margin-left: -1px;
    position: relative;
    z-index: 0
}

.btn-group .btn:not(:first-child):not(:last-child) {
    border-radius: 0
}

.btn-group .btn:first-child {
    border-radius: 3px 0 0 3px
}

.btn-group .btn:last-child {
    border-radius: 0 3px 3px 0
}

.btn-group .btn:hover {
    z-index: 1
}

.btn-group .btn.active {
    color: #fff;
    background: #21d376;
    z-index: 2
}

.btn-group + .drop-btn-default {
    margin-left: 10px
}

.btn-green,
.btn.green {
    background: #21d376;
    border-color: #21d376;
    color: #fff
}

.btn-green:hover,
.btn.green:hover {
    border-color: #21d376;
    background: #2bdd80;
    color: #fff
}

.btn-green.btn-hollow,
.btn.green.btn-hollow {
    color: #0dbf62
}

.btn-green.btn-hollow:hover,
.btn.green.btn-hollow:hover {
    background: #21d376 !important;
    color: #fff
}

.btn-dark,
.btn.dark {
    background: #8190b5;
    border-color: #8190b5;
    color: #fff
}

.btn-dark:hover,
.btn.dark:hover {
    border-color: #8190b5;
    background: #8b9abf;
    color: #fff
}

.btn-dark.btn-hollow,
.btn.dark.btn-hollow {
    color: #7786ab
}

.btn-dark.btn-hollow:hover,
.btn.dark.btn-hollow:hover {
    background: #8190b5 !important;
    color: #fff
}

.btn-light,
.btn.light {
    background: #ffffff;
    border-color: #d9d9d9;
    color: rgba(0, 0, 0, 0.65)
}

.btn-light:hover,
.btn.light:hover {
    border-color: #d9d9d9;
    background: #dddddd;
    color: rgba(0, 0, 0, 0.65)
}

.btn-light.btn-hollow,
.btn.light.btn-hollow {
    color: #7786ab
}

.btn-light.btn-hollow:hover,
.btn.light.btn-hollow:hover {
    background: #dddddd !important;
    color: #fff
}

.btn-red,
.btn.red {
    background: #F43530;
    border-color: #F43530;
    color: #fff
}

.btn-red:hover,
.btn.red:hover {
    border-color: #F43530;
    background: #ff6369;
    color: #fff
}

.btn-red.btn-hollow,
.btn.red.btn-hollow {
    color: #F43530
    /*color: #f54f55*/
}

.btn-red.btn-hollow:hover,
.btn.red.btn-hollow:hover {
    background: #F43530 !important;
    color: #fff
}

.btn-blue,
.btn.blue {
    background: #1890ff;
    border-color: #1890ff;
    color: #fff
}

.btn-blue:hover,
.btn.blue:hover {
    border-color: #1890ff;
    background: #28a0ff;
    color: #fff
}

.btn-blue.btn-hollow,
.btn.blue.btn-hollow {
    color: #28a0ff
}

.btn-blue.btn-hollow:hover,
.btn.blue.btn-hollow:hover {
    background: #1890ff !important;
    color: #fff
}

.btn.blue.btn-hollow:hover span {
    color: #fff

}

/* add by jackjiang 20190315：为群成员列表中的确认按钮增加了btn-blue-light样式（即浅蓝色调，表示禁用状态） */
.btn-blue-light {
    background: #98c9f7;
    border-color: #98c9f7;
    color: #fff
}

.btn-blue-light:hover {
    border-color: #98c9f7;
    background: #a8c9f7;
    color: #fff
}

.btn-blue-light.btn-hollow {
    color: #a8c9f7
}

.btn-blue-light.btn-hollow:hover {
    background: #98c9f7 !important;
    color: #fff
}

.mask {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 13;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    display: none
}

.mask > .mask-inner {
    /*background: rgba(0, 0, 0, .65);*/
    background: rgba(0, 0, 0, .45);
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    opacity: 0
}

.mask.show {
    display: block
}

.mask.show > .mask-inner {
    opacity: 1
}

.editor-image-upload {
    width: 640px
}

.editor-image-upload:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.editor-image-upload li.uploader-drop-btn {
    margin-right: 0 !important;
    width: 144px;
    height: 114px
}

.editor-image-upload li {
    float: left;
    width: 140px;
    height: 110px;
    border-radius: 3px;
    overflow: hidden;
    text-align: center;
    background: #eff4f5;
    margin-left: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    border: 2px solid transparent;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    position: relative
}

.editor-image-upload li:hover {
    border-color: #21d376
}

.editor-image-upload li:not(.uploader-drop-btn):after {
    content: "";
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
    background: #fff;
    border-radius: 100%;
    position: absolute;
    right: 5px;
    top: 5px;
    font-family: kf5
}

.editor-image-upload li.active {
    border-color: #21d376
}

.editor-image-upload li.active:after {
    content: "\e6bd";
    background: #21d376;
    color: #fff
}

.editor-image-upload li img {
    display: block;
    width: 100%
}

.lightbox-img-close {
    position: absolute;
    font-size: 26px;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    background: #eff4f5;
    text-align: center;
    line-height: 50px;
    right: 50px;
    top: 30px
}

.lightbox-img-close i {
    line-height: 50px
}

.lightbox-img-close:hover {
    background: #F43530;
    color: #fff
}

.lightbox-img-box {
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    overflow: auto;
    max-width: 80%;
    max-height: 80%;
    position: relative;
    color: #333;
    padding: 10px;
    text-align: center
}

.lightbox-img-box p {
    margin-bottom: 5px
}

.lightbox-img-box img {
    display: block
}

.lightbox {
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.1);
    background: #fff;
    max-width: 850px;
    min-width: 400px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 12px;
    /*-webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15);*/
}

.lightbox:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, .6);
    position: relative
}

.lightbox header {
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #e8e8e8;
    background: #faf9f9;
    border-radius: 10px 10px 0 0;
    padding: 0 20px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
}

.lightbox header:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.lightbox header h4 {
    float: left;
    font-weight: bold !important;
}

.lightbox header .close {
    color: #333;
    float: right;
    font-size: 18px
}

.lightbox header .close:hover {
    color: #F43530
}

.lightbox .captcha-code {
    position: relative;
    margin-bottom: 15px
}

.lightbox .captcha-code .btn {
    position: absolute;
    top: 4px;
    right: -5px
}

.lightbox .scrollbar-box {
    max-height: 400px
}

.lightbox .scrollbar-box .footer:after {
    display: none
}

.lightbox .scrollbar-box .footer {
    padding-bottom: 20px
}

.lightbox .body {
    padding: 20px 20px 5px 20px;
    max-height: 480px;
    /*max-height: 580px;*/
    overflow: auto
}

.lightbox p {
    line-height: 1.8em;
    margin-bottom: 5px
}

.lightbox p:last-child {
    margin-bottom: 0
}

.lightbox .alert {
    margin-bottom: 5px
}

.lightbox .footer {
    border-top: 1px solid #e8e8e8;
    padding: 10px 20px;
    margin-bottom: 0;
    background: rgba(255, 255, 255, .97);
    border-radius: 0 0 10px 10px
}

.lightbox .footer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.lightbox form > ul > li {
    margin-bottom: 15px;
    position: relative
}

.lightbox form > ul > li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.lightbox form .drop-btn-default {
    margin-bottom: 5px
}

.lightbox form .left {
    width: 65px;
    padding-right: 5px;
    float: left;
    position: absolute;
    left: 0
}

.lightbox form .right {
    float: left;
    max-width: 375px;
    padding-left: 5px;
    padding-left: 80px
}

.lightbox form .right label {
    margin-right: 15px
}

.lightbox form label {
    float: left;
    padding-top: 5px
}

.lightbox form input[type=text],
.lightbox form input[type=password] {
    height: 32px;
    width: 260px;
    padding: 0 10px;
    font-size: 12px
}

.lightbox form textarea {
    width: 292px;
    height: 100px;
    padding: 8px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px
}

.lightbox .ticket-reply {
    height: 450px;
    position: relative
}

.lightbox .ticket-reply:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.lightbox .ticket-reply .form-group {
    padding: 0 10px
}

.lightbox .ticket-reply .sidebar {
    position: absolute;
    left: 0;
    border-right: 1px solid #e2eaec;
    height: 100%;
    width: 290px;
    z-index: 13
}

.lightbox .ticket-reply input[type=text],
.lightbox .ticket-reply textarea {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.lightbox .ticket-reply .scrollbar-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 20px;
    max-height: none
}

.lightbox .ticket-reply .main {
    width: 520px;
    padding: 20px 20px 10px 310px;
    position: relative
}

.lightbox .ticket-reply .radio-box {
    margin-bottom: 10px
}

.lightbox .ticket-reply .bottom-bar {
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 290px;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 12
}

.lightbox .ticket-reply .bottom-bar > .inner {
    padding: 10px 20px;
    border-top: 1px solid #e2eaec;
    background: #faf9f9
}

.lightbox .ticket-reply .bottom-bar > .inner:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.lightbox table.ticket {
    width: 400px
}

.lightbox table.ticket td {
    padding: 10px 0;
    font-size: 14px
}

.lightbox .label_item {
    float: left;
    padding: 5px 15px 5px 0;
    width: 22%;
    line-height: 20px
}

.lightbox .label_item input[type=checkbox] {
    position: relative;
    top: 1px;
    margin-right: 2px
}

.lightbox .weixin-qr {
    height: 290px;
    width: 290px;
    display: block;
    margin: 0 auto
}

.lightbox .weixin-qr + h3 {
    text-align: center;
    font-size: 16px;
    font-weight: 700
}

.lightbox .shortcut-key dt {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
    margin-bottom: 20px
}

.lightbox .shortcut-key dd {
    margin-bottom: 20px;
    white-space: nowrap
}

.lightbox .shortcut-key dd:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.lightbox .shortcut-key .key {
    float: left;
    margin-right: 20px
}

.lightbox .shortcut-key .key > span {
    padding: 5px 10px;
    border: 1px solid #e2eaec;
    border-radius: 3px;
    background: #fff;
    display: inline-block;
    min-width: 33px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.lightbox .shortcut-key .key > i {
    margin: 0 10px;
    color: #999
}

.lightbox .tag-out-box {
    min-width: 250px
}

.lightbox .lightbox-alert {
    position: absolute;
    top: 0;
    background: rgba(252, 106, 106, .9);
    color: #fff;
    padding: 5px 10px;
    width: 80%;
    left: 10%;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.lightbox .radio-tab-item {
    clear: both;
    padding-left: 100px;
    padding-top: 12px;
    font-size: 12px
}

.lightbox .link {
    color: #0096C4
}

.lightbox .link:hover {
    color: #48b6d7
}

.lightbox .date-choice > span {
    margin: 0 3px
}

.lightbox .date-choice > input {
    width: 100px !important;
    font-size: 13px !important
}

.lightbox .drop-btn-default input[type=text] {
    height: 28px;
    padding: 0 8px
}

.merge-user {
    position: relative;
    width: 400px;
    margin: 0 auto;
    margin-bottom: 20px
}

.merge-user:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.merge-user:before {
    content: "\e68e";
    font-family: kf5;
    font-size: 23px;
    height: 34px;
    width: 34px;
    background: #21d376;
    position: absolute;
    left: 50%;
    top: 12px;
    margin-left: -15px;
    color: #fff;
    line-height: 34px;
    text-align: center;
    border-radius: 100%
}

.merge-user li {
    text-align: center;
    width: 140px
}

.merge-user li > img {
    height: 55px;
    width: 55px;
    border-radius: 100%;
    display: inline-block;
    margin-bottom: 0
}

.merge-user li > h4 + p {
    font-size: 12px;
    color: #999
}

.merge-input {
    text-align: center;
    margin-bottom: 20px
}

.merge-input .ma tch_list {
    max-width: 382px;
    min-width: 0;
    left: 34px;
    text-align: left
}

.merge-input input {
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    width: 360px
}

.merge-alert {
    width: 360px;
    background: #FFF5E8;
    font-size: 13px;
    margin-bottom: 5px
}

.select-search-box {
    position: relative;
    background: #fff;
    outline: 0;
    border: 1px solid #ced6d8;
    border-radius: 3px
}

.select-search-box:hover {
    border-color: #bac2c4
}

.select-search-box.focus {
    border-color: #21d376
}

.select-search-box .drop-box {
    white-space: normal;
    position: static;
    border: 0;
    border-radius: 0
}

.select-search-box .drop-box li > a {
    white-space: normal;
    padding-left: 27px
}

.select-search-box .selected:before {
    position: absolute;
    left: 10px;
    top: 5px;
    content: "\e6bd";
    font-family: kf5;
    color: #21d376
}

.select-search-choice {
    padding: 3px 5px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.select-search-choice input {
    height: 24px;
    border: 0;
    box-shadow: none !important;
    outline: 0;
    display: block;
    width: 100%;
    -webkit-appearance: none;
    min-width: 80px;
    font-size: 13px;
    padding: 0;
    background: transparent
}

.select-search-choice .input {
    max-width: 100%;
    min-width: 80px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.select-search-item {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid #e2eaec;
    background: #F6F6F6;
    border-radius: 3px;
    padding: 2px 5px;
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    line-height: 1.4em;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: default
}

.select-search-item:hover {
    border-color: #ced6d8;
    color: #000
}

.select-search-item .close {
    position: absolute;
    font-size: 12px;
    color: #666;
    left: 3px;
    top: 50%;
    margin-top: -8px;
    height: 16px;
    width: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 100%
}

.select-search-item .close:hover {
    color: #fff;
    background: #F43530
}

.drop-btn-default {
    position: relative;
    background: #fff;
    outline: 0
}

.drop-btn-default.fr {
    margin-left: 12px
}

.drop-btn-default.disabled {
    background: #f5f5f5;
    cursor: default
}

.drop-btn-default.disabled .drop-btn {
    color: #999;
    border-color: #ced6d8;
    overflow: hidden
}

.drop-btn-default.disabled .drop-btn:after {
    border-top-color: #999
}

.drop-btn-default.disabled .drop-btn.focus {
    box-shadow: none
}

.drop-btn-default .sub-menu {
    display: none;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.drop-btn-default .back {
    border-bottom: 1px solid #eff4f5;
    padding: 8px
}

.drop-btn-default .back a {
    font-size: 12px !important;
    color: #0096C4
}

.drop-btn-default .back a:hover {
    color: #48b6d7
}

.drop-btn-default .back a:before {
    content: "\e6be";
    font-family: kf5
}

.drop-btn-default .drop-btn {
    overflow: hidden
}

.drop-btn-default.select > a:after {
    content: "";
    height: 0 !important;
    width: 0 !important;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #333;
    right: 10px;
    top: 13px
}

.drop-btn-default.select > a:hover:after {
    border-left-color: transparent
}

.drop-btn-default.select > a {
    padding-left: 10px !important;
    padding-right: 25px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 14px
}

.drop-btn-default.has-error .drop-btn {
    border-color: #F43530 !important
}

.drop-btn-default.has-change .drop-btn {
    border-color: #21d376 !important
}

.drop-btn-default > a {
    color: #333;
    height: 28px;
    line-height: 26px;
    border: 1px solid #ced6d8;
    font-size: 12px;
    padding: 0 36px 0 10px;
    position: relative
}

.drop-btn-default > a:hover {
    border-color: #bac2c4
}

.drop-btn-default > a:hover:after {
    border-left-color: #ced6d8
}

.drop-btn-default > a:after {
    content: "\e6c2";
    font-family: kf5;
    position: absolute;
    right: 0;
    top: 0;
    height: 26px;
    line-height: 26px;
    width: 26px;
    border-left: 1px solid #e2eaec;
    display: block;
    color: #a4a8b1;
    text-align: center
}

.drop-btn-default > a.focus {
    border-color: #21d376;
    box-shadow: 0 0 3px rgba(33, 211, 118, .35)
}

.drop-btn-default > .dropup:after {
    content: "\e6c1"
}

.drop-btn-default.lg > a {
    height: 34px;
    line-height: 34px;
    padding-right: 50px;
    padding-left: 10px;
    font-size: 14px
}

.drop-btn-default.lg > a:after {
    height: 33px;
    line-height: 33px;
    width: 34px
}

.drop-btn-default .drop-box {
    padding: 5px 0
}

.drop-btn-default .select-search {
    padding: 5px 10px 10px;
    border-bottom: 1px solid #e2eaec;
    line-height: 1
}

.drop-btn-default .select-search input {
    height: 26px;
    padding: 0 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%
}

.drop-btn-default ul {
    border-bottom: 1px solid #e2eaec;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.drop-btn-default ul:last-of-type {
    border-bottom: 0
}

.drop-btn-default .group-title {
    font-weight: 700;
    padding-left: 10px
}

.drop-btn-default li {
    line-height: 1.5em
}

.drop-btn-default li > a {
    position: relative;
    font-size: 14px;
    padding: 5px 10px;
    display: block
}

.drop-btn-default li > a:hover {
    background: #eff4f5
}

.drop-btn {
    display: block;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.drop-btn:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset
}

.drop-box {
    display: none;
    position: absolute;
    left: 0;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
    max-width: 280px;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-height: 250px;
    padding: 0 0 10px;
    border: 1px solid #ced6d8;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    overflow-y: hidden;
    overflow-x: hidden !important;
    z-index: 9999
}

.drop-box:hover {
    overflow-y: auto
}

.drop-box.show-subMenu .sup-menu {
    display: none
}

.drop-box.show-subMenu .sub-menu {
    display: block
}

.drop-box .sup-menu li a {
    padding-right: 20px
}

.drop-box .sup-menu li a:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -4px;
    border-left: 4px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent
}

.drop-box .sub-menu {
    word-wrap: normal !important
}

.drop-box li > a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden
}

.drop-box .active {
    background: #eff4f5
}

.drop-box .active:hover a {
    background: #e5eaeb
}

.drop-box label {
    float: none !important;
    margin: 0 !important
}

.drop-box input[type=checkbox] {
    margin-right: 5px
}

.drop-box.show {
    display: block
}

.dropup + .drop-box {
    bottom: 105%;
    top: auto
}

.dropup.drop-box:after {
    display: none
}

.from-bottom {
    bottom: 105%;
    top: auto
}

.dropdown + .drop-box {
    bottom: auto;
    top: 105%
}

.drop-btn-default.fr .drop-box {
    right: 0;
    left: auto
}

.normal-list {
    border-bottom: 1px solid #e2eaec;
    margin-left: 20px;
    margin-bottom: 10px;
    padding-bottom: 15px
}

.normal-list:last-child {
    border-bottom: 0
}

.normal-list > li {
    position: relative;
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.4em;
    padding-right: 15px;
    font-size: 13px;
    min-height: 28px
}

.normal-list > li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.normal-list > li a.fr {
    color: #0096C4
}

.normal-list > li a.fr:hover {
    color: #48b6d7
}

.normal-list input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 28px;
    border-radius: 3px;
    border: 1px solid transparent;
    padding: 0 5px;
    width: 100%;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.normal-list input[type=text]:hover {
    border-color: #e2eaec
}

.normal-list input[type=text]:focus {
    border-color: #21d376
}

.normal-list .field,
.normal-list .field_editable {
    position: relative;
    top: -5px
}

.normal-list .select-search input[type=text] {
    border-color: #e2eaec
}

.normal-list .select-search input[type=text]:hover {
    border-color: #ced6d8
}

.normal-list .select-search input[type=text]:focus {
    border-color: #21d376
}

.normal-list > li {
    padding-left: 75px;
    padding-top: 5px;
    min-height: 18px
}

.normal-list > li:last-child {
    margin-bottom: 0
}

.normal-list > li .title {
    width: 65px;
    position: absolute;
    left: 0
}

.normal-list a {
    color: #0096C4
}

.normal-list a:hover {
    color: #48b6d7
}

.normal-list .option-li {
    padding-left: 0
}

.normal-list .option-li a {
    color: #333 !important
}

.normal-list .drop-btn-default a {
    color: #333 !important
}

.normal-list {
    margin-bottom: 10px;
    padding-bottom: 10px
}

.normal-list .field_static {
    padding: 5px;
    position: relative;
    top: -5px
}

.normal-list textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
    width: 100%;
    font-size: 13px;
    overflow: hidden;
    border-color: #fff;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.normal-list textarea:hover {
    border-color: #e2eaec
}

.normal-list textarea:focus {
    border-color: #21d376
}

.bullet-list li {
    position: relative;
    font-size: 14px;
    margin-bottom: 8px;
    padding-left: 11px;
    line-height: 1.4em;
    padding-right: 12px
}

.bullet-list li:before {
    content: "";
    height: 4px;
    width: 4px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 7px;
    background: #41c6ec
}

.bullet-list li > a {
    color: #333
}

.bullet-list li > a:hover {
    color: #0d9dbf
}

.group-label {
    margin-left: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2eaec;
    margin-bottom: 10px
}

.group-label:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.group-label > span {
    float: left;
    height: 24px;
    line-height: 24px;
    border-radius: 40px;
    padding: 0 8px;
    background: #FFF5E8;
    font-size: 12px;
    margin: 3px 6px 3px 0
}

.group-label > a {
    color: #0096C4;
    float: left;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    margin: 3px 6px 3px 0
}

.group-label > a:hover {
    color: #48b6d7
}

.table .group-label > a {
    float: left;
    height: 24px;
    line-height: 24px;
    border-radius: 40px;
    padding: 0 8px;
    background: #FFF5E8;
    font-size: 12px;
    margin: 1px;
    border: 1px solid #fff;
    color: #374051 !important
}

.table .group-label > a:hover {
    color: #21b1d3 !important
}

.time-line-list li {
    position: relative;
    padding-bottom: 12px;
    padding-left: 12px;
    line-height: 1.4em;
    color: #333;
    font-size: 13px;
    padding-right: 12px;
    background: transparent
}

.time-line-list li a {
    color: #0096C4;
    margin: 0 2px
}

.time-line-list li a:hover {
    color: #48b6d7
}

.time-line-list li a:first-child {
    margin-left: 0
}

.time-line-list li span {
    margin: 0 2px
}

.time-line-list li time {
    font-size: 12px;
    display: block;
    color: #9B9B9B;
    margin-top: 3px
}

.time-line-list li:before {
    content: "";
    position: absolute;
    left: -2px;
    top: 5px;
    height: 7px;
    width: 7px;
    background: #fff;
    border-radius: 100%;
    border-width: 1px;
    border-style: solid;
    z-index: 2
}

.time-line-list li:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 1px;
    height: 100%;
    z-index: 1
}

.time-line-list li.blue:after {
    background: #21b1d3
}

.time-line-list li.blue:before {
    border-color: #21b1d3
}

.time-line-list li.green:after {
    background: #21d376
}

.time-line-list li.green:before {
    border-color: #21d376
}

.time-line-list li.red:after {
    background: #F43530
}

.time-line-list li.red:before {
    border-color: #F43530
}

.time-line-list li.orange:after {
    background: #ffa900
}

.time-line-list li.orange:before {
    border-color: #ffa900
}

.time-line-list li.status0:after {
    background: #ffbe26
}

.time-line-list li.status0:before {
    border-color: #ffbe26
}

.time-line-list li.status1:after {
    background: #fc7c79
}

.time-line-list li.status1:before {
    border-color: #fc7c79
}

.time-line-list li.status2:after {
    background: #67c0ff
}

.time-line-list li.status2:before {
    border-color: #67c0ff
}

.time-line-list li.status3:after {
    background: #5dca91
}

.time-line-list li.status3:before {
    border-color: #5dca91
}

.time-line-list li.status4:after {
    background: #696969
}

.time-line-list li.status4:before {
    border-color: #696969
}

.nav-list a {
    color: #333;
    display: block;
    height: 35px;
    line-height: 35px;
    border-left: 3px solid #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 17px;
    padding-right: 45px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    position: relative
}

.nav-list a .num {
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    color: #fff;
    min-width: 22px;
    padding: 0 3px;
    text-align: center;
    border-radius: 40px;
    background: #BAC3C5;
    float: right;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -8px
}

.nav-list a:hover {
    background: #eff4f5;
    border-left-color: #eff4f5
}

.nav-list .active a {
    background: #eff4f5;
    border-left-color: #21d376
}

.nav-list .active a .num {
    background: #F43530
}

.nav-list li {
    position: relative
}

.nav-list .done:after {
    content: "\e6bd";
    font-family: kf5;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 100%;
    background: #21d376;
    color: #fff;
    position: absolute;
    right: 18px;
    top: 50%;
    margin-top: -11px
}

.nav-list .has-sublist > a:after {
    content: "";
    display: inline-block;
    border-top: 3px solid transparent;
    border-left: 4px solid #444;
    border-bottom: 3px solid transparent;
    margin-left: 8px;
    position: relative;
    top: -2px;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.nav-list .has-sublist .sub-list {
    display: none
}

.nav-list .has-sublist .sub-list a {
    color: #0096C4;
    padding-left: 40px
}

.nav-list .has-sublist .sub-list a:hover {
    color: #48b6d7
}

.nav-list .has-sublist .sub-list a:before {
    content: "";
    height: 4px;
    width: 4px;
    border-radius: 100%;
    background: #a8a6a6;
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 30px
}

.nav-list .has-sublist.open > a:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

.nav-list .has-sublist.open .sub-list {
    display: block
}

#header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    background: #3d3d3d;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, .05) inset;
    min-width: 1100px
}

#header:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

#logo {
    float: left;
    box-shadow: 1px 0 6px rgba(0, 0, 0, .06);
    margin-right: 20px
}

#logo > a {
    display: block;
    vertical-align: middle;
    height: 50px;
    line-height: 50px;
    width: 55px;
    text-align: center;
    text-indent: -9999px;
    background-color: #464646;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

#logo > a:hover {
    background-color: #565656
}

#logo a span {
    display: inline-block;
    width: 201px;
    height: 50px;
    /*background-image: url(../images/main_logo.png);
	background-image: image-set(url(../images/main_logo.png) 1x,url(../images/main_logo@2x.png) 2x);
	background-image: -webkit-image-set(url(../images/main_logo.png) 1x,url(../images/main_logo@2x.png) 2x);
	background-image: -moz-image-set(url(../images/main_logo.png) 1x,url(../images/main_logo@2x.png) 2x);
	background-image: -o-image-set(url(../images/main_logo.png) 1x,url(../images/main_logo@2x.png) 2x);
	background-image: -ms-image-set(url(../images/main_logo.png) 1x,url(../images/main_logo@2x.png) 2x);*/

    /* 上方的代码，在safari chrome 360等等浏览器都能工作好，但唯独在firefox下不行。所以换成下面的代码来实现像mac这种视网膜屏下的高清显示了 */

    background: url(../images/main_logo@2x.png);
    background-size: 201px 50px;
    -moz-background-size: 201px 50px;
    -ms-background-size: 201px 50px;
    -o-background-size: 201px 50px;
    -webkit-background-size: 201px 50px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/main_logo@2x.png', sizingMethod=scale);
    /* IE7，8 */
}

.header-flex-box {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: end;
    -moz-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.header-flex-box .header-tag {
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1
}

.header-flex-box .header-notification {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding-left: 20px
}

.header-flex-box .add-tag {
    -webkit-box-flex: none;
    -moz-box-flex: none;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    max-width: 60px
}

.header-tag-list {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.header-tag-list > li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 130px
}

.header-tag-list > li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.header-tag-list > li {
    background: rgba(255, 255, 255, .3);
    position: relative;
    margin-right: 9px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.header-tag-list .ticket-tab a:before {
    content: "\e68b";
    font-family: kf5;
    float: left;
    margin-right: 2px;
    font-size: 15px
}

.header-tag-list .user-tab a:before {
    content: "\e6b2";
    font-family: kf5;
    float: left;
    margin-right: 2px;
    font-size: 15px
}

.header-tag-list .organization-tab a:before {
    content: "\e617";
    font-family: kf5;
    float: left;
    margin-right: 2px;
    font-size: 15px
}

.header-tag-list .search-tab a:before {
    content: "\e037";
    font-family: kf5;
    float: left;
    margin-right: 2px;
    font-size: 13px
}

.header-tag-list li:after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 32px solid rgba(255, 255, 255, .3);
    border-right: 18px solid transparent;
    position: absolute;
    right: -18px;
    top: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.header-tag-list li > a {
    display: block;
    height: 32px;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 32px;
    padding: 0 0 0 6px;
    font-size: 12px;
    color: #fff
}

.header-tag-list .icon-close {
    display: inline-block;
    height: 18px;
    width: 18px;
    border-radius: 100%;
    text-align: center;
    line-height: 18px;
    color: #999;
    position: absolute;
    top: 7px;
    right: 0;
    opacity: 0;
    cursor: default;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.header-tag-list .icon-close:hover {
    color: #fff;
    background: #F43530
}

.header-tag-list li:hover {
    background: rgba(255, 255, 255, .4);
    padding-right: 16px
}

.header-tag-list li:hover:after {
    border-bottom-color: rgba(255, 255, 255, .4)
}

.header-tag-list li:hover .icon-close {
    opacity: 1
}

.header-tag-list .active {
    background: #fff
}

.header-tag-list .active:after {
    border-bottom-color: #fff
}

.header-tag-list .active a {
    color: #333
}

.header-tag-list .active:hover {
    background: #fff
}

.header-tag-list .active:hover:after {
    border-bottom-color: #fff
}

.header-tag-list .more-tags {
    background: none !important;
    margin: 0;
    padding: 0;
    max-width: 32px
}

.header-tag-list .more-tags:after {
    display: none
}

.header-tag-list .more-tags > a {
    position: relative;
    left: 6px;
    top: 4px;
    display: inline-block;
    border-top: 7px solid rgba(255, 255, 255, .8);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    height: 0;
    width: 0;
    overflow: auto;
    padding: 0;
    margin: 0;
    cursor: default
}

.header-tag-list .more-tags:hover > a {
    border-top-color: #fff
}

.more-tags-list {
    min-width: 90px
}

.header-notification {
    float: right
}

.header-search {
    float: left;
    margin-right: 15px;
    position: relative;
    top: 10px
}

.header-search .icon-search {
    color: #fff;
    font-size: 16px;
    position: absolute;
    left: 8px;
    top: 6px
}

.header-search input[type=search] {
    height: 28px;
    width: 105px;
    background: rgba(255, 255, 255, .4);
    border-radius: 40px;
    padding-left: 28px;
    border: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    padding-right: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.header-search input[type=search]:hover {
    background: rgba(255, 255, 255, .5)
}

.header-search input[type=search]:focus {
    background: #fff;
    width: 145px
}

.header-search input[type=search]:focus + i {
    color: #999
}

.header-search input[type=submit] {
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    height: 0;
    width: 0;
    visibility: hidden
}

.header-search .search-menu {
    position: absolute;
    left: 0;
    top: 31px;
    background: #fff;
    padding: 10px 0;
    width: 170px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4)
}

.header-search .search-menu a {
    display: block;
    padding: 6px 15px;
    line-height: 1.4em
}

.header-search .search-menu a:hover {
    background: #eff4f5
}

.header-search .search-menu .active {
    background: #eff4f5
}

.notification-menu {
    float: left;
    padding: 0 15px;
    height: 50px;
    line-height: 50px;
    border-left: 1px solid rgba(0, 0, 0, .12);
    border-right: 1px solid rgba(0, 0, 0, .12)
}

.notification-menu:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.notification-menu > li:first-child {
    margin-left: 0
}

.notification-menu > li.active > a > i {
    border-radius: 100%;
    border: 1px solid #fff;
    background: #0888ff
}

.notification-menu > li.busyline > a > i {
    background: #F43530;
    border-radius: 100%;
    border: 1px solid #fff
}

.notification-menu > li.leaveline > a > i {
    background: #F5A623;
    border-radius: 100%;
    border: 1px solid #fff
}

.notification-menu > li.talk > a > i:before {
    content: "\e6cc"
}

.notification-menu > li {
    float: left;
    margin-left: 18px;
    position: relative;
    height: 50px;
    line-height: 50px
}

.notification-menu > li > a {
    color: #fff;
    font-size: 20px
}

.notification-menu > li > a > i {
    text-shadow: 0 0 6px rgba(0, 0, 0, .06);
    padding: 5px;
    border: 1px solid transparent
}

.notification-menu > li > a > span {
    position: absolute;
    height: 12px;
    width: 12px;
    border-radius: 100%;
    background: #F43530;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    text-align: center;
    right: 0;
    top: 12px
}

.new-msg {
    animation: new-msg-key 1s;
    -moz-animation: new-msg-key 1s;
    -webkit-animation: new-msg-key 1s;
    -o-animation: new-msg-key 1s;
    -webkit-animation-iteration-count: 3;
    -moz-animation-iteration-count: 3;
    -o-animation-iteration-count: 3;
    animation-iteration-count: 3
}

@keyframes new-msg-key {
    0% {
        opacity: 1
    }

    25% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    75% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.header-avatar {
    float: left;
    position: relative
}

.header-avatar.active > a {
    background: rgba(0, 0, 0, .05);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2) inset
}

.header-avatar > a {
    color: #fff;
    display: block;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    padding-right: 25px;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
    position: relative;
    border-radius: 0
}

.header-avatar > a:hover {
    background: rgba(0, 0, 0, .02)
}

.header-avatar .pic {
    float: left;
    position: relative;
    top: 7px;
    height: 35px;
    width: 35px;
    border-radius: 100%;
    box-shadow: 0 0 5px rgba(255, 255, 255, .5);
    margin-right: 10px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.header-avatar .pic > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.header-avatar .pic:after {
    display: none;
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background: #a4a8b1;
    border-radius: 100%;
    border: 1px solid #fff;
    right: -2px;
    bottom: 0
}

.header-avatar > a:hover .pic {
    box-shadow: 0 0 6px rgba(255, 255, 255, .8)
}

.header-avatar .icon-expand-more {
    font-size: 12px;
    position: relative;
    top: 1px;
    margin-left: 2px
}

.header-avatar .header-avatar-dropdown {
    background: #fff;
    position: absolute;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ccd0d9;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 3px;
    top: 55px;
    left: -20px;
    overflow: initial;
    width: 110%;
    max-height: none
}

.header-avatar .header-avatar-dropdown:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #fff;
    left: 50%;
    margin-left: -4px;
    top: -8px
}

.header-avatar .header-avatar-dropdown ul {
    border-bottom: 1px solid #eff4f5;
    padding: 5px 0
}

.header-avatar .header-avatar-dropdown ul:last-child {
    border-bottom: 0
}

.header-avatar .header-avatar-dropdown .hight-light > a {
    background: #FFF5E8;
    color: #F43530
}

.header-avatar .header-avatar-dropdown li > a {
    display: block;
    padding: 5px 10px;
    font-size: 14px
}

.header-avatar .header-avatar-dropdown li > a:hover {
    background: #21d376;
    color: #fff
}

.header-avatar .header-avatar-dropdown .online:before,
.header-avatar .header-avatar-dropdown .offline:before,
.header-avatar .header-avatar-dropdown .busyline:before,
.header-avatar .header-avatar-dropdown .leaveline:before {
    content: "";
    height: 8px;
    width: 8px;
    border-radius: 100%;
    display: inline-block;
    margin-right: 4px;
    border: 1px solid #fff
}

.header-avatar .header-avatar-dropdown .online.off:before,
.header-avatar .header-avatar-dropdown .offline {
    background: #b8bcc5
}

.header-avatar .header-avatar-dropdown .online.on:before,
.header-avatar .header-avatar-dropdown .online:before {
    background: #21d376
}

.header-avatar .header-avatar-dropdown .busyline:before {
    background: #F43530
}

.header-avatar .header-avatar-dropdown .leaveline:before {
    background: #f5a623
}

.header-avatar.header-avatar.online .pic:after {
    background: #21d376
}

.cbutton::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none
}

.cbutton--effect-jagoda::before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    content: '';
    opacity: 0;
    pointer-events: none
}

.cbutton--effect-jagoda::after {
    margin: -20px 0 0 -20px;
    width: 40px;
    height: 40px
}

.cbutton--effect-jagoda::before,
.cbutton--effect-jagoda::after {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4)
}

.cbutton--effect-jagoda:hover::before,
.cbutton--effect-jagoda:hover::after {
    -webkit-animation-name: anim-effect-jagoda-2, anim-effect-jagoda-1;
    animation-name: anim-effect-jagoda-2, anim-effect-jagoda-1;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-iteration-count: 5;
    animation-iteration-count: 5;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.cbutton--effect-jagoda:hover::after {
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

@-webkit-keyframes anim-effect-jagoda-1 {

    0%,
    100% {
        opacity: 0
    }

    40%,
    60% {
        opacity: 1
    }
}

@keyframes anim-effect-jagoda-1 {

    0%,
    100% {
        opacity: 0
    }

    40%,
    60% {
        opacity: 1
    }
}

@-webkit-keyframes anim-effect-jagoda-2 {
    0% {
        -webkit-transform: scale3d(0.5, .5, 1);
        transform: scale3d(0.5, .5, 1)
    }

    100% {
        -webkit-transform: scale3d(1.4, 1.4, 1);
        transform: scale3d(1.4, 1.4, 1)
    }
}

@keyframes anim-effect-jagoda-2 {
    0% {
        -webkit-transform: scale3d(0.5, .5, 1);
        transform: scale3d(0.5, .5, 1)
    }

    100% {
        -webkit-transform: scale3d(1.4, 1.4, 1);
        transform: scale3d(1.4, 1.4, 1)
    }
}

.container {
    position: relative;
    z-index: 4
}

#page-nav {
    position: fixed;
    z-index: 99;
    width: 55px;
    left: 0;
    top: 0;
    height: 100%;
    background: #33425b
}

#page-nav .icon-lifebuoy {
    font-size: 20px
}

#page-nav .icon-search {
    font-size: 22px
}

#page-nav .top {
    padding-top: 50px
}

#page-nav .bottom {
    position: absolute;
    width: 100%;
    bottom: 0
}

#page-nav li {
    position: relative
}

#page-nav li > a {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #7786ab;
    font-size: 24px;
    text-align: center
}

#page-nav li > a:hover {
    background: #192948;
    color: #fff
}

#page-nav .active > a {
    background: #192948;
    color: #fff
}

#page-nav li > span {
    display: none;
    position: absolute;
    left: 70px;
    top: 50%;
    margin-top: -18px;
    height: 36px;
    line-height: 36px;
    background: rgba(30, 49, 80, .95);
    padding: 0 15px;
    border-radius: 3px;
    color: #fff;
    white-space: nowrap
}

#page-nav li > span:before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    margin-top: -5px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-right: 5px solid rgba(30, 49, 80, .95);
    border-bottom: 4px solid transparent
}

#page-nav li:hover > span {
    display: block
}

#page-nav .icon-textsms {
    font-size: 22px
}

#panel {
    padding-left: 55px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#panel.no-sidebar .panel-main {
    padding-left: 0
}

.panel-title {
    position: fixed;
    top: 50px;
    z-index: 98;
    height: 50px;
    line-height: 50px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05)
}

.panel-title .date-choice {
    margin-top: -2px
}

.panel-title > .sidebar {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    width: 300px
}

.panel-title > .sidebar > h2 {
    padding-right: 20px;
    font-size: 16px
}

.panel-title > .sidebar + .main {
    padding-left: 325px
}

.panel-title > .main {
    padding-right: 85px;
    padding-left: 20px
}

.panel-title > .main .switch {
    margin-top: 14px
}

.panel-title > .main h2 {
    font-size: 16px;
    float: left
}

.panel-title > .main .btn {
    margin-top: 11px
}

.panel-title > .main .btn-sm,
.panel-title > .main .drop-btn-default {
    margin-top: 10px
}

#panel-sidebar {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fbfcfd;
    width: 300px;
    border-right: 1px solid #e2eaec;
    position: fixed;
    height: 100%;
    z-index: 4;
    left: 55px;
    padding-top: 100px
}

#panel-sidebar .panel-title {
    width: 300px;
    border-right: 1px solid #e2eaec
}

#panel-sidebar .drop-box {
    white-space: normal;
    max-width: 100%
}

#panel-sidebar .drop-box li > a {
    white-space: normal
}

#panel-sidebar .indent-box {
    margin-bottom: 20px
}

#panel-sidebar .indent-box .new-customUser-list {
    text-align: center;
    padding-bottom: 10px
}

#panel-sidebar .indent-box .new-customUser-list i {
    font-size: 80px;
    color: #eff4f5;
    line-height: 1
}

#panel-sidebar .indent-box .new-customUser-list p {
    font-size: 12px;
    color: #9B9B9B;
    margin-bottom: 15px;
    margin-top: -5px
}

.drop-btn-default .selected {
    background: #eff4f5
}

.drop-btn-default .selected:hover {
    background: #e5eaeb
}

#panel-sidebar h3 {
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2eaec;
    padding-right: 15px;
    margin-bottom: 10px;
    margin-left: 20px
}

#panel-sidebar h3 > .fr-link {
    float: right;
    font-size: 12px;
    color: #0096C4;
    font-weight: 400;
    margin-left: 8px
}

#panel-sidebar h3 > .fr-link:hover {
    color: #48b6d7
}

#panel-sidebar h3.dropdown {
    cursor: pointer
}

#panel-sidebar h3.dropdown:after {
    content: "";
    height: 0;
    width: 0;
    border-top: 4px solid #444;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    display: inline-block;
    margin-left: 5px;
    position: relative;
    top: -2px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

#panel-sidebar h3.dropdown.close:after {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

#panel-sidebar .bullet-list,
#panel-sidebar .time-line-list {
    padding-left: 20px
}

#panel-sidebar .scrollbar-auto {
    padding-top: 20px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    position: static
}

#panel-sidebar > .scrollbar-box {
    padding-top: 20px;
    box-sizing: border-box
}

.scrollbar-box {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow-y: auto
}

.user-right-menu {
    position: fixed;
    background: #fff;
    box-shadow: -8px 0 12px rgba(0, 0, 0, .06);
    border-left: 1px solid #e2eaec;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 320px;
    padding-bottom: 106px;
    right: 0;
    top: 50px;
    bottom: 0;
    z-index: 10;
    -webkit-transform: translate3d(360px, 0, 0);
    -moz-transform: translate3d(360px, 0, 0);
    -ms-transform: translate3d(360px, 0, 0);
    -o-transform: translate3d(360px, 0, 0);
    transform: translate3d(360px, 0, 0);
    -webkit-transition: all 600ms cubic-bezier(0.215, .61, .355, 1);
    -moz-transition: all 600ms cubic-bezier(0.215, .61, .355, 1);
    -o-transition: all 600ms cubic-bezier(0.215, .61, .355, 1);
    transition: all 600ms cubic-bezier(0.215, .61, .355, 1)
}

.user-right-menu.show {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.user-right-menu-top {
    padding: 15px 20px;
    border-bottom: 1px solid #e2eaec;
    position: relative;
    min-height: 55px;
    background: #fbfcfd
}

.user-right-menu-top .quit {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 12px;
    color: #888
}

.user-right-menu-top .quit:hover {
    color: #F43530
}

.user-right-menu-top .quit:before {
    content: "\e909";
    font-family: kf5;
    display: inline-block;
    margin-right: 2px;
    font-size: 15px;
    position: relative;
    top: 2px
}

.user-right-menu-top .user-pic {
    position: absolute;
    left: 20px;
    top: 15px
}

.user-right-menu-top .user-pic img {
    height: 55px;
    width: 55px;
    border-radius: 100%
}

.user-right-menu-top .info {
    padding-left: 68px;
    padding-top: 5px
}

.user-right-menu-top .info h5 {
    font-size: 16px;
    margin-bottom: 0;
    width: 140px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.user-right-menu-top .info p {
    color: #888
}

.user-right-menu-list {
    padding: 15px 0 15px 20px;
    overflow-y: auto;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 87px;
    bottom: 105px;
    width: 100%
}

.user-right-menu-list h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px
}

.user-right-menu-list ul {
    border-bottom: 1px solid #eff4f5;
    margin-bottom: 15px;
    padding-bottom: 4px
}

.user-right-menu-list ul:last-child {
    border-bottom: 0
}

.user-right-menu-list li {
    position: relative;
    padding: 0 20px 0 15px;
    margin-bottom: 10px
}

.user-right-menu-list li:before {
    content: "";
    position: absolute;
    height: 6px;
    width: 6px;
    border-radius: 100%;
    border: 1px solid #21d376;
    left: 0;
    top: 6px
}

.user-right-menu-list li a:hover {
    color: #21b1d3
}

.user-right-menu-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fbfcfd;
    border-top: 1px solid #e2eaec
}

.user-right-menu-bottom ul {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 15px 15px 0
}

.user-right-menu-bottom ul li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    margin-bottom: 12px
}

.user-right-menu-bottom ul a {
    display: block
}

.user-right-menu-bottom ul a:before {
    content: "";
    font-family: kf5;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    background: #F2F2F2;
    display: block;
    margin: 0 auto 5px;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.user-right-menu-bottom ul .list1 a:before {
    content: "\e657";
    color: #56C691;
    font-size: 23px
}

.user-right-menu-bottom ul .list2 a:before {
    content: "\e6dc";
    color: #F2B653;
    font-size: 25px
}

.user-right-menu-bottom ul .list3 a:before {
    content: "\e90a";
    color: #7fa0ed
}

.user-right-menu-bottom ul .list4 a:before {
    content: "\e90b";
    color: #f67c8b
}

.user-right-menu-bottom ul .list1 a:hover:before {
    color: #fff;
    background: #56c691
}

.user-right-menu-bottom ul .list2 a:hover:before {
    color: #fff;
    background: #F2B653;
    font-size: 25px
}

.user-right-menu-bottom ul .list3 a:hover:before {
    color: #fff;
    background: #7fa0ed
}

.user-right-menu-bottom ul .list4 a:hover:before {
    color: #fff;
    background: #f67c8b
}

.iframe-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100vh;
    background: #fff;
    padding-top: 100px;
    margin-top: -115px;
    overflow: hidden
}

.panel-main .panel-title {
    left: 0;
    padding-left: 355px;
    padding-right: 20px
}

.panel-main .panel-title > .main {
    padding-left: 15px;
    padding-right: 0
}

.panel-main .panel-title > .main:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

#panel-sidebar + .panel-main {
    padding: 115px 0 0 300px
}

.panel-main {
    padding: 115px 0 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    position: relative;
    z-index: 3;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
    height: 100vh
}

.panel-main .row {
    padding: 0 15px
}

.panel-main .row:last-child {
    margin-bottom: 80px
}

.panel-main.open-panel-right-in {
    padding-right: 340px !important
}

.panel-main.open-panel-right-in.large {
    padding-right: 480px !important
}

#panel-right-in.show.large {
    width: 480px;
    right: -480px;
    -webkit-transform: translateX(-480px);
    -moz-transform: translateX(-480px);
    -ms-transform: translateX(-480px);
    -o-transform: translateX(-480px);
    transform: translateX(-480px)
}

#panel-right-in.show.large #app-panel-toggle:after {
    content: "\e6bf"
}

.col-nav-box {
    width: 280px;
    min-width: 250px;
    max-width: 50%;
    padding: 0 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto
}

.col-nav-box .title {
    padding: 0 10px;
    margin-bottom: 10px;
    background: #fff
}

.col-move-btn {
    min-width: 10px;
    width: 10px;
    background: #eff4f5 !important;
    cursor: move;
    text-align: center;
    position: relative;
    color: #ccc;
    font-size: 12px
}

.col-move-btn:hover {
    color: #777
}

.col-move-btn + .col {
    overflow-x: auto
}

.col-move-btn i {
    position: absolute;
    left: 50%;
    margin-left: -6px;
    top: 50%;
    margin-top: -6px
}

.tree-structure-box {
    margin-left: -12px;
    padding: 5px 0
}

.tree-structure-list2 ul:before {
    content: "";
    position: absolute;
    border-right: 1px dotted #21b1d3;
    border-left: 1px solid transparent;
    width: 21px;
    left: 4px;
    top: 14px;
    z-index: 1;
    bottom: 15px
}

.tree-structure-list2 ul:hover:before {
    border-right: 1px solid #21b1d3
}

.tree-structure-list2 li:last-child > ul:before {
    content: "";
    border-left-color: #fff
}

.tree-structure-list2 li:last-child > ul:hover:before {
    border-right: 1px solid #21b1d3
}

.tree-structure-list2 .btn {
    position: absolute;
    top: 2px;
    right: 5px;
    margin: 0;
    display: none;
    cursor: default
}

.tree-structure-list2 li {
    padding: 0 0 0 22px !important;
    border: 0 !important;
    position: relative;
    background: #fff !important
}

.tree-structure-list2 li:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 12px;
    border-top: 1px dotted #21b1d3;
    width: 18px
}

.tree-structure-list2 li:hover:after {
    border-top: 1px solid #21b1d3
}

.tree-structure-list2 li:hover > .btn {
    display: block
}

.tree-structure-list2.tree-root {
    padding-left: 0;
    overflow: auto
}

.tree-structure-list2.tree-root:hover {
    background: #fff
}

.tree-structure-list2.tree-root > li:after {
    display: none
}

.tree-structure-list2 .tree-father {
    position: relative;
    overflow: auto;
    padding-left: 34px
}

.tree-structure-list2 .tree-father:before {
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    border-left: 5px solid #333;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    position: absolute;
    left: 2px;
    top: 9px;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.tree-structure-list2 .tree-father:after {
    content: "\f114";
    font-family: kf5;
    color: #21b1d3;
    position: absolute;
    left: 14px;
    top: 50%;
    margin-top: -9px;
    font-size: 16px
}

.tree-structure-list2 .tree-father:hover {
    background: #fff;
    color: #000
}

.tree-structure-list2 .tree-father.open:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

.tree-structure-list2 .tree-father.open:after {
    content: "\f115"
}

.tree-structure-list2 .end-item {
    padding: 4px 0 4px 35px !important
}

.tree-structure-list2 .end-item:before {
    content: "";
    height: 4px;
    width: 4px;
    border-radius: 100%;
    border: 1px solid #21d376;
    display: inline-block;
    position: absolute;
    left: 24px;
    top: 50%;
    margin-top: -4px
}

.tree-structure-app-box {
    font-size: 13px
}

.tree-structure-app-box:hover {
    overflow: auto !important
}

.tree-structure-app-box li {
    padding: 0 !important;
    border-bottom: 0 !important;
    background: #fff !important
}

.tree-structure-app-box .tree-root,
.tree-structure-app-box .tree-father,
.tree-structure-app-box .tree-child {
    overflow: visible
}

.tree-structure-app-box .tree-item.active:after {
    display: none
}

.tree-structure-list .active {
    background: #eff4f5
}

.tree-root,
.tree-father {
    position: relative;
    padding: 4px 0 4px 5px;
    padding-left: 35px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
    overflow: hidden
}

.tree-root:hover,
.tree-father:hover {
    background: #eff4f5
}

.tree-root:hover .tree-set,
.tree-father:hover .tree-set {
    display: block;
    background: #eff4f5
}

.tree-root > i,
.tree-father > i {
    font-size: 12px;
    color: #777;
    margin-left: 3px
}

.tree-item i {
    font-size: 12px;
    color: #777;
    margin-left: 3px
}

.tree-item:hover {
    color: #000
}

.tree-item.active {
    background: transparent
}

.tree-item.active span {
    position: relative;
    z-index: 2
}

.tree-item.active:after {
    content: '';
    position: absolute;
    background: #eff4f5;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.tree-switch {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 28px
}

.tree-switch:before {
    content: "\f114";
    font-family: kf5;
    color: #21b1d3;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -9px;
    font-size: 16px
}

.tree-switch.has-sublist:hover:after {
    border-top-color: #17a7c9;
    top: 12px
}

.tree-switch.has-sublist.open:before {
    content: "\f115"
}

.tree-switch.has-sublist.open:after {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0)
}

.tree-switch.has-sublist:after {
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    border-top: 4px solid #333;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 11px;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.tree-set {
    position: absolute;
    right: 0;
    top: 6px;
    font-size: 12px;
    display: none;
    line-height: 27px;
    padding-right: 5px;
    z-index: 3
}

.tree-set a {
    color: #0096C4;
    margin-left: 5px
}

.tree-set a:hover {
    color: #48b6d7
}

.tree-structure ul {
    padding-left: 10px
}

.tree-child {
    position: relative;
    padding: 5px 0 5px 5px;
    padding-left: 35px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
    overflow: hidden
}

.tree-child:hover {
    background: #eff4f5
}

.tree-child:hover .tree-set {
    display: block;
    background: #eff4f5
}

.tree-child:before {
    content: "\f114";
    font-family: kf5;
    color: #21b1d3;
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -9px;
    font-size: 16px
}

.tree-child > i {
    font-size: 12px;
    color: #777;
    margin-left: 3px
}

.people-group .tree-switch.has-sublist.open:before,
.people-group .tree-switch:before,
.people-group .tree-child:before {
    content: "\e6dc"
}

.panel-number-btn {
    padding: 0 17px 0 15px;
    margin-bottom: 15px
}

.panel-number-btn:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.panel-number-btn > ul {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.panel-number-btn > ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.panel-number-btn li {
    float: left;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 15px
}

.panel-number-btn li:first-child {
    margin-left: 0
}

.panel-number-btn li > a {
    color: #333;
    display: block;
    background: #fff;
    height: 110px;
    width: 100%;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    border: 1px solid #fff;
    position: relative;
    text-align: center
}

.panel-number-btn li > a:after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 12px solid #ccd0d9;
    border-left: 12px solid transparent;
    position: absolute;
    right: 3px;
    bottom: 3px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.panel-number-btn li > a:hover {
    color: #333;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
    border-color: #21d376
}

.panel-number-btn li > a:hover:after {
    border-bottom-color: #21d376
}

.panel-number-btn li > a > span {
    font-size: 42px;
    display: block;
    padding-top: 12px
}

.panel-number-btn .active a {
    border-color: #21d376
}

.panel-number-btn .active a:after {
    border-bottom-color: #21d376
}

#app-panel-toggle {
    position: absolute;
    width: 14px;
    height: 64px;
    border: 1px solid #e2eaec;
    border-right: 0;
    left: -1px;
    top: 50%;
    margin-top: -32px;
    background: #FBFCFD;
    text-align: center;
    line-height: 64px;
    font-size: 14px;
    opacity: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

#app-panel-toggle:after {
    content: "\e6be";
    font-family: kf5
}

#app-panel-toggle:hover {
    border-color: #ced6d8
}

#panel-right-in.show {
    -webkit-transform: translateX(-340px);
    -moz-transform: translateX(-340px);
    -ms-transform: translateX(-340px);
    -o-transform: translateX(-340px);
    transform: translateX(-340px)
}

#panel-right-in {
    width: 340px;
    height: 100%;
    background: #fbfcfd;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 1px solid #e2eaec;
    position: fixed;
    top: 0;
    padding-top: 100px;
    z-index: 3;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    right: -340px
}

#panel-right-in > .scrollbar-auto {
    top: 100px
}

#panel-right-in iframe {
    width: 100%
}

#panel-right-in:hover #app-panel-toggle {
    opacity: 1;
    left: -15px
}

.app-panel {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 100px
}

.app-panel header {
    background: #2C4055;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    color: #fff;
    position: relative;
    z-index: 2
}

.app-panel header:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.app-panel header h2 {
    float: left;
    position: relative
}

.app-panel header a {
    color: #7786AB;
    font-size: 18px;
    margin-left: 10px
}

.app-panel header a:hover {
    color: #fff
}

.app-panel .body {
    padding: 15px 10px
}

.app-panel .body .add-app {
    height: 110px;
    width: 120px;
    border: 2px dotted #e2eaec;
    margin: 0 auto;
    line-height: 110px;
    text-align: center;
    color: #AEB6C9;
    font-size: 30px;
    display: block;
    border-radius: 3px;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
    margin-bottom: 20px
}

.app-panel .body .add-app:hover {
    border-color: #ced6d8
}

.app-panel .body p {
    color: #9B9B9B
}

.app-panel .body p a {
    color: #0096C4
}

.app-panel .body p a:hover {
    color: #48b6d7
}

.app-panel .form-ui {
    padding-top: 10px
}

.app-panel .form-ui .left {
    width: 70px
}

.app-panel .form-ui .right {
    padding-left: 80px
}

.app-panel .form-ui input[type=text],
.app-panel .form-ui .form-ui input[type=password] {
    width: 228px;
    height: 34px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.app-panel .form-ui textarea {
    width: 228px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.app-panel .form-ui .drop-btn-default {
    width: 228px
}

.app-panel .select-pop {
    top: 40px;
    left: 5px
}

.app-panel .select-pop:after {
    left: 40px
}

.app-panel-title {
    cursor: pointer
}

.app-panel-title:after {
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    border-top: 5px solid #7786AB;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    margin-left: 5px;
    vertical-align: middle;
    margin-top: -1px
}

.app-panel-title:hover:after {
    border-top-color: #fff
}

.app-box-toggle {
    display: none
}

.app-box-toggle .back-btn {
    font-size: 13px;
    line-height: 22px;
    padding: 5px 8px;
    border-bottom: 1px solid #e2eaec
}

.app-box-toggle .back-btn a {
    color: #0096C4
}

.app-box-toggle .back-btn a:hover {
    color: #48b6d7
}

.app-box-toggle .back-btn .btn-sm {
    color: #333;
    height: 22px;
    line-height: 22px
}

.app-box-toggle .back-btn .btn-sm:hover {
    color: #333
}

.app-box-title {
    background: #faf9f9;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    border-bottom: 1px solid #eff4f5;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    cursor: pointer
}

.app-box-title:after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 50%;
    height: 0;
    width: 0;
    border-top: 5px solid #333;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    margin-top: -2px;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.app-box-title.open + .app-box-toggle {
    display: block
}

.app-box-title.open:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
}

.app-panel .app-box {
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #e2eaec;
    margin-bottom: 10px;
    background: #fff
}

.app-panel .app-box:hover {
    border-color: #ced6d8
}

.app-panel .app-box .app-box-toggle > .btn {
    margin: 20px 30px;
    display: block;
    text-align: center
}

.app-panel .app-box > .ember-view > .btn {
    margin: 20px 30px;
    display: block;
    text-align: center
}

.app-panel .app-box .search-sm {
    padding: 10px;
    border-bottom: 1px solid #e2eaec
}

.app-panel .app-box li {
    font-size: 13px;
    padding: 8px 10px;
    border-bottom: 1px solid #e2eaec
}

.app-panel .app-box li:hover {
    background: #eff4f5
}

.app-panel .app-box li:last-child {
    border-bottom: 0
}

.app-panel .app-box li > a {
    color: #0096C4
}

.app-panel .app-box li > a:hover {
    color: #48b6d7
}

.app-panel .app-box li > a.btn {
    color: #333;
    height: 22px;
    line-height: 22px;
    margin-top: -1px
}

.app-panel .app-box .text {
    padding: 10px;
    line-height: 1.6em
}

.app-panel .app-box .text p {
    color: #666;
    font-size: 13px
}

.app-panel .app-box .img-set {
    padding: 10px
}

.app-panel .app-box .img-list li {
    padding: 5px 10px;
    border-bottom: 1px solid #e2eaec
}

.app-panel .app-box .img-list li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.app-panel .app-box .img-list li p {
    float: left;
    width: 190px;
    line-height: 34px;
    color: #666;
    font-size: 13px
}

.app-panel .app-box .img-list li img {
    float: right;
    width: 30px;
    height: 30px;
    border: 1px solid #e2eaec;
    padding: 1px
}

.app-panel .app-box .mingdao {
    padding: 10px
}

.app-panel .app-box .mingdao dl {
    margin-bottom: 5px
}

.app-panel .app-box .mingdao dt,
.app-panel .app-box .mingdao dd {
    padding: 5px 0
}

.app-panel .app-box .mingdao dd a {
    color: #0096C4
}

.app-panel .app-box .mingdao dd a:hover {
    color: #48b6d7
}

.app-panel .app-box .app-form {
    padding: 10px;
    font-size: 13px
}

.app-panel .app-box .form-field {
    margin-bottom: 10px
}

.app-panel .app-box .form-field label {
    display: block;
    margin-bottom: 0
}

.app-panel .app-box .form-field input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0 5px;
    height: 28px
}

.app-panel .app-box .form-field textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0 5px;
    height: 60px
}

.app-panel .app-box .link-list {
    padding: 5px 0;
    font-size: 13px
}

.app-panel .app-box .link-list dt,
.app-panel .app-box .link-list dd {
    padding: 5px 10px
}

.app-panel .app-box .link-list dd a {
    color: #0096C4
}

.app-panel .app-box .link-list dd a:hover {
    color: #48b6d7
}

.app-box-empty {
    text-align: center
}

.app-box-empty .icon-api-box {
    font-size: 90px;
    color: #e4e4e4;
    display: block;
    margin-top: 60px;
    margin-bottom: 5px
}

.app-box-empty p {
    margin-bottom: 20px
}

.app-box-empty .btn {
    height: 30px;
    line-height: 30px;
    margin-right: 0
}

form.search-sm {
    display: block;
    line-height: 1
}

form.search-sm label {
    position: relative;
    display: block
}

form.search-sm .icon-search {
    position: absolute;
    float: left;
    height: 30px;
    line-height: 30px;
    left: 10px
}

form.search-sm input[type=search] {
    height: 28px;
    border-radius: 40px;
    border: 1px solid #ced6d8;
    padding-left: 30px;
    font-size: 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding-right: 10px
}

form.search-sm input[type=search]:hover {
    border-color: #bac2c4
}

form.search-sm input[type=search]:focus {
    border-color: #21d376;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.app-box .kf5-article {
    padding: 10px
}

.app-box .kf5-article h1 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px
}

.app-box .kf5-article p {
    font-size: 14px;
    line-height: 1.6em;
    margin-bottom: 15px;
    color: #333
}

.app-box .kf5-article li {
    font-size: 14px;
    border-bottom: 0;
    padding: 0;
    padding-left: 14px
}

.app-box .kf5-article li:hover {
    background: #fff
}

.app-box .kf5-article li li:before {
    background: #fff;
    border: 1px solid #21d376;
    height: 4px;
    width: 4px
}

.row-scroll {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 115px !important;
    height: 100vh;
    margin-top: -115px;
    overflow: hidden
}

.row-scroll > .col {
    overflow-y: auto;
    padding-bottom: 60px
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.row:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.row > .col-1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.row > .col-2 {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.row + .row {
    padding-top: 0
}

.col {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    margin-left: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    max-width: 100%
}

.col:first-child {
    margin-left: 0
}

.date-start,
.date-end {
    height: 26px;
    border-radius: 3px;
    padding: 0 5px
}

.date-choice {
    margin-right: 10px
}

.widget-head {
    padding: 10px 20px
}

.widget-head:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.widget-head .title {
    float: left;
    line-height: 28px
}

.widget-head .group {
    float: left;
    margin-right: 20px
}

.tab-title2 {
    border-bottom: 2px solid #e2eaec;
    display: block;
    margin-bottom: 20px
}

.tab-title2:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.tab-title2 li {
    float: left
}

.tab-title2 li > a {
    float: left;
    margin-right: 5px;
    font-size: 16px;
    padding: 0 9px 5px;
    border-bottom: 2px solid transparent;
    position: relative;
    bottom: -2px;
    color: #999;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.tab-title2 li > a:hover {
    color: #333
}

.tab-title2 li > .active {
    border-bottom-color: #21d376;
    color: #333
}

.tab-title3 {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 30px
}

.tab-title3:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.tab-title3 > li {
    float: left;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #e2eaec;
    position: relative;
    margin-left: -1px;
    z-index: 1;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.tab-title3 > li:hover {
    border-color: #21d376;
    z-index: 2;
    box-shadow: 0 0 6px rgba(0, 0, 0, .2);
    color: #333
}

.tab-title3 > li:hover > a:after {
    border-bottom-color: #21d376
}

.tab-title3 > li:first-child {
    border-radius: 3px 0 0 3px
}

.tab-title3 > li:last-child {
    border-radius: 0 3px 3px 0
}

.tab-title3 > .active {
    border-color: #36d5ac
}

.tab-title3 > .active > a {
    background: #36d5ac;
    color: #fff
}

.tab-title3 > .active > a:after {
    border-bottom-color: #fff !important
}

.tab-title3 > li > a {
    color: #333;
    display: block;
    text-align: center;
    padding: 25px 0;
    line-height: 1;
    position: relative
}

.tab-title3 > li > a:after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 12px solid #ccd0d9;
    border-left: 12px solid transparent;
    position: absolute;
    right: 3px;
    bottom: 3px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.tab-title3 > li span {
    font-size: 40px;
    display: block;
    margin-bottom: 5px
}

.tab-title3 > li span > i {
    font-size: 18px
}

.tab-title3 > li i {
    font-size: 12px
}

.statistics-tab {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 30px
}

.statistics-tab li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-right: 1px solid #eff4f5;
    padding-left: 30px
}

.statistics-tab li:last-child {
    border-right: 0
}

.statistics-tab li p {
    color: #666
}

.statistics-tab li span {
    font-size: 30px;
    font-weight: 300
}

.statistics-tab li span i {
    font-size: 14px;
    margin: 0 3px
}

.col > header {
    padding: 0 20px;
    border-bottom: 1px solid #eff4f5;
    background: #faf9f9;
    border-radius: 3px 3px 0 0
}

.col > header:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.tab-header {
    border-bottom-color: #e2eaec !important
}

.tab-header > .tab-title1 {
    padding-top: 15px;
    float: left
}

.tab-header .drop-btn-default,
.tab-header .btn-sm {
    margin-top: 14px
}

.col header.title {
    height: 43px;
    line-height: 43px;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.col header.title .btn-group > .btn-sm {
    margin-left: -1px
}

.col header.title > .search-sm {
    margin-top: 8px
}

.col header.title > h3 {
    display: inline-block
}

.col header.title .btn-sm {
    margin-left: 8px;
    margin-top: 8px
}

.col header.title > .drop-btn-default {
    margin-top: 8px
}

.col header.title > .drop-btn-default:not(:first-child):not(:last-child) {
    margin-left: 8px
}

.col header.title .select-box {
    min-width: 80px
}

.col header.title .select-box + .select-box {
    margin-left: 8px
}

.col .body {
    padding: 20px
}

.lr-2-1:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.lr-2-1 .main {
    float: left;
    width: 65%
}

.lr-2-1 .sidebar {
    float: right;
    width: 35%
}

.table-box {
    overflow-x: auto
}

.table {
    width: 100%
}

.table td.user {
    min-width: 250px
}

.table.ticket tbody tr,
.table.pointer tbody tr {
    cursor: pointer !important
}

.table .groupby {
    cursor: default !important
}

.table .table-icon-btn {
    font-size: 16px;
    margin: 0;
    margin-right: 10px
}

.table td.status {
    display: table-cell;
    height: normal;
    line-height: normal;
    border: 0;
    margin-top: 0
}

.table tr.pointer {
    cursor: pointer
}

.table thead {
    border-bottom: 2px solid #e2eaec
}

.table thead th {
    font-size: 14px;
    padding: 10px;
    white-space: nowrap;
    font-weight: 700
}

.table thead th:first-child {
    padding-left: 15px
}

.table tbody tr {
    border-bottom: 1px solid #e2eaec
}

.table tbody tr.active {
    background: #fff6ea !important
}

.table tbody tr.viewing {
    background: #E1F9D8 !important
}

.table tbody tr:hover {
    background: #eff4f5;
    cursor: default
}

.table tbody tr > th {
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2eaec;
    font-size: 15px;
    background: #faf9f9
}

.table .order {
    cursor: pointer
}

.table tbody td {
    padding: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 380px
}

.table .description {
    width: 25%;
    /*white-space:*/
}

.table .title {
    width: 24%
}

.table tbody td:first-child {
    padding-left: 15px
}

.table input[type=checkbox] {
    margin-left: 10px
}

.table input[type=checkbox] + .mark-star {
    margin-left: 15px
}

.table input[type=text] {
    height: 22px;
    max-width: 50px;
    border-radius: 0;
    padding: 0 5px;
    border-color: transparent;
    background: transparent
}

.table input[type=text]:hover {
    border-color: #e2eaec
}

.table input[type=text]:focus {
    background: #fff;
    border-color: #21d376
}

.table .user-drop-box {
    position: relative;
    font-size: 14px;
    margin-top: 8px
}

.table .user-drop-box .drop-btn {
    color: #333 !important
}

.table .user-drop-box .drop-box {
    padding: 10px 0;
    z-index: 999
}

.table .user-drop-box .drop-box > li > a {
    padding: 6px 35px 6px 10px;
    display: block;
    color: #333;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.table .user-drop-box .drop-box > li > a:hover {
    background: #eff4f5
}

.table .user-drop-box .drop-box img {
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-right: 5px
}

.table a + a {
    margin-left: 15px
}

.table a:not(.mark-star):not(.online) {
    color: #0096C4
}

.table a:not(.mark-star):not(.online):hover {
    color: #48b6d7
}

.table .user-avatar {
    height: 40px;
    width: 40px;
    margin-right: 8px;
    margin-top: -2px
}

.table .user-list .user-avatar {
    float: left;
    position: relative;
    height: 35px;
    width: 35px;
    margin-left: -17px;
    background: #fff
}

.table .user-list .user-avatar:hover {
    margin-left: -7px;
    margin-right: 18px
}

.table .online:before,
.table .busyline:before,
.table .leaveline:before,
.table .offline:before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    margin-right: 3px
}

.table .online:before {
    background: #21d376
}

.table .offline:before {
    background: #b8bcc5
}

.table .busyline:before {
    background: #F43530
}

.table .leaveline:before {
    background: #f5a623
}

.table .user > span {
    color: #999;
    font-size: 12px
}

.table tbody .btn.btn-sm {
    border-radius: 3px;
    margin: 0 10px;
    color: #333;
    height: 26px;
    line-height: 26px;
    padding: 0 12px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.table tbody .btn.btn-sm:hover {
    color: #0dbf62;
    border-color: #21d376
}

.table tbody .btn.btn-sm.danger {
    color: #F43530
}

.table .table-sortable {
    color: #374051 !important
}

.table .table-sortable:after {
    font-family: kf5;
    display: inline-block;
    margin-left: 3px
}

.table .table-sortable.asc:after {
    content: "\e6c2"
}

.table .table-sortable.desc:after {
    content: "\e6c1"
}

.table .btn-hollow:hover {
    color: #fff !important
}

.table .status {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 2px
}

.table .group-label {
    padding-bottom: 0;
    border-bottom: 0;
    margin: 0;
    line-height: 32px
}

.table .group-label span {
    border: 1px solid #fff;
    margin: 1px
}

.table .call:before {
    content: "\e610";
    font-family: kf5;
    position: relative;
    top: 1px
}

.posts.table .title {
    max-width: 250px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 15px
}

.posts.table .status:first-child {
    margin-left: 0 !important
}

.posts.table .tc {
    text-align: center
}

.posts.table input[type=checkbox] {
    margin-right: 15px
}

#bottom-bar {
    background: rgba(255, 255, 255, .95);
    position: fixed;
    bottom: -70px;
    left: 0;
    padding: 15px 25px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 12px 25px 12px 380px;
    z-index: 3;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, .15);
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

#bottom-bar:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

#bottom-bar.show {
    bottom: 0
}

#bottom-bar .drop-btn-default {
    margin-right: 12px
}

#bottom-bar .select-box {
    margin-right: 12px
}

#bottom-bar .ticket-submit {
    position: relative
}

#bottom-bar .ticket-submit .drop-btn {
    float: left;
    height: 34px;
    width: 34px;
    background: #F43530;
    line-height: 36px;
    color: #fff;
    font-size: 16px;
    border-radius: 0 3px 3px 0;
    text-align: center
}

#bottom-bar .ticket-submit .drop-btn:hover {
    background: #ff6369
}

#bottom-bar .ticket-submit .drop-btn:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset
}

#bottom-bar .ticket-submit input[type=submit] {
    float: left;
    height: 34px;
    border-radius: 3px 0 0 3px;
    border: 0;
    font-size: 14px;
    color: #fff;
    background: #F43530;
    padding: 0 15px;
    cursor: pointer;
    border-right: 1px solid #ff959b
}

#bottom-bar .ticket-submit input[type=submit]:hover {
    background: #ff6369
}

#bottom-bar .ticket-submit input[type=submit]:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset
}

#bottom-bar .ticket-submit .drop-box {
    position: absolute;
    bottom: 105%;
    left: 0;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
    white-space: nowrap;
    padding: 0 0 10px;
    border: 1px solid #ced6d8;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2)
}

#bottom-bar .ticket-submit .drop-box dt {
    font-size: 15px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eff4f5;
    padding: 8px 15px
}

#bottom-bar .ticket-submit .drop-box dd > a {
    color: #333;
    display: block;
    padding: 5px 15px
}

#bottom-bar .ticket-submit .drop-box dd > a:hover {
    background: #eff4f5
}

#bottom-bar .ticket-submit .drop-box dd .status {
    margin: 0;
    margin-left: 5px
}

.drop-opt.active {
    background: #eff4f5
}

.response-text-field {
    height: 34px !important;
    padding: 0 8px 0 10px;
    font-size: 14px
}

.online.on:before {
    background: #21d376
}

.mark-star {
    color: #ced6d8;
    font-size: 17px
}

.mark-star:hover {
    color: #bac2c4
}

.mark-star:active {
    color: #ffc800
}

.mark-star.active {
    color: #ffc800
}

.mark-star.active:active {
    color: #bac2c4
}

.status,
.color_label {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    color: #fff !important;
    border-radius: 3px;
    padding: 1px 5px;
    border: 1px solid #fff;
    white-space: nowrap;
    margin-left: 5px
}

.status:not(:first-child):not(:last-child) {
    margin-right: 5px;
    margin-left: 5px
}

.red-status {
    background: #F43530
}

.blue-status {
    background: #21b1d3
}

.green-status {
    background: #21d376
}

.orange-status {
    background: #ffa900
}

.gray-status {
    background: #747881
}

.status0 {
    background: #ffbe26
}

.status1 {
    background: #fc7c79
}

.status2 {
    background: #67c0ff
}

.status3 {
    background: #5dca91
}

.status4 {
    background: #696969
}

.red.status {
    background: #F43530
}

.blue.status {
    background: #21b1d3
}

.green.status {
    background: #21d376
}

.orange.status {
    background: #ffa900
}

.gray.status {
    background: #747881
}

.purple.status {
    background: #9e5ae3
}

.label_orange {
    margin-left: 5px;
    padding: 2px 5px;
    background: #ffa900;
    color: #fff;
    border-radius: 3px;
    font-size: 12px
}

.page-number {
    float: right;
    margin: 20px 0
}

.page-number li {
    float: left;
    margin-left: 6px
}

.page-number li > a {
    display: block;
    height: 24px;
    width: 24px;
    border: 1px solid #e2eaec;
    color: #777;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    border-radius: 2px
}

.page-number li > a:hover {
    border-color: #21d376
}

.page-number li > a:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2) inset
}

.page-number .active > a {
    background: #21d376;
    border-color: #21d376;
    color: #fff
}

.indent-box > form {
    padding-left: 20px
}

.indent-box > form > fieldset {
    border-bottom: 1px solid #e2eaec;
    padding-right: 20px;
    padding-bottom: 10px;
    margin-bottom: 20px
}

.indent-box > form > fieldset:last-child {
    border-bottom: 0
}

.form-group {
    margin-bottom: 15px;
    position: relative
}

.form-group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.form-group > label {
    display: block;
    margin-bottom: 5px;
    float: none !important
}

.form-group .info {
    background: #F4F4F4;
    border-radius: 3px;
    padding: 5px
}

.form-group > label > a:not(.help) {
    float: right;
    color: #0096C4;
    font-size: 12px
}

.form-group > label > a:not(.help):hover {
    color: #48b6d7
}

.form-group .hint {
    font-size: 12px;
    color: #999;
    margin-top: 3px
}

.form-group .group-label {
    border-bottom: 0;
    padding-left: 0;
    margin-left: 0;
    padding-bottom: 0
}

#kchat-im-panel .form-group input[type=text] {
    height: 30px;
    width: 100%;
    padding: 0 10px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.form-group textarea {
    width: 100%;
    height: 60px;
    padding: 5px 10px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.user-avatar {
    display: inline-block;
    height: 50px;
    width: 50px;
    padding: 1px;
    border-radius: 100%;
    border: 1px solid transparent;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    position: relative;
    margin-left: -1px;
    margin-top: -1px
}

.user-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.user-avatar:hover,
.user-avatar.hover {
    border-color: #21d376
}

.user-avatar:hover img,
.user-avatar.hover img {
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg)
}

.user-avatar.phone:after {
    content: "\e610";
    position: absolute;
    height: 22px;
    width: 22px;
    background: #36d5ac;
    border-radius: 100px;
    border: 1px solid #fff;
    right: -5px;
    bottom: -1px;
    font-family: kf5;
    color: #fff;
    line-height: 22px;
    text-align: center;
    display: inline-block
}

.user-avatar.wechat:after {
    content: "\e603";
    position: absolute;
    height: 22px;
    width: 22px;
    background: #00BD1F;
    border-radius: 100px;
    border: 1px solid #fff;
    right: -5px;
    bottom: -1px;
    font-family: kf5;
    color: #fff;
    line-height: 22px;
    text-align: center;
    display: inline-block;
    font-size: 13px
}

.user-avatar.qq:after {
    content: "\e606";
    position: absolute;
    height: 22px;
    width: 22px;
    background: #21b1d3;
    border-radius: 100px;
    border: 1px solid #fff;
    right: -5px;
    bottom: -1px;
    font-family: kf5;
    color: #fff;
    line-height: 22px;
    text-align: center;
    display: inline-block;
    font-size: 13px
}

.user-avatar.weibo:after {
    content: "\e602";
    position: absolute;
    height: 22px;
    width: 22px;
    background: #F43530;
    border-radius: 100px;
    border: 1px solid #fff;
    right: -5px;
    bottom: -1px;
    font-family: kf5;
    color: #fff;
    line-height: 22px;
    text-align: center;
    display: inline-block;
    font-size: 13px
}

.ticket-header {
    position: relative;
    padding-bottom: 15px;
    border-bottom: 1px solid #eff4f5;
    margin-bottom: 15px
}

.ticket-header .ticket_channel {
    height: 48px;
    width: 48px;
    border-radius: 3px;
    border: 1px solid #ced6d8;
    font-size: 26px;
    color: #8C8C8C;
    float: left;
    position: relative;
    text-align: center;
    line-height: 48px;
    font-family: kf5
}

.ticket-header .ticket_channel:after {
    line-height: 48px
}

.ticket-header .info {
    padding-right: 175px
}

.ticket-header .ticket_channel.email:after {
    content: "\e668"
}

.ticket-header .ticket_channel.web:after {
    content: "\e62d"
}

.ticket-header .ticket_channel.tab:after {
    content: "\e62e";
    font-size: 18px;
    position: relative;
    top: -3px
}

.ticket-header .ticket_channel.chat:after {
    content: "\e655"
}

.ticket-header .ticket_channel.weibo:after {
    content: "\e602"
}

.ticket-header .ticket_channel.api:after {
    content: "\e631";
    font-size: 30px
}

.ticket-header .ticket_channel.mobile:after {
    content: "\e629";
    font-size: 30px
}

.ticket-header .ticket_channel.inbound:after {
    content: "\e62f";
    font-size: 22px;
    top: -2px;
    position: relative
}

.ticket-header .ticket_channel.outbound:after {
    content: "\e62b"
}

.ticket-header .ticket_channel.voicemail:after {
    content: "\e639"
}

.ticket-header .user-avatar {
    position: absolute;
    left: 0;
    top: 0
}

.ticket-header .info {
    padding-left: 55px;
    max-width: 800px
}

.ticket-header h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    padding-left: 10px
}

.ticket-header h3 input {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: -10px
}

.ticket-header h3 + p {
    font-size: 12px;
    color: #9B9B9B;
    margin-top: 2px;
    padding-left: 10px
}

.ticket-header h3 + p a {
    color: #0096C4;
    margin-right: 5px
}

.ticket-header h3 + p a:hover {
    color: #48b6d7
}

.ticket-header h3 + p span {
    margin: 0 5px
}

.ticket-header .btn {
    margin-right: 0;
    margin-left: 10px
}

.ticket-header .btn-drop-box .drop-box {
    right: 0;
    left: auto
}

.ticket-inner {
    padding-bottom: 5px;
    border-bottom: 1px solid #eff4f5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.ticket-inner .radio-box {
    margin-bottom: 10px
}

.ticket-inner .textarea-box > textarea {
    height: 150px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px
}

.ticket-inner .btn-list {
    padding-bottom: 80px
}

.ticket-inner .btn-list:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.ticket-inner .btn-list li {
    float: left
}

.ticket-inner .wrap {
    max-width: 800px
}

.uploader-box {
    margin-top: 15px
}

.uploader-box:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.uploader-box .uploader-drop-btn {
    float: left;
    height: 110px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 140px;
    border-radius: 3px;
    border: 2px dotted #e2eaec;
    background: #fff;
    position: relative;
    text-align: center;
    padding-top: 30px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    margin-right: 14px;
    margin-bottom: 14px
}

.uploader-box .uploader-drop-btn:after {
    content: "拖动或点击上传";
    font-size: 12px;
    color: #333;
    opacity: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.uploader-box .uploader-drop-btn:before {
    content: "\e697";
    font-family: kf5;
    display: inline-block;
    font-size: 40px;
    color: #BCC5C7;
    display: block;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.uploader-box .uploader-drop-btn:hover {
    border-color: #bac2c4
}

.uploader-box .uploader-drop-btn:hover:before {
    margin-top: -10px;
    color: #bac2c4
}

.uploader-box .uploader-drop-btn:hover:after {
    opacity: 1
}

.btn-drop-box {
    position: absolute;
    right: 0;
    top: 8px
}

.uploader-file-list li {
    float: left;
    margin-right: 14px;
    margin-bottom: 14px;
    height: 110px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 140px;
    border-radius: 3px;
    background: #eff4f5;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    position: relative;
    text-align: center;
    padding-top: 24px
}

.uploader-file-list li .size {
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 12px
}

.uploader-file-list li .icon-insert-drive-file {
    font-size: 40px;
    color: #36d5ac;
    display: block;
    margin-bottom: 5px
}

.uploader-file-list li .name {
    color: #0096C4;
    font-size: 12px
}

.uploader-file-list li .name:hover {
    color: #48b6d7
}

.uploader-file-list li .remove {
    height: 18px;
    width: 18px;
    background: #ccc;
    color: #fff;
    text-align: center;
    line-height: 18px;
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    right: -5px;
    top: -5px;
    opacity: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.uploader-file-list li .remove:hover {
    background: #F43530
}

.uploader-file-list li .remove:after {
    content: "\e6c0";
    font-family: kf5
}

.uploader-file-list li:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, .2)
}

.uploader-file-list li:hover .remove {
    opacity: 1
}

.kf5-upload-drop-area {
    float: left;
    width: 140px;
    height: 100px;
    padding-top: 24px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    border: 2px dotted #e2eaec;
    background: #fff;
    position: relative;
    text-align: center;
    padding-top: px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    margin-right: 14px;
    margin-bottom: 14px
}

.kf5-upload-drop-area:after {
    content: "拖动或点击上传";
    font-size: 12px;
    color: #333;
    opacity: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.kf5-upload-drop-area:before {
    content: "\e697";
    font-family: kf5;
    display: inline-block;
    font-size: 40px;
    color: #BCC5C7;
    display: block;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.kf5-upload-drop-area span {
    display: none
}

.kf5-upload-drop-area:hover {
    border-color: #bac2c4
}

.kf5-upload-drop-area:hover:before {
    margin-top: -10px;
    color: #bac2c4
}

.kf5-upload-drop-area:hover:after {
    opacity: 1
}

.kf5-upload-list li {
    float: left;
    margin-right: 14px;
    margin-bottom: 14px;
    height: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 140px;
    border-radius: 3px;
    background: #eff4f5;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    position: relative;
    text-align: center;
    padding-top: 20px;
    font-size: 12px
}

.kf5-upload-list li .size {
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 12px
}

.kf5-upload-list li a {
    color: #0096C4
}

.kf5-upload-list li a:hover {
    color: #48b6d7
}

.kf5-upload-list li .kf5-upload-file {
    color: #666;
    font-size: 12px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 5px
}

.kf5-upload-list li .kf5-upload-remove {
    text-indent: -9999px;
    height: 18px;
    width: 18px;
    background: #ccc;
    color: #fff;
    text-align: center;
    line-height: 18px;
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    right: -5px;
    top: -5px;
    opacity: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.kf5-upload-list li .kf5-upload-remove:hover {
    background: #F43530;
    color: #fff
}

.kf5-upload-list li .kf5-upload-file:before {
    content: "\e68b";
    font-family: kf5;
    font-size: 40px;
    color: #36d5ac;
    display: block;
    margin-bottom: 0
}

.kf5-upload-list li .kf5-upload-size {
    font-size: 12px;
    position: absolute;
    left: 5px;
    top: 5px
}

.kf5-upload-list li .kf5-upload-remove:after {
    content: "\e6c0";
    font-family: kf5;
    position: absolute;
    left: 0;
    top: 0;
    height: 18px;
    width: 18px;
    text-indent: 0
}

.kf5-upload-list li:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, .2)
}

.kf5-upload-list li:hover .kf5-upload-remove {
    opacity: 1
}

.uploader-box-small {
    max-width: 800px;
    padding-top: 10px;
    position: relative
}

.uploader-box-small:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.uploader-box-small .uploader-drop-btn {
    float: left;
    position: relative;
    color: #0096C4;
    line-height: 24px;
    margin-right: 20px;
    cursor: pointer
}

.uploader-box-small .uploader-drop-btn:hover {
    color: #48b6d7
}

.uploader-box-small .uploader-drop-btn input {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer
}

.box-dragenter {
    min-height: 60px
}

.box-dragenter .uploader-drop-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px dotted #e2eaec;
    background: #fff;
    z-index: 10;
    text-align: center;
    line-height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.box-dragenter .uploader-drop-btn span {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 50%;
    margin-top: -9px;
    width: 100%
}

.uploader-file-list-small:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.uploader-file-list-small li {
    float: left;
    line-height: 24px;
    height: 24px;
    background: #eff4f5;
    margin-right: 10px;
    padding: 0 37px 0 8px;
    margin-bottom: 10px;
    border-radius: 3px;
    font-size: 12px;
    position: relative
}

.uploader-file-list-small a {
    color: #0096C4
}

.uploader-file-list-small a:hover {
    color: #48b6d7
}

.uploader-file-list-small .preview {
    margin-left: 5px
}

.uploader-file-list-small .error {
    margin-left: 5px;
    color: #F43530
}

.uploader-file-list-small .remove {
    position: absolute;
    right: 8px;
    top: 3px;
    height: 18px;
    width: 18px;
    border-radius: 100%;
    background: #ccc;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.uploader-file-list-small .remove:after {
    content: "\e6c0";
    font-family: kf5;
    font-size: 12px;
    line-height: 18px
}

.uploader-file-list-small .remove:hover {
    background: #F43530;
    color: #fff
}

.tags-box:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.tags-box .tag {
    float: left;
    font-size: 12px;
    height: 23px;
    line-height: 23px;
    padding: 0 8px;
    background: #FFF5E8;
    color: #333;
    border-radius: 40px;
    margin-right: 8px;
    position: relative;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    cursor: default
}

.tags-box .tag > a {
    position: absolute;
    right: 5px;
    color: #b8bcc5;
    opacity: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.tags-box .tag > a:hover {
    color: #F43530
}

.tags-box .tag > a > i {
    height: 23px;
    line-height: 23px
}

.tags-box .tag:hover {
    padding-right: 20px
}

.tags-box .tag:hover > a {
    opacity: 1
}

.tags-box .add-tags {
    -webkit-appearance: none;
    appearance: none;
    height: 21px;
    padding: 0 8px;
    background: #BCC5C7;
    border: 1px solid #BCC5C7;
    border-radius: 40px;
    font-size: 12px;
    width: 48px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.tags-box .add-tags::-webkit-input-placeholder {
    color: #fff
}

.tags-box .add-tags:-moz-placeholder {
    color: #fff
}

.tags-box .add-tags::-moz-placeholder {
    color: #fff
}

.tags-box .add-tags:-ms-input-placeholder {
    color: #fff
}

.tags-box .add-tags:hover {
    border-color: #8a9395
}

.tags-box .add-tags:focus {
    background: #fff;
    border-color: #8a9395;
    width: 120px;
    box-shadow: none
}

.hover-dropdown {
    position: relative;
    padding-right: 0 !important
}

.hover-dropdown .hover-dropdown-pane {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #ced6d8;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 3px;
    padding: 6px 0;
    text-align: left
}

.hover-dropdown:hover .hover-dropdown-pane {
    display: block
}

.hover-dropdown .hover-dropdown-pane ul {
    border-bottom: 1px solid #e2eaec;
    padding: 5px 0
}

.hover-dropdown .hover-dropdown-pane ul:last-child {
    border-bottom: 0
}

.hover-dropdown .hover-dropdown-pane li {
    float: none;
    margin-right: 0;
    padding-right: 0
}

.hover-dropdown .hover-dropdown-pane li:after {
    display: none
}

.hover-dropdown .hover-dropdown-pane a {
    display: block;
    padding: 0 15px;
    position: relative;
    color: #333;
    font-size: 14px;
    line-height: 1;
    height: 28px;
    line-height: 28px;
    max-width: 280px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.hover-dropdown .hover-dropdown-pane a:hover {
    background: #eff4f5
}

.hover-dropdown .ticket-history dt {
    padding: 10px 15px 5px
}

.hover-dropdown .ticket-history dd > a:before {
    content: "";
    height: 10px;
    width: 10px;
    border: 1px solid #fff;
    border-radius: 100%;
    display: inline-block;
    margin-right: 3px;
    position: relative;
    top: 1px
}

.hover-dropdown .hover-dropdown-pane .status1 a:before {
    background: #fc7c79
}

.hover-dropdown .hover-dropdown-pane .status2 a:before {
    background: #67c0ff
}

.hover-dropdown .hover-dropdown-pane .status3 a:before {
    background: #5dca91
}

.hover-dropdown .hover-dropdown-pane .status4 a:before {
    background: #696969
}

.hover-dropdown .hover-dropdown-pane .status0 a:before {
    background: #ffbe26
}

.ticket-history dd {
    background: #fff !important
}

.ticket-history a {
    padding: 0
}

.ticket-followers:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.ticket-followers .follower-item {
    position: relative;
    float: left;
    margin-right: 8px;
    height: 30px;
    width: 30px;
    border-radius: 100%
}

.ticket-followers .follower-item > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.ticket-followers .follower-item > .remove {
    font-size: 12px;
    height: 16px;
    width: 16px;
    background: #BCC5C7;
    color: #fff;
    text-align: center;
    line-height: 18px;
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    right: -6px;
    top: -3px;
    opacity: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.ticket-followers .follower-item > .remove:hover {
    background: #F43530
}

.ticket-followers .follower-item:hover > .remove {
    opacity: 1
}

.ticket-followers .add-tags {
    position: relative;
    top: 4px;
    -webkit-appearance: none;
    appearance: none;
    height: 21px;
    padding: 0 8px;
    background: #BCC5C7;
    border: 1px solid #BCC5C7;
    border-radius: 40px;
    font-size: 12px;
    width: 62px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.ticket-followers .add-tags::-webkit-input-placeholder {
    color: #fff
}

.ticket-followers .add-tags:-moz-placeholder {
    color: #fff
}

.ticket-followers .add-tags::-moz-placeholder {
    color: #fff
}

.ticket-followers .add-tags:-ms-input-placeholder {
    color: #fff
}

.ticket-followers .add-tags:hover {
    border-color: #8a9395
}

.ticket-followers .add-tags:focus {
    background: #fff;
    border-color: #8a9395;
    width: 140px
}

.input-dropdown {
    position: relative;
    display: inline-block
}

.input-dropdown .dropdown-box {
    display: none;
    padding: 10px 0;
    border-radius: 3px;
    border: 1px solid #ced6d8;
    box-shadow: 0 0 6px rgba(0, 0, 0, .2);
    position: absolute;
    top: 30px;
    left: 0;
    min-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    z-index: 10
}

.input-dropdown .dropdown-box li > a {
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 13px;
    position: relative;
    min-width: 100px;
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.input-dropdown .dropdown-box li > a:hover {
    background: #21d376;
    color: #fff
}

.input-dropdown .dropdown-box li img {
    float: left;
    height: 24px;
    width: 24px;
    border-radius: 100%;
    margin-right: 5px;
    vertical-align: middle;
    margin-top: 3px
}

.input-dropdown .add-tags:focus + .dropdown-box {
    display: block
}

.ticket-comment {
    margin-bottom: 80px
}

.ticket-comment-header {
    height: 50px;
    line-height: 50px;
    max-width: 800px
}

.ticket-comment-header:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.ticket-comment-header h3 {
    font-size: 16px;
    float: left
}

.ticket-comment-header h3 > span {
    font-size: 12px
}

.ticket-comment-header .btn-group {
    margin-top: 12px
}

.ticket-comment-item {
    padding-left: 70px
}

.ticket-comment-item > article {
    padding: 16px 0 8px;
    border-bottom: 1px solid #eff4f5
}

.ticket-comment-item > article:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.ticket-comment-item > article > .wrap {
    max-width: 730px;
    position: relative;
    min-height: 55px
}

.ticket-comment-item > article .user-avatar {
    position: absolute;
    left: -70px;
    top: 0
}

.ticket-comment-item > article header {
    margin-bottom: 5px;
    font-size: 13px;
    padding-top: 2px
}

.ticket-comment-item > article header a {
    color: #0096C4;
    margin-right: 5px
}

.ticket-comment-item > article header a:hover {
    color: #48b6d7
}

.ticket-comment-item > article header span,
.ticket-comment-item > article header time {
    margin: 0 5px;
    color: #9B9B9B
}

.ticket-comment-item > article .signature {
    font-size: 12px;
    clear: both;
    margin-bottom: 5px;
    color: #777;
    border-top: 1px dashed #eee;
    padding-top: 10px;
    margin-top: 10px
}

.ticket-comment-item .reassign {
    display: none
}

.ticket-comment-item:hover .reassign {
    display: inline
}

.ticket-comment-item .ticket-voice {
    margin-bottom: 10px
}

.event-list > li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.event-list {
    position: relative
}

.event-list img {
    max-width: 100%
}

.event-list:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    background: #21d376;
    top: 7px;
    left: 5px
}

.event-list li {
    line-height: 1.8em
}

.event-list > li:before {
    content: "";
    height: 9px;
    width: 9px;
    border: 1px solid #21d376;
    background: #21d376;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 7px
}

.event-list .event_action:before {
    background: #fff
}

.comment-body,
.kf5-article {
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.7em
}

.comment-body p,
.kf5-article p,
.comment-body ul,
.kf5-article ul,
.comment-body ol,
.kf5-article ol,
.comment-body table,
.kf5-article table {
    margin-bottom: 6px
}

.comment-body .info,
.kf5-article .info {
    color: #666;
    font-size: 13px
}

.comment-body .info p,
.kf5-article .info p {
    margin-bottom: 3px
}

.comment-body table,
.kf5-article table {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #e2eaec
}

.comment-body table thead,
.kf5-article table thead {
    background: #eff4f5
}

.comment-body table td,
.kf5-article table td,
.comment-body table th,
.kf5-article table th {
    text-align: center;
    padding: 5px;
    border: 1px solid #e2eaec
}

.comment-body img,
.kf5-article img {
    display: block;
    max-width: 100%;
    margin: 10px 0;
    height: auto
}

.comment-body ul > li,
.kf5-article ul > li {
    position: relative;
    padding-left: 15px
}

.comment-body ul > li:before,
.kf5-article ul > li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    height: 6px;
    width: 6px;
    border-radius: 100%;
    background: #21d376
}

.comment-body ol,
.kf5-article ol {
    list-style-type: decimal;
    list-style-position: inside
}

.event-subtext {
    font-size: 12px;
    color: #999;
    margin-top: 20px;
    margin-bottom: 5px
}

.publish {
    position: relative;
    min-height: 560px
}

.publish.new-ticket {
    max-width: 800px
}

.publish > .main {
    padding-right: 310px
}

.publish > .sidebar {
    width: 290px;
    position: absolute;
    right: 0;
    top: 0
}

.publish-title {
    margin-bottom: 20px
}

.publish-title > p {
    position: relative
}

.publish-title .btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 32px;
    line-height: 32px;
    margin-right: 0
}

.publish-title label {
    display: block;
    margin-bottom: 5px
}

.publish-title input[type=text] {
    height: 34px;
    width: 100%;
    padding: 0 10px;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.publish-content {
    position: relative;
    z-index: 1
}

.publish-content label {
    display: block;
    margin-bottom: 5px
}

.publish-content textarea {
    width: 100%;
    padding: 10px;
    height: 300px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.publish-aside {
    width: 290px
}

.publish-aside .alert {
    padding: 10px 15px;
    background: #FFF7ED;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.6em;
    margin-bottom: 20px
}

.publish-aside .alert:before {
    position: static
}

.publish-aside .alert a {
    color: #0096C4
}

.publish-aside .alert a:hover {
    color: #48b6d7
}

.publish-aside .page-view {
    border-right: 1px solid #e2eaec;
    margin-bottom: 20px
}

.publish-aside .page-view:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.publish-aside .page-view li {
    float: left;
    width: 33.33333333333%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #e2eaec;
    border-right: 0;
    text-align: center;
    padding: 8px 0
}

.publish-aside .page-view .red {
    display: block;
    font-size: 16px;
    margin-bottom: 2px
}

.publish-aside .time {
    padding-left: 10px;
    border-left: 2px solid #e2eaec;
    margin-bottom: 20px
}

.publish-aside .time time {
    display: block;
    margin-bottom: 5px
}

.publish-aside .sort {
    padding: 0 0 10px;
    border-bottom: 1px solid #e2eaec;
    margin-bottom: 10px
}

.publish-aside .sort:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.publish-aside .sort p {
    line-height: 26px;
    margin-right: 10px
}

.publish-aside .sort .drop-btn-default > a {
    font-size: 14px
}

.publish-aside .check:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.publish-aside .check li {
    margin-bottom: 5px
}

.publish-aside .check input {
    margin-right: 5px;
    position: relative;
    top: 1px
}

.search-results {
    margin-bottom: 8px;
    font-size: 14px;
    color: #666
}

.hierarchical-list {
    position: relative;
    margin-bottom: 15px
}

.hierarchical-list:before {
    content: "";
    width: 1px;
    position: absolute;
    background: #21d376;
    left: 22px;
    top: 30px;
    bottom: 22px;
    display: block;
    padding-bottom: 23px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.hierarchical-list dt {
    height: 45px;
    line-height: 45px;
    background: #eff4f5;
    padding: 0 15px;
    border-radius: 3px
}

.hierarchical-list dt .title {
    position: absolute;
    font-size: 16px;
    width: 100%;
    cursor: pointer
}

.hierarchical-list dt .title:before {
    content: "";
    height: 11px;
    width: 11px;
    border: 2px solid #21d376;
    border-radius: 100%;
    background: #fff;
    margin-right: 10px;
    display: inline-block;
    position: relative;
    top: 2px
}

.hierarchical-list dt .hierarchical-item-title:after {
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #333;
    position: absolute;
    top: 50%;
    margin-top: -2px;
    margin-left: 5px;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.hierarchical-list dt .btn {
    height: 26px;
    line-height: 26px;
    margin-top: 9px
}

.hierarchical-list.close dt .title:after {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.hierarchical-list.close dd {
    display: none
}

.hierarchical-list.close:before {
    display: none
}

.hierarchical-list.close:after {
    display: none
}

.hierarchical-list dd {
    padding-left: 55px
}

.hierarchical-list dd .inner {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #eff4f5;
    padding-right: 15px
}

.hierarchical-list dd .title {
    position: relative
}

.hierarchical-list dd .title:before {
    content: "";
    height: 8px;
    width: 8px;
    background: #21d376;
    border-radius: 100%;
    position: absolute;
    left: -12px;
    top: 50%;
    margin-top: -4px
}

.hierarchical-list dd .title:after {
    content: "";
    height: 1px;
    width: 22px;
    border-top: 1px dotted #21d376;
    position: absolute;
    left: -32px;
    top: 10px
}

.hierarchical-list dd a {
    float: right;
    color: #0096C4;
    margin-left: 20px
}

.hierarchical-list dd a:hover {
    color: #48b6d7
}

.select-area {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.select-area:before {
    content: "\e6bb";
    font-family: kf5;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 18px;
    margin-left: -9px;
    color: #999
}

.select-area-wrap {
    width: 225px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 20px
}

.select-area-wrap:last-child {
    margin-right: 0
}

.select-area-wrap h4 {
    margin-bottom: 5px
}

.select-area-box {
    border: 1px solid #e2eaec;
    height: 290px;
    overflow-y: auto
}

.select-area-list {
    padding: 8px 0
}

.select-area-list a {
    color: #333;
    font-size: 12px;
    padding: 6px 10px;
    display: block
}

.select-area-list a:hover {
    background: #eff4f5
}

.area-filter {
    padding: 5px 8px;
    border-bottom: 1px solid #e2eaec
}

.area-filter input {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 40px;
    border: 1px solid #e2eaec;
    height: 29px
}

.user-center-title .btn {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.user-center-title,
.table-top-info {
    padding: 20px 20px 0;
    background: #faf9f9;
    border-bottom: 1px solid #e2eaec;
    position: relative
}

.user-center-title:after,
.table-top-info:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.user-center-title > .top,
.table-top-info > .top {
    padding-bottom: 20px;
    border-bottom: 1px solid #eff4f5
}

.user-center-title > .top:after,
.table-top-info > .top:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.user-center-title > .bottom,
.table-top-info > .bottom {
    padding-top: 15px;
    border-top: 1px solid #fff
}

.user-center-title .user-info,
.table-top-info .user-info {
    float: left;
    white-space: nowrap;
    min-width: 300px
}

.user-center-title .user-info h4,
.table-top-info .user-info h4 {
    font-size: 18px;
    padding-top: 3px;
    margin-bottom: 4px
}

.user-center-title .user-info h4 input,
.table-top-info .user-info h4 input {
    font-size: 18px;
    margin-left: -5px;
    width: 500px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5px;
    border-color: transparent;
    background: transparent
}

.user-center-title .user-info h4 input:hover,
.table-top-info .user-info h4 input:hover {
    border-color: #e2eaec;
    background: #fff
}

.user-center-title .user-info h4 input:focus,
.table-top-info .user-info h4 input:focus {
    border-color: #21d376;
    background: #fff
}

.user-center-title .user-info h4 + .drop-btn-default,
.table-top-info .user-info h4 + .drop-btn-default {
    background: transparent
}

.user-center-title .user-info h4 + .drop-btn-default > a,
.table-top-info .user-info h4 + .drop-btn-default > a {
    border: 0;
    padding-left: 2px;
    padding-right: 28px
}

.user-center-title .user-info h4 + .drop-btn-default > a:after,
.table-top-info .user-info h4 + .drop-btn-default > a:after {
    border: 0
}

.user-center-title .user-btn-list,
.table-top-info .user-btn-list {
    float: right
}

.user-center-title .user-btn-list > li,
.table-top-info .user-btn-list > li {
    float: left;
    margin-left: 5px;
    padding-top: 12px
}

.user-center-title .user-avatar,
.table-top-info .user-avatar {
    height: 60px;
    width: 60px;
    float: left;
    margin-right: 10px;
    text-align: center
}

.user-center-title .user-avatar.view-only:after,
.table-top-info .user-avatar.view-only:after {
    display: none
}

.user-center-title .user-avatar.view-only:before,
.table-top-info .user-avatar.view-only:before {
    display: none
}

.user-center-title .user-avatar.view-only .icon-close,
.table-top-info .user-avatar.view-only .icon-close {
    display: none
}

.user-center-title .user-avatar:before,
.table-top-info .user-avatar:before {
    content: "";
    background: rgba(0, 0, 0, .4);
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 100%;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    opacity: 0;
    z-index: 1
}

.user-center-title .user-avatar:after,
.table-top-info .user-avatar:after {
    content: "\e6a8";
    color: #fff;
    line-height: 60px;
    font-family: kf5;
    position: absolute;
    font-size: 25px;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    opacity: 0;
    z-index: 2;
    padding-top: 2px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
}

.user-center-title .user-avatar .icon-close,
.table-top-info .user-avatar .icon-close {
    position: absolute;
    height: 18px;
    width: 18px;
    border: 1px solid #fff;
    border-radius: 100%;
    background: #333;
    color: #fff;
    line-height: 18px;
    text-align: center;
    right: -5px;
    top: 0;
    z-index: 10;
    display: none
}

.user-center-title .user-avatar .icon-close:hover,
.table-top-info .user-avatar .icon-close:hover {
    background: #F43530
}

.user-center-title .user-avatar:hover:before,
.table-top-info .user-avatar:hover:before,
.user-center-title .user-avatar.hover:before,
.table-top-info .user-avatar.hover:before {
    opacity: 1
}

.user-center-title .user-avatar:hover:after,
.table-top-info .user-avatar:hover:after,
.user-center-title .user-avatar.hover:after,
.table-top-info .user-avatar.hover:after {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
}

.search-page-title {
    padding: 20px 20px 0;
    background: #faf9f9;
    border-bottom: 1px solid #e2eaec;
    position: relative;
    border-radius: 3px 3px 0 0
}

.search-page-title:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.search-page-title > .top {
    padding-bottom: 20px;
    border-bottom: 1px solid #eff4f5
}

.search-page-title > .top:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.search-page-title > .bottom {
    padding-top: 15px;
    border-top: 1px solid #fff
}

.search-all {
    position: relative
}

.search-all .drop-btn-default > a {
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 35px 0 15px;
    border-radius: 3px 0 0 3px
}

.search-all .drop-btn-default > a:after {
    padding-right: 15px;
    margin-left: 10px;
    height: 41px;
    line-height: 41px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 0
}

.search-all input[type=search] {
    height: 42px;
    width: 70%;
    font-size: 16px;
    padding: 0 10px;
    float: left;
    margin-right: 10px;
    border-radius: 0 3px 3px 0;
    margin-left: -1px;
    position: relative
}

.search-all input[type=submit] {
    -webkit-font-smoothing: antialiased;
    height: 42px;
    width: 70px;
    border-radius: 3px;
    background: #21d376;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    color: #fff;
    cursor: pointer
}

.search-all input[type=submit]:hover {
    background: #2bdd80
}

.search-all input[type=submit]:focus {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3) inset
}

.tab-title1 {
    clear: both
}

.tab-title1:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.tab-title1 > li {
    float: left;
    position: relative
}

.tab-title1 > li:hover .sub-title {
    display: block
}

.tab-title1 > li > a {
    color: #333;
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-top: 2px solid transparent;
    position: relative;
    bottom: -1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 2px
}

.tab-title1 .active > a {
    background: #fff;
    border-top-color: #21d376;
    border-left-color: #e2eaec;
    border-right-color: #e2eaec
}

.tab-title1 .sub-title {
    position: absolute;
    background: #fff;
    border: 1px solid #ced6d8;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    padding: 5px 0;
    border-radius: 3px;
    display: none;
    z-index: 2
}

.tab-title1 .sub-title a {
    color: #333;
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    white-space: nowrap
}

.tab-title1 .sub-title a:hover {
    background: #eff4f5
}

.sub-switch-menu {
    padding-bottom: 20px;
    border-bottom: 1px solid #eff4f5;
    margin-bottom: 15px
}

.sub-switch-menu .title {
    float: left;
    line-height: 27px;
    margin-right: 10px
}

.sub-switch-menu ul,
.sub-switch-menu li {
    float: left
}

.sub-switch-menu li {
    margin-right: 12px
}

.sub-switch-menu li > a {
    color: #333;
    display: block;
    height: 26px;
    line-height: 26px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 3px
}

.sub-switch-menu li > a:hover {
    color: #0dbf62
}

.sub-switch-menu .active > a {
    color: #0dbf62;
    border-color: #21d376
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.flipOutX,
.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    z-index: 999999;
    width: 100px;
    text-align: center
}

.loading > div {
    width: 20px;
    height: 20px;
    background-color: #36d5ac;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.loading .loading1 {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s
}

.loading .loading2 {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s
}

@-webkit-keyframes bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1)
    }
}

@keyframes bouncedelay {

    0%,
    80%,
    100% {
        transform: scale(0);
        -webkit-transform: scale(0)
    }

    40% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

a {
    cursor: pointer
}

.col > .ember-view > header {
    padding: 0 20px;
    border-bottom: 1px solid #eff4f5;
    background: #faf9f9;
    border-radius: 3px 3px 0 0
}

.col > .ember-view > header:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.iframe-box {
    padding-top: 50px
}

#topic_list.ui-sortable dl {
    margin-bottom: 10px
}

#topic_list.ui-sortable dl:before,
#topic_list.ui-sortable dl:after {
    display: none !important
}

#topic_list.ui-sortable .title:before {
    display: none !important
}

.satisfaction-box {
    padding: 20px;
    border-bottom: 1px solid #eff4f5
}

.satisfaction-box h3 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 700
}

.satisfaction-box .status {
    font-size: 14px;
    position: relative;
    top: -1px;
    font-weight: 400
}

.satisfaction-box .satisfaction-reply {
    max-width: 640px;
    line-height: 1.8em;
    margin-bottom: 10px
}

.satisfaction-box .satisfaction-reply .title {
    font-weight: 700
}

.satisfaction-box .satisfaction-reply > p:not(:last-child) {
    margin-bottom: 5px
}

.edui-default .edui-editor {
    border-radius: 3px;
    overflow-x: hidden;
    border: 1px solid #e2eaec
}

.edui-default .edui-editor:hover {
    border-color: #ced6d8
}

.edui-default .edui-editor:focus {
    border-color: #21d376;
    box-shadow: 0 0 3px rgba(33, 211, 118, .35)
}

.edui-default .edui-editor-toolbarboxinner {
    background: #faf9f9;
    border-bottom: 1px solid #e2eaec;
    border-radius: 3px 3px 0 0
}

.widget-head .title {
    line-height: 28px;
    height: 28px
}

#password_strength {
    height: 15px;
    display: block;
    width: 294px;
    background: #eff4f5;
    margin-top: 10px;
    border-radius: 3px;
    position: relative
}

#password_strength:after {
    content: "";
    position: absolute;
    height: 15px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    width: 0;
    left: 0;
    top: 0;
    border-radius: 3px
}

#password_strength.weak:after {
    width: 33.33333333%;
    background: #F43530
}

#password_strength.medium:after {
    width: 66.66666666%;
    background: #ffa900
}

#password_strength.strong:after {
    width: 100%;
    background: #21d376
}

.kf5-uploader {
    margin: 15px 0 0
}

.kf5-uploader:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.attachment_item {
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 12px;
    margin-bottom: 10px;
    background: #eff4f5
}

.attachment_item .preview_image {
    margin-top: 10px
}

.attachment_item a {
    color: #0096C4;
    margin-right: 10px
}

.attachment_item a:hover {
    color: #48b6d7
}

.attachment_item .file_size {
    margin-right: 10px
}

.field_editable {
    cursor: text;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.field_editable:hover {
    border-color: #ced6d8
}

.field_showing input,
.field_showing textarea {
    position: relative;
    top: -5px;
    display: none
}

.no-border {
    border-color: transparent;
    background: transparent !important
}

.tag-out-box {
    padding: 0 5px;
    border: 1px solid #ced6d8;
    border-radius: 3px;
    cursor: text;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    top: -5px;
    background: #fff
}

.tag-out-box:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.tag-out-box.disabled {
    background: #f5f5f5;
    border-color: #bac2c4;
    color: #999
}

.tag-out-box.borderless,
.tag-out-box.no-border {
    border-color: transparent
}

.tag-out-box.borderless:hover,
.tag-out-box.no-border:hover {
    border-color: #bac2c4
}

.tag-out-box:hover {
    border-color: #bac2c4
}

.tag-out-box.green {
    border-color: #21d376 !important
}

.tag-out-box.red {
    border-color: #F43530 !important
}

.tag-out-box.focus {
    border-color: #21d376;
    box-shadow: 0 0 3px rgba(33, 211, 118, .35)
}

.tag-out-box .tag {
    overflow-y: hidden;
    height: 22px;
    float: left;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    cursor: default;
    list-style: none;
    font-size: 12px;
    line-height: 22px;
    padding: 0 8px;
    background: #fff5e8;
    color: #374051;
    border-radius: 40px;
    margin-right: 5px;
    margin-top: 3px;
    position: relative
}

.tag-out-box .tag > span {
    margin-left: 5px
}

.tag-out-box .close {
    color: #333;
    font-size: 14px;
    position: absolute;
    right: 0;
    top: 0;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    opacity: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    color: #999
}

.tag-out-box .close:hover {
    color: #F43530
}

.tag-out-box .close i {
    line-height: 22px
}

.tag-out-box .tag:hover {
    padding-right: 20px
}

.tag-out-box .tag:hover .close {
    opacity: 1
}

.tag-out-box input[type=text].add-tag {
    height: 28px;
    width: 120px !important;
    padding: 0 5px;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent
}

.tag-out-box .drop-box a > span {
    margin-left: 5px
}

.tag-out-box .datalist {
    position: absolute;
    border: 1px solid #ced6d8;
    left: 0;
    top: 105%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    padding: 5px 0;
    border-radius: 3px;
    white-space: normal;
    width: 100%;
    max-width: 100%
}

.tag-out-box .datalist li {
    line-height: 1.5em;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px
}

.tag-out-box .datalist li:hover {
    background: #eff4f5
}

.tag-out-box .datalist .active {
    background: #fff5e8 !important;
    cursor: default
}

.tag-fixed {
    padding: 0 5px
}

.tag-fixed:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.tag-fixed span {
    height: 22px;
    float: left;
    cursor: default;
    list-style: none;
    font-size: 12px;
    line-height: 22px;
    padding: 0 8px;
    background: #fff5e8;
    color: #374051;
    border-radius: 40px;
    margin-right: 5px;
    margin-top: 4px;
    position: relative
}

.drop-box {
    padding: 5px 0
}

.drop-box li > a {
    color: #333;
    padding: 5px 10px;
    display: block
}

.drop-box li > a:hover {
    background: #eff4f5
}

.drop-box li > label {
    color: #333;
    padding: 5px 20px 5px 10px;
    display: block
}

.drop-box li > label:hover {
    background: #eff4f5
}

.drop-box li > label input {
    margin-right: 5px
}

.matchlist:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.matchlist .choice {
    height: 23px;
    float: left;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    cursor: default;
    list-style: none;
    font-size: 12px;
    line-height: 23px;
    padding: 0 8px;
    background: #fff5e8;
    color: #374051;
    border-radius: 40px;
    margin-right: 8px;
    margin-bottom: 5px;
    position: relative
}

.matchlist .input_area {
    clear: both
}

.matchlist .input_area input {
    -webkit-appearance: none;
    appearance: none;
    height: 21px;
    padding: 0 8px;
    background: #BCC5C7;
    border: 1px solid #BCC5C7;
    border-radius: 40px;
    font-size: 12px;
    width: 48px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.matchlist .input_area input::-webkit-input-placeholder {
    color: #fff
}

.matchlist .input_area input:-moz-placeholder {
    color: #fff
}

.matchlist .input_area input::-moz-placeholder {
    color: #fff
}

.matchlist .input_area input:-ms-input-placeholder {
    color: #fff
}

.matchlist .input_area input:hover {
    border-color: #8a9395
}

.matchlist .input_area input:focus {
    background: #fff;
    border-color: #8a9395;
    width: 120px;
    box-shadow: none
}

.matchlist li .close {
    font-size: 14px;
    position: absolute;
    right: 0;
    top: 0;
    height: 23px;
    width: 23px;
    line-height: 23px;
    text-align: center;
    opacity: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    color: #999
}

.matchlist li .close:hover {
    color: #F43530
}

.matchlist .choice:hover {
    padding-right: 20px
}

.matchlist .choice:hover .close {
    opacity: 1
}

.match_list {
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ced6d8;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    padding: 5px 0;
    min-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.match_list:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.match_list a {
    display: block;
    padding: 5px 10px;
    font-size: 12px
}

.match_list a:hover {
    background: #eff4f5
}

#ui-datepicker-div {
    z-index: 999
}

.plat-pane a {
    color: #0096C4
}

.plat-pane a:hover {
    color: #48b6d7
}

.ticket-merge h3 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700
}

.ticket-merge p a {
    color: #0096C4
}

.ticket-merge p a:hover {
    color: #48b6d7
}

.ticket-merge .info {
    font-size: 12px;
    color: #999
}

.ticket-merge .line {
    position: relative;
    height: 34px
}

.ticket-merge .line:before {
    content: "";
    height: 1px;
    width: 100%;
    background: #e2eaec;
    position: absolute;
    left: 0;
    top: 50%
}

.ticket-merge .icon-insert-link {
    font-size: 23px;
    height: 34px;
    width: 34px;
    line-height: 34px;
    text-align: center;
    background: #21d376;
    color: #fff;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    margin-left: -17px
}

.ticket-merge .merge-alert {
    margin-bottom: 15px
}

.ticket-merge .ticket-merge-loser {
    padding-bottom: 20px
}

.ticket-merge .ticket-merge-winner {
    padding-top: 18px
}

.ticket-merge .ticket-merge-textarea {
    margin-top: 10px
}

.ticket-merge .ticket-merge-textarea textarea {
    width: 100%;
    height: 80px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px
}

.ticket-merge label {
    margin-top: 5px;
    display: block
}

.satisfaction-stat-top {
    padding: 20px;
    border-bottom: 1px solid #eff4f5;
    font-size: 16px
}

.satisfaction-stat-top:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.satisfaction-stat-top dt {
    display: inline-block;
    margin-right: 40px
}

.satisfaction-stat-top dt span {
    font-size: 80px;
    color: #21d376;
    font-family: 'Open Sans';
    font-weight: 300
}

.satisfaction-stat-top dt span i {
    font-size: 30px;
    margin-left: 5px
}

.satisfaction-stat-top dd {
    display: inline-block;
    padding-right: 25px;
    margin-right: 25px
}

.satisfaction-stat-top dd span {
    font-size: 30px;
    color: #21b1d3;
    margin-left: 5px;
    font-family: 'Open Sans';
    font-weight: 300
}

.satisfaction-stat-top dd .fall {
    color: #F43530
}

.satisfaction-stat-top dd .fall:before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #F43530
}

.satisfaction-stat-top dd .rise {
    color: #21d376
}

.satisfaction-stat-top dd .rise:before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #21d376
}

.satisfaction-stat-bottom {
    padding: 40px 20px 0
}

.satisfaction-stat-bottom:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.satisfaction-stat-bottom h3 {
    font-size: 16px;
    margin-bottom: 40px
}

.satisfaction-stat-info {
    width: 758px;
    float: left;
    margin-bottom: 60px
}

.satisfaction-stat-info:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.satisfaction-stat-info li {
    position: relative;
    display: inline-block;
    width: 210px;
    margin-right: 40px;
    line-height: 1;
    margin-bottom: 50px;
    padding-left: 22px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.satisfaction-stat-info li span {
    font-size: 40px;
    font-family: 'Open Sans';
    float: left;
    margin-right: 8px;
    font-weight: 300;
    margin-top: -3px
}

.satisfaction-stat-info li i {
    display: block;
    font-size: 12px;
    color: #7685AC;
    margin-bottom: 5px;
    padding-top: 2px
}

.satisfaction-stat-info li p {
    font-size: 14px;
    color: #7685AC
}

.satisfaction-stat-info li:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 5px;
    display: inline-block;
    height: 6px;
    width: 6px;
    border-radius: 100%;
    border: 4px solid
}

.satisfaction-stat-info li.list1:before {
    border-color: #21d376
}

.satisfaction-stat-info li.list2:before {
    border-color: #21b1d3
}

.satisfaction-stat-info li.list3:before {
    border-color: #9e5ae3
}

.satisfaction-stat-info li.list4:before {
    border-color: #ffa900
}

.satisfaction-stat-info li.list5:before {
    border-color: #F43530
}

.satisfaction-stat-chart {
    float: left;
    position: relative;
    margin-top: -90px
}

.satisfaction-stat-chart .info {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -75px;
    margin-top: -78px;
    height: 150px;
    width: 150px;
    background: #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 40px;
    font-family: 'Open Sans';
    font-weight: 300
}

.satisfaction-stat-chart .info span {
    padding-top: 32px;
    display: block
}

.satisfaction-stat-chart .info p {
    color: #999;
    font-size: 14px
}

.checkboxlist-db .checkboxlist {
    display: block
}

.checkboxlist {
    margin-right: 10px;
    margin-bottom: 4px;
    line-height: 1.8em
}

.column-chart,
.row-chart {
    text-align: center;
    padding: 10px 0
}

.column-chart:after,
.row-chart:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.column-chart-item {
    display: inline-block;
    width: 60px;
    height: 230px;
    background: #eff4f5;
    border-radius: 3px;
    position: relative;
    margin: 0 10px
}

.column-chart-item .title {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    font-size: 12px
}

.column-item-height {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #FFCD00;
    border-radius: 3px
}

.column-item-height span {
    position: relative;
    top: -20px;
    font-size: 12px;
    color: #888
}

.row-chart-item {
    display: inline-block;
    width: 85%;
    height: 20px;
    border-radius: 3px;
    background: #eff4f5;
    position: relative;
    margin-bottom: 30px
}

.row-chart-item .title {
    position: relative;
    text-align: left;
    bottom: -22px;
    font-size: 12px;
    padding-left: 3px
}

.row-item-width {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
    height: 100%;
    background: #21d376
}

.row-item-width span {
    font-size: 12px;
    position: absolute;
    height: 20px;
    line-height: 20px;
    top: 0;
    right: -30px;
    color: #888
}

.user-filter {
    position: relative;
    float: left
}

.user-filter-save,
.user-filter-clear {
    font-size: 12px
}

.user-filter-save {
    padding: 3px 8px;
    color: #006CA3;
    border-radius: 3px;
    background: #C4EDF6;
    margin-left: 10px
}

.user-filter-clear {
    padding: 3px 8px;
    color: #DC3030;
    border-radius: 3px;
    background: #F5E9D5;
    margin-left: 5px
}

.user-filter-search {
    color: #0096C4;
    margin-left: 12px
}

.user-filter-search:hover {
    color: #48b6d7
}

.user-filter-search:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    top: -1px;
    height: 0;
    width: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #333
}

.user-filter-content {
    position: absolute;
    top: 50px;
    left: 0;
    background: #fff;
    border: 1px solid #D7D7D7;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
    border-radius: 3px;
    line-height: 1
}

.user-filter-content:before {
    content: "";
    height: 10px;
    width: 10px;
    border: 1px solid #D7D7D7;
    background: #fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: -6px;
    left: 34px
}

.user-filter-content .user-filter-inner {
    background: #fff;
    padding: 15px 20px;
    min-width: 490px;
    border-radius: 3px;
    position: relative
}

.user-filter-content fieldset {
    padding-bottom: 5px;
    padding-top: 15px;
    border-bottom: 1px dotted #e2eaec
}

.user-filter-content .field-item {
    line-height: 32px;
    margin-bottom: 5px
}

.user-filter-content .field-item label {
    width: 60px;
    margin-right: 10px;
    display: inline-block
}

.user-filter-content .field-item input[type=text] {
    height: 30px;
    width: 300px;
    padding: 0 9px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.user-filter-content .field-item .drop-btn-default {
    display: inline-block;
    width: 320px;
    margin-top: 0;
    position: relative;
    top: 10px
}

.user-filter-content .field-item .item {
    width: auto;
    display: inline-block;
    margin: 0
}

.user-filter-content .field-item .item input {
    width: 120px
}

.user-filter-content .field-item .tag-box {
    display: block;
    margin-top: 5px;
    margin-left: 70px;
    max-width: 320px
}

.user-filter-content .field-item .tag-out-box {
    border-color: #ced6d8
}

.user-filter-content .field-item .tag-out-box:hover {
    border-color: #bac2c4
}

.user-filter-content .field-item .drop-btn-default > a {
    font-size: 12px
}

.user-filter-content .field-item:hover .delete {
    opacity: 1
}

.user-filter-content .delete {
    display: inline-block;
    font-size: 16px;
    color: #999;
    margin-left: 4px;
    position: relative;
    top: 2px;
    opacity: 0
}

.user-filter-content .delete:hover {
    color: #F43530
}

.user-filter-content .add-filter {
    padding-bottom: 15px
}

.user-filter-content .add-filter a {
    color: #0096C4;
    font-size: 12px;
    margin-left: 75px
}

.user-filter-content .add-filter a:hover {
    color: #48b6d7
}

.user-filter-content .bottom-set {
    padding-top: 20px;
    padding-bottom: 20px
}

.user-filter-content .bottom-set a {
    color: #0096C4
}

.user-filter-content .bottom-set a:hover {
    color: #48b6d7
}

.user-filter-content .bottom-set .fl {
    color: #F43530
}

.user-filter-content .bottom-set .fl:hover {
    color: #ff6d73
}

.user-filter-content .bottom-set .fr {
    margin-right: 20px
}

.kchat-panel-main {
    padding-top: 50px;
    padding-left: 55px;
    height: 100vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
}

.kchat-panel-main iframe {
    width: 100%;
    height: 100%
}

#kchat-im-panel {
    width: 1024px;
    margin: auto;
    box-shadow: 0 4px 30px #999
    /*rgba(0, 0, 0, .5)*/;
    border-radius: 6px;
    overflow: hidden;
    background: #FBFCFD;
    z-index: 12;
    position: fixed;
    display: block;
    top: 25px
    /*60px*/;
    left: 100%;
    margin-left: -1100px;
    height: 700px;
    border-radius: 0;
    /*height: 622px;*/
    /*border: 1px solid #255aad;*/
}

/* modified by js 20190302: 增加了“width:100%”样式，目的是实现聊天窗口全屏时不再是之前的固定1024宽度，而是真正的占满宽度 */
#kchat-im-panel.expand {
    top: 0;
    margin: 0;
    right: 0;
    left: auto;
    bottom: 0;
    /* border-radius: 6px; */
    height: auto;
    /* box-shadow: -8px 0 12px rgba(0, 0, 0, .06); */
    width: 100%
}

.kchat-im-panel-header {
    position: relative;
    z-index: 10;
    height: 25px;
    border-bottom: 1px solid #F0F0F0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.kchat-im-panel-header:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.drag-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: default
}

.kchat-alert {
    padding: 0 20px;
    height: 34px;
    line-height: 34px;
    width: 350px;
    border-radius: 0 0 3px 3px;
    position: absolute;
    top: -34px;
    left: 50%;
    margin-left: -195px;
    font-size: 13px;
    text-align: center;
    z-index: 10
}

.kchat-alert.warning {
    background: #FFF0EB;
    color: #ea2828
}

.kchat-alert.success {
    background: #DBFFE5;
    color: #008f30
}

.kchat-alert.show {
    -webkit-animation: kchat-alert-show 6s linear;
    -moz-animation: kchat-alert-show 6s linear;
    -o-animation: kchat-alert-show 6s linear;
    animation: kchat-alert-show 6s linear
}

lesshat-selector {
    -lh-property: 0
}

@-webkit-keyframes kchat-alert-show {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1
    }

    5% {
        -webkit-transform: translate3d(0, 34px, 0);
        opacity: 1
    }

    90% {
        -webkit-transform: translate3d(0, 34px, 0);
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(0, 34px, 0);
        opacity: 0
    }
}

@-moz-keyframes kchat-alert-show {
    0% {
        -moz-transform: translate3d(0, 0, 0);
        opacity: 1
    }

    5% {
        -moz-transform: translate3d(0, 34px, 0);
        opacity: 1
    }

    90% {
        -moz-transform: translate3d(0, 34px, 0);
        opacity: 1
    }

    100% {
        -moz-transform: translate3d(0, 34px, 0);
        opacity: 0
    }
}

@-o-keyframes kchat-alert-show {
    0% {
        -o-transform: translate3d(0, 0, 0);
        opacity: 1
    }

    5% {
        -o-transform: translate3d(0, 34px, 0);
        opacity: 1
    }

    90% {
        -o-transform: translate3d(0, 34px, 0);
        opacity: 1
    }

    100% {
        -o-transform: translate3d(0, 34px, 0);
        opacity: 0
    }
}

@keyframes kchat-alert-show {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }

    5% {
        -webkit-transform: translate3d(0, 34px, 0);
        -moz-transform: translate3d(0, 34px, 0);
        -ms-transform: translate3d(0, 34px, 0);
        transform: translate3d(0, 34px, 0);
        opacity: 1
    }

    90% {
        -webkit-transform: translate3d(0, 34px, 0);
        -moz-transform: translate3d(0, 34px, 0);
        -ms-transform: translate3d(0, 34px, 0);
        transform: translate3d(0, 34px, 0);
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(0, 34px, 0);
        -moz-transform: translate3d(0, 34px, 0);
        -ms-transform: translate3d(0, 34px, 0);
        transform: translate3d(0, 34px, 0);
        opacity: 0
    }
}

.kchat-im-panel-header-user {
    width: 58px;
    background-color: #242C40;
    box-shadow: 1px 0 15px rgba(0, 0, 0, .16);
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.kchat-im-panel-header-user .avatar-wrapper {
    /* float: left; */
    /* margin-right: 10px; */
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 4px;
    margin-top: 36px;
    margin-left: 9px;
    /* border: 1px solid rgba(255, 255, 255, 1); */
    /* display: inline-block */
    /* add 20190103 */;
}

/* 20181217: 新的本地用户头像显示逻辑实施后，暂停了原先的img css样式，只启用最简单的width 和height */
.kchat-im-panel-header-user img {
    height: 100%;
    width: 100%;
    /* position: absolute; */
    /*float: left; margin-right: 10px; border: 1px solid rgba(255, 255, 255, 1);*/
}

/*box-shadow: 0 0 3px rgba(255, 255, 255, 0.5)*/
.kchat-im-panel-header-user .avatar-wrapper .user-status {
    color: #fff;
    line-height: 1;
    position: absolute;
    bottom: 55px;
    left: 7px;
}

.kchat-im-panel-header-user .avatar-wrapper .user-status:before {
    content: "";
    box-shadow: 0 0 2px rgba(0, 0, 0, .1);
    /*height: 10px; width: 10px;*/
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 100%;
}

.kchat-im-panel-header-user .avatar-wrapper .online:before {
    background: #57dc2d
    /*#21d376*/
}

.kchat-im-panel-header-user .avatar-wrapper .offline:before {
    background: #BABABA
}

.kchat-im-panel-header-user .info {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.kchat-im-panel-header-user .info h4 {
    margin-bottom: 6px;
    /*line-height: 1;*/
    color: #fff;
    /*padding-top: 7px;*/
    padding-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 158px;
}

.kchat-im-panel-header-user .info h4 a {
    color: #fff;
}

.kchat-im-panel-header-user .info .whatsup {
    margin-left: -3px;
    margin-top: 2px;
    font-size: 12px;
    position: relative;
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 158px;
}

.kchat-im-panel-header-user .info .whatsup a {
    color: #fff;
    line-height: 1;
    display: inline-block;
}

.kchat-im-panel-header-user .info .whatsup a:before {
    content: "\e6aa";
    box-shadow: 0 0 2px rgba(0, 0, 0, .1);
    height: 10px;
    width: 10px;
    color: #f5a623;

    font-family: 'kf5';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*.kchat-im-panel-header-user .info .whatsup .icon-edit{
	line-height: 1;display: inline-block;
}
.kchat-im-panel-header-user .info .whatsup .icon-edit:before{
	content: "\e6aa";
	box-shadow: 0 0 2px rgba(0, 0, 0, .1);
	height: 10px; width: 10px;
	color: #f5a623;
}*/


/* TODO drop START !!!!!!!!!!!!!!!!!!!!!!!!! */
/* 20181218: 上方新的用户状态显示UI实现后，以下state相关的css都可以删除了！！！！ */
.kchat-im-panel-header-user .info .state {
    font-size: 12px;
    position: relative;
    float: left;
    padding-bottom: 10px
}

.kchat-im-panel-header-user .info .state a {
    color: #fff;
    line-height: 1
}

.kchat-im-panel-header-user .info .state a:before {
    content: "";
    box-shadow: 0 0 2px rgba(0, 0, 0, .1);
    /*height: 10px; width: 10px;*/
    height: 8px;
    width: 8px;
    display: inline-block;
    border-radius: 100%;
    margin-right: 5px
}

.kchat-im-panel-header-user .info .state a:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #fff
    /*#358CB3*/;
    position: relative;
    top: -1px
}

.kchat-im-panel-header-user .info .online:before {
    background: #57dc2d
    /*#21d376*/
}

.kchat-im-panel-header-user .info .offline:before {
    background: #BABABA
}

.kchat-im-panel-header-user .info .busyline:before {
    background: #F43530
}

.kchat-im-panel-header-user .info .leaveline:before {
    background: #F5A623
}

.kchat-im-panel-header-user .state:hover .state-choice {
    display: block
}

/*!!!!!!!!!!!!!!!!!!*/
.kchat-im-panel-header-user .state-choice {
    display: none;
    position: absolute;
    border-radius: 3px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .2);
    top: 25px;
    left: 50%;
    margin-left: -32px
}

.kchat-im-panel-header-user .state-choice:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    margin-left: -8px;
    top: -5px;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff
}

.kchat-im-panel-header-user .state-choice ul {
    background: #fff;
    position: relative;
    z-index: 2;
    border-radius: 3px;
    white-space: nowrap;
    padding: 8px 0
}

.kchat-im-panel-header-user .state-choice li {
    font-size: 12px;
    padding: 4px 15px;
    color: #333;
    cursor: pointer
}

.kchat-im-panel-header-user .state-choice li:hover {
    background: #eff4f5
}

.kchat-im-panel-header-user .state-choice li:before {
    content: "";
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 100%;
    margin-right: 5px
}

.kchat-im-panel-header-user .state-choice .online:before {
    background: #21d376
}

.kchat-im-panel-header-user .state-choice .offline:before {
    background: #BABABA
}

.kchat-im-panel-header-user .state-choice .busyline:before {
    background: #F43530
}

.kchat-im-panel-header-user .state-choice .leaveline:before {
    background: #F5A623
}

/* TODO drop END !!!!!!!!!!!!!!!!!!!!!!!!! */

/* add by js 20181029 */
#im-panel-header-setup {
    display: inline;
    position: absolute;
    /* right: 10px; */
    right: 14px;
    top: 400px;
    width: 18px;
    text-align: center;
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 23px;
    color: rgba(215, 214, 214, 0.96);
}

#im-panel-header-setup i {
    color: white;
}

/* add by js 20181205 */
#im-panel-header-setup-popup .kchat-pop {
    font-size: 13px;
    left: 63px;
    top: 290px;
    z-index: 10;
}

#im-panel-header-setup-popup .kchat-pop ul {
    padding: 8px 0;
}

#im-panel-header-setup-popup .kchat-pop li {
    border-bottom: none;
    height: auto;
    padding: 4px 15px;
}

#im-panel-header-setup-popup .kchat-pop:after {
    top: -4px;
    left: 85%;
}

.kchat-im-panel-header-operation {
    width: 100%;
    height: 25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* padding: 0 20px; */
    position: relative
}

.kchat-im-panel-header-operation nav {
    position: absolute;
    bottom: 0
}

.kchat-im-panel-header-operation nav:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.kchat-im-panel-header-operation nav a {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*height: 34px; line-height: 34px;*/
    height: 28px;
    line-height: 28px;
    border-radius: 2px 2px 0 0;
    /* color: #fff; */
    text-align: center;
    /*padding: 0 15px*/
    padding: 0 10px;
    font-size: 13px;
}

.kchat-im-panel-header-operation nav a:hover {
    background: rgba(255, 255, 255, .15)
}

.kchat-im-panel-header-operation nav a.active {
    background: #fff;
    color: #35B3E1
}

.kchat-im-panel-header-operation .nav1 {
    left: 20px
}

.kchat-im-panel-header-operation .nav2 {
    /*left: 468px;*/
    left: 538px;
    padding-left: 12px
}

/* 20200315由原“background: #fafbf6”改为了现值 */
.kchat-im-panel-header-operation .nav2 .active {
    /*background: #fbfcfd;*/
    background: #FBFdFf;
}

/* add by js 20190302：实现在聊天窗口全屏模式下，右侧详情tabs的位置能跟非全屏时保持一致！ */
#kchat-im-panel.expand .kchat-im-panel-header-operation .nav2 {
    left: calc(100% - 262px) !important;
}

.kchat-im-panel-header-operation .right-top-btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 10px 0 0
}

.kchat-im-panel-header-operation .right-top-btn a {
    float: left;
    height: 28px;
    line-height: 28px;
    padding: 0 6px;
    color: rgba(255, 255, 255, .6);
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.kchat-im-panel-header-operation .right-top-btn a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .2)
}

.kchat-im-panel-header-operation .right-top-btn .close {
    font-size: 18px
}

.kchat-im-panel-header-operation .right-top-btn .minisize {
    font-size: 18px
}

.kchat-im-panel-header-operation .right-top-btn .expand-open,
.kchat-im-panel-header-operation .right-top-btn .expand-mini {
    font-size: 13px;
    width: 18px;
    text-align: center
}

.kchat-im-panel-header-operation .right-top-btn .expand-mini {
    font-size: 14px;
    display: none
}

.kchat-im-panel-header-operation .right-top-btn .audio-prompt-switch-ison,
.kchat-im-panel-header-operation .right-top-btn .audio-prompt-switch-isoff {
    font-size: 18px;
    width: 18px;
    text-align: center;
}

.kchat-im-panel-body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: calc(100% - 56px);
    height: -webkit-calc(100% - 56px);
    height: -moz-calc(100% - 56px);
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    margin-top: 75px;
}

.kchat-im-panel-body-left {
    width: 58px;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border-right: 1px solid #e2eaec;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    background-color: #242C40;

}

.kchat-talk-list-empty {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

.kchat-talk-list-empty i {
    font-size: 90px;
    color: #eff4f5;
    margin-bottom: 10px;
    display: block
}

.kchat-talk-list-empty p {
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
    line-height: 1.8em;
}

/* 20181025 由js去掉了“.kchat-im-panel-main” 这个上级class限定 */
.kchat-talk-list-empty .icon-talk1 {
    font-size: 140px;
    color: #ebecec;
    display: block;
    margin-bottom: 15px
}

.kchat-talk-list-empty a {
    color: #0096C4;
    margin: 0 5px
}

.kchat-talk-list-empty a:hover {
    color: #48b6d7
}

.kchat-im-panel-visitor {
    padding-bottom: 36px
}

.kchat-im-panel-userlist-nav {
    width: 100%;
    height: auto;
    z-index: 2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex; */
    /* -webkit-flex-shrink: 0; */
    flex-shrink: 0
}

.kchat-im-panel-userlist-nav > div {
    height: 64px;
    margin-bottom: 10px;
}

.kchat-im-panel-userlist-nav a {
    display: block;
    position: relative;
    /* 	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1; */
    /* flex: 1; */
    /* line-height: 36px;
	height: 36px; */
    text-align: center;
    /* border-right: 1px solid #e2eaec; */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* background: #eff4f5;
	border-bottom: 1px solid #e2eaec;
	color: #0096C4 */

    /*height: 60px;*/
}

.kchat-im-panel-userlist-nav a:hover {
    color: #48b6d7
}

.kchat-im-panel-userlist-nav a:last-child {
    border-right: 0
}

.kchat-im-panel-userlist-nav .has-msg:after {
    content: "";
    height: 8px;
    width: 8px;
    border-radius: 100%;
    background: #F43530;
    position: absolute;
    right: 10px;
    top: 8px

}

.kchat-im-panel-userlist-nav .active {
    background: #3873fe;
    height: 100%;
    cursor: default;
    transition: .5s;

}

.kchat-im-panel-userlist-nav > div {
    transition: .5s;
    cursor: pointer;
}

.kchat-im-panel-userlist-nav > div:hover {
    background: #3873fe;

}

/* 20200317 由原“border-top: 1px solid #e2eaec;”修改为现值 */
#im-panel-userlist-bottom {
    color: #9E9E9E;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-top: 1px solid #f6f6f6;
    line-height: 28px;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    padding: 3px 10px;
    font-size: 12px;
    height: 35px
}

#im-panel-userlist-bottom:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

#im-panel-userlist-bottom a {
    color: #0096C4
}

#im-panel-userlist-bottom a:hover {
    color: #48b6d7
}

.im-panel-userlist-bottom_ok {
    background: #e9faeb;
}

.im-panel-userlist-bottom_warn {
    background: #fff6ea;
}

#im-panel-userlist-bottom-imnetworkstatusdesc {
    /*font-size: 18px;*/
    font-size: 12px;
    /*font-family: Georgia;padding-left: 3px;padding-right: 3px;*/
    padding-left: 0px;
    padding-right: 3px;
}

/*.im-panel-userlist-bottom-imnetworkstatusdesc_ok{color: #55a900;}
.im-panel-userlist-bottom-imnetworkstatusdesc_warn{color: #f26c4f;}*/
#im-panel-userlist-bottom-nextbtn {
    color: #FFF !important;
    background: #225aad
    /*#fefefe*/;
    /*border: 1px solid #e8e8e8;border-radius: 4px;*/
    padding: 0 4px 0 4px;
    line-height: 24px;
    height: 24px;
    margin-top: 2px;
}

#im-panel-userlist-bottom-imnetworkstatusicon:before {
    content: "";
    height: 8px;
    width: 8px;
    display: inline-block;
    border-radius: 100%;
    margin-right: 2px;
}

#im-panel-userlist-bottom-imnetworkstatusicon.light:before {
    background-color: #f1f515 /*#b0ff34*/ !important;
    border: 1px solid #d1d505 !important;
}

/*.im-panel-userlist-bottom-imnetworkstatusicon_ok:before {background-color: #91e43c;border: 1px solid #75c920;}
.im-panel-userlist-bottom-imnetworkstatusicon_warn:before {background-color: #ff8c6f; border: 1px solid #f26c4f;}*/
.im-panel-userlist-bottom_ok #im-panel-userlist-bottom-imnetworkstatusicon:before {
    background-color: #91e43c;
    border: 1px solid #75c920;
}

.im-panel-userlist-bottom_warn #im-panel-userlist-bottom-imnetworkstatusicon:before {
    background-color: #ff8c6f;
    border: 1px solid #f26c4f;
}

.im-panel-userlist-bottom_ok #im-panel-userlist-bottom-imnetworkstatusdesc {
    color: #55a900;
}

.im-panel-userlist-bottom_warn #im-panel-userlist-bottom-imnetworkstatusdesc {
    color: #f26c4f;
}

.kchat-msg-state {
    position: absolute;
    right: 15px;
    font-size: 13px;
    top: 50%;
    margin-top: -7px
}

.kchat-msg-state a {
    margin-left: 4px;
    color: #666
}

.kchat-msg-state .regular {
    color: #ffa900;
    font-size: 15px
}

.kchat-im-panel-userlist {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 290px;
    height: 100%;
    padding-top: 15px;
    top: 0
}

.kchat-im-panel-userlist .f-list-number-label {
    color: #f26c4f;
}

.kchat-im-panel-userlist .f-list-iconbtn {
    float: right;
    text-align: center;
    height: 32px;
    width: 32px;
    line-height: 32px;
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
}

.kchat-im-panel-userlist .f-list-iconbtn i {
    color: #0096C4;
    font-size: 18px;
}

.kchat-im-panel-userlist .kchat-talk-list-group li .info .msg-num {
    padding: 0 5px;
    color: #fff;
    border-radius: 40px;
    background: #F43530;
    line-height: 18px;
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -9px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 18px;
    text-align: center
}

.kchat-im-panel-userlist .kchat-talk-list-group .close:before {
    content: "\e6c0";
    font-family: kf5;
    position: absolute;
    left: 2px;
    top: 50%;
    font-size: 12px;
    color: #999;
    margin-top: -6px
}

.kchat-im-panel-userlist .kchat-talk-list-group .close {
    display: none
}

.kchat-im-panel-userlist .kchat-talk-list-group .close:hover:before {
    color: #777
}

.kchat-im-panel-userlist .kchat-talk-list-group li:hover .close {
    display: block
}

.kchat-im-panel-userlist .kchat-talk-list-group li .info {
    /*padding-left: 34px*/
    padding-left: 46px;
    width: 220px;
    display: inline-block;
}

.xu_li_name {
    display: inline-block;
    float: right;
    color: #fff;
    margin-top: 5px;
    font-size: 12px;
    background-color: #0dbf62;
    width: 65px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 3px;
}

.kchat-im-panel-userlist .kchat-talk-list-group input {
    float: right;
    margin-top: 4px
}

.kchat-im-panel-userlist .on-from-pic li .info {
    padding-left: 0
}

/*.kchat-im-panel-userlist .offline .avatar-source { background: #c6c6c6 !important }*/
.kchat-im-panel-userlist .offline h3 {
    background: #FBFCFD;
    padding-left: 15px;
    height: 30px;
    line-height: 30px
}

.kchat-im-panel-userlist .offline h3:before {
    display: none
}

/*.kchat-im-panel-userlist .kchat-talk-list-empty { padding-top: 52px; padding-bottom: 52px }*/
/* 20190108: 以下css样式专为优化在dialog中显示的好友验证请求列表的UI START */
#im-verification-reminders-list-wrapper {
    padding-top: 0px;
}

#im-verification-reminders-list-wrapper .kchat-talk-list-empty {
    position: inherit;
}

/*#im-verification-reminders-list-wrapper .icon-talk1 {font-size: 60px;}*/
#im-verification-reminders-list-wrapper .kchat-talk-list-group li {
    border-bottom: 1px solid #eef0f5;
}

#im-verification-reminders-list-wrapper .kchat-talk-list-group li .info p span {
    max-width: 300px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#im-verification-reminders-list-wrapper .kchat-talk-list-group li .info a.reject {
    float: right;
    color: #F43530;
    margin-right: 0px;
    padding: 0 10px;
    height: 18px;
    line-height: 18px;
}

#im-verification-reminders-list-wrapper .kchat-talk-list-group li .info a.agree {
    float: right;
    margin-right: 10px;
    color: #21d376;
    padding: 0 10px;
    height: 18px;
    line-height: 18px;
}

/* 20190108: 以下css样式专为优化在dialog中显示的好友验证请求列表的UI END */

/* 20190312: 以下css样式专为优化在dialog中显示的群成员列表的UI START */
#im-group-member-list-wrapper {
    padding-top: 0px;
}

#im-group-member-list-wrapper .kchat-talk-list-empty {
    position: inherit;
}

/*#im-group-member-list-wrapper .icon-talk1 {font-size: 60px;}*/
#im-group-member-list-wrapper .kchat-talk-list-group li {
    border-bottom: 1px dashed #eef0f5;
}

#im-group-member-list-wrapper .kchat-talk-list-group li h4 {
    padding-right: 35px;
}

#im-group-member-list-wrapper .kchat-talk-list-group li .info p {
    padding-right: 35px;
}

#im-group-member-list-wrapper .kchat-talk-list-group li .info {
    position: relative;
}

#im-group-member-list-wrapper .kchat-talk-list-group li .info p span {
    line-height: 16px;
    height: 16px;
    max-width: 300px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#im-group-member-list-wrapper .kchat-talk-list-group li .info i {
    position: absolute;
    right: 0;
    top: 9px;
}

#im-group-member-list-wrapper .kchat-talk-list-group li .info i.weui-icon-success {
    color: #1890ff !important;
}

#im-group-member-list-wrapper .kchat-talk-list-group li .info p .group_owner_flag,
#im-group-member-list-wrapper .kchat-talk-list-group li .info p .group_me {
    background: #9a9a9a;
    text-align: center;
    color: #FFF;
    border-radius: 2px;
    padding: 0px 4px 0 4px;
    font-size: 12px;
    margin-left: 2px;
    height: 16px;
    line-height: 16px;
}

#im-group-member-list-wrapper .kchat-talk-list-group li .info p .group_owner_flag {
    background: #ecc049;
}

/* 20190312: 以下css样式专为优化在dialog中显示的群成员列表的UI END */

/* 20200312: 以下css样式专为优化在dialog中显示的用户选择框列表的UI START */
#im-user-chooser-list-wrapper {
    padding-top: 0px;
}

#im-user-chooser-list-wrapper .kchat-talk-list-empty {
    position: inherit;
}

/*#im-user-chooser-list-wrapper .icon-talk1 {font-size: 60px;}*/
#im-user-chooser-list-wrapper .kchat-talk-list-group li {
    border-bottom: 1px dashed #eef0f5;
}

#im-user-chooser-list-wrapper .kchat-talk-list-group li h4 {
    padding-right: 35px;
}

#im-user-chooser-list-wrapper .kchat-talk-list-group li .info p {
    padding-right: 35px;
}

#im-user-chooser-list-wrapper .kchat-talk-list-group li .info {
    position: relative;
}

#im-user-chooser-list-wrapper .kchat-talk-list-group li .info p span {
    line-height: 16px;
    height: 16px;
    max-width: 300px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#im-user-chooser-list-wrapper .kchat-talk-list-group li .info i {
    position: absolute;
    right: 0;
    top: 9px;
}

#im-user-chooser-list-wrapper .kchat-talk-list-group li .info i.weui-icon-success {
    color: #1890ff !important;
}

/* 20200312: 以下css样式专为优化在dialog中显示的用户选择框列表的UI END */

.kchat-im-panel-main {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: -75px;

}

.kchat-im-panel-main .chat-box {
    padding: 20px 20px 5px
}

.kchat-im-panel-main.empty .kchat-im-panel-main-chat,
.kchat-im-panel-main.empty .kchat-im-panel-main-info {
    display: none
}

.kchat-im-panel-main-chat {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-right: 1px solid #e2eaec;
    /*width: 470px;*/
    /*width: 540px;*/
    width: auto;
    position: relative;
    background: #fff
}

/* add by js 20190302：增加了以下行，目的是实现聊天窗口全屏时，聊天消息区能自动占满余下宽度 */
#kchat-im-panel.expand .kchat-im-panel-main-chat {
    /*width: 80% !important;*/
    -webkit-flex: 1;
    /* Chrome */
    -ms-flex: 1;
    /* IE 10 */
    flex: 1;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;
    /* OLD - Firefox 19- */
}

.kchat-im-panel-main-chat.list1 {
    padding-bottom: 170px
}

.kchat-im-panel-main-chat.list1 > .scrollbar-box,
.kchat-im-panel-main-chat.list1 .scrollbar-auto {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 200px;
    height: auto
}

.kchat-im-panel-main-chat.list2 {
    padding-bottom: 51px
}

.kchat-im-panel-main-chat.list2 > .scrollbar-box,
.kchat-im-panel-main-chat.list2 .scrollbar-auto {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 51px;
    height: auto
}

.kchat-im-panel-main-chat.list2 .kchat-im-panel-main-chat-textarea {
    border-top: 0
}

.kchat-im-panel-main-chat.list3 {
    padding-bottom: 0
}

.kchat-im-panel-main-chat.list3 > .scrollbar-box,
.kchat-im-panel-main-chat.list3 .scrollbar-auto {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: auto
}

.kchat-im-panel-main-chat-content {
    background: #f8f8f8;
    box-sizing: border-box;
    margin-top: 70px;
}

.kchat-im-panel-main-chat-content.history {
    height: -webkit-calc(100% - 50px);
    height: -moz-calc(100% - 50px);
    height: calc(100% - 50px);
    border-bottom: 0
}

.kchat-im-panel-main-chat-content.empty {
    height: 100%;
    border-bottom: 0
}

.kchat-im-panel-main-chat-textarea {
    background: #fff;
    position: absolute;
    bottom: 45px;
    left: 0;
    right: 0;
    border-top: 1px solid #e2eaec
}

/* 20170112 modifide by js 由原“height: 35px; line-height: 35px;”改为现值 */
.kchat-im-panel-main-chat-textarea .top-bar {
    position: relative;
    z-index: 1;
    padding: 0 20px;
    height: 26px;
    line-height: 26px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyMzgsIDIzOCwgMjM4KSIgc3RvcC1vcGFjaXR5PSIwLjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyMzgsIDIzOCwgMjM4KSIgc3RvcC1vcGFjaXR5PSIwIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: -webkit-linear-gradient(top, rgba(238, 238, 238, .2) 0, rgba(238, 238, 238, 0) 100%);
    background-image: -moz-linear-gradient(top, rgba(238, 238, 238, .2) 0, rgba(238, 238, 238, 0) 100%);
    background-image: -o-linear-gradient(top, rgba(238, 238, 238, .2) 0, rgba(238, 238, 238, 0) 100%);
    background-image: linear-gradient(to bottom, rgba(238, 238, 238, .2) 0, rgba(238, 238, 238, 0) 100%)
}

/* 20170112 modifide by js 由原“line-height: 35px;”改为现值 */
/** 20200315 由原color: #999; 改为了现值 */
.kchat-im-panel-main-chat-textarea .top-bar li {
    float: left;
    font-size: 18px;
    line-height: 19px;
    color: #999b9f;
    margin-right: 18px;
    cursor: pointer
}

.kchat-im-panel-main-chat-textarea .top-bar li:hover {
    color: #777
}

.kchat-im-panel-main-chat-textarea textarea {
    position: relative;
    z-index: 2;
    height: 80px;
    max-height: 80px;
    resize: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 15px 8px;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.6em;
    background: #fff
}

/* 20200317由原“border-top: 1px solid #e2eaec”改为现值 */
.kchat-im-panel-main-chat-textarea .bottom-bar {
    position: relative;
    z-index: 5;
    background: #FBFCFD;
    padding: 0 20px;
    border-top: 1px solid #f6f6f6
}

.kchat-im-panel-main-chat-textarea .bottom-bar:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.kchat-im-panel-main-chat-textarea .bottom-bar .btn {
    margin-top: 8px
}

.kchat-im-panel-main-chat-textarea .bottom-bar .left li {
    float: left;
    margin-right: 20px;
    line-height: 50px;
    position: relative
}

.kchat-im-panel-main-chat-textarea .bottom-bar .left a {
    color: #777
}

.kchat-im-panel-main-chat-textarea .bottom-bar .left a:hover {
    color: #555
}

.kchat-im-panel-main-chat-textarea .bottom-bar .transfer-chat {
    bottom: 45px;
    left: 50%;
    margin-left: -82px;
    width: 160px;
    display: none
}

.kchat-im-panel-main-chat-textarea .bottom-bar .transfer-chat ul {
    max-height: 280px;
    height: auto
}

.kchat-im-panel-main-chat-textarea .bottom-bar .transfer-chat li {
    padding: 8px 15px;
    line-height: 1.6em !important;
    height: auto;
    margin: 0;
    float: none
}

.kchat-im-panel-main-chat-textarea .bottom-bar .transfer-chat .online:before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background: #21d376;
    margin-right: 5px
}

.kchat-im-panel-main-chat-textarea .bottom-bar .transfer-chat .offline:before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background: #b8bcc5;
    margin-right: 5px
}

.kchat-im-panel-main-chat-textarea .bottom-bar .transfer-chat .busyline:before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background: #F43530;
    margin-right: 5px
}

.kchat-im-panel-main-chat-textarea .bottom-bar .transfer-chat .leaveline:before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background: #F5A623;
    margin-right: 5px
}

.kchat-im-panel-main-chat-textarea .bottom-bar .transfer-chat .group:before {
    content: "\e6db";
    display: inline-block;
    font-family: kf5;
    font-size: 15px;
    margin-right: 3px;
    color: #888;
    position: relative;
    top: 2px
}

/* 20200315由原“padding-top: 9px”改为了现值 */
.kchat-im-panel-main-chat-textarea .bottom-bar .send {
    float: right;
    position: relative;
    padding-top: 10px
}

.kchat-im-panel-main-chat-textarea .bottom-bar .send a {
    float: left;
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    background: #3873fe;;
    /*border-radius: 3px 0 0 3px; border: 1px solid rgb(118,187,53);*/
    /*#49A2CD*/
    color: #fff;
    border-radius: 4px 0 0 4px;
}

.kchat-im-panel-main-chat-textarea .bottom-bar .send a:hover {
    background: #3873fe;
}

.kchat-im-panel-main-chat-textarea .bottom-bar .send span {
    color: #fff;
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    border-radius: 0 4px 4px 0;
    background: #3873fe;
    float: left;
    border-left: 1px solid #063890 !important;
    /*border-left: 1px solid #154a9d !important;*/
    /*border: 1px solid rgb(118,187,53); */
    /*#49A2CD*/
    border-left: 0;
    cursor: pointer
}

.kchat-im-panel-main-chat-textarea .bottom-bar .send span:hover {
    background: #49aad8
}

.kchat-im-panel-main-chat-textarea .bottom-bar .send .send-pop {
    bottom: 45px;
    left: 50%;
    margin-left: -88px;
    width: 230px;
    display: none
}

.kchat-im-panel-main-chat-textarea .bottom-bar .send .send-pop ul {
    max-height: 300px;
    height: auto;
    position: relative;
    overflow: auto
}

.kchat-im-panel-main-chat-textarea .bottom-bar .send .send-pop li {
    padding: 8px 15px
}

.kchat-pop,
.select-pop {
    position: absolute;
    border: 1px solid #D0D0D0;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    outline: 0
}

/* .kchat-pop:after, */
.select-pop:after {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    border: 1px solid #D0D0D0;
    box-shadow: 1px 0 4px rgba(0, 0, 0, .12);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    left: 50%;
    margin-left: -5px;
    bottom: -4px;
    background: #fff
}

.kchat-pop ul,
.select-pop ul {
    /*background: #242C40;*/
    position: relative;
    z-index: 2;
    /*color: #FFF;*/
    cursor: pointer;
    border-radius: 3px;
    overflow-y: hidden
}

.kchat-pop li,
.select-pop li {
    border-bottom: 1px solid #eff4f5;
    cursor: pointer
}

.kchat-pop li:last-of-type,
.select-pop li:last-of-type {
    border-bottom: 0
}

.kchat-pop li:hover,
.select-pop li:hover,
.kchat-pop li.active,
.select-pop li.active {
    /*background: #eff4f5*/
    opacity: 0.8;
}

.kchat-pop li.active:hover,
.select-pop li.active:hover {
    background: #e5eaeb
}

.kchat-pop label,
.select-pop label {
    padding-left: 20px;
    position: relative;
    display: block
}

.kchat-pop label input,
.select-pop label input {
    position: absolute;
    left: 0;
    top: 3px
}

.select-pop.bottom:after {
    top: -4px
}

.select-pop ul {
    padding: 5px 0
}

.select-pop li {
    color: #333;
    font-size: 13px;
    padding: 5px 10px;
    line-height: 20px
}

.select-pop input {
    margin-right: 5px
}

.kchat-im-panel-main-info {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    position: relative;
    /*width: 334px */
    width: 264px
}

.kchat-im-panel-main-info:before {
    /* content: "";
	position: absolute;
	height: 56px;
	width: 1px;
	background: #255aad;
	left: -1px;
	top: -56px;
	z-index: 10 */
}

/* 20200315由原“background: #fafbf6”改为了现值 */
.kchat-im-panel-main-info .chat-user-info {
    background: #FBFdFf;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    padding-top: 20px;
    overflow-y: auto;
    padding-bottom: 40px;
}

.kchat-im-panel-main-info .chat-aside-box {
    padding: 20px
}

/* 20200306：为了位置消息时的地图位置选择和查看等功能而加 */
.locationmsg-map {
}

.locationmsg-map #im-panel-main-chat-locationmsg-map_container {
    width: 550px;
    height: 550px;
    border-radius: 0 0 10px 10px;
}

/* 地图中心的大头针：以下坐标的计算，就是要要保证它的底部中心位于地图的正中心 */
.locationmsg-map .center_pin_img {
    width: 22px;
    height: 41px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -41px 0 0 -11px;
}

.locationmsg-map .locationmsg-map_center_pin_img_anim {
    animation: locationmsg-map_center_pin_img_animkeyframes 0.5s linear 1;
}

@keyframes locationmsg-map_center_pin_img_animkeyframes {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(-20px) scale(1.1, 0.9);
    }

    75% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.locationmsg-map .location_result {
    height: 100px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 999;
    background: url('../images/common_top_rount_white_bg_shadow@3x.png') no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    border-radius: 0px 0px 10px 10px;
}

.locationmsg-map .location_result .location_result_content {
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 80px;
}

.locationmsg-map .location_result .location_result_content h4 {
    line-height: 24px;
    font-size: 16px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    font-weight: bold !important;
}

.locationmsg-map .location_result .location_result_content p {
    font-size: 14px;
    color: #979ca6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.locationmsg-map .location_result .location_result_content p span {
    line-height: 19px;
}

.locationmsg-map .location_result .location_result_btn {
    position: absolute;
    right: 20px;
    top: 50%;
    margin: -20px 0 0 0;
}

.locationmsg-map .location_result .location_result_btn img.send,
.locationmsg-map .location_result .location_result_btn img.goto {
    width: 49px;
    height: 49px;
}

.locationmsg-map .location_backto_btn {
    position: absolute;
    bottom: 100px;
    right: 10px;
}

.locationmsg-map .location_backto_btn img {
    width: 64px;
    height: 64px;
}

/* 20181224: 为了美化右边详情div块所添加的css样式 */
/*.kchat-im-panel-main-info */
.chat-user-info-headinfo {
    padding: 0 20px 15px 14px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 15px;
    position: relative;
}

/*.kchat-im-panel-main-info */
.chat-user-info-headinfo .avatar-wrapper {
    background: #fff;
    float: left;
    /*margin-right: 6px;*/
    margin-right: 10px;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    padding: 2px;
    border: 1px solid #f0f0f0;
}

/*.kchat-im-panel-main-info */
.chat-user-info-headinfo .avatar-wrapper img {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    position: absolute;
}

/* 20190404: 为了增加修改头像按钮所添加的css样式 */
/*.kchat-im-panel-main-info */
.chat-user-info-headinfo .avatar-wrapper i.icon-chat2 {
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    font-size: 20px;
    color: #000000;
    cursor: pointer;
    border: 1px solid red;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
}

/*.kchat-im-panel-main-info */
.chat-user-info-headinfo .avatar-wrapper i.icon-chat2:before {
    content: "\e6a8";

}

/*.kchat-im-panel-main-info */
.chat-user-info-headinfo .info {
    position: relative;
    display: inline-block;
}

/*.kchat-im-panel-main-info */
.chat-user-info-headinfo .info h4 {
    margin-bottom: 6px;
    padding-top: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 128px;
    font-size: 14px !important;
    line-height: 26px;
}

/*.kchat-im-panel-main-info */
.chat-user-info-headinfo .info span {
    /*margin-left: -3px;*/
    /*margin-top: 5px;*/
    font-size: 12px;
    position: relative;
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 158px;
    color: #0096C4;
}

/*.kchat-im-panel-main-info */
.chat-user-info-headinfo .sex {
    height: 16px;
    width: 16px;
    position: absolute;
    /*top:25px;*/
    top: 8px;
    right: 40px;
}

/*.kchat-im-panel-main-info */
.chat-user-info-headinfo .edit_gname {
    position: absolute;
    top: 10px;
    right: 40px;
    color: #bbb;
}

/*.kchat-im-panel-main-info */
.chat-user-info-headinfo .guest_flag {
    position: absolute;
    top: 32px;
    left: 12px;
    z-index: 2;
    font-size: 12px;
    background-color: rgba(250, 176, 67, 0.8);
    color: rgba(255, 255, 244, 1);
    line-height: 12px;
    border-radius: 0px 0px 26px 26px;
    font-size: 12px;
    padding: 3px 12px 6px 12px;
    -ms-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

.kchat-im-panel-main-info .chat-user-photos-gallery {
    margin: 0;
    padding: 0 10px 20px 20px;
}

.kchat-im-panel-main-info .chat-user-photos-gallery li {
    display: inline-block;
    padding: 0;
    margin-right: 12px;
    margin-bottom: 12px;
    width: 95px;
    height: 95px;
    position: relative;
}

.kchat-im-panel-main-info .chat-user-photos-gallery li .pic a {
    background: none;
    outline: none;
}

.kchat-im-panel-main-info .chat-user-photos-gallery li .pic a img {
    width: 95px;
    height: 95px;
    border-width: 0;
    vertical-align: middle;
    border-radius: 4px 4px 4px 4px;
}

.kchat-im-panel-main-info .chat-user-photos-gallery li .title {
    font-size: 12px;
    padding: 1px 0px 1px 0px;
    bottom: 0;
    position: absolute;
    background: rgba(0, 0, 0, .4);
    border-radius: 0 0 4px 4px;
}

.kchat-im-panel-main-info .chat-user-photos-gallery li .title .title-content {
    -ms-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    display: inline-block;
    color: #ffffff;
    position: relative;
    width: 95px;
}

.kchat-im-panel-main-info .chat-user-photos-gallery li .title .title-content img {
    width: 12px;
    height: 7px;
    margin-right: 2px;
}

.kchat-im-panel-main-info .chat-user-photos-gallery li .title .title-content .size {
    float: right;
}

.kchat-im-panel-main-info audio {
    width: 220px;
    padding: 5px 10px 5px 12px;
}

.kchat-im-panel-main-info .prohibition {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10
}

.kchat-im-panel-main-info .prohibition p {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #e2eaec
}

/*.kchat-im-panel-main-info .prohibition a { color: #0096C4 }
.kchat-im-panel-main-info .prohibition a:hover { color: #48b6d7 }*/
.kchat-im-panel-main-info .prohibition a:before {
    vertical-align: bottom;
    content: "\e653";
    font-family: kf5;
    margin-right: 3px;
    font-size: 14px;
    color: #F43530
}

/* add by jackjiang 20190318: 2 line */
.kchat-im-panel-main-info .prohibition a.transfer_group:before {
    vertical-align: bottom;
    content: "\e643";
    font-family: kf5;
    margin-right: 3px;
    font-size: 14px;
    color: #0096C4
}

.kchat-im-panel-main-info .prohibition .pipe {
    margin: 0 7px !important;
}

.kchat-im-panel-main-info .app-panel {
    padding: 10px
}

.app-box-tree-list {
    padding-left: 15px;
    padding-right: 0;
    position: relative;
    overflow-x: hidden;
    padding-bottom: 5px;
    margin-bottom: 10px
}

.app-box-tree-list:after {
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    left: 15px;
    bottom: 0;
    background: #e2eaec
}

.app-box-tree-list .open h4:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

.app-box-tree-list .open ul {
    display: block
}

.app-box-tree-list dt {
    color: #333
}

.app-box-tree-list h4 {
    font-size: 13px;
    position: relative;
    padding-left: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: default
}

.app-box-tree-list h4:hover {
    color: #333
}

.app-box-tree-list h4:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 1px;
    top: 50%;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 4px solid #333;
    height: 0;
    width: 0;
    margin-top: -4px;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.app-box-tree-list ul {
    display: none
}

.app-box-tree-list li {
    padding: 3px 15px 3px 20px;
    position: relative;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.app-box-tree-list li:before {
    content: "";
    height: 4px;
    width: 4px;
    border-radius: 100%;
    border: 1px solid #21d376;
    display: inline-block;
    position: absolute;
    left: 8px;
    top: 50%;
    margin-top: -3px
}

.app-box-tree-list li .btn {
    position: absolute;
    opacity: 0;
    right: 10px;
    top: 50%;
    margin-top: -10px;
    margin-right: 0;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 7px;
    border: 1px solid #e2eaec;
    color: #333
}

.app-box-tree-list li .btn:hover {
    border-color: #21d376
}

.app-box-tree-list li:hover {
    background: #eff4f5
}

.app-box-tree-list li:hover .btn {
    opacity: 1
}

.app-panel .app-box-tree-list {
    padding: 10px;
    padding-bottom: 5px;
    margin-bottom: 0
}

.app-panel .app-box-tree-list:after {
    left: 10px
}

.app-panel .app-box-tree-list:last-child:after {
    display: none
}

.app-panel .app-box-tree-list dt,
.app-panel .app-box-tree-list dd {
    margin-bottom: 5px
}

.app-panel .app-box-tree-list li {
    padding: 3px 15px 3px 20px;
    border-bottom: 0
}

.app-panel .app-box-tree-list li .btn {
    margin-top: -12px !important;
    right: 0;
    border-color: #ced6d8
}

.kf5-chat-tag:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.kf5-chat-tag .add-tag-btn {
    text-align: center;
    padding: 0 5px;
    height: 18px !important;
    font-size: 12px;
    line-height: 18px
}

.kf5-chat-tag .add-tag-btn::-webkit-input-placeholder {
    color: #333
}

.kf5-chat-tag .add-tag-btn:-moz-placeholder {
    color: #333
}

.kf5-chat-tag .add-tag-btn::-moz-placeholder {
    color: #333
}

.kf5-chat-tag .add-tag-btn:-ms-input-placeholder {
    color: #333
}

.kf5-chat-tag .add-tag-btn:focus {
    background: #fff;
    text-align: left
}

.kf5-chat-tag .add-tag-btn:focus + .kchat-pop {
    display: block !important
}

.kf5-chat-tag dd {
    float: left;
    text-overflow: inherit !important
}

.kf5-chat-tag .add-tag {
    position: relative;
    overflow: visible
}

.kf5-chat-tag .add-tag a {
    color: #21d376;
    border-color: /*#21d376*/ #255aad;
    padding: 0 25px;
    margin-top: 5px;
    margin-right: 0
}

.kf5-chat-tag .kchat-pop {
    left: 0;
    bottom: 35px;
    min-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none
}

.kf5-chat-tag .kchat-pop:after {
    left: 44px;
    margin-left: 0
}

.kf5-chat-tag .kchat-pop ul {
    max-height: 280px;
    max-width: 232px
}

.kf5-chat-tag .kchat-pop li {
    padding: 7px 10px
}

.kf5-chat-tag .kchat-pop li:last-of-type {
    border-bottom: 0
}

.kf5-chat-tag .status {
    position: relative;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
    padding-right: 20px
}

.kf5-chat-tag .status a {
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
    position: absolute;
    right: 3px;
    top: 50%;
    margin-top: -7px;
    color: #fff;
    height: 14px;
    width: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 100%
}

.kf5-chat-tag .status a:hover {
    background: red;
    color: #fff;
}

.kf5-chat-tag .kchat-pop .status {
    padding-right: 5px !important
}

.avatar-source {
    height: 38px;
    width: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 4px;
    color: #fff;
    font-size: 20px;
    position: relative
}


.avatar-source.wechat {
    background: #3CB65D
}

.avatar-source.wechat:after {
    content: "\e603";
    font-family: kf5;
    display: inline-block
}

.avatar-source.phone {
    background: #00C8F2
}

.avatar-source.phone:after {
    content: "\e629";
    font-family: kf5;
    display: inline-block;
    font-size: 22px
}

.avatar-source.pc {
    background: #1989FF
}

.avatar-source.pc:after {
    content: "\e6a3";
    font-family: kf5;
    display: inline-block;
    font-size: 22px
}

.avatar-source.human {
    background: #1989FF
}

.avatar-source.human:after {
    content: "\e6dd";
    font-family: kf5;
    display: inline-block;
    font-size: 22px
}

.avatar-source.weibo {
    background: #F43530
}

.avatar-source.weibo:after {
    content: "\e602";
    font-family: kf5;
    display: inline-block;
    font-size: 16px
}

.avatar-source.sdk {
    background: #ffa900
}

.avatar-source.sdk:after {
    content: "SDK";
    font-family: kf5;
    display: inline-block;
    font-size: 12px;
    vertical-align: top
}

.avatar-source.transfer:before {
    content: "\e66b";
    font-family: kf5;
    height: 18px;
    width: 18px;
    position: absolute;
    border: 1px solid #fff;
    border-radius: 100%;
    right: -5px;
    bottom: -3px;
    color: #fff;
    background: #F09A0D;
    line-height: 18px;
    text-align: center;
    font-size: 14px
}

.kchat-talk-list-group {
    min-height: 300px
}

.kchat-talk-list-group .danger {
    background: rgba(255, 0, 0, .1)
}

.kchat-talk-list-group .danger:hover {
    background: rgba(255, 0, 0, .15)
}

.kchat-talk-list-group .warning {
    background: rgba(255, 165, 0, .2)
}

.kchat-talk-list-group .warning:hover {
    background: rgba(255, 165, 0, .25)
}

.kchat-talk-list-group h3 {
    height: 30px;
    line-height: 30px;
    background: #fff;
    border-bottom: 1px solid #e2eaec;
    padding-left: 15px;
    /*font-size: 13px;*/
    font-size: 12px;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 100px
}

.kchat-talk-list-group h3:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 5px solid #C9C9C9;
    border-bottom: 5px solid transparent;
    margin-right: 8px;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

.kchat-talk-list-group h3.close:before {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
}

.kchat-talk-list-group h3:hover .kchat-talk-toggle {
    display: inline
}

.kchat-talk-list-group .kchat-talk-toggle {
    float: right;
    margin-right: 15px;
    font-size: 12px;
    color: #666;
    display: none
}

.kchat-talk-list-group .kchat-talk-toggle:hover {
    color: #333
}

/* 20161227 by js: 为美化item样式修改了“height:24px;”为现值 */
.kchat-talk-list-group li {
    position: relative;
    padding: 10px 15px;
    cursor: default;
    height: 40px;
    margin-bottom: 1px;
    -webkit-box-sizing: initial !important;
    -moz-box-sizing: initial !important;
    box-sizing: initial !important;
}

.kchat-talk-list-group li:last-child {
    margin-bottom: 35px
}

.kchat-talk-list-group li:hover {
    background: #eff4f5;
    cursor: pointer;
    /*#eff4f5*/
}

.kchat-talk-list-group li:hover .info time {
    background: #eff4f5
}

.kchat-talk-list-group li.active {
    background: #dcf1fe;
    /*#eff4f5*/
}

.kchat-talk-list-group li.active .info time {
    background: #eff4f5
}

.kchat-talk-list-group li.active:hover {
    background: #e5eaeb
}

/* 20161227 by js: 为美化item样式修改了"border-top: 10px solid #c6ced0;"为现值 */
.kchat-talk-list-group li .top-tag {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border-top: 10px solid #FF3300;
    border-right: 10px solid transparent;
    left: 0;
    top: 0;
    display: none
}

.kchat-talk-list-group li .top-tag:hover {
    border-top-color: #b2babc
}

.kchat-talk-list-group li .top-tag.active {
    border-top-color: #21b1d3;
    display: block
}

.kchat-talk-list-group li .top-tag:active {
    border-top-color: #21b1d3
}

.kchat-talk-list-group li.active .top-tag {
    display: block
}

.kchat-talk-list-group li .info {
    padding-left: 52px
}

/* 20161227 by js: 为美化item样式修改了“line-height: 24px;”为现值、添加了“font-size: 13px;” */
.kchat-talk-list-group li .info h4 {
    /*font-size: 13px;*/
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative
}

/* 20181115 add by js */
/* 20190327 modified by js: 为了美化首页“消息”的title过长问题而加了“display: inline-block;vertical-align: top;max-width: 90px;” 3项 */
.kchat-talk-list-group li .info h4 .msg_title {
    font-size: 14px;
    /*max-width: 130px;*/
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    /*display: block;*/
    /*display: inline;*/
    display: inline-block;
    vertical-align: top;
    max-width: 100px;
}

/* 20190327 modified by js: 为了美化首页“消息”的title过长问题而加 */
.kchat-talk-list-group li .info h4 .msg_title_has_flag {
    max-width: 90px;
}

/* 20190225 add by js */
.kchat-talk-list-group li .info h4 .msg_title_flag,
.kchat-talk-list-group li .info h4 .msg_title_flag_group {
    background: /*rgb(250, 176, 67)*/ rgb(247, 205, 144);
    width: 42px;
    text-align: center;
    color: #FFF;
    border-radius: 2px;
    padding: 0 2px 0 2px;
    font-size: 12px;
    margin-right: 2px;
}

.kchat-talk-list-group li .info h4 .msg_title_flag_group {
    background: /*#7786ab*/ #b8ccff;
}

/* 20161227 add by js */
.kchat-talk-list-group li .info h4 .msg_time {
    position: absolute;
    right: 0px;
    display: inline;
    top: 0px;
    font-size: 12px;
    color: #8fbfbf;
}

.kchat-talk-list-group li .info time {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 0;
    top: 5px;
    background: #FBFCFD;
    padding-left: 3px
}

.kchat-talk-list-group li .info p {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
}


.kchat-talk-list-group li .info p .msg-num {
    position: absolute;
    right: 0;
    background: #FBFCFD;
    padding-left: 3px
}

/* 20200304 modified by js：将原“width: 9px;height: 9px;”改为了现值，目的是为了让首页“消息”列表中的Item中，表情图的显示大一点、好看一点 */
.kchat-talk-list-group li .info p img {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

.kchat-talk-list-group li .info p img.smallreddot {
    width: 9px !important;
    height: 9px !important;
}

.kchat-talk-list-group li .info p .msg-flag-orange {
    color: #ff9a3b;
}

.kchat-talk-list-group li .info p .msg-flag-red {
    color: #eb0000;
}

/* 20161227 by js: 为美化item样式修改了“top:8px;”为现值 */
.kchat-talk-list-group .avatar-source {
    height: 40px;
    width: 40px;
    line-height: 40px;
    position: absolute;
    left: 15px;
    top: 9px;
    color: #fff;
    font-size: 14px
}

.kchat-talk-list-group .avatar-source img {
    position: absolute;
    /*height: 20px; width: 20px;*/
    height: 40px;
    width: 40px;
    border-radius: 4px;
    /*border: 1px solid #fff;*/
    /*right: -5px; bottom: -2px;*/
    right: 0px;
    bottom: 0px;
}

.kchat-talk-list-group .avatar-source.phone {
    background: #00C8F2
}

.kchat-talk-list-group .avatar-source.phone:after {
    font-size: 26px;
}

.kchat-talk-list-group .avatar-source.pc {
    background: #1989FF
}

.kchat-talk-list-group .avatar-source.pc:after {
    font-size: 26px;
}

.kchat-talk-list-group .avatar-source.human {
    background: #c4cbd5;
    /*background: #c6c6c6;*/
    /*background: #1989FF*/
}

.kchat-talk-list-group .avatar-source.human:after {
    font-size: 26px;
}

.kchat-queue {
    position: relative
}

.kchat-queue h3 {
    cursor: default;
    padding-right: 15px;
}

/* 20181029 add by js: 添加了padding-right: 15px;*/
.kchat-queue h3:before {
    display: none
}

/* 20181029去掉了后面的下拉小箭头 */
/*.kchat-queue h3:after { content: ""; display: inline-block; vertical-align: middle; margin-left: 4px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #666; position: relative; top: -1px }*/
.kchat-queue .kchat-pop {
    font-size: 13px;
    left: 10px;
    top: 42px;
    z-index: 10;
    display: none
}

.kchat-queue .kchat-pop ul {
    padding: 8px 0
}

.kchat-queue .kchat-pop li {
    border-bottom: 0;
    height: auto;
    padding: 4px 15px
}

.kchat-queue .kchat-pop:after {
    top: -4px
}

.kchat-queue .kchat-set-top {
    float: right;
    font-size: 12px;
    margin-right: 10px
}

/* 20190102: 添加用于修正首页“消息”列表右上方的“+”按钮弹出菜单的箭头位置，添加了以下3项 */
/* #im-panel-userlist-wrap-alarms .kchat-queue .kchat-pop {
	left: 60%;
}

#im-panel-userlist-wrap-alarms .kchat-queue .kchat-pop:after {
	left: 67px;
} */

#im-panel-userlist-wrap-alarms-add-popup li:last-child {
    margin-bottom: 0px;
}

/* 20190306: 以下样式，专用于群组列表中的UI细节修正 */
#kchat-im-panel-userlist-groups .avatar-source img {
    border-radius: 4px;
}

#kchat-im-panel-userlist-groups .avatar-source img.group-ownerflag {
    width: 12px;
    height: 12px;
}

#kchat-im-panel-userlist-groups .avatar-source.human:after {
    content: "\e6dc";
}

#kchat-im-panel-userlist-groups li .info h4 .msg_time {
    background: rgba(255, 255, 255, 0.9);
    padding-left: 5px;
}

#kchat-im-panel-userlist-groups li .info p {
    vertical-align: middle;
    color: #ccc;
}

#li-group-silentflag {
    width: 12px;
    height: 12px;
    margin-left: 4px;
}

#kchat-im-panel-userlist-groups .avatar-source {
    border-radius: 4px;
}

.system-info {
    position: relative
}

/*.system-info span { background: #fff; position: relative; z-index: 2; padding: 0 10px }*/
/* 20190308 by jackjiang: 美化聊天内容中的系统通知的UI样式 */
/*.system-info span {display: inline-block;padding: 0 20px;border-radius: 2px;background: #fff6ea;color: #cba267;font-size: 12px;line-height: 24px;vertical-align: top;}*/
/* 20190327 by jackjiang: 因系统通知中增加了通知时间的示，而修订或增加了以下2项UI样式 */
.system-info div {
    display: inline-block;
    padding: 0 20px;
    border-radius: 2px;
    background: #fff6ea;
    color: #cba267;
    font-size: 12px;
    line-height: 24px;
    vertical-align: top;
}

.system-info div span.system-info-time {
    margin-left: 6px;
    color: #bbb;
}

.chat-style1 a {
    color: #0096C4
}

.chat-style1 a:hover {
    color: #48b6d7
}

.chat-style1 .typing {
    font-size: 12px;
    color: #777
}

.chat-style1 .system-info {
    text-align: center;
    margin-bottom: 10px;
    color: #b2b2b2;
    /*color:#F26C4F;*/
    /*color: #999;*/
    clear: both;
    font-size: 12px;
}

/* 20161228 modified by js: 为了美化聊天气泡样式而将"color: #777;"改为现值 */
/* 20200318 由原“color: #999;”改为了现值 */
.chat-style1 .chat-item-info {
    font-size: 12px;
    color: #afb1b5;
    margin-bottom: 5px
}

.chat-style1 .chat-item-info .name {
    color: #979ca6;
}

.chat-style1 .chat-item-info i {
    font-size: 14px
}

.chat-style1 .chat-item {
    margin-bottom: 25px;
    position: relative;
}

.chat-style1 .chat-item:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

/* 20190301 add by js：增加聊天消息列表中的用户头像显示的样式 */
.chat-style1 .chat-item-avatar {
    height: 40px;
    width: 40px;
    line-height: 40px;
    position: absolute;
    top: 4px;
    text-align: center;
    border-radius: 100%;
}

.chat-style1 .chat-item-avatar-l {
    left: 0px;
}

.chat-style1 .chat-item-avatar-r {
    right: 0px;
}

.chat-style1 .chat-item-avatar img {
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    right: 0px;
    bottom: 0px;
    cursor: pointer;
}

.chat-style1 .chat-left,
.chat-style1 .chat-right {
    clear: both
}

.chat-style1 .chat-left {
    padding-left: 55px;
}

.chat-style1 .chat-right {
    padding-right: 55px;
}

.chat-style1 .chat-left .chat-item-info {
    float: left
}

.chat-style1 .chat-right .chat-item-info {
    float: right
}

.chat-style1 .chat-left .chat-info {
    float: left;
    background: #eff0f1
    /*#ECF2F4*/;
    color: #434445
    /*#333*/;
}

/* 20161228 modified by js: 为了美化聊天水气泡样式而将“left: -6px; top: 14px;border-right: 6px solid #ECF2F4; border-bottom: 5px solid transparent” 改为现值*/
.chat-style1 .chat-left .chat-info:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: -8px;
    top: 8px;
    width: 0;
    height: 0;
    /*border-top: 5px solid transparent;*/
    border-right: 8px solid #ECF2F4;
    border-bottom: 8px solid transparent
}

.chat-style1 .chat-right .chat-info {
    float: right;
    background: #cceaff
    /*#5298e7*/
    /*#B8F4D5*/
}

/* 20161228 modified by js: 为了美化聊天水气泡样式而将“right: -6px; top: 14px;border-left: 6px solid #5298e7;border-bottom: 5px solid transparent;”改为现值 */
.chat-style1 .chat-right .chat-info:before {
    content: "";
    display: inline-block;
    position: absolute;
    right: -8px;
    top: 8px;
    width: 0;
    height: 0;
    /*border-top: 5px solid transparent;*/
    border-left: 8px solid #cceaff
    /*#5298e7*/
    /*#B8F4D5*/;
    border-bottom: 8px solid transparent
}

/* 20161228 modified by js: 为了美化聊天水气泡样式而将“padding: 10px 14px;”改为现值 */
/* 20200302 modified by js: 由“border-radius: 4px;”改为现值 */
.chat-style1 .chat-info {
    padding: 6px 10px;
    line-height: 1.6em;
    font-size: 13px;
    color: #434445
    /*#fff*/
    /*#222*/;
    min-height: 18px;
    clear: both;
    border-radius: 8px;
    position: relative;
    max-width: 82%;
    word-wrap: break-word;
    word-break: normal;
}

/* 20200302 add by js: 为新增加的名片消息和位置消息而加 */
.chat-style1 .chat-info_ex_lightbg_l {
    background: #ffffff !important;
    border: 1px solid #ebf2f4 !important;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.035);
    -moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.035);
}

.chat-style1 .chat-info_ex_lightbg_r {
    background: #ffffff !important;
    border: 1px solid #c5ebff !important;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.035);
    -moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.035);
}

/* 20190714 modified by js: app产品中图片缩略图尺寸已加大，网页产品也要相应处理，不然显示的太大就太难看了（由原“max-width: 100%;”改为现值） */
/* 20200321 modified by js: 由“border-radius: 2px;”修改为现值 */
.chat-style1 .chat-info img {
    display: block;
    max-width: 150px;
    border-radius: 3px;
    /*border-radius: 3px;*/
}

.chat-style1 .chat-info audio {
    border-radius: 2px;
}

/* 20200321：由原值“padding: 6px 6px;”修改为现值 */
.chat-style1 .chat-info_imagemsg {
    padding: 4px 4px;
}

.chat-style1 .chat-info_voicemsg {
    line-height: 0.8em;
    padding: 0;
    /*padding: 6px 6px 6px 7px;*/
}

/* 20200321：由原“padding: 6px 6px;”修改为现值 */
.chat-style1 .chat-info_shortvideomsg {
    padding: 4px 4px;
}

.chat-style1 .chat-info_shortvideomsg .chat-msg-video-thumbimg {
    min-width: 120px;
    min-height: 150px;
    background-color: #000000;
}

.chat-style1 .chat-info_shortvideomsg .chat-msg-video-playicon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -27px 0 0 -27px;
    width: 54px;
    height: 54px;
}

.chat-style1 .chat-info_shortvideomsg .chat-msg-video-info {
    position: absolute;
    top: 10px;
    right: 10px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.3);
    padding: 0px 4px 0px 4px;
    border-radius: 2px;
    font-size: 12px;
    color: #4e94ff;
}

.chat-style1 .chat-info_bigfilemsg,
.chat-style1 .chat-info_contactmsg,
.chat-style1 .chat-info_locationmsg {
    padding: 11px 13px;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
}

.chat-style1 .chat-info_contactmsg {
    /*background: #ffffff; border: 1px solid #f0f0f0; box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.035); -moz-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.035);*/
}

.chat-style1 .chat-info_bigfilemsg .chat-msg-file-pic,
.chat-style1 .chat-info_contactmsg .chat-msg-contact-pic {
    margin: 0;
    position: absolute;
    left: 12px;
    top: 11px;
}

.chat-style1 .chat-info_bigfilemsg .chat-msg-file-pic img {
    width: 32px;
    height: 40px;
}

.chat-style1 .chat-info_bigfilemsg .chat-msg-file-info {
    height: 40px;
    padding-left: 40px;
    padding-right: 25px;
    width: 200px
}

.chat-style1 .chat-info_bigfilemsg .chat-msg-file-info h4,
.chat-style1 .chat-info_contactmsg .chat-msg-contact-info h4,
.chat-style1 .chat-info_locationmsg .chat-msg-location-info h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    font-weight: bold !important;
}

.chat-style1 .chat-info_bigfilemsg .chat-msg-file-info p,
.chat-style1 .chat-info_contactmsg .chat-msg-contact-info p,
.chat-info_locationmsg .chat-msg-location-info p {
    font-size: 12px;
    color: #4e94ff;
    /*color: #777;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-style1 .chat-info_contactmsg .chat-msg-contact-info p,
.chat-info_locationmsg .chat-msg-location-info p {
    color: #979ca6 !important;
}

.chat-style1 .chat-info_bigfilemsg .chat-msg-file-down,
.chat-style1 .chat-info_contactmsg .chat-msg-contact-down {
    position: absolute;
    right: 0;
    top: 11px;
    text-align: center;
}

.chat-style1 .chat-info_bigfilemsg .chat-msg-file-down a,
.chat-style1 .chat-info_contactmsg .chat-msg-contact-down a {
    margin: 0;
    display: block;
    height: 40px;
    width: 40px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIyMXB4IiB2aWV3Qm94PSIwIDAgMjEgMjEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwLjIgKDMzODI2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5rZjUtaWNvbi0xODwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmnLrlmajkurrogYrlpKnnpLrkvosiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMDMuMDAwMDAwLCAtNDEzLjAwMDAwMCkiIGZpbGw9IiMwMEM2NjgiPgogICAgICAgICAgICA8cGF0aCBkPSJNMzEzLjUsNDMyLjY4NzUgQzMwOC40MjU4NzgsNDMyLjY4NzUgMzA0LjMxMjUsNDI4LjU3Mjc5OSAzMDQuMzEyNSw0MjMuNSBDMzA0LjMxMjUsNDE4LjQyNzIwMSAzMDguNDI1ODc4LDQxNC4zMTI1IDMxMy41LDQxNC4zMTI1IEMzMTguNTc0MTE4LDQxNC4zMTI1IDMyMi42ODc1LDQxOC40MjcyMDEgMzIyLjY4NzUsNDIzLjUgQzMyMi42ODc1LDQyOC41NzI3OTkgMzE4LjU3NDExOCw0MzIuNjg3NSAzMTMuNSw0MzIuNjg3NSBMMzEzLjUsNDMyLjY4NzUgTDMxMy41LDQzMi42ODc1IFogTTMxMy41LDQxMyBDMzA3LjcwMDcxNSw0MTMgMzAzLDQxNy42OTg3MyAzMDMsNDIzLjUgQzMwMyw0MjkuMzAxMjY4IDMwNy43MDA3MTUsNDM0IDMxMy41LDQzNCBDMzE5LjI5OTI4OCw0MzQgMzI0LDQyOS4zMDEyNjggMzI0LDQyMy41IEMzMjQsNDE3LjY5ODczIDMxOS4yOTkyODgsNDEzIDMxMy41LDQxMyBMMzEzLjUsNDEzIEwzMTMuNSw0MTMgWiBNMzE0LjA3OTI4Nyw0MTkuMTY0MjYyIEMzMTMuOTIxMTI3LDQxOS4wMTgzODcgMzEzLjcwNDk1OSw0MTguOTc1ODggMzEzLjUwMDAwMiw0MTkuMDEyMzQxIEMzMTMuMjk1MDQ0LDQxOC45NzU4OCAzMTMuMDc4ODc3LDQxOS4wMTgzODcgMzEyLjkyMDcxNyw0MTkuMTY0MjYyIEwzMDkuMTkzMjU1LDQyMi42MDM3NTEgQzMwOC45MzU1ODIsNDIyLjg0MDc1NSAzMDguOTM1NTgyLDQyMy4yMjM1OTcgMzA5LjE5MzI1NSw0MjMuNDY2NjUzIEMzMDkuNDQ5NjIyLDQyMy43MDM2NTYgMzA5Ljg2NzQ1LDQyMy43MDM2NTYgMzEwLjEyNTEyMyw0MjMuNDY2NjUzIEwzMTIuODQwOTc0LDQyMC45NTY5MDUgTDMxMi44NDA5NzQsNDI3LjM5MjMxNCBDMzEyLjg0MDk3NCw0MjcuNzI2NTM0IDMxMy4xMzU1NTMsNDI4IDMxMy41MDAwMDIsNDI4IEMzMTMuODY0NDUsNDI4IDMxNC4xNTkwMjksNDI3LjcyNjUzNCAzMTQuMTU5MDI5LDQyNy4zOTIzMTQgTDMxNC4xNTkwMjksNDIwLjk1NjkwNSBMMzE2Ljg3NDg4MSw0MjMuNDY2NjUzIEMzMTcuMTMyNTU0LDQyMy43MDM2NTYgMzE3LjU0OTcxOCw0MjMuNzAzNjU2IDMxNy44MDY3NDUsNDIzLjQ2NjY1MyBDMzE4LjA2NDQxOCw0MjMuMjIzNTk3IDMxOC4wNjQ0MTgsNDIyLjg0MDc1NSAzMTcuODA2NzQ1LDQyMi42MDM3NTEgTDMxNC4wNzkyODcsNDE5LjE2NDI2MiBMMzE0LjA3OTI4Nyw0MTkuMTY0MjYyIEwzMTQuMDc5Mjg3LDQxOS4xNjQyNjIgWiIgaWQ9ImtmNS1pY29uLTE4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTMuNTAwMDAwLCA0MjMuNTAwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC0zMTMuNTAwMDAwLCAtNDIzLjUwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=) no-repeat 50%;
}

.chat-style1 .chat-info_contactmsg .chat-msg-contact-pic img {
    height: 40px;
    width: 40px;
    border-radius: 100%;
}

.chat-style1 .chat-info_contactmsg .chat-msg-contact-info {
    height: 70px;
    padding-left: 48px;
    padding-right: 25px;
    width: 192px
}

.chat-style1 .chat-info_contactmsg .chat-msg-contact-down a {
    transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    /* IE 9 */
    -moz-transform: rotate(270deg);
    /* Firefox */
    -webkit-transform: rotate(270deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(270deg);
    /* Opera */
}

.chat-style1 .chat-info_contactmsg .chat-msg-contact-bottom {
    position: absolute;
    left: 12px;
    bottom: 6px;
    width: 270px;
    border-top: 1px solid #f0f0f0;
    padding-top: 3px;
}

/* border-top: 1px solid #e7e7e7;*/
.chat-style1 .chat-info_contactmsg .chat-msg-contact-bottom span {
    color: #979ca6;
    font-size: 12px;
}

/*.chat-style1 .chat-right .chat-info_contactmsg .chat-msg-contact-bottom {border-top: 1px solid #bce0f9;}*/

.chat-style1 .chat-info_locationmsg {
}

.chat-style1 .chat-info_locationmsg .chat-msg-location-pic {
    margin: 0;
    position: absolute;
    bottom: 2px;
    left: 2px;
    border-top: 1px solid #e8eaee;
}

.chat-style1 .chat-info_locationmsg .chat-msg-location-pic .chat-msg-location-pic-contentimg {
    width: 285px;
    height: 100px;
    max-width: none;
    border-radius: 0 0 6px 6px;
}

/* 注意：left=父宽度/2-本flag宽度/2、top=父高度/2-本flag高度/2，不然flag的显示位置跟实际经纬度坐标会有偏移哦 */
.chat-style1 .chat-info_locationmsg .chat-msg-location-pic .chat-msg-location-pic-flagimg {
    width: 16px;
    height: 30px;
    position: absolute;
    left: 134px;
    /*left: 50%;*/
    top: 20px;
}

.chat-style1 .chat-info_locationmsg .chat-msg-location-info {
    width: 263px;
    height: 138px;
    padding-left: 0px;
    padding-right: 0px;
}

.chat-style1 .file:before {
    content: "\e698";
    font-family: kf5;
    display: inline-block;
    margin-right: 2px;
    font-size: 16px;
    vertical-align: middle;
    color: #666
}

.chat-style1 .readmore-chat {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #DEF3F8;
    border-radius: 3px;
    margin-top: 40px
}

.chat-style1 .readmore-chat:hover {
    background: #dff4f9
}

.chat-user-info {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

/* add by js 20190323 : 为了优化用户信息查看对话框里的个性签名过长时样式 */
.chat-user-info .info a {
    max-width: 320px;
    display: inline-block;
}

/* add by js 20190323 : 为了优化用户信息查看对话框里的个性签名颜色 */
.chat-user-info a {
    color: #0096C4
}

.chat-user-info dl {
    padding: 0 20px 20px
}

.chat-user-info dt {
    margin-bottom: 5px;
    color: #222;
    font-size: 14px;
}

.chat-user-info dt a {
    margin-left: 15px;
    color: #0096C4;
    font-size: 13px
}

.chat-user-info dt a:hover {
    color: #48b6d7
}

.chat-user-info dt .btn {
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
    background: #21d376;
    color: #fff;
    border: 0;
    font-size: 12px
}

.chat-user-info dt .btn:hover {
    color: #fff;
    background: #17c96c
}

.chat-user-info dd {
    margin-bottom: 5px;
    line-height: 22px;
    font-size: 12px;
    color: #666;
    text-overflow: ellipsis;
    overflow: hidden
}

.chat-user-info dd a {
    color: #999
    /*color: #0096C4*/
}

.chat-user-info dd a:hover {
    color: #48b6d7
}

.chat-user-info dd .status {
    margin-left: 0;
    font-size: 12px;
    border: 0;
    margin-right: 5px
}

/* 20181221: 为了让右边个人信息详情的ui显示地更规整，而添加了以下2行 */
.chat-user-info dd span.label {
    min-width: 65px;
    display: inline-block;
    vertical-align: top;
}

/* 2020315由原“color: #999”改为了现值 */
.chat-user-info dd span.content {
    /* color: #0096C4*/
    color: #999b9f;
    /*max-width: 204px;*/

    display: inline-block;
}

/* 20181221: 为了美化群组信息右边的edit图标显示，而添加了以下1行 */
.chat-user-info dd i {
    vertical-align: text-bottom;
    font-size: 14px;
    color: #bbb;
    margin-left: 5px;
    cursor: pointer;
}

.chat-user-info dd .flag {
    text-align: center;
    color: #f26c4f;
    border-radius: 4px;
    padding: 0px 3px 0 3px;
    margin-left: 5px;
    border: 1px solid #f26c4f;
}

.chat-user-info input[type=text] {
    height: 22px;
    padding-left: 5px
}

.chat-user-info input[disabled] {
    border-color: transparent;
    background: #eff4f5;
    color: #666
}

#emoji-face-btn {
    position: relative
}

.emoji-face-box {
    bottom: 40px;
    left: 50%;
    /* margin-left: -100px; */
    width: 270px;
    display: none
}

.emoji-face-box:after {
    margin-left: -42px
}

.emoji-face-box ul {
    height: auto;
    padding: 5px
}

.emoji-face-box li {
    padding: 4px 3px;
    line-height: 1 !important;
    margin: 0 !important;
    border: 1px solid #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left
}

.emoji-face-box li:hover {
    border-color: #78CCF0
}

.emoji-face-box span {
    display: inline-block;
    padding: 10px;
    height: 0;
    width: 0;
    overflow: hidden;
    vertical-align: text-bottom;
    margin: 0 2px;
    color: transparent
}

.emoji {
    display: inline-block;
    padding: 10px !important;
    height: 0;
    width: 0;
    overflow: hidden;
    vertical-align: text-bottom;
    margin: 0 2px;
    color: transparent;
    border-radius: 0 !important;
    position: static !important
}

.emoji1f47f {
    background: url('../images/im_emoji/im_emoji_1f47f.png') no-repeat;
}

.emoji1f60a {
    background: url('../images/im_emoji/im_emoji_1f60a.png') no-repeat;
}

.emoji1f60b {
    background: url('../images/im_emoji/im_emoji_1f60b.png') no-repeat;
}

.emoji1f60c {
    background: url('../images/im_emoji/im_emoji_1f60c.png') no-repeat;
}

.emoji1f60d {
    background: url('../images/im_emoji/im_emoji_1f60d.png') no-repeat;
}

.emoji1f60e {
    background: url('../images/im_emoji/im_emoji_1f60e.png') no-repeat;
}

.emoji1f60f {
    background: url('../images/im_emoji/im_emoji_1f60f.png') no-repeat;
}

.emoji1f61a {
    background: url('../images/im_emoji/im_emoji_1f61a.png') no-repeat;
}

.emoji1f61b {
    background: url('../images/im_emoji/im_emoji_1f61b.png') no-repeat;
}

.emoji1f61c {
    background: url('../images/im_emoji/im_emoji_1f61c.png') no-repeat;
}

.emoji1f61d {
    background: url('../images/im_emoji/im_emoji_1f61d.png') no-repeat;
}

.emoji1f61e {
    background: url('../images/im_emoji/im_emoji_1f61e.png') no-repeat;
}

.emoji1f61f {
    background: url('../images/im_emoji/im_emoji_1f61f.png') no-repeat;
}

.emoji1f62a {
    background: url('../images/im_emoji/im_emoji_1f62a.png') no-repeat;
}

.emoji1f62b {
    background: url('../images/im_emoji/im_emoji_1f62b.png') no-repeat;
}

.emoji1f62c {
    background: url('../images/im_emoji/im_emoji_1f62c.png') no-repeat;
}

.emoji1f62d {
    background: url('../images/im_emoji/im_emoji_1f62d.png') no-repeat;
}

.emoji1f62e {
    background: url('../images/im_emoji/im_emoji_1f62e.png') no-repeat;
}

.emoji1f62f {
    background: url('../images/im_emoji/im_emoji_1f62f.png') no-repeat;
}

.emoji1f600 {
    background: url('../images/im_emoji/im_emoji_1f600.png') no-repeat;
}

.emoji1f601 {
    background: url('../images/im_emoji/im_emoji_1f601.png') no-repeat;
}

.emoji1f602 {
    background: url('../images/im_emoji/im_emoji_1f602.png') no-repeat;
}

.emoji1f603 {
    background: url('../images/im_emoji/im_emoji_1f603.png') no-repeat;
}

.emoji1f604 {
    background: url('../images/im_emoji/im_emoji_1f604.png') no-repeat;
}

.emoji1f605 {
    background: url('../images/im_emoji/im_emoji_1f605.png') no-repeat;
}

.emoji1f606 {
    background: url('../images/im_emoji/im_emoji_1f606.png') no-repeat;
}

.emoji1f607 {
    background: url('../images/im_emoji/im_emoji_1f607.png') no-repeat;
}

.emoji1f608 {
    background: url('../images/im_emoji/im_emoji_1f608.png') no-repeat;
}

.emoji1f609 {
    background: url('../images/im_emoji/im_emoji_1f609.png') no-repeat;
}

.emoji1f610 {
    background: url('../images/im_emoji/im_emoji_1f610.png') no-repeat;
}

.emoji1f611 {
    background: url('../images/im_emoji/im_emoji_1f611.png') no-repeat;
}

.emoji1f612 {
    background: url('../images/im_emoji/im_emoji_1f612.png') no-repeat;
}


.msg-section {
    position: absolute;
    left: 50%;
    margin-left: -125px;
    top: 50px;
    width: 250px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .2);
    line-height: 1;
    z-index: 1
}

.msg-section:before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    position: absolute;
    left: 50%;
    top: -5px;
    margin-left: -5px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #fff
}

.msg-section .inner {
    background: #fff;
    border-radius: 3px
}

.msg-section ul {
    padding: 15px 10px 0
}

.msg-section li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ecf4f6
}

.msg-section li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.msg-section li p {
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.4em
}

.msg-section li a {
    float: right;
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    border: 1px solid #e2eaec;
    border-radius: 40px;
    margin-left: 5px;
    font-size: 12px
}

.msg-section li a:hover {
    border-color: #ced6d8
}

.msg-section li:last-child {
    border-bottom: 0;
    margin-bottom: 0
}

.msg-section .footer {
    padding: 10px;
    background: #F8F8F8;
    border-top: 1px solid #e2eaec;
    border-radius: 0 0 3px 3px
}

.msg-section .footer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.msg-section .footer a {
    float: left;
    padding: 0 10px;
    border: 1px solid #e2eaec;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    border-radius: 3px;
    margin-right: 5px;
    background: #fff;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.msg-section .footer .msg-btn1:hover {
    color: #21b1d3;
    border-color: #21b1d3
}

.msg-section .footer .msg-btn2:hover {
    color: #21d376;
    border-color: #21d376
}

.msg-section .footer .msg-btn3 {
    float: right;
    margin-right: 0
}

.msg-section .footer .msg-btn3:hover {
    color: #F43530;
    border-color: #F43530
}

.voice-section {
    position: absolute;
    left: 50%;
    margin-left: -130px;
    top: 50px;
    width: 260px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .2);
    font-weight: 300;
    z-index: 11
}

.voice-section:before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    position: absolute;
    left: 50%;
    top: -5px;
    margin-left: -4px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #f8f8f8
}

.voice-section .not-opened {
    background: #F8F8F8;
    line-height: 1.6em;
    padding: 15px;
    position: relative;
    padding-left: 56px
}

.voice-section .not-opened:before {
    content: "\e6cd";
    font-family: kf5;
    font-size: 42px;
    color: #bbb;
    position: absolute;
    left: 10px;
    top: 26px
}

.voice-section .not-opened a {
    color: #0096C4
}

.voice-section .not-opened a:hover {
    color: #48b6d7
}

.voice-section-header-pane1 {
    background: #F8F8F8;
    border-bottom: 1px solid #e2eaec;
    padding: 15px;
    border-radius: 3px 3px 0 0
}

.voice-section-header-pane1:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.voice-section-header-pane1 h2 {
    float: left;
    font-size: 16px;
    line-height: 34px;
    position: relative
}

.voice-section-header-pane1 h2 a {
    color: red;
    position: absolute;
    font-size: 12px;
    left: 0;
    top: 18px
}

.voice-section-header-set {
    float: right
}

.voice-section-header-set li {
    float: left;
    background: #fff;
    border-right: 1px solid #e2eaec;
    z-index: 1;
    cursor: pointer;
    position: relative;
    height: 32px;
    line-height: 32px
}

.voice-section-header-set li:last-child {
    border-right: 0
}

.voice-section-header-set li i {
    font-size: 18px;
    line-height: 32px;
    color: #828d95
}

.voice-section-header-set li .icon-mic {
    font-size: 20px
}

.voice-section-header-set li:hover i {
    color: #3d76ff
}

.voice-section-header-set li > a {
    display: block;
    padding: 0 8px
}

.voice-section-header-set li:first-child {
    border-radius: 3px 0 0 3px
}

.voice-section-header-set li:last-child {
    border-radius: 0 3px 3px 0
}

.voice-section-header-set .state > a {
    display: block;
    font-size: 12px;
    position: relative;
    padding-bottom: 15px
}

.voice-section-header-set .state > a:before {
    content: "";
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 100%;
    margin-right: 5px;
    position: relative
}

.voice-section-header-set .online:before {
    background: #21d376
}

.voice-section-header-set .offline:before {
    background: #BABABA
}

.voice-section-header-set .busyline:before {
    background: #F43530
}

.voice-section-header-set .leaveline:before {
    background: #F5A623
}

.voice-section-header-set .state:hover .state-choice {
    display: block
}

.voice-section-header-set .state-choice {
    display: none;
    position: absolute;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    top: 40px;
    left: 50%;
    margin-left: -34px
}

.voice-section-header-set .state-choice:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    margin-left: -6px;
    top: -5px;
    display: inline-block;
    height: 10px;
    width: 10px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #fff
}

.voice-section-header-set .state-choice div {
    background: #fff;
    position: relative;
    z-index: 2;
    border-radius: 3px;
    white-space: nowrap;
    padding: 6px 0
}

.voice-section-header-set .state-choice a {
    display: block;
    line-height: 18px;
    font-size: 12px;
    padding: 4px 15px;
    color: #333;
    cursor: pointer
}

.voice-section-header-set .state-choice a:hover {
    background: #eff4f5
}

.voice-section-header-set .state-choice a:before {
    content: "";
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 100%;
    margin-right: 5px
}

.voice-section-header-set .list2 {
    position: relative
}

.voice-section-header-set .list2:hover .pop {
    display: block
}

.voice-section-header-set .list2 > a {
    position: relative;
    padding-bottom: 15px
}

.voice-section-header-set .list2 .pop {
    display: none;
    width: 210px;
    left: 50%;
    margin-left: -109px;
    top: 40px;
    position: absolute;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2)
}

.voice-section-header-set .list2 .pop:after {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    box-shadow: 1px 0 4px rgba(0, 0, 0, .12);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    left: 50%;
    margin-left: -5px;
    top: -4px;
    background: #fff
}

.voice-section-header-set .list2 .pop div {
    background: #fff;
    padding: 5px 0;
    position: relative;
    z-index: 2;
    border-radius: 3px;
    overflow-y: hidden
}

.voice-section-header-set .list2 .pop a {
    display: block;
    border-bottom: 1px solid #eff4f5;
    cursor: pointer;
    padding: 0 14px;
    font-size: 13px
}

.voice-section-header-set .list2 .pop a.active:after {
    content: "\e6bd";
    font-family: kf5;
    float: right;
    font-size: 18px;
    color: #417afc
}

.voice-section-header-set .list2 .pop a:last-child {
    border-bottom: 0
}

.voice-section-header-set .list2 .pop a:hover {
    background: #eff4f5
}

.voice-section-header-pane2 {
    padding: 15px;
    background: #fff
}

.voice-section-header-pane2 .own-number-box {
    height: 32px;
    line-height: 32px;
    border: 1px solid #e2eaec;
    border-radius: 3px;
    position: relative
}

.voice-section-header-pane2 .own-number-box .own-number {
    height: 32px;
    line-height: 32px;
    display: block;
    position: relative;
    padding-left: 38px;
    font-size: 15px
}

.voice-section-header-pane2 .own-number-box .own-number:before {
    content: "\e62b";
    position: absolute;
    left: 0;
    top: 0;
    font-family: kf5;
    width: 32px;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    color: #828d95
}

.voice-section-header-pane2 .own-number-box .dialpad-btn {
    position: absolute;
    right: -1px;
    top: -1px;
    height: 32px;
    width: 32px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #e2eaec;
    border-radius: 0 3px 3px 0;
    color: #828D95
}

.voice-section-header-pane2 .own-number-box .dialpad-btn i {
    line-height: 32px
}

.voice-section-header-pane2 .own-number-box .dialpad-btn.on {
    color: #417afc
}

.voice-section-header-pane2 .own-number-box .dialpad-btn:hover {
    border-color: #d8e0e2;
    color: #417afc
}

.voice-section-main {
    border-top: 1px solid #e2eaec;
    background: #fff;
    padding: 15px;
    border-radius: 0 0 3px 3px;
    overflow: hidden
}

.dialpad-call,
.dialpad-call-end {
    display: inline-block;
    height: 56px;
    line-height: 56px;
    width: 56px;
    text-align: center;
    font-size: 26px;
    color: #fff;
    background: #23C953;
    border-radius: 100%
}

.dialpad-call i,
.dialpad-call-end i {
    line-height: 56px
}

.dialpad-call .icon-phone-in-talk,
.dialpad-call-end .icon-phone-in-talk,
.dialpad-call .icon-phone-missed,
.dialpad-call-end .icon-phone-missed {
    display: none
}

.dialpad-call:hover,
.dialpad-call-end:hover {
    background: #19bf49
}

.dialpad-call:hover .icon-phone-in-talk,
.dialpad-call-end:hover .icon-phone-in-talk,
.dialpad-call:hover .icon-phone-missed,
.dialpad-call-end:hover .icon-phone-missed {
    display: block
}

.dialpad-call:hover .icon-call,
.dialpad-call-end:hover .icon-call,
.dialpad-call:hover .icon-call-end,
.dialpad-call-end:hover .icon-call-end,
.dialpad-call:hover .icon-dialer-sip,
.dialpad-call-end:hover .icon-dialer-sip {
    display: none
}

.dialpad-call-pause,
.dialpad-call-play,
.dialpad-call-transfer {
    font-size: 13px;
    color: #777;
    line-height: 56px
}

.dialpad-call-pause:before,
.dialpad-call-play:before,
.dialpad-call-transfer:before {
    content: "";
    font-family: kf5;
    float: left;
    margin-right: 2px;
    font-size: 15px;
    color: #999
}

.dialpad-call-pause:hover,
.dialpad-call-play:hover,
.dialpad-call-transfer:hover {
    color: #517efe
}

.dialpad-call-pause:hover:before,
.dialpad-call-play:hover:before,
.dialpad-call-transfer:hover:before {
    color: #517efe
}

.dialpad-call-play {
    color: #517efe
}

.dialpad-call-play:before {
    color: #517efe
}

.dialpad-call-pause:before {
    content: "\e908"
}

.dialpad-call-play:before {
    content: "\e63e"
}

.dialpad-call-transfer:before {
    content: "\e66b"
}

.dialpad-call-end {
    background: #FF6C6C
}

.dialpad-call-end:hover {
    background: #f56262
}

.dialpad-number-box {
    position: relative;
    line-height: 1;
    margin-bottom: 10px
}

.dialpad-number-box input[type=tel] {
    height: 36px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    text-align: center;
    font-size: 28px;
    font-weight: 300
}

.dialpad-number-box input[type=tel]:focus + .back-delete {
    opacity: .5
}

.dialpad-number-box .back-delete {
    opacity: 0;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
    position: absolute;
    right: 0;
    top: 0;
    line-height: 36px;
    text-align: center;
    font-size: 18px;
    color: #9B9B9B
}

.dialpad-number-box .back-delete:hover {
    color: #417AFC;
    opacity: 1 !important
}

.dialpad-number-btn {
    line-height: 1;
    width: 204px;
    margin: 0 auto;
    margin-bottom: 10px
}

.dialpad-number-btn:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.dialpad-number-btn li {
    float: left;
    height: 56px;
    width: 56px;
    text-align: center;
    line-height: 56px;
    border: 1px solid #A6C1FF;
    border-radius: 100%;
    font-size: 26px;
    margin: 2px 5px;
    cursor: pointer;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.dialpad-number-btn li:hover {
    border-color: #417AFC;
    color: #417afc
}

.dialpad-number-btn li:active {
    background: #eff4f5
}

.dialpad-number-btn ::selection {
    background: transparent;
    color: #333
}

.dialpad-number-btn ::-moz-selection {
    background: transparent;
    color: #333
}

.voice-section-main {
    line-height: 1
}

.voice-section-main .call-info {
    text-align: center;
    color: #517EFE;
    margin-bottom: 30px
}

.voice-section-main .call-info-number {
    font-size: 32px;
    margin-bottom: 5px
}

.voice-section-main .call-user img {
    height: 70px;
    width: 70px;
    border-radius: 100%;
    display: inline-block;
    margin-bottom: 8px;
    position: relative;
    z-index: 10
}

.voice-section-main .call-user p {
    font-size: 16px
}

.voice-section-main .call-user {
    margin-bottom: 30px;
    text-align: center
}

.voice-section-main .call-operation {
    text-align: center;
    padding: 0 15px 10px;
    position: relative;
    min-height: 56px
}

.voice-section-main .call-operation:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.voice-section-main .call-operation p {
    font-size: 15px;
    color: #949494;
    margin-bottom: 15px
}

.voice-section-main .call-operation .next-call-btn {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: 40px;
    margin: 0;
    background: #23C953;
    color: #fff;
    border: 0
}

.voice-section-main .call-operation .next-call-btn:hover {
    background: #19bf49
}

.voice-section-main .call-operation .next-call-btn.red {
    background: #ff6c6c
}

.voice-section-main .call-operation .next-call-btn.red:hover {
    background: #f56262
}

.voice-section-main .call-operation .center {
    position: absolute;
    left: 50%;
    margin-left: -28px;
    bottom: 10px
}

.voice-section-main .cbutton {
    display: inline-block;
    position: relative;
    height: 70px;
    width: 70px
}

.voice-section-main .cbutton::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px 0 0 -35px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none
}

.voice-section-main .cbutton--effect-jagoda::before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -45px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    content: '';
    opacity: 0;
    pointer-events: none
}

.voice-section-main .cbutton--effect-jagoda::after {
    margin: -45px 0 0 -45px;
    width: 90px;
    height: 90px
}

.voice-section-main .cbutton--effect-jagoda::before,
.voice-section-main .cbutton--effect-jagoda::after {
    box-shadow: 0 0 0 1px rgba(0, 130, 220, .2)
}

.voice-section-main .cbutton--effect-jagoda::before,
.voice-section-main .cbutton--effect-jagoda::after {
    -webkit-animation-name: anim-effect-jagoda-2, anim-effect-jagoda-1;
    animation-name: anim-effect-jagoda-2, anim-effect-jagoda-1;
    -webkit-animation-duration: 2.8s;
    animation-duration: 2.8s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.voice-section-main .cbutton--effect-jagoda::after {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s
}

.voice-panel-box {
    position: absolute;
    right: 80px;
    top: 60px;
    z-index: 12;
    line-height: normal;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .5);
    border-radius: 5px;
    overflow: hidden
}

.voice-panel-box.expand {
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0;
    box-shadow: -8px 0 12px rgba(0, 0, 0, .06)
}

.voice-panel-box.expand .voice-panel-main {
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 64px
}

.voice-panel-box .voice-panel-head {
    background: #35B3E1
}

.voice-panel-box .voice-section-header-pane1 {
    background: 0;
    width: 270px;
    color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 0;
    border-right: 1px solid #33A4CE;
    border-radius: 0
}

.voice-panel-box .voice-section-header-set {
    position: relative;
    top: 4px;
    z-index: 3
}

.voice-panel-box .voice-section-header-set li {
    height: 26px;
    line-height: 26px
}

.voice-panel-box .voice-section-header-set li i {
    line-height: 26px
}

.voice-panel-box .right-top-btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 10px 0 0
}

.voice-panel-box .right-top-btn a {
    float: left;
    height: 28px;
    line-height: 28px;
    padding: 0 6px;
    color: rgba(255, 255, 255, .6);
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s
}

.voice-panel-box .right-top-btn a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .2)
}

.voice-panel-box .right-top-btn .close {
    font-size: 18px
}

.voice-panel-box .right-top-btn .minisize {
    font-size: 18px
}

.voice-panel-box .right-top-btn .expand-open,
.voice-panel-box .right-top-btn .expand-mini {
    font-size: 13px;
    width: 18px;
    text-align: center
}

.voice-panel-box .right-top-btn .expand-mini {
    font-size: 14px;
    display: none
}

.voice-panel-main {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 550px
}

.voice-panel-left {
    background: #fff;
    width: 270px;
    padding-top: 15px;
    border-right: 1px solid #e2eaec;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.voice-panel-tab {
    padding: 0 15px 15px
}

.tab-title {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-radius: 3px;
    overflow-y: hidden;
    width: 100%
}

.tab-title .talking {
    color: #21d376
}

.tab-title .talking i {
    font-size: 16px;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px
}

.tab-title li {
    height: 26px;
    line-height: 26px;
    background: #EFF4F5;
    text-align: center;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    cursor: pointer
}

.tab-title li:hover {
    background: #e5eaeb
}

.tab-title .active {
    color: #fff;
    background: #35B3E1 !important;
    cursor: default
}

.voice-panel-own-number {
    padding: 0 15px 15px;
    line-height: 32px;
    position: relative;
    cursor: default;
    z-index: 2
}

.voice-panel-own-number:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.voice-panel-own-number i {
    font-size: 24px;
    float: left;
    color: #777;
    margin-right: 8px;
    line-height: 32px
}

.voice-panel-own-number img {
    float: left;
    height: 32px;
    width: 32px;
    border-radius: 100%;
    margin-right: 8px
}

.voice-panel-own-number .kchat-pop {
    left: 115px;
    top: 35px
}

.voice-panel-own-number .kchat-pop ul {
    padding: 3px 0
}

.voice-panel-own-number .kchat-pop li {
    padding: 0 10px
}

.voice-panel-own-number .kchat-pop:after {
    top: -4px
}

.voice-panel-own-number span:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #333;
    position: relative;
    top: -1px
}

.voice-panel-right {
    position: relative;
    background: #FBFCFD;
    width: 352px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.voice-panel-right-tab {
    position: absolute;
    left: 15px;
    top: -35px
}

.voice-panel-right-tab:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.voice-panel-right-tab li {
    float: left;
    line-height: 35px;
    border-radius: 2px 2px 0 0;
    color: #fff;
    padding: 0 15px;
    cursor: pointer
}

.voice-panel-right-tab li:hover {
    background: rgba(255, 255, 255, .15)
}

.voice-panel-right-tab .active {
    background: #fff !important;
    color: #35B3E1;
    cursor: default
}

.voice-panel-right-content {
    padding: 12px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto
}

.voice-panel-right-content .empty-block {
    position: absolute;
    top: 50%;
    margin-top: -60px;
    left: 0;
    right: 0
}

.voice-panel-right-content .empty-block:before {
    content: "\e626"
}

.voice-panel-right-content .chat-user-info {
    padding-top: 10px
}

.voice-panel-history {
    padding-left: 15px;
    height: 494px;
    overflow-y: auto
}

.voice-panel-history .close {
    display: none;
    position: absolute;
    z-index: 2;
    width: 18px;
    text-align: center;
    left: -16px;
    font-size: 12px;
    color: #777;
    top: 50%;
    margin-top: -8px;
    cursor: default
}

.voice-panel-history .close:hover {
    color: #333
}

.voice-panel-history li {
    border-bottom: 1px solid #e2eaec;
    padding: 5px 15px 5px 3px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    cursor: pointer
}

.voice-panel-history li:hover .close {
    display: block
}

.voice-panel-history li.active {
    background: #FBFCFD;
    border-right: 1px solid #21b1d3
}

.voice-panel-history .info {
    width: 100%
}

.voice-panel-history .info p {
    font-weight: 700;
    position: relative
}

.voice-panel-history .info span {
    font-size: 12px;
    color: #666;
    position: relative
}

.voice-panel-history .info.active:before {
    content: "";
    position: absolute;
    left: -15px;
    top: 0;
    right: 0;
    height: 100%;
    background: #eff4f5;
    border-right: 2px solid #21b1d3
}

.voice-panel-history .missed {
    color: #F43530
}

.voice-panel-history .option {
    font-size: 20px;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.voice-panel-history .option a {
    color: #777;
    cursor: default
}

.voice-panel-history .option a:hover {
    color: #21b1d3
}

.call-transfer-box:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.transfer-msg {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 200px;
    height: 50px;
    padding: 4px;
    margin-top: 10px;
    font-size: 12px;
    resize: none
}

.call-transfer-left {
    float: left;
    width: 220px;
    border-right: 1px solid #e2eaec
}

.call-transfer-left .search {
    padding: 15px;
    position: relative
}

.call-transfer-left .search:after {
    content: "\e037";
    font-family: kf5;
    position: absolute;
    left: 22px;
    top: 22px;
    font-size: 12px;
    color: #999
}

.call-transfer-left input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 25px;
    width: 100%;
    padding-left: 20px;
    font-size: 12px
}

.call-transfer-list {
    height: 325px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 13px
}

.call-transfer-list dl {
    margin-bottom: 10px
}

.call-transfer-list dt {
    padding: 0 15px;
    color: #777;
    margin-bottom: 3px
}

.call-transfer-list dt span {
    display: block;
    padding-bottom: 0;
    border-bottom: 1px solid #e2eaec
}

.call-transfer-list dd {
    padding: 0 40px 0 28px;
    line-height: 26px;
    height: 26px;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer
}

.call-transfer-list dd:hover {
    background: #eff4f5
}

.call-transfer-list dd.active {
    background: #e5eaeb;
    cursor: default
}

.call-transfer-list dd span {
    position: absolute;
    right: 15px;
    font-size: 12px
}

.call-transfer-list dd.free span {
    color: #21d376
}

.call-transfer-list dd.busy span {
    color: #777
}

.call-transfer-list dd.group span {
    font-size: 15px;
    color: #aaa
}

.call-transfer-right {
    width: 300px;
    padding-left: 221px
}

.call-transfer-right-inner {
    padding-top: 70px;
    text-align: center
}

.call-transfer-right-inner img {
    height: 70px;
    width: 70px;
    border-radius: 100%;
    margin-bottom: 5px
}

.call-transfer-right-inner .name {
    font-size: 18px;
    margin-bottom: 0;
    line-height: 1em;
    margin-bottom: 10px
}

.call-transfer-right-inner .state {
    font-size: 12px;
    line-height: 1em;
    color: #777
}

.call-transfer-right-inner .free {
    color: #21d376
}

.call-transfer-right-inner .busy {
    color: #F43530
}

.call-transfer-right-inner .btn {
    display: inline-block;
    float: none;
    margin: 0;
    margin-top: 20px
}

.call-transfer-right-inner .btn:before {
    content: "\e66b";
    font-family: kf5;
    margin-right: 3px
}

.call-details .flex li {
    margin-bottom: 10px
}

.call-details .title {
    display: inline-block;
    margin-right: 1em
}

.audioplayer {
    height: 34px;
    color: #fff;
    background: #7786AB;
    position: relative;
    z-index: 1;
    min-width: 280px;
    max-width: 340px
}

.audioplayer-mini {
    width: 2.5em;
    margin: 0 auto
}

.audioplayer > div {
    position: absolute;
    font-size: 13px
}

.audioplayer-playpause {
    width: 34px;
    height: 100%;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    left: 0
}

.audioplayer-mini .audioplayer-playpause {
    width: 100%
}

.audioplayer-playpause:hover,
.audioplayer-playpause:focus {
    background-color: #63749E
}

.audioplayer-playpause a {
    display: block;
    height: 34px;
    width: 34px;
    background: url('../images/voice-operation-icons.png') no-repeat;
    border-right: 1px solid #63749e
}

.audioplayer-stopped .audioplayer-playpause a {
    background-position: 10px 10px
}

.audioplayer-playing .audioplayer-playpause a {
    background-position: 9px -132px
}

.audioplayer-time {
    width: 45px;
    height: 100%;
    line-height: 34px;
    text-align: center;
    z-index: 2;
    top: 0
}

.audioplayer-time-current {
    right: 75px
}

.audioplayer-time-current:after {
    content: " /"
}

.audioplayer-time-duration {
    right: 34px
}

.audioplayer-novolume .audioplayer-time-duration {
    border-right: 0;
    right: 0
}

.audioplayer-bar {
    height: 8px;
    background-color: #eff4f5;
    cursor: pointer;
    z-index: 1;
    top: 50%;
    right: 136px;
    left: 45px;
    margin-top: -4px
}

.audioplayer-novolume .audioplayer-bar {
    right: 90px
}

.audioplayer-bar div {
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.audioplayer-bar-loaded {
    z-index: 1
}

.audioplayer-bar-played {
    background: #33E3B5;
    z-index: 2
}

.audioplayer-bar-played:after {
    content: "";
    height: 18px;
    width: 18px;
    border-radius: 100px;
    background: #24FFC5;
    position: absolute;
    right: -14px;
    top: 0;
    margin-top: -5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2)
}

.audioplayer-volume {
    width: 2.5em;
    height: 100%;
    border-left: 1px solid #63749E;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    right: 0
}

.audioplayer-volume:hover,
.audioplayer-volume:focus {
    background-color: #63749E
}

.audioplayer-volume-button {
    width: 100%;
    height: 100%
}

.audioplayer-volume-button a {
    display: block;
    width: 20px;
    height: 20px;
    margin: 5px 0 0 5px;
    position: relative;
    z-index: 1;
    background: url('../images/voice-operation-icons.png') 2px -89px no-repeat
}

.audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a {
    background-position: 2px -42px
}

.audioplayer-volume-adjust {
    height: 90px;
    cursor: default;
    position: absolute;
    left: -1px;
    right: 0;
    top: -9999px;
    background: #f4f4f4
}

.audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
    opacity: 0
}

.audioplayer-volume:hover .audioplayer-volume-adjust {
    top: auto;
    bottom: 100%
}

.audioplayer-volume-adjust > div {
    width: 8px;
    height: 80%;
    background-color: #eff4f5;
    cursor: pointer;
    position: relative;
    z-index: 1;
    margin: 30% auto 0
}

.audioplayer-volume-adjust div div {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #33E3B5
}

.audioplayer-novolume .audioplayer-volume {
    display: none
}

.audioplayer-volume-adjust {
    border-bottom: 0
}

.audioplayer,
.audioplayer-volume-adjust {
    background: #7786AB
}

.audioplayer-bar-played {
    background: #33e3b5
}

.audioplayer-volume-adjust div div {
    background: #33e3b5
}

.audioplayer-bar,
.audioplayer-bar div,
.audioplayer-volume-adjust div {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
}

.audioplayer-volume-adjust {
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px
}

.audioplayer *,
.audioplayer :before,
.audioplayer :after {
    -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    transition: color .25s ease, background-color .25s ease, opacity .5s ease
}

.voice-audio {
    display: none
}

.tutorials-mask {
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(5px);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 12
}

.tutorials-box {
    height: 100vh;
    overflow-x: hidden
}

.tutorials-step {
    padding-top: 60px;
    float: left;
    position: relative;
    left: 50%;
    padding-left: 88px;
    margin-bottom: 40px
}

.tutorials-step:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.tutorials-step li {
    float: left;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    border-radius: 100%;
    background: #D5D5D5;
    position: relative;
    margin-right: 176px;
    left: -50%
}

.tutorials-step li:after {
    content: "";
    height: 8px;
    width: 180px;
    background: #D5D5D5;
    position: absolute;
    left: 43px;
    top: 50%;
    margin-top: -4px
}

.tutorials-step li:last-child:after {
    display: none
}

.tutorials-step li.fulfill {
    background: #21d376
}

.tutorials-step li.fulfill:after {
    background: #21d376
}

.tutorials-step1-img {
    clear: both;
    text-align: center
}

.tutorials-step1-img .step3-img {
    display: inline-block;
    width: 580px
}

.tutorials-step-info {
    text-align: center;
    padding-top: 20px;
    clear: both
}

.tutorials-step-info h2 {
    font-size: 38px;
    margin-bottom: 10px
}

.tutorials-step-info p {
    font-size: 16px;
    line-height: 1.8em
}

.tutorials-step1-address {
    padding-top: 20px;
    margin-bottom: 30px
}

.tutorials-step1-address address {
    font-size: 24px;
    color: #F5A623;
    display: inline-block;
    margin-right: 8px
}

.tutorials-step1-address a {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    background: #fff;
    border-radius: 2px;
    border: 1px solid #D3D3D3;
    font-size: 12px;
    position: relative;
    top: -5px
}

.tutorials-step1-address a:hover {
    border-color: #bfbfbf
}

.tutorials-step1-address .hint {
    font-size: 12px
}

.tutorials-step-btn {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    height: 34px;
    line-height: 34px;
    border-radius: 3px;
    margin-right: 10px;
    border: 1px solid #ced6d8;
    padding: 0 14px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    color: #333;
    font-size: 16px;
    color: #fff;
    background: #21d376;
    height: 40px;
    line-height: 40px;
    padding: 0 25px;
    margin-bottom: 50px;
    border: 1px solid #0dbf62
}

.tutorials-step-btn:hover {
    border-color: #bac2c4;
    color: #333
}

.tutorials-step-btn:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset
}

.tutorials-step-btn.active {
    border-color: #21d376
}

.tutorials-step-btn.disabled {
    background: #f5f5f5 !important;
    border-color: #e1e1e1 !important;
    color: #999 !important;
    cursor: not-allowed !important
}

.tutorials-step-btn:hover {
    color: #fff;
    background: #17c96c;
    border-color: #03b558
}

.tutorials-step-form {
    padding-top: 20px;
    display: inline-block;
    text-align: center;
    margin-bottom: 20px
}

.tutorials-step-form textarea {
    height: 70px;
    width: 290px;
    padding: 8px;
    font-size: 14px
}

.tutorials-step-form input {
    height: 30px;
    padding: 0 8px;
    font-size: 14px
}

.tutorials-step-form input[type=email] {
    width: 170px;
    margin-right: 4px
}

.tutorials-step-form input[type=text] {
    width: 93px
}

.tutorials-step-form .error {
    border-color: #F43530
}

.tutorials-step-form .hint {
    font-size: 12px
}

.tutorials-step-form .error-hint {
    position: absolute;
    top: 0;
    left: 320px;
    white-space: nowrap;
    line-height: 32px
}

.tutorials-step-form .error-hint:before {
    content: "\e6c0";
    font-family: kf5;
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background: #F43530;
    color: #fff;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    margin-right: 5px
}

.tutorials-step-form .mb10 {
    position: relative
}

.tutorials-step2-btn-group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.tutorials-step2-btn-group .btn1 {
    background: #D5DADD;
    border-color: #BBC7CD
}

.tutorials-step2-btn-group .btn1:hover {
    background: #cbd0d3
}

.tutorials-step2-btn-group a {
    text-align: center;
    margin-right: 0;
    margin: 0 5px
}

.wizard-content {
    padding-top: 150px;
    padding-left: 50px;
    padding-bottom: 50px;
    padding-right: 20px;
    background: #fff;
    min-height: 100vh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.wizard-content h2 {
    font-size: 30px;
    margin-bottom: 10px
}

.wizard-item {
    padding-top: 40px
}

.wizard-item h3 {
    font-size: 18px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid #21d376;
    line-height: 1
}

.wizard-item p {
    font-size: 13px;
    color: #666
}

.wizard-item ul {
    padding-top: 15px
}

.wizard-item ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.wizard-item li {
    float: left;
    margin-right: 50px;
    text-align: center
}

.wizard-item li a {
    display: block;
    text-align: center
}

.wizard-item li a:before {
    content: "\e668";
    display: block;
    margin: 0 auto 10px;
    font-family: kf5;
    height: 45px;
    line-height: 45px;
    width: 45px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    border-radius: 100%;
    background: #ddd;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s
}

.wizard-item li a:hover:before {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px)
}

.wizard-item li .email:before {
    background: #28B0FB;
    content: "\e668"
}

.wizard-item li .voice:before {
    background: #B67DDA;
    content: "\e610"
}

.wizard-item li .kchat:before {
    background: #8DD332;
    content: "\e659"
}

.wizard-item li .weixin:before {
    background: #1ABC2E;
    content: "\e603";
    font-size: 22px
}

.wizard-item li .weibo:before {
    background: #F06E6E;
    content: "\e602";
    font-size: 22px
}

.wizard-item li .form:before {
    background: #0085FD;
    content: "\e6a3"
}

.wizard-item li .widget:before {
    background: #F3A343;
    content: "\e657"
}

.wizard-item li .sdk:before {
    background: #00C8F1;
    content: "\e629"
}

.wizard-item li .users:before {
    background: #F3A343;
    content: "\e69c"
}

.wizard-item li .org:before {
    background: #00C8F1;
    content: "\e617"
}

.wizard-item li .kb:before {
    background: #B67DDA;
    content: "\e6e2"
}

.wizard-item li .community:before {
    background: #8DD332;
    content: "\e655"
}

.wizard-item li .efficiency:before {
    background: #28B0FB;
    content: "\e605"
}

.wizard-item li .rule:before {
    background: #B67DDA;
    content: "\e632"
}

.wizard-item li .stats:before {
    background: #0085FD;
    content: "\e689"
}

.wizard-item li .sso:before {
    background: #0085FD;
    content: "\e608"
}

.wizard-item li .api:before {
    background: #F3A343;
    content: "\e631"
}

.wizard-item li .app:before {
    background: #00C8F1;
    content: "\e6b9"
}

.wizard-item li .miscell:before {
    background: #00C8F1;
    content: "\e623"
}

.wizard-item li .view:before {
    background: #F3A343;
    content: "\e62c"
}

.wizard-item li .macro:before {
    background: #00C8F1;
    content: "\e651"
}

.wizard-item li .ticketfield:before {
    background: #8DD332;
    content: "\e6a4"
}

.wizard-item li .trigger:before {
    background: #B67DDA;
    content: "\e6d7"
}

.wizard-item li .automation:before {
    background: #0085FD;
    content: "\e6b5"
}

.wizard-item li .sla:before {
    background: #F3A343;
    content: "\e6a5"
}

.breadcrumbs:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.breadcrumbs li {
    float: left
}

.breadcrumbs li:after {
    content: ">";
    margin: 0 5px;
    color: #777
}

.breadcrumbs li:last-child:after {
    display: none
}

.breadcrumbs a {
    color: #0096C4
}

.breadcrumbs a:hover {
    color: #48b6d7
}

.wizard-content-header {
    max-width: 800px;
    padding-top: 20px
}

.wizard-content-header p {
    margin-bottom: 15px;
    color: #666
}

.wizard-content-feature {
    padding-top: 30px
}

.wizard-content-feature:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.wizard-content-feature textarea {
    height: 100px;
    width: 400px;
    padding: 8px
}

.wizard-content-feature-item {
    display: inline-block;
    vertical-align: top;
    width: 30%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 25px
}

.wizard-content-feature-item h3 {
    font-size: 16px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e2eaec;
    margin-bottom: 15px;
    position: relative;
    padding-left: 12px
}

.wizard-content-feature-item h3:before {
    content: "";
    height: 14px;
    width: 3px;
    position: absolute;
    left: 0;
    top: 5px;
    background: #21d376
}

.wizard-content-feature-item a {
    color: #0096C4
}

.wizard-content-feature-item a:hover {
    color: #48b6d7
}

.wizard-content-feature-item li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 14px
}

.wizard-content-feature-item li:before {
    content: "";
    height: 6px;
    width: 6px;
    position: absolute;
    left: 0;
    top: 6px;
    border-radius: 100%;
    border: 1px solid #21d376
}

.wizard-content-feature-item p {
    margin-bottom: 10px
}

.wizard-content-img h3 {
    font-size: 16px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e2eaec;
    margin-bottom: 15px
}

.wizard-content-img ul {
    padding-top: 20px
}

.wizard-content-img li {
    display: inline-block;
    vertical-align: top;
    width: 300px;
    max-height: 220px;
    overflow-y: hidden;
    border-radius: 3px;
    padding: 1px;
    border: 1px solid #d8e0e2;
    margin: 0 20px 20px 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1)
}

.wizard-content-img li img {
    display: block;
    width: 100%;
    height: auto
}

.wizard-content-img li:hover {
    border-color: #21d376
}

.wizard-content-feature-panel {
    width: 800px
}

.wizard-content-feature-panel h3 {
    padding-left: 10px;
    border-left: 3px;
    border-left: 3px solid #21d376;
    line-height: 1;
    font-size: 16px;
    margin-bottom: 25px
}

.wizard-content-feature-panel .field {
    margin-bottom: 30px
}

.wizard-content-feature-panel .field:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.wizard-content-feature-panel .field h4 {
    float: left;
    width: 25%;
    padding-right: 10px;
    line-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.wizard-content-feature-panel .field .t-col-content {
    width: 75%;
    float: right;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.wizard-content-feature-panel .field input[type=text] {
    height: 28px;
    width: 300px;
    padding: 0 8px
}

.wizard-content-feature-panel .field .checkbox-label {
    line-height: 30px
}

.wizard-content-feature-panel .field .checkbox-label input {
    margin-right: 5px;
    background: #21d376;
    border-color: #21d376
}

.ticket-list-choice-row {
    padding: 0 19px 0 15px
}

.ticket-list-choice-btn {
    line-height: 28px;
    height: 28px;
    padding: 0 25px 0 10px;
    border: 1px solid #d8e0e2;
    border-radius: 3px;
    display: inline-block;
    position: relative
}

.ticket-list-choice-btn:hover {
    border-color: #ced6d8
}

.ticket-list-choice-btn:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 10px;
    top: 12px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #333
}

.ticket-list-choice-tag {
    padding: 0 20px;
    margin-bottom: 5px;
    margin-top: -5px;
    position: relative
}

.ticket-list-choice-tag .remove-tag {
    position: absolute;
    top: 0;
    right: 20px;
    line-height: 24px;
    z-index: 10
}

.ticket-list-choice-tag .remove-tag:before {
    content: "\e612";
    font-family: kf5;
    font-size: 18px;
    margin-right: 2px;
    color: #777;
    position: relative;
    top: 2px
}

.ticket-list-choice-tag .remove-tag:hover {
    color: #0096c4
}

.ticket-list-choice-tag .remove-tag:hover:before {
    color: #0096c4
}

.ticket-list-choice-tag dl {
    position: relative;
    padding-left: 75px;
    padding-right: 90px
}

.ticket-list-choice-tag dl:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.ticket-list-choice-tag dt {
    line-height: 26px;
    float: left;
    margin-right: 5px;
    position: absolute;
    left: 0;
    top: 0
}

.ticket-list-choice-tag dd {
    float: left;
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #d8e0e2;
    font-size: 12px;
    margin-right: 4px;
    margin-bottom: 8px
}

.ticket-list-choice-tag dd:hover {
    border-color: #ced6d8
}

.ticket-list-choice-tag dd a {
    margin-left: 2px;
    color: #999
}

.ticket-list-choice-tag dd a:hover {
    color: #666
}

.ticket-list-choice-tag dd:last-child {
    background: transparent;
    border: 0
}

.ticket-list-choice-tag span {
    font-size: 13px;
    float: left
}

.ticket-list-choice {
    padding: 10px 20px
}

.ticket-list-choice .ofv dd {
    margin-bottom: 0
}

.ticket-list-choice dl {
    padding: 10px 0 0;
    border-bottom: 1px dashed #e2eaec;
    font-size: 13px;
    position: relative;
    padding-left: 120px;
    padding-right: 60px;
    overflow-y: hidden;
    height: 33px
}

.ticket-list-choice dl:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.ticket-list-choice dl:last-child {
    border-bottom: 0
}

.ticket-list-choice dl.show {
    height: auto
}

.ticket-list-choice dt {
    float: left;
    color: #777;
    width: 110px;
    padding-right: 10px;
    position: absolute;
    left: 0;
    top: 10px;
    line-height: 22px
}

.ticket-list-choice dd {
    float: left;
    margin-right: 50px;
    margin-bottom: 10px;
    line-height: 22px
}

.ticket-list-choice .more {
    position: absolute;
    right: 0;
    top: 10px;
    margin-right: 5px
}

.ticket-list-choice .more a {
    color: #0096C4;
    position: relative;
    padding-right: 13px
}

.ticket-list-choice .more a:hover {
    color: #48b6d7
}

.ticket-list-choice .more a:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #333;
    position: absolute;
    right: 0;
    top: 7px
}

.ticket-list-choice a:hover {
    color: #222
}

.ticket-list-choice a.active {
    color: #00c668
}

.ticket-list-choice input {
    height: 22px;
    padding: 0 4px;
    width: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.ticket-list-choice select {
    margin-right: 10px;
    height: 22px;
    border: 1px solid #d8e0e2;
    border-radius: 3px
}

.tourbus-legs {
    display: none
}

.tourbus-leg {
    position: absolute;
    visibility: hidden;
    top: 0;
    box-shadow: 0 0 2px rgba(0, 0, 0, .15);
    border-radius: 3px;
    background: #fff
}

.tourbus-leg-inner {
    padding: 15px 20px;
    position: relative;
    zoom: 1
}

.tourbus-leg-inner:before,
.tourbus-leg-inner:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden
}

.tourbus-leg-inner:after {
    clear: both
}

.tourbus-leg h1,
.tourbus-leg h2,
.tourbus-leg h3,
.tourbus-leg h4,
.tourbus-leg h5,
.tourbus-leg h6 {
    margin-top: 0;
    padding-top: 0
}

.tourbus-arrow:before {
    content: " ";
    height: 15px;
    width: 15px;
    position: absolute;
    background: #fff;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.tourbus-arrow:after {
}

.tourbus-arrow:before {
}

.tourbus-arrow-right:before {
    margin-top: -16px;
    top: 50%;
    left: -6px
}

.tourbus-arrow-left:before {
    margin-top: -16px;
    top: 50%;
    right: -6px
}

.tourbus-arrow-bottom:before {
    margin-left: -16px;
    left: 50%;
    top: -6px
}

.tourbus-arrow-top:before {
    margin-left: -16px;
    left: 50%;
    bottom: -6px
}

.tourbus-arrow-right:after,
.tourbus-arrow-right:before {
    right: 100%
}

.tourbus-arrow-left:after,
.tourbus-arrow-left:before {
    left: 100%
}

.tourbus-arrow-bottom:after,
.tourbus-arrow-bottom:before {
    bottom: 100%
}

.tourbus-arrow-top:after,
.tourbus-arrow-top:before {
}

#tourbus-mask {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, .2)
}

.tourbus-next,
.tourbus-stop {
    float: right;
    font-size: 12px;
    color: #417AFC;
    margin-top: 10px
}

.record-score {
    padding: 20px;
    padding-right: 310px;
    max-width: 800px;
    position: relative
}

.record-score h3 {
    font-size: 16px;
    margin-bottom: 12px;
    padding-left: 8px;
    border-left: 2px solid #21d376;
    line-height: 1
}

.record-score .score {
    font-size: 18px
}

.record-score textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    display: block;
    height: 100px;
    padding: 5px;
    font-size: 14px;
    line-height: 1.6em;
    max-width: 100%
}

.lightbox-record-score {
    padding: 0;
    max-width: 650px
}

.record-score .alert p + p {
    margin-top: 8px
}

.record-score-top {
    margin-bottom: 20px;
    margin-top: 20px
}

.record-score-top .audioplayer {
    margin-bottom: 10px
}

.record-score-top a {
    color: #0096C4
}

.record-score-top a:hover {
    color: #48b6d7
}

.record-score-top time {
    color: #888;
    margin-right: 15px
}

.record-score-box {
    padding: 15px;
    border: 1px solid #e2eaec;
    border-radius: 3px;
    margin-bottom: 25px
}

.record-score-box .flex input {
    width: 60px;
    padding: 3px 4px
}

.record-score-box .flex label {
    margin-right: 35px;
    margin-bottom: 15px
}

.record-score-info {
    width: 250px;
    position: absolute;
    top: 20px;
    right: 20px
}

.record-score-info dt {
    font-size: 18px;
    margin-bottom: 10px
}

.record-score-info dd {
    margin-bottom: 8px;
    clear: both
}

.record-score-info .title {
    margin-right: 5px;
    color: #666;
    width: 5em;
    text-align: right;
    float: left
}

.record-score-info dd + dt {
    margin-top: 20px
}

.record-score-info a {
    color: #0096C4
}

.record-score-info a:hover {
    color: #48b6d7
}

.record-score-info .status {
    margin-right: 5px
}

.record-score-result {
    font-size: 13px
}

.record-score-result .title {
    font-weight: 700
}

.user-center-memo {
    max-width: 500px;
    padding-bottom: 30px
}

.user-center-memo .form-ui {
    margin-bottom: 50px
}

.user-center-memo textarea {
    width: 395px;
    height: 120px
}

.form-group > label {
    margin-bottom: 3px
}

.form-group {
    margin-bottom: 10px
}

.ticket-list-choice {
    margin-bottom: 0
}

.col {
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
    margin-left: 1px
}

.statistics-tab {
    padding: 20px
}

.col > header {
    border-radius: 0
}

.table tbody tr:hover {
    background: #faf9f9
}

@font-face {
    font-family: 'kf5';
    src: url('../fonts/kf5.eot?-6kxl4g');
    src: url('../fonts/kf5.ttf?-6kxl4g') format('truetype'),
    url('../fonts/kf5.woff?-6kxl4g') format('woff'),
    url('../fonts/kf5.svg?-6kxl4g#kf5') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: 'kf5';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-chat1:before {
    content: "\e906";
}

.icon-chat2:before {
    content: "\e907";
}

.icon-chat3:before {
    content: "\e68f";
}

#uploadifive-im-panel-main-chat-textarea-imagemsg-uploadify .icon-chat2:before {
    content: "\e68f";
    font-size: 21px;
}

#uploadifive-im-panel-main-chat-textarea-filemsg-uploadify .icon-chat2:before {
    content: "\e907";
}

.icon-talk1:before {
    content: "\e900";
}

.icon-talk2:before {
    content: "\e901";
}

.icon-talk3:before {
    content: "\e902";
}

.icon-talk4:before {
    content: "\e903";
}

.icon-talk5:before {
    content: "\e904";
}

.icon-ImportedLayers:before {
    content: "\e62e";
}

.icon-Shape:before {
    content: "\e62f";
}

.icon-api-box:before {
    content: "\e631";
}

.icon-logo:before {
    content: "\e61d";
}

.icon-search:before {
    content: "\e037";
}

.icon-weibo:before {
    content: "\e602";
}

.icon-weixin:before {
    content: "\e603";
}

.icon-qq:before {
    content: "\e606";
}

.icon-mini-size:before {
    content: "\e90d";
}

.icon-open-size:before {
    content: "\e90e";
}

.icon-account-box:before {
    content: "\e600";
}

.icon-account-circle:before {
    content: "\e601";
}

.icon-announcement:before {
    content: "\e604";
}

.icon-assignment:before {
    content: "\e609";
}

.icon-assignment-ind:before {
    content: "\e60a";
}

.icon-assignment-late:before {
    content: "\e60b";
}

.icon-assignment-turned-in:before {
    content: "\e60c";
}

.icon-backup:before {
    content: "\e60d";
}

.icon-bookmark:before {
    content: "\e60f";
}

.icon-bug-report:before {
    content: "\e611";
}

.icon-credit-card:before {
    content: "\e607";
}

.icon-delete:before {
    content: "\e612";
}

.icon-description:before {
    content: "\e633";
}

.icon-extension:before {
    content: "\e60e";
}

.icon-favorite:before {
    content: "\e615";
}

.icon-group-work:before {
    content: "\e617";
}

.icon-help:before {
    content: "\e622";
}

.icon-home:before {
    content: "\e618";
}

.icon-info:before {
    content: "\e619";
}

.icon-label:before {
    content: "\e61a";
}

.icon-language:before {
    content: "\e627";
}

.icon-launch:before {
    content: "\e61b";
}

.icon-lock:before {
    content: "\e608";
}

.icon-note-add:before {
    content: "\e61c";
}

.icon-perm-camera-m:before {
    content: "\e625";
}

.icon-perm-phone-msg:before {
    content: "\e61e";
}

.icon-print:before {
    content: "\e61f";
}

.icon-settings:before {
    content: "\e623";
}

.icon-verified-user:before {
    content: "\e62a";
}

.icon-view-list:before {
    content: "\e62c";
}

.icon-visibility:before {
    content: "\e630";
}

.icon-work:before {
    content: "\e632";
}

.icon-equalizer:before {
    content: "\e635";
}

.icon-fast-rewind:before {
    content: "\e637";
}

.icon-mic:before {
    content: "\e639";
}

.icon-replay:before {
    content: "\e643";
}

.icon-skip-next:before {
    content: "\e644";
}

.icon-skip-previous:before {
    content: "\e645";
}

.icon-stop:before {
    content: "\e646";
}

.icon-videocam:before {
    content: "\e648";
}

.icon-volume-down:before {
    content: "\e64a";
}

.icon-volume-mute:before {
    content: "\e64b";
}

.icon-volume-off:before {
    content: "\e64c";
}

.icon-volume-up:before {
    content: "\e64d";
}

.icon-call:before {
    content: "\e610";
}

.icon-comment:before {
    content: "\e651";
}

.icon-forum:before {
    content: "\e655";
}

.icon-live-help:before {
    content: "\e657";
}

.icon-message:before {
    content: "\e659";
}

.icon-textsms:before {
    content: "\e65e";
}

.icon-add:before {
    content: "\e613";
}

.icon-add-box:before {
    content: "\e65f";
}

.icon-add-circle:before {
    content: "\e660";
}

.icon-backspace:before {
    content: "\e663";
}

.icon-drafts:before {
    content: "\e667";
}

.icon-mail2:before {
    content: "\e668";
}

.icon-remove-circle:before {
    content: "\e669";
}

.icon-reply:before {
    content: "\e66b";
}

.icon-send:before {
    content: "\e66e";
}

.icon-access-alarms:before {
    content: "\e670";
}

.icon-access-time:before {
    content: "\e605";
}

.icon-dvr:before {
    content: "\e62d";
}

.icon-format-list-bulleted:before {
    content: "\e680";
}

.icon-insert-chart:before {
    content: "\e689";
}

.icon-insert-drive-file:before {
    content: "\e68b";
}

.icon-insert-link:before {
    content: "\e68e";
}

.icon-insert-photo:before {
    content: "\e68f";
}

.icon-attachment:before {
    content: "\e692";
}

.icon-cloud:before {
    content: "\e693";
}

.icon-cloud-done:before {
    content: "\e695";
}

.icon-cloud-download:before {
    content: "\e696";
}

.icon-cloud-upload:before {
    content: "\e697";
}

.icon-file-download:before {
    content: "\e698";
}

.icon-file-upload:before {
    content: "\e699";
}

.icon-folder:before {
    content: "\e69a";
}

.icon-folder-shared:before {
    content: "\e69c";
}

.icon-laptop-mac:before {
    content: "\e628";
}

.icon-phone-iphone:before {
    content: "\e629";
}

.icon-security:before {
    content: "\e6a1";
}

.icon-ipad:before {
    content: "\e6a2";
}

.icon-tv:before {
    content: "\e6a3";
}

.icon-add-to-photos:before {
    content: "\e6a4";
}

.icon-assistant-photo:before {
    content: "\e6a5";
}

.icon-camera-alt:before {
    content: "\e6a8";
}

.icon-edit:before {
    content: "\e6aa";
}

.icon-remove-red-eye:before {
    content: "\e6af";
}

.icon-timer-auto:before {
    content: "\e6b2";
}

.icon-beenhere:before {
    content: "\e6b4";
}

.icon-layers:before {
    content: "\e614";
}

.icon-local-cafe:before {
    content: "\e6b5";
}

.icon-place:before {
    content: "\e6b8";
}

.icon-apps:before {
    content: "\e6b9";
}

.icon-arrow-back:before {
    content: "\e6ba";
}

.icon-arrow-forward:before {
    content: "\e6bb";
}

.icon-cancel:before {
    content: "\e6bc";
}

.icon-check:before {
    content: "\e6bd";
}

.icon-chevron-left:before {
    content: "\e6be";
}

.icon-chevron-right:before {
    content: "\e6bf";
}

.icon-close:before {
    content: "\e6c0";
}

.icon-expand-less:before {
    content: "\e6c1";
}

.icon-expand-more:before {
    content: "\e6c2";
}

.icon-more-horiz:before {
    content: "\e6c4";
}

.icon-more-vert:before {
    content: "\e6c5";
}

.icon-refresh:before {
    content: "\e6c6";
}

.icon-phone-forwarded:before {
    content: "\e62b";
}

.icon-phone-in-talk:before {
    content: "\e6cc";
}

.icon-phone-locked:before {
    content: "\e6cd";
}

.icon-phone-missed:before {
    content: "\e6ce";
}

.icon-sms-failed:before {
    content: "\e6d3";
}

.icon-notifications:before {
    content: "\e6d7";
}

.icon-people2:before {
    content: "\e6dc";
}

.icon-person:before {
    content: "\e6dd";
}

.icon-person-add:before {
    content: "\e6de";
}

.icon-publ:before {
    content: "\e6e1";
}

.icon-school:before {
    content: "\e6e2";
}

.icon-share:before {
    content: "\e6e3";
}

.icon-whatshot:before {
    content: "\e6e4";
}

.icon-check-box:before {
    content: "\e616";
}

.icon-check-box-outline-blank:before {
    content: "\e620";
}

.icon-radio-button-off:before {
    content: "\e621";
}

.icon-radio-button-on:before {
    content: "\e624";
}

.icon-star:before {
    content: "\e6e5";
}

.icon-settings-phone:before {
    content: "\e626";
}

.icon-moff:before {
    content: "\e63b";
}

.icon-call-end:before {
    content: "\e64e";
}

.icon-dialer-sip:before {
    content: "\e905";
}

.icon-dialpad:before {
    content: "\e652";
}

.icon-dnd-on:before {
    content: "\e653";
}

.icon-backspace2:before {
    content: "\e664";
}

.icon-pause:before {
    content: "\e908";
}

.icon-play-arrow:before {
    content: "\e63e";
}

.icon-exit-to-app:before {
    content: "\e909";
}

.icon-stars:before {
    content: "\e90a";
}

.icon-local-florist:before {
    content: "\e90b";
}

.icon-location-history:before {
    content: "\e90c";
}

.icon-people:before {
    content: "\e6db";
}

.icon-lifebuoy:before {
    content: "\e941";
}

.icon-spinner4:before {
    content: "\e97d";
}

.icon-apple:before {
    content: "\eabf";
}

.icon-android:before {
    content: "\eac1";
}

.icon-chrome:before {
    content: "\eae5";
}

.icon-firefox:before {
    content: "\eae6";
}

.icon-IE:before {
    content: "\eae7";
}

.icon-opera:before {
    content: "\eae8";
}

.icon-safari:before {
    content: "\eae9";
}

.icon-folder-o:before {
    content: "\f114";
}

.icon-folder-open-o:before {
    content: "\f115";
}

.icon-local-user-setup:before {
    content: "\e623";
}

/* add by js 20181025 */
.icon-alamrslist-reload:before {
    content: "\e6c6";
}

/* add by js 20181029 */
.icon-alamrslist-clear:before {
    content: "\e6c0";
}

/* add by js 20181029 */
.icon-alamrslist-more:before {
    content: "\e660";
    /* 613 */
}

/* add by js 20190102 */
.icon-rosterlist-add:before {
    content: "\e6de";
}

/* add by js 20190102 */
.icon-groupslist-add:before {
    content: "\e6dc";
}

/* add by js 20190102 */

.date-picker {
    width: 170px;
    height: 25px;
    padding: 0;
    border: 0;
    line-height: 25px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    color: #303030;
    position: relative;
    z-index: 2;
}

.date-picker-wrapper {
    position: absolute;
    z-index: 999;
    border-radius: 3px;
    border: 1px solid #ccd0d9;
    background-color: #F9FAFA;
    width: 428px;
    padding: 5px 12px;
    font-size: 12px;
    line-height: 20px;
    color: #aaa;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.date-picker-wrapper.single-date {
    width: auto;
}

.date-picker-wrapper.no-shortcuts {
    padding-bottom: 12px;
}

.date-picker-wrapper .footer {
    font-size: 11px;
    padding-top: 3px;
}

.date-picker-wrapper b {
    color: #666;
    font-weight: 700;
}

.date-picker-wrapper a {
    color: rgb(107, 180, 214);
    text-decoration: underline;
}

.date-picker-wrapper .month-name {
    text-transform: uppercase;
}

.date-picker-wrapper .month-wrapper {
    border: 1px solid #e2eaec;
    border-radius: 3px;
    background-color: #fff;
    padding: 5px;
    cursor: default;
    position: relative;
    _overflow: hidden;
}

.date-picker-wrapper .month-wrapper table {
    width: 190px;
    float: left;
}

.date-picker-wrapper .month-wrapper table.month2 {
    width: 190px;
    float: right;
}

.date-picker-wrapper .month-wrapper table th,
.date-picker-wrapper .month-wrapper table td {
    vertical-align: middle;
    text-align: center;
    line-height: 14px;
    margin: 0px;
    padding: 0px;
}

.date-picker-wrapper .month-wrapper table .day {
    height: 19px;
    line-height: 19px;
    font-size: 12px;
    margin-bottom: 1px;
    color: #999;
    cursor: default;
}

.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
    color: #999;
    cursor: default;
}

.date-picker-wrapper .month-wrapper table .day.checked {
    background-color: #21d376;
    color: #fff !important;
}

.date-picker-wrapper .month-wrapper table .week-name {
    height: 20px;
    line-height: 20px;
    font-weight: 100;
    text-transform: uppercase;
}

.date-picker-wrapper .month-wrapper table .day.has-tooltip {
    cursor: help !important;
}

.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
    color: #333;
    cursor: pointer;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    border: 1px solid transparent;
}

.date-picker-wrapper .month-wrapper table .day.toMonth.valid:hover {
    background: rgba(33, 211, 118, .3)
}

.date-picker-wrapper .month-wrapper table .day.real-today {
    background: #fff;
    color: #21d376 !important;
    border-color: #21d376 !important
}

.date-picker-wrapper .month-wrapper table .day.real-today.checked {
    background-color: #21d376;
    color: #fff !important;
}

.date-picker-wrapper table .caption {
    height: 40px;
}

.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
    padding: 0 5px;
    cursor: pointer;
}

.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
    background-color: #ccc;
    color: white;
}

.date-picker-wrapper .gap {
    position: absolute;
    display: none;
    top: 0px;
    left: 204px;
    z-index: 1;
    width: 15px;
    height: 100%;
    background-color: red;
    font-size: 0;
    line-height: 0;
}

.date-picker-wrapper .gap .gap-lines {
    height: 100%;
    overflow: hidden;
}

.date-picker-wrapper .gap .gap-line {
    height: 15px;
    width: 15px;
    position: relative;
}

.date-picker-wrapper .gap .gap-line .gap-1 {
    z-index: 1;
    height: 0;
    border-left: 8px solid white;
    border-top: 8px solid #eee;
    border-bottom: 8px solid #eee;
}

.date-picker-wrapper .gap .gap-line .gap-2 {
    position: absolute;
    right: 0;
    top: 0px;
    z-index: 2;
    height: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid white;
}

.date-picker-wrapper .gap .gap-line .gap-3 {
    position: absolute;
    right: 0;
    top: 8px;
    z-index: 2;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid white;
}

.date-picker-wrapper .gap .gap-top-mask {
    width: 6px;
    height: 1px;
    position: absolute;
    top: -1px;
    left: 1px;
    background-color: #eee;
    z-index: 3;
}

.date-picker-wrapper .gap .gap-bottom-mask {
    width: 6px;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 7px;
    background-color: #eee;
    z-index: 3;
}

.date-picker-wrapper .selected-days {
    display: none;
}

.date-picker-wrapper .drp_top-bar {
    line-height: 40px;
    height: 40px;
    position: relative;
}

.date-picker-wrapper .drp_top-bar .error-top {
    display: none;
}

.date-picker-wrapper .drp_top-bar .normal-top {
    display: none;
}

.date-picker-wrapper .drp_top-bar .default-top {
    display: block;
}

.date-picker-wrapper .drp_top-bar.error .default-top {
    display: none;
}

.date-picker-wrapper .drp_top-bar.error .error-top {
    display: block;
    color: red;
}

.date-picker-wrapper .drp_top-bar.normal .default-top {
    display: none;
}

.date-picker-wrapper .drp_top-bar.normal .normal-top {
    display: block;
}

.date-picker-wrapper .drp_top-bar .apply-btn {
    position: absolute;
    right: 0px;
    top: 6px;
    margin: 0;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: all ease .4s;
    color: #fff;
    border: solid 1px #21D376;
    background: #21D376;
    padding: 2px 8px;
}

.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
    cursor: pointer;
    color: #21D376;
    border: solid 1px #21D376;
    background: #fff;
    padding: 2px 8px;
}

/*time styling*/
.time {
    position: relative;
}

.time input[type=range] {
    vertical-align: middle;
}

.time1,
.time2 {
    width: 180px;
    padding: 0 5px;
    text-align: center;
}

.time1 {
    float: left;
}

.time2 {
    float: right;
}

.hour,
.minute {
    text-align: right;
}

.hide {
    display: none;
}

@charset "utf-8";

/*统计模拟图*/
.stats-content {
    padding: 10px 20px
}

.column_chart,
.row_chart {
    display: inline-block;
    width: 100%
}

.column_chart_wrapper,
.row_chart_wrapper {
    width: 100%;
    padding: 20px 40px
}

.column_chart_wrapper tr td {
    width: 20%;
    padding: 0 10px
}

.column_item_container {
    text-align: center
}

.column_item {
    height: 230px;
    background: #f8f8f8;
    position: relative;
    width: 100%;
    border-radius: 4px
}

.column_item_height {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: #fc0;
    border-radius: 4px;
}

.column_item_height .column_item_label {
    position: absolute;
    top: -20px;
    left: 30%;
    color: #888;
    font-size: 12px
}

.column_item_text {
    font-size: 12px;
    color: #666;
    height: 25px;
    line-height: 25px
}

.row_chart_wrapper tr td {
    padding: 0 10px
}

.row_item {
    height: 25px;
    background: #f8f8f8;
    position: relative;
    width: 100%;
    border-radius: 4px
}

.row_item_height {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    background: #83D6AC;
    border-radius: 4px
}

.row_item_height .column_item_label {
    position: absolute;
    top: 5px;
    right: -35px;
    color: #888;
    font-size: 12px
}

.row_item_text {
    font-size: 12px;
    color: #666;
    height: 25px;
    line-height: 25px;
    padding-left: 5px
}

/*IE浏览器提醒*/
.ie-warning {
    position: relative;
    top: 150px;
    margin: 0 auto;
    width: 500px;
    font-size: 14px;
    color: #333;
    padding: 10px 20px;
    line-height: 24px;
    background: #C00;
    color: #fff;
    z-index: 1000
}

.ie-warning a {
    color: #fff
}

/*voice*/
.plat-pane {
    position: absolute;
    width: 240px;
    background: #fff;
    left: 0;
    z-index: 20;
    border-radius: 3px;
    line-height: normal !important;
    display: none;
    border-radius: 3px
}

.plat-pane.from-top {
    top: 50px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2)
}

.plat-pane.from-bottom {
    bottom: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
}

.plat-pane.at-mid {
    left: auto;
    right: -101px
}

.plat-pane.at-right {
    left: auto;
    right: -101px
}

.plat-pane:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #fff;
    left: 50%;
    top: -5px;
    margin-left: -4px;
    border: 1px solid #ccd0d9;
}

.plat-pane .pane-main {
    padding: 10px 15px
}

.plat-pane .pane-title {
    float: left;
    color: #444;
    margin-top: 4px;
    font-size: 13px
}

.plat-pane .pane-status {
    float: right;
    position: relative
}

.plat-pane .pane-status #status-loading {
    position: absolute;
    top: 6px;
    left: 9px;
    width: 45px;
    height: 15px;
    background: #fff url(../images/upload-loading.gif) no-repeat
}

/*内部提醒，来电队列样式*/
.plat-pane .pane-items {
}

.plat-pane .message-box {
    padding: 10px 15px;
    background: #fff;
    position: relative;
    z-index: 10;
    transition: background 0.2s ease-in
}

.plat-pane .message-box .message-text {
    padding: 5px 0;
    line-height: 20px;
    color: #555
}

.plat-pane a.button {
    padding: 5px 10px;
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 12px;
    margin-right: 5px;
    color: #777;
    background: #fff;
    border-radius: 14px
}

.plat-pane a.button:hover {
    text-decoration: none;
    color: #444
}

.plat-pane a.button:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset
}

.plat-pane .pane-operate {
    padding: 10px 15px;
    background: #f8f8f8;
    border-top: 1px solid #ececec;
}

/*播放器样式*/
.audioplayer {
    height: 34px;
    color: #fff;
    background: #7786AB;
    position: relative;
    z-index: 1;
    min-width: 280px;
    max-width: 340px;
}

/* mini mode (fallback) */
.audioplayer-mini {
    width: 2.5em;
    margin: 0 auto;
}

/* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */
.audioplayer > div {
    position: absolute;
    font-size: 13px;
}

/* play/pause button */
.audioplayer-playpause {
    width: 34px;
    height: 100%;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    left: 0;
}

/*.audioplayer:not(.audioplayer-mini) .audioplayer-playpause{border-right-color: rgba( 255, 255, 255, .1 );}*/
.audioplayer-mini .audioplayer-playpause {
    width: 100%;
}

.audioplayer-playpause:hover,
.audioplayer-playpause:focus {
    background-color: #63749E;
}

.audioplayer-playpause a {
    display: block;
    height: 34px;
    width: 34px;
    background: url(../images/voice-operation-icons.png) no-repeat;
    border-right: 1px solid #63749E
}

.audioplayer-stopped .audioplayer-playpause a {
    background-position: 10px 10px
}

.audioplayer-playing .audioplayer-playpause a {
    background-position: 9px -132px
}

/* timers */
.audioplayer-time {
    width: 45px;
    height: 100%;
    line-height: 34px;
    text-align: center;
    z-index: 2;
    top: 0;
}

.audioplayer-time-current {
    right: 75px;
}

.audioplayer-time-current:after {
    content: " /"
}

.audioplayer-time-duration {
    right: 34px;
}

.audioplayer-novolume .audioplayer-time-duration {
    border-right: 0;
    right: 0;
}

/* progress bar of loaded/played */
.audioplayer-bar {
    height: 8px;
    background-color: #EFF4F5;
    cursor: pointer;
    z-index: 1;
    top: 50%;
    right: 136px;
    left: 45px;
    margin-top: -4px
}

.audioplayer-novolume .audioplayer-bar {
    right: 90px;
}

.audioplayer-bar div {
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.audioplayer-bar-loaded {
    z-index: 1;
}

.audioplayer-bar-played {
    background: #33E3B5;
    z-index: 2;
}

.audioplayer-bar-played:after {
    content: "";
    height: 18px;
    width: 18px;
    border-radius: 100px;
    background: #24FFC5;
    position: absolute;
    right: -14px;
    top: 0;
    margin-top: -5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2)
}

/* volume button */
.audioplayer-volume {
    width: 2.5em;
    height: 100%;
    border-left: 1px solid #63749E;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    right: 0;
}

.audioplayer-volume:hover,
.audioplayer-volume:focus {
    background-color: #63749E;
}

.audioplayer-volume-button {
    width: 100%;
    height: 100%;
}

.audioplayer-volume-button a {
    display: block;
    width: 20px;
    height: 20px;
    margin: 5px 0 0 5px;
    position: relative;
    z-index: 1;
    background: url(../images/voice-operation-icons.png) 2px -89px no-repeat
}

.audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a {
    background-position: 2px -42px
}

/* volume dropdown */
.audioplayer-volume-adjust {
    height: 90px;
    cursor: default;
    position: absolute;
    left: -1px;
    right: 0px;
    top: -9999px;
    background: #f4f4f4;
}

.audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
    opacity: 0;
}

.audioplayer-volume:hover .audioplayer-volume-adjust {
    top: auto;
    bottom: 100%;
}

.audioplayer-volume-adjust > div {
    width: 8px;
    height: 80%;
    background-color: #EFF4F5;
    cursor: pointer;
    position: relative;
    z-index: 1;
    margin: 30% auto 0;
}

.audioplayer-volume-adjust div div {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #33E3B5;
}

.audioplayer-novolume .audioplayer-volume {
    display: none;
}

/* CSS3 decorations */
.audioplayer-volume-adjust {
    border-bottom: 0
}

.audioplayer-bar,
.audioplayer-volume-adjust > div {
}

.audioplayer-volume-adjust div div,
.audioplayer-bar-played {
}

.audioplayer-playpause,
.audioplayer-volume a {
}

.audioplayer,
.audioplayer-volume-adjust {
    background: #7786AB;
}

.audioplayer-bar-played {
    background: #33E3B5
}

.audioplayer-volume-adjust div div {
    background: #33E3B5
}

.audioplayer-bar,
.audioplayer-bar div,
.audioplayer-volume-adjust div {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.audioplayer-volume-adjust {
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.audioplayer *,
.audioplayer *:before,
.audioplayer *:after {
    -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
    transition: color .25s ease, background-color .25s ease, opacity .5s ease;
}

/* responsiveness */
.voice-audio {
    display: none
}

.wrapper {
    width: 400px;
    margin: 0 auto;
    margin-top: 200px;
    font-size: 13px;
    font-family: '微软雅黑'
}

/*a[role=button], input[role=button], input[type=button], div[role=button], span[role=button] { font-size: 12px; display: inline-block; padding: 5px 15px; border: 1px solid #ddd; border-radius: 3px; margin-right: 10px; color: #555; background: #fff; line-height: normal; cursor: pointer; font-size: 12px; font-weight: normal; white-space: nowrap }
span[role=button] { cursor: default; border-bottom-width: 1px }
a[role=button]:hover, input[role=button]:hover, input[type=button]:hover { text-decoration: none; background-color: #fff }
a[role=button]:active, input[role=button]:active, input[type=button]:active { background-color: #fff; box-shadow: 0 2px 4px #ddd inset }
*/
.template-editor {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff
}

.template-editor .close-button {
    position: absolute;
    bottom: 10px;
    right: 20px;
    background: #F43530;
    color: #fff;
    height: 35px;
    line-height: 35px;
    border-radius: 2px;
    text-align: center;
    display: block;
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
    padding: 0 15px
}

/* Tourbus leg definitions element */
.tourbus-legs {
    display: none;
}

/* Container for tourbus leg */
.tourbus-leg {
    position: absolute;
    visibility: hidden;
    top: 0;
    /*border: 1px solid #E5E5E5;*/
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    background: white;
}

/* Interior of leg, clearfixed */
.tourbus-leg-inner {
    padding: 15px 20px;
    position: relative;
    zoom: 1;
}

.tourbus-leg-inner:before,
.tourbus-leg-inner:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.tourbus-leg-inner:after {
    clear: both;
}

/*
  remove top padding/margin on headings
  because the interior of the leg has padding
*/
.tourbus-leg h1,
.tourbus-leg h2,
.tourbus-leg h3,
.tourbus-leg h4,
.tourbus-leg h5,
.tourbus-leg h6 {
    margin-top: 0;
    padding-top: 0;
}

/* Tourbus leg arrow */
.tourbus-arrow:before {
    content: " ";
    height: 15px;
    width: 15px;
    position: absolute;
    background: #fff;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* set the :after to be the _interior_ size of the arrow */
/* set the :before to be the _interior + desired border width_ */
.tourbus-arrow:after {
    /*  border-width: 14px;*/
}

.tourbus-arrow:before {
    /*border-width: 16px;*/
}

/* Arrow background and border colors */
/*
  change margin-top/left values here to
  match the border width for :after above

  border colors here are for the _interior_ of the arrow
*/
/*.tourbus-arrow-right:after {
  border-right-color: #ffffff;
  margin-top: -14px;
  top: 50%;
}
.tourbus-arrow-left:after {
  border-left-color: #ffffff;
  margin-top: -14px;
  top: 50%;
}
.tourbus-arrow-bottom:after {
  border-bottom-color: #ffffff;
  margin-left: -14px;
  left: 50%;
}
.tourbus-arrow-top:after {
  border-top-color: #ffffff;
  margin-left: -14px;
  left: 50%;
}*/
/*
  change margin-top/left values here to
  match the border width for :before above

  border colors here are for the _border_ of the arrow
*/
.tourbus-arrow-right:before {
    /*border-right-color: #e5e5e5;*/
    margin-top: -16px;
    top: 50%;
    left: -6px;
}

.tourbus-arrow-left:before {
    /*border-left-color: #e5e5e5;*/
    margin-top: -16px;
    top: 50%;
    right: -6px;
}

.tourbus-arrow-bottom:before {
    /*border-bottom-color: #e5e5e5;*/
    margin-left: -16px;
    left: 50%;
    top: -6px;
}

.tourbus-arrow-top:before {
    /*border-top-color: #e5e5e5;*/
    margin-left: -16px;
    left: 50%;
    bottom: -6px;
}

/* you shouldn't need to change these */
.tourbus-arrow-right:after,
.tourbus-arrow-right:before {
    right: 100%;
}

.tourbus-arrow-left:after,
.tourbus-arrow-left:before {
    left: 100%;
}

.tourbus-arrow-bottom:after,
.tourbus-arrow-bottom:before {
    bottom: 100%;
}

.tourbus-arrow-top:after,
.tourbus-arrow-top:before {
    /*top: 100%;*/
}

/*新加样式*/

#tourbus-mask {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, .2)
}

.tourbus-next {
    float: right;
    font-size: 12px;
    color: #417AFC;
    margin-top: 10px;
}

/*.hasDatepicker{position: absolute;padding:40px 12px 12px;border-radius: 3px;border:1px solid #ccd0d9;background: #F9FAFA;box-shadow:0px 0px 5px rgba(0,0,0,0.2);}*/
.ui-datepicker {
    padding: 12px;
    padding-top: 50px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ccd0d9;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    display: none;
}

.ui-datepicker-header {
    position: absolute;
    left: 0;
    top: 12px;
    width: 100%;
    height: 20px;
    line-height: 20px;
}

.ui-datepicker-title {
    font-size: 14px;
    text-align: center;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    height: 18px;
    width: 18px;
    text-indent: -9999px;
    border-radius: 2px;
    background: #fff;
    border: 1px solid #E2EAEC;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    border-color: #21d376
}

.ui-datepicker-prev {
    left: 12px;
}

.ui-datepicker-prev:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 6px;
    top: 6px;
    border-top: 3px solid transparent;
    border-right: 4px solid #333;
    border-bottom: 3px solid transparent;
}

.ui-datepicker-next {
    right: 12px;
}

.ui-datepicker-next:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 7px;
    top: 6px;
    border-top: 3px solid transparent;
    border-left: 4px solid #333;
    border-bottom: 3px solid transparent;
}

.ui-datepicker-calendar {
    text-align: center;
}

.ui-datepicker-calendar th {
    font-weight: normal;
    padding-bottom: 5px;
    height: 22px;
    width: 22px;
    font-size: 13px;
    color: #aaa;
    text-align: center;
}

.ui-datepicker-calendar td {
    padding: 3px;
}

.ui-datepicker-calendar td a {
    display: block;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    height: 22px;
    width: 22px;
    text-align: center;
    line-height: 22px;
    border-radius: 100%;
    border: 1px solid #fff;
}

.ui-datepicker-calendar td a:hover {
    background: rgba(33, 211, 118, .3);
    border-color: rgba(33, 211, 118, .3)
}

.ui-datepicker-today a {
    color: #21d376 !important;
    border-color: #21d376 !important
}

/**/
.ui-timepicker-div {
    padding: 12px;
    background: #fff;
    border: 1px solid #E2EAEC;
    border-radius: 3px;
    font-size: 14px;
    margin-bottom: 10px;
}

.ui_tpicker_time_label {
    float: left;
    margin-right: 5px;
    margin-bottom: 10px;
}

.ui_tpicker_time,
.ui_tpicker_hour_label,
.ui_tpicker_minute_label {
    margin-bottom: 8px;
}

.ui-timepicker-div .ui-slider {
    height: 3px;
    border: 1px solid #B0B0B0;
    background: #E0E0E0;
    box-shadow: none;
    margin-bottom: 15px;
    min-width: 200px;
    border-radius: 20px
}

.ui-slider .ui-slider-handle {
    height: 15px;
    width: 15px;
    border-radius: 100%;
    background: #fff;
    border: 1px solid #B8B8B8;
    top: -7px;
    position: absolute;
    outline: none;
}

.ui-timepicker-div dd {
    position: relative;
}

.ui-timepicker-div dt {
    clear: both;
}

.ui-datepicker-buttonpane button {
    font-size: 12px;
    border-radius: 3px;
    background: #fff;
    font-weight: normal;
    border: 1px solid #21d376;
    color: #21d376
}

.ui-datepicker-buttonpane button:hover {
    background: #21d376;
    color: #fff
}

button.ui-datepicker-close {
    color: #A5A5A5;
    border-color: #A5A5A5;
    float: right;
}

button.ui-datepicker-close:hover {
    background: #A5A5A5;
    color: #fff;
}

.ui-state-active {
    background: #21d376 !important;
    color: #fff !important;
    border: 1px solid #21d376 !important;
}

/*修复*/
.ui-slider .ui-slider-handle {
    margin-left: -7.5px;
}

/* 20161024 add by js: 访客列表未读消息的flag样式（无数字样式） */
.im-left-unreadmsg-flag {
    position: absolute;
    height: 8px;
    width: 8px;
    border-radius: 100%;
    background: #F43530;
    font-size: 12px;
    color: #fff;
    text-align: center;
    right: -0.1em;
    top: 0px;
    border: 1px solid #fff;
}

/* 20161026 add by js: 访客列表未读消息的flag样式（有数字样式） */
/* 20161026 modified by js: 由原值“height: 12px;min-width: 12px;height: 12px;line-height: 12px;”改为现值 */
/*.im-left-unreadmsg-flagnum {position: absolute;height: 18px;min-width: 18px;height: 16px;line-height: 13px;border-radius: 100%;background: #ff595f;font-size: 12px;color: #fff;text-align: center;right: -5px;top: -3px;border: 1px solid #fff;font-family: Arial;padding: 1px 1px 1px 1px; }*/
/* 20190116 参考webui启用了未读数的新样式 */
.im-left-unreadmsg-flagnum {
    display: inline-block;
    padding: .15em .4em;
    min-width: 8px;
    border-radius: 18px;
    background-color: #F43530;
    color: #FFFFFF;
    line-height: 14px;
    height: 14px;
    text-align: center;
    font-size: 12px;
    vertical-align: middle;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    position: absolute;
    font-family: Arial;
    top: -.4em;
    right: -.4em;
}

/* 20181029 add by js: 灰色的分隔斜线样式 */
.pipe {
    color: #CCC;
    margin: 0 5px;
}


/* 20170107 为了屏蔽TalkM中的h4同名属性干扰而加 */
#kchat-im-panel .h4,
.h5,
.h6,
h4,
h5,
h6 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-size: 100% !important;
}

#kchat-im-panel .h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

#kchat-im-panel .h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal !important;
}

#kchat-im-panel dl {
    margin-bottom: 0px !important;
}

#kchat-im-panel .btn {
    border: 1px solid #ced6d8 !important;
}

#kchat-im-panel .btn-group-sm > .btn,
.btn-sm {
    line-height: 26px !important;
    font-size: 12px !important;
    /*border-radius: 0px !important;*/
    display: inline !important;
}

/*#kchat-im-panel .kf5-chat-tag .add-tag a {*/
/*	padding: 5px 10px !important;*/
/*}*/

.kf5-chat-tag .add-tag a {
    padding: 5px 10px !important;
}

.msg-normal {
    position: absolute;
    height: 12px;
    width: 12px;
    border-radius: 100%;
    background: #F43530;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    text-align: center;
    right: 0;
    top: 12px;
}

.rating-msg {
    text-align: center;
    padding: 10px;
    margin-bottom: 25px;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
}


/*-------------------------- 以下样式引用自webui START -----------------------*/
.weui-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
}

.weui-mask_transparent {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

/* 20200307 modified by js: 为了支持较多的内容显示由原“width: 8.6em;”改为“min-width: 8.6em;max-width: 15em;width: auto;” */
.weui-toast {
    position: fixed;
    z-index: 5000;

    /*width: 8.6em;*/
    min-width: 8.6em;
    max-width: 15em;
    width: auto;

    min-height: 8.6em;
    top: calc(50% - 60px);
    /*改前：180px;现：垂直50%-toast通常高度的一半从而得出垂直居中位置*/
    left: 50%;
    margin-left: -3.8em;
    background: rgba(17, 17, 17, 0.7);
    text-align: center;
    border-radius: 5px;
    color: #FFFFFF;
}

.weui-icon_toast {
    margin: 22px 0 0;
    display: block;
}

@-webkit-keyframes weuiLoading {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

@keyframes weuiLoading {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

.weui-loading {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    -webkit-animation: weuiLoading 1s steps(12, end) infinite;
    animation: weuiLoading 1s steps(12, end) infinite;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
    background-size: 100%;
}

.weui-icon_toast.weui-loading {
    margin: 30px 0 0;
    width: 38px;
    height: 38px;
    vertical-align: baseline;
}

/* 20200307 modified by js: 为了支持较多的内容显示由原“margin: 5px 0 15px 0;”改为现值*/
.weui-toast__content {
    margin: 5px 15px 15px 15px;
    font-size: 16px;
}


@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: "weui";
    src: url(../fonts/weui.ttf) format('truetype');
}

[class^="weui-icon-"],
[class*=" weui-icon-"] {
    display: inline-block;
    vertical-align: middle;
    font: normal normal normal 14px/1 "weui";
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

[class^="weui-icon-"]:before,
[class*=" weui-icon-"]:before {
    display: inline-block;
    margin-left: .2em;
    margin-right: .2em;
}

[class^="weui-icon_"]:before,
[class*=" weui-icon_"]:before {
    margin: 0;
}

.weui-icon-circle:before {
    content: "\EA01"
}

/*.weui-icon-download:before { content: "\EA02" }*/
.weui-icon-info:before {
    content: "\EA03"
}

/*.weui-icon-safe-success:before { content: "\EA04" }
.weui-icon-safe-warn:before { content: "\EA05" }*/
.weui-icon-success:before {
    content: "\EA06"
}

/*.weui-icon-success-circle:before { content: "\EA07" }*/
.weui-icon-success-no-circle:before {
    content: "\EA08"
}

.weui-icon-waiting:before {
    content: "\EA09"
}

.weui-icon-waiting-circle:before {
    content: "\EA0A"
}

.weui-icon-error:before {
    content: "\EA0B"
}

.weui-icon-warn:before {
    content: "\EA0B"
}

/*.weui-icon-info-circle:before { content: "\EA0C" }
.weui-icon-cancel:before { content: "\EA0D" }
.weui-icon-search:before { content: "\EA0E" }
.weui-icon-clear:before { content: "\EA0F" }
.weui-icon-back:before { content: "\EA10" }
.weui-icon-delete:before { content: "\EA11" }*/

.weui-icon-circle {
    font-size: 23px;
    color: #C9C9C9;
}

.weui-icon-success-no-circle {
    font-size: 23px;
    color: #09BB07;
}

.weui-icon_toast.weui-icon-success-no-circle:before {
    color: #FFFFFF;
    font-size: 55px;
}

.weui-icon_toast.weui-icon-info:before {
    color: #10AEFF;
    font-size: 55px;
}

.weui-icon_toast.weui-icon-warn:before {
    color: #FFBE00;
    font-size: 55px;
}

.weui-icon_toast.weui-icon-error:before {
    color: #F76260;
    font-size: 55px;
}

.weui-msg {
    padding-top: 25px;
    text-align: center;
}

.weui-msg__icon-area {
    margin-bottom: 15px;
    /*20px;*/
}

.weui-icon-success {
    font-size: 23px;
    color: #21d376;
}

.weui-icon-waiting {
    font-size: 23px;
    color: #10AEFF;
}

.weui-icon-error {
    font-size: 23px;
    color: #F43530;
}

.weui-icon-warn {
    font-size: 23px;
    color: #ffa900;
}

.weui-icon-info {
    font-size: 23px;
    color: #10AEFF;
}

.weui-icon_msg {
    font-size: 60px;
}

.weui-msg__text-area {
    margin-bottom: 25px;
    padding: 0 20px;
}

.weui-msg__title {
    margin-bottom: 5px;
    font-weight: 400;
    font-size: 20px;
}

.weui-msg__desc {
    font-size: 13px;
    color: #808080;
}

.weui-msg__text-area a {
    color: #586C94;
}

/*-------------------------- 以下样式引用自webui END -----------------------*/


/* --------xu自己写的-------- */
#xu-load {
    text-align: center;
    position: relative;
    width: 100%;
    height: 100%;

}

#xu-load > img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    top: 0;
}

.xu_chattit {
    width: 100%;
    height: 70px;
    line-height: 70px;
    background-color: #fff;

}

.xu-chat-tit-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    margin-top: 14px;
    float: left;
    margin-left: 30px;
}

.xu-chat-tit-name {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    float: left;
    color: #333333;
    line-height: 70px;
    margin-left: 10px;
    margin-right: 207px;
}

.xu-chat-tit-icon {
    float: right;
    display: none;
    line-height: 70px;
}

.xu-chat-tit-icon > img {
    /*width: 200px;*/
    /*width: 15px;*/
    cursor: pointer;
    margin-right: 25px;
}

.xu_limg {
    width: 22px;
    height: 21px;
    margin-top: 10px;
}

.xu_txt {
    color: white;
    font-size: 12px;
    margin-top: 4px;
}

#xu_set {

    display: none;
}

.xu_set {
    width: 100%;
    text-align: center;
}

.xu_set > div:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.xu_set > div {
    height: 48px;
    cursor: pointer;
    transition: .5s;
    line-height: 48px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #e8e8e8;
}

.xu_more {
    width: 32px;
    height: 32px;
    border: 1px solid #DEE0E3;
    border-radius: 50%;
    display: block;
    color: #8B8F96;
    cursor: pointer;
    font-size: 20px;
}

.xu_more:hover {
    color: #297AFF;
}

/*  */
.xu_seatit {
    height: 32px;
    width: 96%;
    margin: auto;

}

.xu_sea {
    float: left;
    border: 1px solid #DEE0E3;
    border-radius: 16px;
    width: 80%;
    height: 32px;
    line-height: 32px;
    display: flex;
    /*display: none;*/
    justify-content: space-around;
}

.xu_sea > img {
    width: 22px;
    height: 22px;
    margin-top: 5px;
}

.xu_sea input {
    border: none;
    outline: none;
    resize: none;
    height: 25px;
    line-height: 25px;
    width: 85%;
    margin-top: 5px;
}


#kchat-im-panel-userlist-alarms {
    margin-top: 10px;
}
.xu_sea:hover , .xu_sea:active{
    border: 1px solid #dcf1fe;
}

/*  */
#resize {
    width: 5px;
    height: 100%;
    height: 100%;
    cursor: w-resize;
    float: left;
}

.xu-group-chat-tit-icon-add {
    display: none;
}


/*  */
.kchat-pop:after {
    background: #242c40;
}

/*------------------*/

.xu-kchat-hover {
    width: 120px;
    text-align: center;
}

.xu-kchat-hover li {
    height: 25px;
    line-height: 25px;
    padding: 0;
}

.xu-kchat-hover li:hover {
    background-color: rgba(71, 87, 107, 0.8);
}

.xu_setli {
    width: 150px;
    text-align: center;
    line-height: 40px;

}

.xu_setli:hover {
    background-color: rgba(234, 234, 234, 0.86);
}

#xu_setli li:hover {
    background-color: rgba(234, 234, 234, 0.86);
}


/*群类型*/

.xu_group,
.xu_friends {
    width: 290px;
    height: 100%;
    /*margin-top: -85px;*/
    display: none;
    border-right: 1px solid #e2eaec;

}

.xu_group_list {
    width: 100%;
    height: 64px;
}

.xu_group_list_img {
    width: 40px;
    height: 40px;
    margin-top: 12px;
    margin-left: 14px;
    margin-right: 10px;
    float: left;
}

.xu_group_list_div {
    width: 180px;
    float: left;
    overflow: hidden;
    margin-top: 12px;
}

.xu_group_list_name {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin-bottom: 4px;

}

.xu_group_list_con_img {
    width: 12px;
    float: left;
    margin-right: 4px;
    height: 12px;
}

.xu_group_list_con_num {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    float: left;

    color: #999999;
}

.xu_group_list:hover {
    background: #eff4f5;
    cursor: pointer;
}

.xu_group_list:active {
    background: #dcf1fe;
    cursor: pointer;
}

/*联系人类型*/
.xu_friends {
    height: 100%;
    display: none;
}

.xu_friends_list_name {
    margin-top: 10px;
}


/*增加联系人和群组样式*/
.xu_add_width {
    -webkit-flex: 1;
    /* Chrome */
    -ms-flex: 1;
    /* IE 10 */
    flex: 1;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;
    /* OLD - Firefox 19- */
}

.xu_add_color {
    background: #dcf1fe;
}

/*---*/
#rightmenu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
}

#rightmenu_a {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    /*background-color: rgba(0,0,0,0.1);*/
}

#rightmenu_b {
    position: absolute;
    top: 0;
    background-color: #ffffff;
    left: 0;
    overflow: hidden;
    box-shadow: 0 0 10px #CCCCCC;
    z-index: 100;
    border-radius: 5px;
}

#rightmenu_b > div, #rightmenu_b > button {
    width: 100px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    transition: .5s;
    cursor: pointer;
    border: none;
    color: #000;
    background-color: #ffffff;
    border-bottom: 1px solid #eaecee;

}

#rightmenu_b > div:hover, #rightmenu_b > button:hover {
    background-color: #e7e5e5;
}

#rightmenu_b > button:disabled {
    background: #f7f7f7fa;
    color: #17050547;
}

/*-------------*/
#chatList {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    margin-top: 25px;
    display: none;
    overflow: hidden;
}

#chatList_a {
    position: absolute;
    top: 0;
    border-radius: 3px;
    left: 0;
    width: 100%;
    height: 110%;
    overflow: hidden;
    z-index: 100;
    margin-top: -25px;

}

#chatList_b {
    width: 420px;
    position: absolute;
    top: 0;
    right: -420px;
    box-shadow: 0 0 10px #CCCCCC;
    z-index: 101;
    height: 100%;
    transition: .5s;
    background-color: #ffffff;
}

#chatList_b_a {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 70px;
    border-bottom: 1px solid #F0F0F0;
}

#chatList_b_a > div {
    width: 25%;
    text-align: center;
    line-height: 70px;
    font-size: 16px;
    font-family: "黑体";
    font-weight: 400;
    transition: .5s;
    cursor: pointer;
}

.chatList_search {
    width: 388px;
    height: 32px;
    border-radius: 30px;
    line-height: 32px;
    display: block;
    margin: auto;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 0 10px;

}

.chatList_img {
    width: 180px;
    margin: auto;
    margin-top: 78px;
    /*display: block;*/
    display: none;
}

#chatList_b_a > div:hover {
    color: #3873FE;
}

.chatList_b_a_color {
    color: #3873FE;
}


/*全部*/
#chatmsg {
    width: 400px;
    height: 500px;
    margin: auto;
    overflow: auto;
    margin-top: 10px;
    display: none;
}

.chatmsgCon {
    width: 100%;
    /*height: 80px;*/
    padding-bottom: 10px;
    border-bottom: 1px solid #F0F0F0;

}

.chatmsgImg {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    float: left;
    margin-right: 10px;
    margin-top: 20px;
    margin-left: 14px;
}

.chatmsgList {
    float: left;
}

.chatmsgCon:hover {
    background-color: rgba(249, 249, 249, 1);
}

.chatmsgListName {
    margin-top: 22px;
    color: #999999;
    font-size: 12px;
    font-weight: 400;
}

.chatmsgListName > span {
    margin-right: 8px;
}

.chatmsgListMsg {
    font-size: 14px;
    width: 300px;
    font-weight: 400;
    color: #222222;
    margin-top: 2px;
}

/*图片*/
#chatImg {
    width: 400px;
    height: 500px;
    margin: auto;
    overflow: auto;
    margin-top: 10px;
    display: none;
}

.chatImglist {
    width: 100%;

}

.chatImglistAll {
    justify-content: space-between;
    display: flex;
    flex-flow: wrap;
    display: -webkit-flex;
}

.chatImglistAll > img {
    width: 90px;
    height: 90px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.chatImglistDate {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #222222;

}

/*-文件-----*/
#chatFile {
    width: 400px;
    height: 500px;
    margin: auto;
    overflow: auto;
    margin-top: 10px;
    display: none;
}

.chatFileImg {
    width: 34px;
    height: 42px;
    float: left;
    margin-right: 10px;
    margin-top: 20px;
    margin-left: 14px;
}

.chatFileListName {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #222222;
    margin-top: 20px;
    margin-bottom: 5px;
}

.chaFileListMsg {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
}


/*视频*/
#chatVideo {
    width: 400px;
    height: 500px;
    margin: auto;
    overflow: auto;
    display: none;

}

#chatVideo > video {
    width: 180px;
    height: 130px;
    margin-bottom: 10px;
    margin-top: 20px;

    margin-left: 10px;
}

/*pin*/


#pin {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    margin-top: 25px;
    display: none;
    overflow: hidden;

}

#pinBg {
    position: absolute;
    top: 0;
    border-radius: 3px;
    left: 0;
    width: 100%;
    height: 110%;
    overflow: hidden;
    z-index: 100;
    margin-top: -25px;

}

#pinMsg {
    width: 420px;
    position: absolute;
    top: 0;
    right: -420px;
    box-shadow: 0 0 10px #CCCCCC;
    z-index: 101;
    height: 100%;
    background-color: #ffffff;
    transition: .5s;
}

.pinMsgtit,
.setMsgtit {
    width: 100%;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #F0F0F0;
}

.pinMsgtitLine,
.setMsgtitLine {
    width: 4px;
    height: 16px;
    margin-left: 16px;
    margin-top: 25px;
    margin-right: 8px;
    background-color: #3873FE;
    float: left;
}

.pinMsgpin,
.setMsgpin {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #222222;
}

.pinMsgcha,
.setMsgcha {
    float: right;
    font-size: 23px;
    margin-right: 20px;
    cursor: pointer;
}

#pinNone {
    width: 100%;
    text-align: center;
    display: none;
}

#pinNone > img {
    margin-top: 73px;
}


/*----------*/

#set {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0;
    left: 0;
    z-index: 100;
    margin-top: 25px;
    display: none;
    overflow: hidden;
}

#setBg {
    position: absolute;
    top: 0;
    border-radius: 3px;
    left: 0;
    width: 100%;
    height: 110%;
    overflow: hidden;
    z-index: 100;
    margin-top: -25px;
}

#setMsg {
    width: 420px;
    position: absolute;
    top: 0;
    right: -420px;
    box-shadow: 0 0 10px #CCCCCC;
    z-index: 101;
    height: 100%;
    background-color: #ffffff;
    transition: .5s;
}

#setInput {
    width: 200px;
    display: inline-block;
    float: right;
    margin-top: 11px;
}

#setInput input {
    text-align: right;
    border: none;
}

.setname {
    width: 380px;
    margin: auto;
    height: 100px;
    border-bottom: 1px solid #F0F0F0
}

.setname > img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    float: left;
    margin-right: 12px;
    margin-top: 20px;
}

.setname > div {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #222222;
    float: left;
    line-height: 100px;
}

.setcreate {
    width: 380px;
    margin: auto;
    border-bottom: 1px solid #F0F0F0;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    text-align: center;
    cursor: pointer;
}

.setcreate > img {
    margin-right: 5px;
}

.setcss {
    width: 380px;
    margin: auto;
    height: 60px;
    line-height: 60px;
}

.setcss > span:nth(1) {
    float: left;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}

.setcssl {
    float: left;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}

.setcssr {
    float: right;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}

.setbut {
    width: 180px;
    height: 38px;
    resize: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 0.63);
    margin-top: 36px;
    display: block;
    margin: auto;
    border-radius: 20px;
    cursor: pointer;
    transition: .5s;
}

.setbut:hover {
    background-color: #3873FE;
    color: #ffffff;
}

.pointer {
    cursor: pointer;
}

/**/
#myMsg {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: none;
    overflow: hidden;
}

#myMsgBg {
    position: absolute;
    top: 0;
    border-radius: 3px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 100;
}

#myMsgCon {
    width: 310px;
    /*height: 350px;*/
    position: absolute;
    border-radius: 5px;
    top: 30px;
    left: 65px;
    box-shadow: 0 0 20px #cccccc;
    z-index: 101;
    background-color: #ffffff;
    transition: .5s;
}

.myMsgtit {
    width: 270px;
    border-bottom: 1px solid #F0F0F0;
    margin: auto;
    padding-bottom: 20px;
    cursor: pointer;
}

.myMsgtit > img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-top: 20px;
    float: left;
    margin-right: 23px;
}

.myMsgtitNamea {
    float: left;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 50px;
}

.myMsgtitNamean {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #222222;
    margin-top: 25px;
    margin-bottom: 10px;
}

.myMsgtitNameap {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
}

.myMsgtitNamei {
    float: left;
    margin-top: 25px;
    cursor: pointer;
}

.myMsgList {
    height: 55px;
    line-height: 55px;
    width: 100%;
    margin: auto;
}

.myMsgListl {
    float: left;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #222222;
    margin-left: 20px;
    cursor: pointer;

}

.myMsgListr {
    float: right;
    margin-right: 20px;
    cursor: pointer;

}

.myMsgList:hover,
.myMsgListout:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.myMsgListout {
    width: 100%;
    text-indent: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    line-height: 55px;
    cursor: pointer;
}

/**/

#add {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: none;
    overflow: hidden;
}

#addBg {
    position: absolute;
    top: 0;
    border-radius: 3px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 100;
}

#addCon {
    width: 142px;
    height: auto;
    position: absolute;
    border-radius: 5px;
    top: 80px;
    left: 200px;
    box-shadow: 0 0 20px #cccccc;
    z-index: 101;
    background-color: #ffffff;
    transition: .5s;
}

#addCon > div {
    height: 50px;
    width: 100%;
    cursor: pointer;
    line-height: 50px;

}

.addConi {
    margin-left: 22px;
    margin-right: 13px;
}

#addCon > div:hover {
    background-color: rgba(0, 0, 0, 0.05);
}


/* 外部联系人 */
#xu_wai_pepple {
    width: 100%;
    display: none;
    transition: .5s;
    /* background-color: #CCCCCC; */

}

.xu_wai_tit,
.xu_new_tit {
    line-height: 62px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    height: 62px;
    border-bottom: 1px solid #F0F0F0;
    text-indent: 16px;
}

.xu_wai_tit > div,
.xu_new_tit > div {
    float: right;
    cursor: pointer;
    width: 138px;
    margin-right: 17px;
    margin-top: 11px;
    border: 1px solid #dddddd;
    line-height: 32px;
    height: 32px;
    font-size: 12px;
    text-indent: 0px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    border-radius: 20px;
    transition: .5s;
    color: #3873FE;
}

.xu_wai_tit > div > img,
.xu_new_tit > div > img {
    float: left;
    margin: 8px 10px 10px 15px;
}

.xu_wai_tit > div:hover,
.xu_new_tit > div:hover {
    box-shadow: 0 0 6px #e5e5e5;
}

.xu_wai_list_a {
    height: 80px;
    width: 100%;
    cursor: pointer;
    transition: .5s;
}

.xu_wai_list_a > img {
    width: 40px;
    height: 40px;
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 4px;
    float: left;
    margin-top: 20px;
}

.xu_wai_list_a_a {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    padding-top: 20px;
    margin-bottom: 5px;
}

.xu_wai_list_a_b {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;

}

.xu_wai_list_a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}


#xu_new_pepple {
    display: none;
}

.xu_new_list_a_a {
    float: left;
}

.xu_new_list_a_b {
    float: right;
    margin-top: 25px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    margin-right: 55px;
}

/**/
#xu_create_group {
    display: none;
}

.xu_createList {
    height: 80px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 80px;
    color: #333333;
    cursor: default;
    transition: .5s;
}

.xu_createList > img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    float: left;
    margin-right: 10px;
    margin-top: 20px;
    margin-left: 20px;
}

.xu_createList > div {
    float: left;

}

.xu_createList:hover {
    background-color: rgba(0, 0, 0, 0.02);
}


/* 创建群组 */
#cgroup {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: none;
    overflow: hidden;
}

#cgroupBg {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

#cgroupCon {
    width: 660px;
    height: 580px;
    border-radius: 8px;
    background-color: #FFFFFF;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    box-shadow: 0 0 10px #a2a2a2;
    top: 0;
}

.cgroupCon_a {
    width: 100%;
    height: 45px;
    text-indent: 15px;
    line-height: 45px;
    border-bottom: 1px solid #F0F0F0;;
}

.cgroupCon_a > div:nth-child(1) {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #222222;
    float: left;
}

.cgroupCon_a > div:nth-child(2) {
    float: right;
    font-size: 20px;
    color: #8c8c8c;
    cursor: pointer;
    margin-right: 20px;
}

.cgroupCon_b {
    margin-top: 35px;
    width: 50%;
    float: left;
}

.cgroupCon_c {
    width: 50%;
    float: left;
}

.cgroupCon_b_a {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #606266;
    margin-bottom: 6px;
    margin-left: 15px;
}

.cgroupCon_b > input {
    width: 273px;
    height: 32px;
    margin-left: 15px;
    text-indent: 16px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    cursor: pointer;
    resize: none;
    outline: none;
    border-radius: 6px;
}

.cgroupCon_c {
    margin-left: 15px;
    margin-top: 20px;
}

.cgroupCon_c_a {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #606266;
}

.cgroupCon_c > input {
    margin-top: 10px;
}

.cgroupCon_d {
    width: 625px;
    margin: auto;
    height: 265px;
    /* border: 1px solid #CCCCCC; */
    margin-top: 20px;
}

.cgroupCon_d > div {
    width: 49%;
    float: left;
    height: 100%;

}

.cgroupCon_d > div:nth-child(1) {
    border-right: 1px solid #e2e2e2;
}

.cgroupCon_d_a {
    width: 270px;
    height: 30px;
    border-radius: 20px;
    display: block;
    margin: auto;
    text-indent: 10px;
}

.cgroupCon_d_b {
    height: 200px;
    overflow: auto;
}

.cgroupCon_d_b > label > div,
.cgroupConl_d_b > div {
    height: 48px;
    line-height: 48px;
    transition: .5s;
    cursor: pointer;
}

.cgroupCon_d_b > label > div:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.cgroupCon_d_b input {
    float: right;
    margin-top: 15px;
    margin-right: 15px;
}

.cgroupCon_d_b img,
.cgroupConl_d_b > div > img:nth-child(1) {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    margin-right: 8px;
    margin-left: 21px;
}

.cgroupCon_d_bi {
    float: right;
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin-top: 15px;
}


.cgroupConl {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin-top: 22px;
    margin-left: 29px;
}

/**/
.xu_list_right, .xu_list_left {
    transition: .5s;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    float: right;
    font-size: 12px;
    justify-content: space-between;
    display: flex;
    margin-top: 4px;
    margin-right: 5px;
    border-radius: 3px;
    display: none;

}

.xu_list_left {
    float: left;
    margin-left: 5px;
    transition: .5s;
}

.xu_list_left > div, .xu_list_right > div {
    height: 22px;
    color: #CCCCCC;
    line-height: 22px;
    padding: 0px 5px;
    text-align: center;
    display: inline-block;
    transition: .5s;
    border-right: 1px solid #e7e6e6;
}


.xu_list_span_div > div {
    height: 22px;
    color: #CCCCCC;
    line-height: 22px;
    padding: 0px 5px;
    text-align: center;
    display: inline-block;
    transition: .5s;
    border-right: 1px solid #e7e6e6;
    cursor: pointer;
}

/*把自己的隐藏*/


/*.xu_list_right > div:hover, .xu_list_left > div:hover {*/
/*    background-color: rgba(52, 76, 238, 0.12);*/
/*    color: #1c9cf3;*/
/*}*/


.xu_list_span_div > div:hover {
    background-color: rgba(52, 76, 238, 0.12);
    color: #1c9cf3
}

/*.chat-item:hover .xu_list_right{*/
/*	display:block;*/
/*	transition: .5s;*/
/*}*/
 .chat-item:hover .xu_list_left  , .chat-item:hover .xu_list_right {
	transition: .5s;
	display:block;
}

.xu_list_left_color {
    position: relative;
    z-index: -10;
}


#im-verification-reminders-list-wrapper {
    width: 100%;
}

#im-verification-reminders-list-wrapper .info {
    width: 300px;
}

.xu_list_span_div_bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    z-index: 50;
    display: none;
    /*background-color: rgba(0, 0, 0, 0.1);*/
}

.xu_list_span_div {
    display: none;
    position: relative;
    z-index: 100;
}

/* 收藏  */
#box {
    /*display: none;*/
}

#xu_sc {
    display: none;
    margin-top: -75px;
    width: 100%;
    position: relative;

}

.xu_sc_tit {
    height: 60px;
    width: 100%;
    line-height: 60px;
    text-indent: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}

.xu_sc_tab {
    width: 100%;
}

.xu_sc_tab th {
    background-color: rgba(0, 0, 0, 0.08);
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #8F959E;
    line-height: 45px;
    height: 45px;
    text-align: center;
    width: 25%;
    overflow: hidden;

}

.xu_sc_tab td {
    width: 25%;
    text-align: center;
    overflow: hidden;

    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #8F959E;
    max-height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.46);
}

.xu_sc_tab td > div {
    width: 90%;
    margin: auto;
    word-break: break-all;
}

.xu_sc_tab td > div > img {
    width: 50px;
    cursor: pointer;
}
#uploadifive-im-panel-main-chat-textarea-filemsg-uploadify{
    /*display: none;*/
    opacity: 0;
}


.top-bar img{
    margin-top: -7px;
}