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

/*Webkit,Opera9.5+,Ie9+*/
::selection {
    background:#28a0ff;
    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% }
/* 20210337: 参考飞书由原“font-family: "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;”改为现值、并添加了属性“-webkit-font-smoothing” */
body { font-size: 14px; font-family: LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,Helvetica Neue,Tahoma,PingFang SC,Microsoft Yahei,Arial,Hiragino Sans GB,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; color: #374051; background-color: #eff2f6;/*-webkit-font-smoothing: antialiased;*/ /*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: #28a0ff }
.add-conditions:hover { color: #48b6d7 }
.add-conditions:before { content: "\e613"; font-family: rbchat; 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 #e2e4e8; 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: #eff2f6 }
.select-child-list li > a:after { content: "\e6bd"; font-family: rbchat; height: 20px; line-height: 20px; width: 20px; text-align: center; font-size: 12px; color: #fff; float: right; background: #fff; border: 1px solid #e2e4e8; 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; position: absolute; bottom: 0; left: 0; top: 0; right: 0 }
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: 4px; -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: #ff4d4f }
.green { color: #21d376 }
.orange { color: #ffa900 }
.blue { color: #21b1d3 }
.purple { color: #9e5ae3 }
.link { color: #28a0ff }
.link:hover { color: #48b6d7 }
/* add by jackjiang 20190318： 为了美化右侧详情面板下方的prohibit内的删除链接样式而加了以下2项 */
.link_red { color: #ff4d4f }
.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: rbchat; 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 }
/* 20210327：为了匹配新的显示字体而将原“font-family: "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;” 改为现值 */
input, select, button, textarea { outline: 0; font-family: LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,Helvetica Neue,Tahoma,PingFang SC,Microsoft Yahei,Arial,Hiragino Sans GB,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; 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: #ff4d4f !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: #28a0ff; 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: rbchat; position: relative; top: 1px }
input[type=checkbox]:hover { border-color: #a6aeb0 }
input[type=checkbox].mediacy { border-color: #28a0ff; background: #28a0ff }
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: #28a0ff; background: #28a0ff }
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: #28a0ff !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: #28a0ff }
.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: #28a0ff; 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: rbchat; 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: #ff4d4f }
.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: #ff4d4f }
.alert-bar.alert-danger:before { color: #ff4d4f }
.alert { border-radius: 3px; padding: 10px 15px 10px 35px; margin-bottom: 15px; position: relative; text-align: left }
.alert:before { content: "\e619"; font-family: rbchat; font-size: 20px; margin-right: 5px; float: left; margin-top: -1px; color: #ffa900; position: absolute; left: 10px; top: 10px }
.alert a { color: #28a0ff }
.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: #ff4d4f }
.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 #eff2f6; 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 #eff2f6 }
.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: #eff2f6; border: 1px solid #e2e4e8; 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: 6px;-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 }
/* 20210402: 由原“color: #9B9B9B;”改为了现值 */
.btn > span { color: #ff9a3b; 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: #ff4d4f; border-color: #ff4d4f; color: #fff }
.btn-red:hover, .btn.red:hover { border-color: #ff4d4f; background: #ff7379; color: #fff }
.btn-red.btn-hollow, .btn.red.btn-hollow {color: #ff4d4f /*color: #f54f55*/ }
.btn-red.btn-hollow:hover, .btn.red.btn-hollow:hover { background: #ff4d4f !important; color: #fff }
.btn-blue, .btn.blue { background: #28a0ff; border-color: #28a0ff; color: #fff }
.btn-blue:hover, .btn.blue:hover { border-color: #28a0ff; 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: #28a0ff !important; 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: #eff2f6; 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: rbchat }
.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: #eff2f6; text-align: center; line-height: 50px; right: 50px; top: 30px }
.lightbox-img-close i { line-height: 50px }
.lightbox-img-close:hover { background: #ff4d4f; 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: 0px 2px 30px 10px rgb(0 0 0 / 12%);-moz-box-shadow: 0px 2px 30px 10px rgb(0 0 0 / 12%);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: #f9f9fa; 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: #ff4d4f }
.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 dashed #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 #e2e4e8; 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 #e2e4e8; 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 #e2e4e8; 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: #28a0ff }
.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: rbchat; 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: rbchat; 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 #e2e4e8; 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: #ff4d4f }
.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 #eff2f6; padding: 8px }
.drop-btn-default .back a { font-size: 12px !important; color: #28a0ff }
.drop-btn-default .back a:hover { color: #48b6d7 }
.drop-btn-default .back a:before { content: "\e6be"; font-family: rbchat }
.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: #ff4d4f !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: rbchat; position: absolute; right: 0; top: 0; height: 26px; line-height: 26px; width: 26px; border-left: 1px solid #e2e4e8; 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 #e2e4e8; 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 #e2e4e8; -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: #eff2f6 }
.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: #eff2f6 }
.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 #e2e4e8; 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: #28a0ff }
.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: #e2e4e8 }
.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: #e2e4e8 }
.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: #28a0ff }
.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: #e2e4e8 }
.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 #e2e4e8; 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: #28a0ff; 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: #28a0ff; 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: #ff4d4f }
.time-line-list li.red:before { border-color: #ff4d4f }
.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: #eff2f6; border-left-color: #eff2f6 }
.nav-list .active a { background: #eff2f6; border-left-color: #21d376 }
.nav-list .active a .num { background: #ff4d4f }
.nav-list li { position: relative }
.nav-list .done:after { content: "\e6bd"; font-family: rbchat; 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: #28a0ff; 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 }
/* 20210324日：由原“height: 50px;background: #3d3d3d;box-shadow: 0 -1px 6px rgba(0, 0, 0, .05) inset;”改为现值 */
/* 20220111日：由原“min-width: 1100px;”改为现值 */
#header { position: fixed; z-index: 10; width: 100%; height: 58px; top: 0; left: 0;min-width: 328px;background: linear-gradient(134deg, #0e1a26, #2e3746);box-shadow: 0 2px 3px 0 rgb(4 5 13 / 23%); }
#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 }
/* 20210324日：由原“height: 50px; line-height: 50px;background-color: #464646”改为现值 */
#logo > a { display: block; vertical-align: middle; height: 58px; line-height: 58px; width: 55px; text-align: center; text-indent: -9999px; -webkit-transition: all ease .4s; -moz-transition: all ease .4s; -o-transition: all ease .4s; transition: all ease .4s;background-color: #2e3746;background: linear-gradient(134deg, #0e1a26, #2e3746); }
#logo > a:hover { background-color: #565656 }
/* 20210324日：由原“height: 50px;”改为现值 */
#logo a span {display: inline-block;width: 201px;height: 58px;
	/*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/index-logo2.png);
	background-size: 201px 58px;
	-moz-background-size: 201px 58px;
	-ms-background-size: 201px 58px;
	-o-background-size: 201px 58px;
	-webkit-background-size: 201px 58px;
	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: rbchat; float: left; margin-right: 2px; font-size: 15px }
.header-tag-list .user-tab a:before { content: "\e6b2"; font-family: rbchat; float: left; margin-right: 2px; font-size: 15px }
.header-tag-list .organization-tab a:before { content: "\e617"; font-family: rbchat; float: left; margin-right: 2px; font-size: 15px }
.header-tag-list .search-tab a:before { content: "\e037"; font-family: rbchat; 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: #ff4d4f }
.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: #eff2f6 }
.header-search .search-menu .active { background: #eff2f6 }
/* 20210324日：由原“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 { float: left; padding: 0 15px; height: 58px; line-height: 58px; border-left: 1px solid rgba(0, 0, 0, .42); border-right: 1px solid rgba(0, 0, 0, .42) }
.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: #ff4d4f; 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" }
/* 20210324日：由原“height: 50px; line-height: 50px;”改为现值 */
.notification-menu > li { float: left; margin-left: 18px; position: relative; height: 58px; line-height: 58px }
.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: #ff4d4f; 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 #eff2f6; 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: #ff4d4f }
.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: #ff4d4f }
.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 #e2e4e8; position: fixed; height: 100%; z-index: 4; left: 55px; padding-top: 100px }
#panel-sidebar .panel-title { width: 300px; border-right: 1px solid #e2e4e8 }
#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: #eff2f6; 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: #eff2f6 }
.drop-btn-default .selected:hover { background: #e5eaeb }
#panel-sidebar h3 { font-size: 14px; font-weight: 700; padding-bottom: 4px; border-bottom: 1px solid #e2e4e8; padding-right: 15px; margin-bottom: 10px; margin-left: 20px }
#panel-sidebar h3 > .fr-link { float: right; font-size: 12px; color: #28a0ff; 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 #e2e4e8; -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 #e2e4e8; 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: #ff4d4f }
.user-right-menu-top .quit:before { content: "\e909"; font-family: rbchat; 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 #eff2f6; 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 #e2e4e8 }
.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: rbchat; 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: #eff2f6 !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: rbchat; 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: #eff2f6 }
.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: #eff2f6 }
.tree-root:hover .tree-set, .tree-father:hover .tree-set { display: block; background: #eff2f6 }
.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: #eff2f6; 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: rbchat; 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: #28a0ff; 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: #eff2f6 }
.tree-child:hover .tree-set { display: block; background: #eff2f6 }
.tree-child:before { content: "\f114"; font-family: rbchat; 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 #e2e4e8; 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: rbchat }
#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 #e2e4e8; 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 #e2e4e8; 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: #28a0ff }
.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 #e2e4e8 }
.app-box-toggle .back-btn a { color: #28a0ff }
.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 #eff2f6; 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 #e2e4e8; 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 #e2e4e8 }
.app-panel .app-box li { font-size: 13px; padding: 8px 10px; border-bottom: 1px solid #e2e4e8 }
.app-panel .app-box li:hover { background: #eff2f6 }
.app-panel .app-box li:last-child { border-bottom: 0 }
.app-panel .app-box li > a { color: #28a0ff }
.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 #e2e4e8 }
.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 #e2e4e8; 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: #28a0ff }
.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: #28a0ff }
.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 #e2e4e8; 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 #e2e4e8; 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 #eff2f6; 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 #eff2f6; 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: #e2e4e8 !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 #e2e4e8 }
.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 #e2e4e8 }
.table tbody tr.active { background: #fff6ea !important }
.table tbody tr.viewing { background: #E1F9D8 !important }
.table tbody tr:hover { background: #eff2f6; cursor: default }
.table tbody tr > th { padding-left: 15px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #e2e4e8; 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: #e2e4e8 }
.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: #eff2f6 }
.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: #28a0ff }
.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: #ff4d4f }
.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: #ff4d4f }
.table .table-sortable { color: #374051 !important }
.table .table-sortable:after { font-family: rbchat; 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: rbchat; 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: #ff4d4f; 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: #ff4d4f; 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 #eff2f6; 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: #eff2f6 }
#bottom-bar .ticket-submit .drop-box dd .status { margin: 0; margin-left: 5px }
.drop-opt.active { background: #eff2f6 }
.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: #ff4d4f }
.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: #ff4d4f }
.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 #e2e4e8; 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 #e2e4e8; 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: #28a0ff; 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: rbchat; 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: rbchat; 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: rbchat; 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: #ff4d4f; border-radius: 100px; border: 1px solid #fff; right: -5px; bottom: -1px; font-family: rbchat; 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 #eff2f6; 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: rbchat }
.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: #28a0ff; 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 #eff2f6; -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 #e2e4e8; 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: rbchat; 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: #eff2f6; -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: #28a0ff; 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: #ff4d4f }
.uploader-file-list li .remove:after { content: "\e6c0"; font-family: rbchat }
.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 #e2e4e8; 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: rbchat; 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: #eff2f6; -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: #28a0ff }
.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: #ff4d4f; color: #fff }
.kf5-upload-list li .kf5-upload-file:before { content: "\e68b"; font-family: rbchat; 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: rbchat; 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: #28a0ff; 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 #e2e4e8; 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: #eff2f6; 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: #28a0ff }
.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: #ff4d4f }
.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: rbchat; font-size: 12px; line-height: 18px }
.uploader-file-list-small .remove:hover { background: #ff4d4f; 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: #ff4d4f }
.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 #e2e4e8; 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: #eff2f6 }
.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: #ff4d4f }
.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 #eff2f6 }
.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: #28a0ff; 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 #e2e4e8 }
.comment-body table thead, .kf5-article table thead { background: #eff2f6 }
.comment-body table td, .kf5-article table td, .comment-body table th, .kf5-article table th { text-align: center; padding: 5px; border: 1px solid #e2e4e8 }
.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: #28a0ff }
.publish-aside .alert a:hover { color: #48b6d7 }
.publish-aside .page-view { border-right: 1px solid #e2e4e8; 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 #e2e4e8; 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 #e2e4e8; margin-bottom: 20px }
.publish-aside .time time { display: block; margin-bottom: 5px }
.publish-aside .sort { padding: 0 0 10px; border-bottom: 1px solid #e2e4e8; 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: #eff2f6; 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 #eff2f6; 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: #28a0ff; 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: rbchat; 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 #e2e4e8; 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: #eff2f6 }
.area-filter { padding: 5px 8px; border-bottom: 1px solid #e2e4e8 }
.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 #e2e4e8; 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 #e2e4e8; 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 #eff2f6 }
.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: #e2e4e8; 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: rbchat; 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: #ff4d4f }
.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 #e2e4e8; 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 #eff2f6 }
.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: #e2e4e8; border-right-color: #e2e4e8 }
.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: #eff2f6 }
.sub-switch-menu { padding-bottom: 20px; border-bottom: 1px solid #eff2f6; 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 #eff2f6; 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 #eff2f6 }
.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 #e2e4e8 }
.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 #e2e4e8; border-radius: 3px 3px 0 0 }
.widget-head .title { line-height: 28px; height: 28px }
#password_strength { height: 15px; display: block; width: 294px; background: #eff2f6; 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: #ff4d4f }
#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: #eff2f6 }
.attachment_item .preview_image { margin-top: 10px }
.attachment_item a { color: #28a0ff; 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: #ff4d4f !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: #ff4d4f }
.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: #eff2f6 }
.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: #eff2f6 }
.drop-box li > label { color: #333; padding: 5px 20px 5px 10px; display: block }
.drop-box li > label:hover { background: #eff2f6 }
.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: #ff4d4f }
.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: #eff2f6 }
#ui-datepicker-div { z-index: 999 }
.plat-pane a { color: #28a0ff }
.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: #28a0ff }
.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: #e2e4e8; 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 #eff2f6; 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: #ff4d4f }
.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 #ff4d4f }
.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: #ff4d4f }
.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: #eff2f6; 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: #eff2f6; 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: #28a0ff; 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 #e2e4e8 }
.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: #ff4d4f }
.user-filter-content .add-filter { padding-bottom: 15px }
.user-filter-content .add-filter a { color: #28a0ff; 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: #28a0ff }
.user-filter-content .bottom-set a:hover { color: #48b6d7 }
.user-filter-content .bottom-set .fl { color: #ff4d4f }
.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% }
/* 20210324：由原“background: #FBFCFD”改为现值 */
/* 20210327: 由原“border-radius: 6px;box-shadow: 0 4px 30px #999”改为现值 */
#kchat-im-panel { width: 1024px; margin: auto; box-shadow: 0px 2px 30px 10px rgb(0 0 0 / 12%); border-radius: 12px; overflow: hidden; background: #fff; z-index: 12; position: fixed; display: block; top: 25px/*60px*/; left: 100%; margin-left: -1100px; height: 700px;/*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: 0px; height: auto; box-shadow: -8px 0 12px rgba(0, 0, 0, .06);width:100% }
.kchat-im-panel-header { position: relative; z-index: 10; height: 56px; background: #255aad/*#35B3E1*/; -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: 240px; /*width: 220px;*/ background-color: #1648a0;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; padding: 7px; height: 56px; -webkit-flex-shrink: 0; flex-shrink: 0 }
.kchat-im-panel-header-user .avatar-wrapper {float: left;margin-right: 10px;height: 40px;width: 40px;border-radius: 100%; 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: 40px; width: 40px; border-radius: 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: 1px; left: 24px;}
.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/* add 20190103 */;}
/* 20210327: 为配合新字体，将原“padding-top: 2px;”改为现值 */
.kchat-im-panel-header-user .info h4 { margin-bottom: 6px; /*line-height: 1;*/ color: #fff; /*padding-top: 7px;*/padding-top: 3px; 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: #d4d7d9; 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: 'rbchat'; 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: #ff4d4f }
.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: #eff2f6 }
.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: #ff4d4f }
.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: 0px;top: 12px;width: 18px;text-align: center;height: 30px;width: 30px;line-height: 30px;font-size: 20px;color: rgba(255, 255, 255, 1);}
#im-panel-header-setup i{color: white;}
/* add by js 20181205 */
#im-panel-header-setup-popup .kchat-pop{font-size: 13px; left: 133px; top: 44px; z-index: 10;}
#im-panel-header-setup-popup .kchat-pop ul { padding: 6px 0; }
#im-panel-header-setup-popup .kchat-pop li { border-bottom: none; height: auto; padding: 6px 25px; }
#im-panel-header-setup-popup .kchat-pop:after { top: -4px;left: 88%;}

.kchat-im-panel-header-operation { width: 100%; height: 56px; -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: 4px 4px 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: #28a0ff }
.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;border-radius: 4px; }
.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 }
.kchat-im-panel-body-left { width: 239px;/*width: 219px;*/ 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 #e2e4e8; -webkit-flex-shrink: 0; flex-shrink: 0 }
.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: #eff2f6; margin-bottom: 10px; display: block }
.kchat-talk-list-empty p { font-size: 12px; color: #999b9f; 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: #28a0ff; 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: 36px; 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 }
/* 20210401：不了配合主页tab改图标的ui新样式，而将原“color: #28a0ff”改为了现值 */
.kchat-im-panel-userlist-nav a { 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 #e2e4e8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #eff2f6; border-bottom: 1px solid #e2e4e8; color: #626468 }
.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 a i {font-size: 26px;vertical-align: middle;}
.kchat-im-panel-userlist-nav .has-msg:after { content: ""; height: 8px; width: 8px; border-radius: 100%; background: #ff4d4f; position: absolute; right: 10px; top: 8px }
/* 20210401：不了配合主页tab改图标的ui新样式，而将原“color: #333 !important;”改为了现值 */
.kchat-im-panel-userlist-nav .active { background: #FBFCFD; border-bottom-color: #FBFCFD; cursor: default; color: #28a0ff !important;border-bottom: none;}
/* 20200317 由原“border-top: 1px solid #e2e4e8;”修改为现值 */
#im-panel-userlist-bottom { color: #9E9E9E;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;border-top: 1px solid #f8fafe; 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: #28a0ff }
#im-panel-userlist-bottom a:hover { color: #48b6d7 }
/* 20200324 由原“background: #e9faeb;”修改为现值 */
.im-panel-userlist-bottom_ok{background: #f8fafe;}
.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: 100%; height: 100%; padding-top: 36px; top: 0 }
.kchat-im-panel-userlist .f-list-number-label {color: #f26c4f;}
.kchat-im-panel-userlist .f-list-iconbtn {float: right;width: 18px;text-align: center;height: 30px;width: 18px;line-height: 30px;font-size: 20px;color: rgba(255, 255, 255, 1);}
.kchat-im-panel-userlist .f-list-iconbtn i{color: #28a0ff;font-size: 18px;}
.kchat-im-panel-userlist .kchat-talk-list-group li .info .msg-num { padding: 0 5px; color: #fff; border-radius: 40px; background: #ff4d4f; 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 }
/* 20210327：因美华未读数ui，将原“left: 2px;”改为了现值 */
.kchat-im-panel-userlist .kchat-talk-list-group .close:before { content: "\e6c0"; font-family: rbchat; position: absolute; left: 0px; 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 }
/* 20210327：因美华未读数ui，将原“padding-left: 46px”改为了现值 */
.kchat-im-panel-userlist .kchat-talk-list-group li .info {/*padding-left: 34px*/padding-left: 48px }
.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: #ff4d4f;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: #28a0ff !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: #28a0ff !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; width: 100% }
.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 #e2e4e8; /*width: 470px;*/width: 540px; position: relative; background: #fff }
/* add by js 20190302：增加了以下行，目的是实现聊天窗口全屏时，聊天消息区能自动占满余下宽度 */
#kchat-im-panel.expand .kchat-im-panel-main-chat {width: 100% !important;}
.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: 170px; 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 }
/* 20210334：由原“ background: #fff;”改为现值 */
.kchat-im-panel-main-chat-content { background: #f5f7fa; box-sizing: border-box }
.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: 0; left: 0; right: 0; border-top: 1px solid #e2e4e8 }
/* 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 #e2e4e8”改为现值 */
/* 20210324由原“background::FBFCFD”改为了现值 */
.kchat-im-panel-main-chat-textarea .bottom-bar {position: relative; z-index: 5; /*background:#f7f9fc;*/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: #ff4d4f; 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: rbchat; 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: #1648a0/*#255aad*//*#53B4E2*/; /*border-radius: 3px 0 0 3px; border: 1px solid rgb(118,187,53);*//*#49A2CD*/ color: #fff;border-radius: 6px 0 0 6px;}
.kchat-im-panel-main-chat-textarea .bottom-bar .send a:hover { background: #49aad8 }
.kchat-im-panel-main-chat-textarea .bottom-bar .send span { color: #fff; height: 30px; line-height: 30px; padding: 0 5px; border-radius: 0 6px 6px 0;background:#1648a0/*#255aad*//*#53B4E2*/; 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 span .icon-expand-more {font-size: 20px;vertical-align: sub;}
.kchat-im-panel-main-chat-textarea .bottom-bar .send .send-pop { bottom: 45px; left: 50%; margin-left: -88px; width: 230px; display: none;box-shadow: rgb(0 0 0 / 12%) 0px 2px 30px 10px;border-radius: 12px;border: 1px solid rgb(231, 231, 231); }
.kchat-im-panel-main-chat-textarea .bottom-bar .send .send-pop ul { max-height: 300px; height: auto; position: relative; overflow: auto;border-radius: 8px; }
.kchat-im-panel-main-chat-textarea .bottom-bar .send .send-pop li { padding: 15px 15px }
.kchat-im-panel-main-chat-textarea .bottom-bar .send_hint {float: right;position: relative;line-height: 50px;margin-right: 10px;}
.kchat-im-panel-main-chat-textarea .bottom-bar .send_hint span {color: #bbbdc1;font-size: 12px;}

.kchat-pop, .select-pop { position: absolute; background: #fff; border-radius: 8px; box-shadow: rgb(0 0 0 / 12%) 0px 2px 30px 10px;/*border: 1px solid rgb(231, 231, 231);*/ 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: -6px; background: #fff }
.kchat-pop ul, .select-pop ul { background: #fff; position: relative; z-index: 2; border-radius: 8px; overflow-y: hidden }
.kchat-pop li, .select-pop li { border-bottom: 1px solid #eff2f6; 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: #eff2f6 }
.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/*#33A4CE*/; left: -1px; top: -56px; z-index: 10 }
/* 20200315由原“background: #fafbf6”改为了现值 */
/* 20210324由原“background: #FBFdFf”改为了现值 */
.kchat-im-panel-main-info .chat-user-info {background: #fff; -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 }

#im-panel-msg-popupmenu {position: absolute;min-width: 210px;}
#im-panel-msg-popupmenu .kchat-pop{font-size: 13px; left: 0px; top: 0px; z-index: 999;border: none;}
#im-panel-msg-popupmenu .kchat-pop ul { padding: 6px 0; }
#im-panel-msg-popupmenu .kchat-pop li { border-bottom: none; height: auto; padding: 6px 30px; }
#im-panel-msg-popupmenu .kchat-pop:after { content: none;}

/* 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;font-size: 20px;color: #000000;cursor: pointer;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;font-weight: 500 !important;}
/*.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:#28a0ff;}
/*.kchat-im-panel-main-info */.chat-user-info-headinfo .sex { height: 16px; width: 16px; position: absolute; /*top:25px;*/top:8px; right: 40px;}
/* 20210402: 由原“color: #bbb;”改为了现值 */
/*.kchat-im-panel-main-info */.chat-user-info-headinfo .edit_gname {position: absolute;top: 10px;right: 40px;color: #f5a623;}
/*.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: 8px 8px 8px 8px; }
.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 8px 8px;}
.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;border-top: 1px dashed #e2e4e8 }
.kchat-im-panel-main-info .prohibition p { height: 40px; line-height: 40px; /*border-top: 1px solid #e2e4e8*/ }
/*.kchat-im-panel-main-info .prohibition a { color: #28a0ff }
.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: rbchat; margin-right: 3px; font-size: 14px; color: #ff4d4f }
/* add by jackjiang 20190318: 2 line */
.kchat-im-panel-main-info .prohibition a.transfer_group:before {vertical-align: bottom; content: "\e643"; font-family: rbchat; margin-right: 3px; font-size: 14px; color: #28a0ff }
.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: #e2e4e8 }
.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 #e2e4e8; color: #333 }
.app-box-tree-list li .btn:hover { border-color: #21d376 }
.app-box-tree-list li:hover { background: #eff2f6 }
.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: 100%; color: #fff; font-size: 20px; position: relative }
.avatar-source.wechat { background: #3CB65D }
.avatar-source.wechat:after { content: "\e603"; font-family: rbchat; display: inline-block }
.avatar-source.phone { background: #00C8F2 }
.avatar-source.phone:after { content: "\e629"; font-family: rbchat; display: inline-block; font-size: 22px }
.avatar-source.pc { background: #1989FF }
.avatar-source.pc:after { content: "\e6a3"; font-family: rbchat; display: inline-block; font-size: 22px }
.avatar-source.human { background: #1989FF }
.avatar-source.human:after { content: "\e6dd"; font-family: rbchat; display: inline-block; font-size: 22px }
.avatar-source.weibo { background: #ff4d4f }
.avatar-source.weibo:after { content: "\e602"; font-family: rbchat; display: inline-block; font-size: 16px }
.avatar-source.sdk { background: #ffa900 }
.avatar-source.sdk:after { content: "SDK"; font-family: rbchat; display: inline-block; font-size: 12px; vertical-align: top }
.avatar-source.transfer:before { content: "\e66b"; font-family: rbchat; 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 #e2e4e8; 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;”为现值 */
/* 20210327：因美华未读数ui，将原“padding: 10px 15px;”改为了现值 */
.kchat-talk-list-group li { position: relative; padding: 10px 13px; 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 {cursor: pointer; background: #dcf1fe;/*#eff2f6*/ }
.kchat-talk-list-group li:hover .info time { background: #eff2f6 }
.kchat-talk-list-group li.active { background: #dcf1fe;/*#eff2f6*/ }
.kchat-talk-list-group li.active .info time { background: #eff2f6 }
.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 #ff4d4f; 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: 100px;}
/* 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 */
/* 20210327：修改了原值“color: #8fbfbf;” */
.kchat-talk-list-group li .info h4 .msg_time {position: absolute;right: 0px;display: inline;top: 0px;font-size: 12px;color: #bbbdc1;}
.kchat-talk-list-group li .info time { font-size: 12px; color: #999; position: absolute; right: 0; top: 5px; background: #FBFCFD; padding-left: 3px }
/* 20210327：修改了原值“color: #999;” */
.kchat-talk-list-group li .info p { font-size: 12px; color: #999b9f; 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;”为现值 */
/* 20210327：因美华未读数ui，将原“left: 15px;”改为了现值 */
.kchat-talk-list-group .avatar-source { height: 40px; width: 40px; line-height: 40px; position: absolute; left: 13px; 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: 100%; /*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 }
.kchat-queue h3 .f-list-toggle-label {color: #999b9f;}
	/* 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: 32px; z-index: 10; display: none;box-shadow: rgb(0 0 0 / 12%) 0px 2px 30px 10px;border-radius: 8px;/*border: 1px solid rgb(231, 231, 231);*/ }
.kchat-queue .kchat-pop ul { padding: 8px 0;border-radius: 8px; }
.kchat-queue .kchat-pop li { border-bottom: 0; height: auto; padding: 8px 15px;}
.kchat-queue .kchat-pop .bottom_border {border-bottom: 1px solid #eff2f6;}
.kchat-queue .kchat-pop:after { top: -5px }
.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: 62%;}
#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样式 */

/* 样式1：20210407 v3.1前的样式 */
/*.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;}*/

/* 样式2：跟rainbowchat app端一样的样式 */
/*.system-info div {display: inline-block;padding: 5px 15px 5px 15px;border-radius: 12px;background: #eaecf0;color: #979ca6;font-size: 12px;vertical-align: top;}*/

/* 样式3：v3.1前的样式改进版 */
.system-info div {display: inline-block;padding: 4px 15px 4px 15px;border-radius: 15px;background: rgba(255,161,0,0.08);color:#cba267;border: 1px solid rgba(254,161,0,0.07);font-size: 12px;vertical-align: top;}

/* 样式4：跟飞书web端一样的样式 */
/*.system-info div {display: inline-block;padding: 5px 15px 5px 15px;border-radius: 15px;background: #fdf0c4;color: #cba267;font-size: 12px;vertical-align: top;}*/

.system-info div span.system-info-time {margin-left: 6px; color: #bbb;}
.chat-style1 a { color: #28a0ff }
.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 }
/* 20210402：为了美化聊天气泡，而将原“background: #eff0f1;”改为现值，并增加了border属性 */
.chat-style1 .chat-left .chat-info { float: left; background: #fff;color:#434445;/* border-top: 1px solid rgb(241,241,241); */border-bottom: 1px solid rgb(241,241,241);border-right: 1px solid rgb(241,241,241);box-shadow: rgb(0 0 0 / 2%) -2px 1px 5px 1px; }
/* 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-right: 8px solid #ECF2F4; border-bottom: 8px solid transparent }*/
/* 20210402：为了美化聊天气泡，而启用了如下气泡箭头样式 */
.chat-style1 .chat-left .chat-info:before {content: "";display: inline-block;position: absolute;left: -5px;top: 5px;width: 0;height: 0;border-top: solid transparent;border-right: 6px solid #fff;border-bottom: 5px solid transparent;}
/* 20210402：为了美化聊天气泡，而将原“background: #cceaff”改为现值 */
.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-left: 8px solid #cceaffborder-bottom: 8px solid transparent }*/
/* 20210402：为了美化聊天气泡，而启用了如下气泡箭头样式 */
.chat-style1 .chat-right .chat-info:before {content: "";display: inline-block;position: absolute;right: -5px;top: 5px;width: 0;height: 0;border-top: solid transparent;border-left: 6px solid #cfe7ff;border-bottom: 5px 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);}
/* 20210402：为了美化聊天气泡，而将原值“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-bottom: 1px solid rgb(241,241,241);border-right: 1px solid rgb(241,241,241);box-shadow: rgb(0 0 0 / 2%) -2px 1px 5px 1px;}
/* 20210402：为了美化聊天气泡，而加 */
.chat-style1 .chat-info_ex_lightbg_r:before {border-left: 6px solid #fff !important;right: -6px !important;}
/* 20190714 modified by js: app产品中图片缩略图尺寸已加大，网页产品也要相应处理，不然显示的太大就太难看了（由原“max-width: 100%;”改为现值） */
/* 20200321 modified by js: 由“border-radius: 2px;”修改为现值 */
/* 20210402 modified by js: 由“border-radius: 3px;”修改为现值 */
.chat-style1 .chat-info img { display: block; max-width:150px; border-radius: 6px;}
.chat-style1 .chat-info audio {border-radius: 2px;}
.chat-style1 .chat-info audio:focus {outline: none !important;}
/* 20200321：由原值“padding: 6px 6px;”修改为现值 */
/* 20210402：由原值“padding: 4px 4px;”修改为现值 */
.chat-style1 .chat-info_imagemsg {padding: 1px 1px;}
.chat-style1 .chat-info_voicemsg {line-height: 0.8em;padding: 0;/*padding: 6px 6px 6px 7px;*/background: #f1f3f4 !important;
/*border: none !important;*/box-shadow: rgb(255 255 255 / 65%) -2px 2px 15px 3px !important;}
.chat-info.chat-info_voicemsg:before {border-right: 6px solid #f1f3f4 !important;border-bottom: 5px solid transparent !important;}
/* 20200321：由原“padding: 6px 6px;”修改为现值 */
.chat-style1 .chat-info_shortvideomsg {padding: 1px 1px;}
.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;bottom: 7px;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: 4px;font-size: 12px;color: #fff;}
.chat-style1 .chat-info_contactmsg, .chat-style1 .chat-info_locationmsg {padding: 11px 13px;}
.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{margin: 0;position: absolute; left: 13px;top: 13px;}
.chat-style1 .chat-info_bigfilemsg {padding: 13px 13px;}
.chat-style1 .chat-info_bigfilemsg .chat-msg-file-pic img {width:40px; height:40px;border-radius: 3px;}
.chat-style1 .chat-info_bigfilemsg .chat-msg-file-info {height: 40px;padding-left: 50px;padding-right: 25px;width:190px}
.chat-style1 .chat-right .chat-info_bigfilemsg .chat-msg-file-info {width: 215px;padding-right: 0px;}
.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{margin: 0;position: absolute; left: 12px;top: 11px;}
.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 dashed #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: rbchat; 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:#28a0ff}
.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: #28a0ff; 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;    max-height: 200px; }
.chat-user-info dd a { color: #999/*color: #28a0ff*/ }
.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: #28a0ff*/color: #999b9f;max-width: 204px; display: inline-block;}
.chat-user-info dd span.content_autowrap {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;max-width: 138px; vertical-align: bottom;}
/* 20181221: 为了美化群组信息右边的edit图标显示，而添加了以下1行 */
/* 20210402: 将原“color: #bbb;”改为了现值 */
.chat-user-info dt i, .chat-user-info dd i {vertical-align: text-bottom;font-size: 14px;color: #f5a623;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: #eff2f6; color: #666 }
#emoji-face-btn { position: relative }
.emoji-face-box { bottom: 40px; left: 50%; margin-left: -100px; width: 478px; display: none }
.emoji-face-box:after { margin-left: -144px }
.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: 12px !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 #e2e4e8; 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 #e2e4e8; 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 #e2e4e8; 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: #ff4d4f; border-color: #ff4d4f }
.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: rbchat; font-size: 42px; color: #bbb; position: absolute; left: 10px; top: 26px }
.voice-section .not-opened a { color: #28a0ff }
.voice-section .not-opened a:hover { color: #48b6d7 }
.voice-section-header-pane1 { background: #F8F8F8; border-bottom: 1px solid #e2e4e8; 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 #e2e4e8; 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: #ff4d4f }
.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: #eff2f6 }
.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 #eff2f6; cursor: pointer; padding: 0 14px; font-size: 13px }
.voice-section-header-set .list2 .pop a.active:after { content: "\e6bd"; font-family: rbchat; 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: #eff2f6 }
.voice-section-header-pane2 { padding: 15px; background: #fff }
.voice-section-header-pane2 .own-number-box { height: 32px; line-height: 32px; border: 1px solid #e2e4e8; 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: rbchat; 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 #e2e4e8; 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 #e2e4e8; 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: rbchat; 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: #eff2f6 }
.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 #e2e4e8; -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: #eff2f6; 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 #e2e4e8; 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: #eff2f6; border-right: 2px solid #21b1d3 }
.voice-panel-history .missed { color: #ff4d4f }
.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 #e2e4e8 }
.call-transfer-left .search { padding: 15px; position: relative }
.call-transfer-left .search:after { content: "\e037"; font-family: rbchat; 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 #e2e4e8 }
.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: #eff2f6 }
.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: #ff4d4f }
.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: rbchat; 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: #eff2f6; 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: #eff2f6; 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: #ff4d4f }
.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: rbchat; display: inline-block; height: 20px; width: 20px; border-radius: 100%; background: #ff4d4f; 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: rbchat; 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: #28a0ff }
.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 #e2e4e8; 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: #28a0ff }
.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 #e2e4e8; 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: rbchat; font-size: 18px; margin-right: 2px; color: #777; position: relative; top: 2px }
.ticket-list-choice-tag .remove-tag:hover { color: #28a0ff }
.ticket-list-choice-tag .remove-tag:hover:before { color: #28a0ff }
.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 #e2e4e8; 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: #28a0ff; 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: #28a0ff }
.record-score-top a:hover { color: #48b6d7 }
.record-score-top time { color: #888; margin-right: 15px }
.record-score-box { padding: 15px; border: 1px solid #e2e4e8; 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: #28a0ff }
.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: 'rbchat';
	src: url('../fonts/rbchat.eot?v2');
	src: url('../fonts/rbchat.ttf?v2') format('truetype'),
	url('../fonts/rbchat.woff?v2') format('woff'),
	url('../fonts/rbchat.svg?v2#rbchat') format('svg');
	font-weight: normal;
	font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
	font-family: 'rbchat';
	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 */

.icon-frends:before {content: "\f116";}
.kchat-im-panel-userlist-nav .active .icon-frends:before {content: "\f117";}

.icon-groups:before {content: "\f118";}
.kchat-im-panel-userlist-nav .active .icon-groups:before {content: "\f119";}

.icon-profile:before {content: "\f120";}
.kchat-im-panel-userlist-nav .active .icon-profile:before {content: "\f121";}

.icon-alarms:before {content: "\f122";}
.kchat-im-panel-userlist-nav .active .icon-alarms:before {content: "\f123";}

.icon-rosterlist-add2:before {content: "\f126";}
.icon-groupslist-add2:before {content: "\f127";}


.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 #e2e4e8;
	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: #eff2f6; 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: #eff2f6; 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: #ff4d4f; 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 #e2e4e8; }
.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 #e2e4e8; 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: #ff4d4f;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启用了未读数的新样式 */
/* 20210327：参考webui启用了未读数的新样式参考webui启用了未读数的新样式，启消了“transform: scale(0.9)” */
.im-left-unreadmsg-flagnum {display: inline-block;padding: .15em .4em;min-width: 8px;border-radius: 18px;background-color: #ff4d4f;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;
}

.msg-normal {
	position: absolute;
	height: 12px;
	width: 12px;
	border-radius: 100%;
	background: #ff4d4f;
	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: 12px;
	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: #ff4d4f;
}
.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__text-area_new {
	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 -----------------------*/