/************************公用样式 start******************************/
body {
    overflow-x: hidden;
    overflow-y: hidden;
}

/*去掉 input默认ios样式*/
input {
    -webkit-appearance: none;
}

input[type="radio"] {
    -webkit-appearance: radio;
    vertical-align: middle;
    margin-right: 5px;
}

input[type="checkbox"] {
    -webkit-appearance: checkbox;
    vertical-align: middle;
    margin-right: 5px;
}

li {
    list-style: none;
    display: list-item;
    text-align: -webkit-match-parent;
}

a:active, a:hover, html * {
    outline: 0;
    text-decoration: underline;
}

html, body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
}

.holly-chat, body, html {
    height: 100%;
}

html * {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

u {
    text-decoration: underline;
}

s, strike, del {
    text-decoration: line-through;
}

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

h1, h2, h3, h4, h5, h6 {
    line-height: normal;
}

a, div, span, li, i, input, button, p, td, th, tr, body {
    background-repeat: no-repeat;
}
video{
    min-width: 200px;
}
button, input[type="button"], a, .emoji-control, .pointer {
    cursor: pointer;
}
.iconfont{
    cursor: pointer;
}
div {
    display: block;
}
.symbol-icon{
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
    cursor: pointer;
}
.block{
    display: block;
}
.inline_block {
    display: inline-block;
}

.hidden {
    display: none;
}

a:hover {
    cursor: pointer;
}

.clear {
    clear: both;
    height: 0;
}

.clear-s {
    clear: both;
}

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
#app .default-gray-icon:hover{
    color: #10a0ff !important;
}
#app .default-gray-icon:active{
    color: #1085e1 !important;
}
/*公用样式 start*/

.bgSer {
    background: #f0f0f0;
}

.bgCli {
    background: #c4e0fd;
}

.white {
    background: #fff;
}
.opacityImg {
    background: #ffffff75 !important;
}

.black {
    background: #000;
}

.selected {
    background-color: rgba(0, 0, 0, .2);
}

.delBefore:before {
    border-width: 0 !important;
    background-color: #fff !important;
    display: none;
}

.selectedBefore {
    background-color: rgb(204, 204, 204) !important;
}

.selectedBefore:before {
    border-color: transparent rgb(204, 204, 204) !important;
}
/*按钮样式*/
.btn-plain{
    padding: 5px 15px;
    color: #333;
    background-color: #fff;
    border: 1px solid rgba(238,238,238,1);
    border-radius: 4px;
    cursor: pointer;
}
.btn-primary{
    padding: 5px 15px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}
/*字体样式*/
.f_blue {
    color: blue;
}

.f_white {
    color: #fff;
}

.f_black {
    color: #000;
}

.f_grey6 {
    color: #858282;
}

.f_grey {
    color: #999999;
}

.f_red {
    color: red;
}

#app .font0 {
    font-size: 0;
}
#app .font10 {
    font-size: 10px;
}
#app .font11 {
    font-size: 11px;
}
#app .font12 {
    font-size: 12px;
}

#app .font13 {
    font-size: 13px;
}

#app .font14 {
    font-size: 14px;
}

#app .font15 {
    font-size: 15px;
}

#app .font16 {
    font-size: 16px;
}

#app .font18 {
    font-size: 18px;
}

#app .font20 {
    font-size: 20px;
}

#app .font22 {
    font-size: 22px;
}

#app .font26 {
    font-size: 26px;
}
.font-w {
    font-weight: bold;
}

.opa75 {
    opacity: .75 !important;
}

.opa1 {
    opacity: 1 !important;
}

.ml50 {
    margin-left: 55px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.fl, .fr {
    display: inline;
}

.img {
    border: none;
}

.disabled {
    opacity: 0.2;
    filter: alpha(opacity=20);
    cursor: default;
}

.underline {
    text-decoration: underline;
}

.center {
    text-align: center;
}

.position-a {
    position: absolute;
}

.mar_tb5 {
    margin: 5px 0 5px 0;
}

.mar_b_5 {
    margin-bottom: 5px;
}

.mar_b_10 {
    margin-bottom: 10px;
}

.mar_b_15 {
    margin-bottom: 15px;
}

.mar_b_20 {
    margin-bottom: 20px;
}

.bottom-0 {
    bottom: 0px;
}

.bottom-10 {
    bottom: 10px;
}

.bottom-20 {
    bottom: 20px;
}

.bottom-30 {
    bottom: 30px;
}

.bottom-40-i {
    bottom: 40px !important;
}

.bottom-50-i {
    bottom: 50px !important;
}

.bottom-65-i {
    bottom: 65px !important;
}

.bottom-85-i {
    bottom: 85px !important;
}

.bottom-95-i {
    bottom: 95px !important;
}
.bottom-P50-i {
    bottom: 50% !important;
}
.bottom-P35-i {
    bottom: 35% !important;
}
.bottom-P40-i {
    bottom: 40% !important;
}
.bottom-195-i {
    bottom: 195px !important;
}

.bottom-105-i {
    bottom: 155px !important;
}

.rig_-14 {
    right: -14px;
}

.bottom-50-i {
    bottom: 50px !important;
}

.bottom-65-i {
    bottom: 65px !important;
}

.bottom-75-i {
    bottom: 75px !important;
}

.bottom-85-i {
    bottom: 85px !important;
}

.bottom-95-i {
    bottom: 95px !important;
}

.bottom-105-i {
    bottom: 105px !important;
}

.bottom-115-i {
    bottom: 115px !important;
}

.bottom-125-i {
    bottom: 125px !important;
}

.rig_-14 {
    right: -14px;
}

.line_h0 {
    line-height: 0px;
}

/*选择菜单 知识列表样式*/
/*.circle {*/
    /*line-height: 1.0em;*/
    /*word-break: break-all;*/
    /*position: relative;*/
    /*padding-left: 10px;*/
    /*font-size: 14px;*/
/*}*/

.word-break-all {
    word-break: break-all;
}
/*.circle:before {*/
    /*content: '';*/
    /*display: inline-block;*/
    /*width: 5px;*/
    /*height: 5px;*/
    /*border-radius: 50%;*/
    /*background: #757272;*/
    /*position: absolute;*/
    /*left: 0px;*/
    /*top: 8px;*/
/*}*/

.underline-class {
    content: '';
    display: block;
    border-bottom: 1px solid #ddd;
    margin: 10px auto 10px;
}

/*方块*/
.square {
}

.square:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #757272;
    transform: rotate(45deg);
    margin-right: 8px;
    vertical-align: middle;
}

/*文本溢出省略号*/
.text_ellipsis-nw {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*文本溢出省略号*/
.text_ellipsis {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*踩赞样式*/
.theme-new .thumb-wrap{
    top: -10px;
    right: -55px;
    width: 40px;
}
.theme-onePiece .thumb-wrap,.theme-colorful .thumb-wrap{
    top: 7px;
    right: -75px;
}
.thumb-cont{
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
}
.theme-new .thumb-cont,.theme-onePiece .thumb-cont,.theme-colorful .thumb-cont{
    border-radius: 50%;
}

.IEStyle .thumbDown, .IEStyle .thumbUp {
    background-color: unset;
    background-image: none;
}

.scrollBar-inner {
    overflow-x: hidden;
    overflow-y: auto;
    color: #000;
    height: auto;
}

/*滚动条样式*/
.scrollBar-inner::-webkit-scrollbar { /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}

.scrollBar-inner::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

.scrollBar-inner::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}

.hide-scrollBar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.menu-selected-options-wrap.scrollBar-inner::-webkit-scrollbar { /*滚动条整体样式*/
    width: 4px;
    height: 2px;
}

.menu-selected-options-wrap.scrollBar-inner::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
}

.menu-selected-options-wrap.scrollBar-inner::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.05);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.01);
}
.hide {
    display: none;
}

.vis-hide {
    visibility: hidden;
}

.show {
    display: block;
    transition: all .2s linear
}

.inline-block {
    display: inline-block;
}
/*访客端需要兼容IE9，避免使用flex*/
.flex {
    display: flex;
}
.flex-grow-one{
    /*flex-grow: 1;*/
    width: 50%;
    display: inline-block;
    /*width: 50%\9\0;*/
}
/*.flex-grow-two{*/
/*    flex-grow: 2;*/
/*    width: 0;*/
/*}*/
/*.flex-grow-three{*/
/*    flex-grow: 3;*/
/*    width: 0;*/
/*}*/
/*.flex-column {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-3 {
    flex: 3;
}
.flex-4 {
    flex: 4;
}

.clearFix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
}

.excessEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.white-space-unset {
    white-space: normal;
}

.white-space-nowrap {
    white-space: nowrap;
}
.white-space-pre-line {
    white-space: pre-line;
}

.unified-input {
    padding: 5px 0 5px 10px;
    height: 60px;
    margin: 0 15px;
    border: 1px solid #ccc;
}

.underline_hover:hover {
    text-decoration: underline;
}

.text-hover-b:hover {
    color: #6068ed;
}

.text-hover-r:hover {
    color: red;
}

.text-hover-p:hover {
    color: #d64581;
}

.text-hover-777:hover {
    color: #777;
}

.cursor-hover:hover {
    cursor: pointer;
}
.cursor-hover-blue:hover{
    cursor: pointer;
    color: #3888be;
}
.cursor-default {
    cursor: default !important;
}

.bg-hover-f5:hover {
    background-color: #f5f5f5;
}
.bg-hover-ccc:hover {
    background-color: #ccc;
}

/*鼠标划过点击都没有下划线的a标签*/
.no-line a:hover, .no-line a:active {
    text-decoration: none;
}

.f-l {
    float: left;
}

.f-r {
    float: right;
}

.f-none {
    float: none;
}

.ver-mid {
    vertical-align: middle;
}

.ver-bottom {
    vertical-align: bottom;
}

.ver-top {
    vertical-align: top;
}

.ver-text-top {
    vertical-align: text-top;
}

.ver-inherit {
    vertical-align: inherit;
}

.ver-text-b {
    vertical-align: text-bottom;
}

.text-c {
    text-align: center;
}

.text-l {
    text-align: left;
}

.text-r {
    text-align: right;
}

.bold {
    font-weight: bold;
}

.line-height-30 {
    line-height: 30px;
}

.line-height-32 {
    line-height: 32px;
}

.line-height-34 {
    line-height: 34px;
}

.letter-s-1 {
    letter-spacing: 1px;
}

.letter-s-2 {
    letter-spacing: 2px;
}

.letter-s-3 {
    letter-spacing: 3px;
}

.letter-s-4 {
    letter-spacing: 4px;
}

.letter-s-5 {
    letter-spacing: 5px;
}

.letter-s-6 {
    letter-spacing: 6px;
}

.letter-s-7 {
    letter-spacing: 7px;
}

.letter-s-8 {
    letter-spacing: 8px;
}

.letter-s-9 {
    letter-spacing: 9px;
}

.letter-s-10 {
    letter-spacing: 10px;
}

.letter-s-11 {
    letter-spacing: 11px;
}

.letter-s-12 {
    letter-spacing: 12px;
}

/*字体*/
.color-white {
    color: #fff;
}
.color-white-a a{
    color: #fff;
}

.color-ccc {
    color: #ccc;
}

.color-def {
    color: #656565;
}

.color-aaa {
    color: #aaa;
}
.color-4f {
    color: #4f4f4f;
}
.color-placeholder {
    color: #c0c4cc;
}

.color-666 {
    color: #666;
}

.color-333 {
    color: #333;
}

.color-999 {
    color: #999;
}

.color-gray {
    color: #8391a5;
}

.color-clicked {
    color: #9E9E9E;
}

.color-af {
    color: #AFAFAF;
}

.color-label {
    color: #48576a;
}

.color-tips {
    color: #8a6d3b;
}

.color-black {
    color: #333;
}

.color-blue {
    color: #2190fb;
}

.color-blue-icon {
    color: #6971f0
}

.color-red {
    color: #FF4949;
}

.color-green {
    color: rgb(55, 170, 115);
}

.color-cyan {
    color: #0EDBFB;
}

.color-origine {
    color: #f90;
}

.color-yellow {
    color: #ffff00;
}

.color-pink {
    color: #FF33FF;
}

/*背景*/
.bg-color-online {
    background-color: #13CE66;
}

.bg-color-active {
    background-color: #f2f2f2 !important;
}

.bg-color-invisible {
    background-color: #ffb16e;
}

.bg-color-selected {
    background-color: #d9d9d9;
}
.bg-color-f8 {
    background-color: #f8f8f8;
}
.bg-color-table-selected {
    background-color: #eef1f6 !important;
}

.bg-color-app{
    background-color: #CFD6E7;
}

.bg-color-origine {
    background-color: #f90;
}

.bg-color-gray {
    background-color: #48576a;
}

.bg-color-blue {
    /*background-color: #20a0ff;*/
    background-color: rgb(25, 118, 211);
}
.bg-color-blue-alpha20 {
    /*background-color: #20a0ff;*/
    background-color: rgba(25, 118, 211,0.2);
}

.bg-color-red {
    /*background-color: #20a0ff;*/
    background-color: red;
}

.bg-color-white {
    background-color: #fff;
}
.border-color-eee{
    border-color: #eee !important;
}
.opacity-01 {
    opacity: 0.1;
}

.opacity-02 {
    opacity: 0.2;
}

.opacity-03 {
    opacity: 0.3;
}

.opacity-04 {
    opacity: 0.4;
}

.opacity-05 {
    opacity: 0.5;
}

.opacity-06 {
    opacity: 0.6;
}

.red-border {
    border-color: red;
}
/*阴影效果*/
.box-shadow{
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.06);
    /*box-shadow: 0 4px 23px 5px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.15)*/
}
.text-shadow{
    text-shadow: -1px -1px #fff, 2px 1px #ccc;
}
/*布局*/


.padding-t-0 {
    padding-top: 0px;
}

.padding-t-5 {
    padding-top: 5px;
}

.padding-t-7 {
    padding-top: 7px;
}

.padding-t-10 {
    padding-top: 10px;
}

.padding-t-15 {
    padding-top: 15px;
}

.padding-t {
    padding-top: 20px;
}

.padding-b-0 {
    padding-bottom: 0px;
}

.padding-b-2 {
    padding-bottom: 2px;
}

.padding-b-3 {
    padding-bottom: 3px;
}

.padding-b-4 {
    padding-bottom: 4px;
}

.padding-b-5 {
    padding-bottom: 5px;
}

.padding-b-10 {
    padding-bottom: 10px;
}

.padding-b-15 {
    padding-bottom: 15px;
}

.padding-b {
    padding-bottom: 20px;
}

.padding-b-25 {
    padding-bottom: 25px;
}

.padding-b-30 {
    padding-bottom: 30px;
}

.padding-r-10 {
    padding-right: 10px;
}

.padding-r {
    padding-right: 20px !important;
}

.padding-l-i0 {
    padding-left: 0px !important;
}

.padding-l-5 {
    padding-left: 5px;
}

.padding-l-10 {
    padding-left: 10px;
}

.padding-l-15 {
    padding-left: 15px;
}

.padding-l-20 {
    padding-left: 20px;
}

.padding-l-25 {
    padding-left: 25px;
}

.padding-l-50 {
    padding-left: 50px;
}

.padding-0-i {
    padding: 0px !important;
}
.padding-2 {
    padding: 2px;
}

.padding-3 {
    padding: 3px;
}

.padding-4 {
    padding: 4px;
}

.padding-5 {
    padding: 5px;
}
.padding-5-i {
    padding: 5px !important;
}

.padding-8 {
    padding: 8px;
}
.padding-10 {
    padding: 10px;
}
.padding-10-i {
    padding: 10px !important;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}
.padding-30 {
    padding: 30px;
}

.padding-0-5 {
    padding: 0 5px;
}

.padding-0-10 {
    padding: 0 10px;
}

.padding-0-15 {
    padding: 0 15px;
}

.padding-0-20 {
    padding: 0 20px;
}

.padding-5-0 {
    padding: 5px 0;
}

.padding-5-10 {
    padding: 5px 10px;
}
.padding-10-0 {
    padding: 10px 0;
}
.padding-10-12 {
    padding: 10px 12px;
}
.padding-15-0 {
    padding: 15px 0;
}

.padding-20-0 {
    padding: 20px 0;
}

.margin-au {
    margin: auto;
}
.margin-0-au {
    margin: 0px auto;
}
.margin-0 {
    margin: 0px;
}

.margin-1 {
    margin: 1px;
}

.margin-2 {
    margin: 2px;
}

.margin-3 {
    margin: 3px;
}

.margin-4 {
    margin: 4px;
}

.margin-5 {
    margin: 5px;
}

.margin-6 {
    margin: 6px;
}

.margin-8 {
    margin: 8px;
}

.margin-10 {
    margin: 10px;
}

.margin-t0 {
    margin-top: 0px;
}

.margin-t0-i {
    margin-top: 0px !important;
}

.margin-t_-1 {
    margin-top: -1px;
}
.margin-t-2 {
    margin-top: 2px;
}
.margin-t5 {
    margin-top: 5px;
}

.margin-t10 {
    margin-top: 10px;
}

.margin-t15 {
    margin-top: 15px;
}

.margin-t {
    margin-top: 20px !important;
}

.margin-t-25 {
    margin-top: 25px;
}

.margin-t-30 {
    margin-top: 30px;
}

.margin-r2 {
    margin-right: 2px;
}
.margin-r5 {
    margin-right: 5px;
}
.margin-r-8 {
    margin-right: 8px;
}
.margin-r10 {
    margin-right: 10px;
}
.margin-r-15 {
    margin-right: 15px;
}

.margin-r {
    margin-right: 20px;
}

.margin-r-30 {
    margin-right: 30px;
}

.margin-b-crowd {
    margin-bottom: 0;
}

.margin-b2 {
    margin-bottom: 2px;
}

.margin-b3 {
    margin-bottom: 3px;
}

.margin-b4 {
    margin-bottom: 4px;
}

.margin-b5 {
    margin-bottom: 5px;
}
.margin-b6 {
    margin-bottom: 6px;
}

.margin-b10 {
    margin-bottom: 10px;
}

.margin-b-15 {
    margin-bottom: 15px;
}

.margin-b {
    margin-bottom: 20px;
}

.margin-b-30 {
    margin-bottom: 30px;
}

.margin-l-i0 {
    margin-left: 0px !important;
}

.margin-l-5 {
    margin-left: 5px;
}

.margin-l-10 {
    margin-left: 10px;
}

.margin-l10 {
    margin-left: 10px;
}

.margin-l-15 {
    margin-left: 15px;
}

.margin-l {
    margin-left: 20px;
}

.margin-l-28 {
    margin-left: 28px;
}

.margin-l-30 {
    margin-left: 30px;
}

.margin-l-60 {
    margin-left: 60px;
}

/*width*/
.width-10 {
    width: 10px;
}

.width-12 {
    width: 12px;
}

.width-14 {
    width: 14px;
}

.width-16 {
    width: 16px;
}

.width-18 {
    width: 18px;
}

.width-20 {
    width: 20px;
}

.width-22 {
    width: 22px;
}

.width-24 {
    width: 24px;
}

.width-26 {
    width: 26px;
}

.width-28 {
    width: 28px;
}

.width-30 {
    width: 30px;
}

.width-32 {
    width: 32px;
}

.width-35 {
    width: 35px;
}

.width-40 {
    width: 40px;
}

.width-60 {
    width: 60px;
}

.width-70 {
    width: 70px;
}

.width-80 {
    width: 80px;
}

.width-90 {
    width: 90px;
}

.width-90-i {
    width: 90px !important;
}

.width-100 {
    width: 100px;
}

.width-110 {
    width: 110px;
}

.width-110-i {
    width: 110px !important;
}

.width-120 {
    width: 120px;
}

.width-140 {
    width: 140px;
}

.width-160 {
    width: 160px;
}

.width-170 {
    width: 170px;
}

.width-180 {
    width: 180px;
}

.width-200 {
    width: 200px;
}

.width-220 {
    width: 220px;
}

.width-240 {
    width: 240px;
}

.width-260 {
    width: 260px;
}

.width-300 {
    width: 300px;
}

.width-380 {
    width: 380px;
}

.width-400 {
    width: 400px;
}

.width-per100 {
    width: 100%;
}

.width-per90 {
    width: 90%;
}

.width-per85 {
    width: 85%;
}

.width-per80 {
    width: 80%;
}
.width-per70 {
    width: 70%;
}
.width-per65 {
    width: 65%;
}
.width-per60 {
    width: 60%;
}

.width-per50 {
    width: 50%;
}
.width-per40 {
    width: 40%;
}

.width-per30 {
    width: 30%;
}

.width-per25 {
    width: 25%;
}

.width-per20 {
    width: 20%;
}

.width-min-5em {
    min-width: 5em;
}

.width-min-500 {
    min-width: 500px;
}

.width-min-600 {
    min-width: 600px;
}

.width-min-700 {
    min-width: 700px;
}

.width-max-5em {
    max-width: 5em;
}

.width-max-6em {
    max-width: 6em;
}

.width-max-7em {
    max-width: 7em;
}

.width-max-120 {
    max-width: 120px;
}

.width-max-160 {
    max-width: 160px;
}

.width-max-240 {
    max-width: 240px;
}

.width-max-400 {
    max-width: 400px;
}

.width-max-260 {
    max-width: 260px;
}

.width-max-500 {
    max-width: 500px;
}

.width-max-600 {
    max-width: 600px;
}

.width-max-700 {
    max-width: 700px;
}
.width-max-pre50 {
    max-width: 50%;
}
.width-max-pre100 {
    max-width: 100%;
}

/*height*/
.height-per100 {
    height: 100%;
}

.height-10 {
    height: 10px;
}

.height-12 {
    height: 12px;
}

.height-14 {
    height: 14px;
}

.height-16 {
    height: 16px;
}

.height-17 {
    height: 17px;
}

.height-18 {
    height: 18px;
}

.height-20 {
    height: 20px;
}

.height-22 {
    height: 22px;
}

.height-24 {
    height: 24px;
}

.height-26 {
    height: 26px;
}

.height-28 {
    height: 28px;
}

.height-30 {
    height: 30px;
}

.height-32 {
    height: 32px;
}

.height-35 {
    height: 35px;
}

.height-40 {
    height: 40px;
}

.height-45 {
    height: 45px;
}

.height-60 {
    height: 60px;
}

.height-60-i {
    height: 60px !important;
}

.height-70 {
    height: 70px;
}

.height-80 {
    height: 80px;
}

.height-100 {
    height: 100px;
}

.height-120 {
    height: 120px;
}

.height-140 {
    height: 140px;
}

.height-160 {
    height: 160px;
}

.height-180 {
    height: 180px;
}

.height-200 {
    height: 200px;
}

.height-280 {
    height: 280px;
}

.height-300 {
    height: 300px;
}

.height-400 {
    height: 400px;
}

.height-min-per100 {
    min-height: 100%;
}

.height-min-50 {
    min-height: 50px;
}

.height-min-100 {
    min-height: 100px;
}

.height-min-120 {
    min-height: 120px;
}

.height-min-150 {
    min-height: 150px;
}

.height-min-200 {
    min-height: 200px;
}

.height-min-250 {
    min-height: 250px;
}

.height-min-300 {
    min-height: 300px;
}

.height-min-350 {
    min-height: 350px;
}

.height-min-400 {
    min-height: 400px;
}

.height-min-500 {
    min-height: 500px;
}

.height-max-300 {
    max-height: 300px;
}

.position-r {
    position: relative;
}

.position-b {
    position: absolute;
}

.scrollBar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.border-eee {
    border: 1px solid #eee;
}
.border-t {
    border-top: 1px solid #f5f5f5;
}
.border-b {
    border-bottom: 1px solid #eee;
}
.border-l {
    border-left: 1px solid #eee;
}
.border-r {
    border-right: 1px solid #eee;
}

.border-rad-l {
    border-radius: 5px 0 0 5px;
}

.border-danger {
    border: 1px solid red;
}

.border-rad-3 {
    border-radius: 3px;
}

.border-rad-5 {
    border-radius: 5px;
}
.border-rad-10 {
    border-radius: 10px;
}
.border-rad-12 {
    border-radius: 12px;
}
.border-rad-20 {
    border-radius: 20px;
}

.border-menu{
    /*border: 2px solid red;*/
    /*border-radius: 12px;*/
    padding: 5px 15px;
    /*margin: 5px;*/
    border:solid 1px #d4d3d3;
    border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
}
.border-radius-50 {
    border-radius: 50%;
}

#app .emojione {
    width: 25px;
    height: 25px;
    vertical-align: text-bottom;
}

/*公共弹框样式*/
/*背景层*/
.dialog-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0, 0, 0);
    filter: "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    opacity: .5;
    z-index: 10000;
}

/*内容外层*/
.dialog-box {
    background: white;
    border: 1px solid #ebeef5;
    position: absolute;
    top: 50%;
    min-width: 240px !important;
    max-width: 80%;
    text-align: center;
    /*line-height: 25px;*/
    z-index: 10001;
    padding: 8px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.succ-bg {
    background-color: #f0f9eb;
}

.warning-bg {
    background-color: #fdf6ec;
}

.warning-icon {
    width: 18px;
    height: 18px;
    background: #e6a23c;
    border-radius: 50%;
    float: left;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 18px;
    /*margin-top: 2px;*/
    position: absolute;
    top: 9px;
}

/**/
/*关闭按钮*/
.dialog-box .close-btn {
    -webkit-appearance: none;
    font-size: 24px;
    margin-right: 5px;
    margin-top: 2px;
    float: right;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #000;
    line-height: 18px;
    opacity: .7;
    filter: alpha(opacity=70);
    height: 16px;
}

.dialog-box .close-btn:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
}

.dialog-box .btn-group {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0px;
    bottom: 15px;
}

.dialog-box .small .btn-group {
    bottom: 10px;
}

.dialog-box .btn {
    padding: 1px 12px;
    float: right;
    margin-right: 10px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

.dialog-box .web-cancel_button {
    border: 1px solid #ededed;
    color: #333;
}

.dialog-box .web-cancel_button:hover {
    background: rgba(0, 0, 0, .1);
}

.dialog-box .web-confirm {
    color: #fff;
    border: 1px solid;
    /*background-color: rgb(25, 118, 211);*/
}

.dialog-box .web-confirm:hover {
    /*background-color: rgba(25, 118, 211, .8);*/
    color: rgba(255, 255, 255, 0.8);
}

.tip-content {
    clear: both;
    padding: 10px 18px;
}

.dialog-box .small .tip-content {
    padding: 5px;
}

.dialog-box .msg-text {
    color: #606266;
    font-size: 14px;
    line-height: 30px;
    float: left;
    max-width: 80%;
    text-align: left;
}

.dialog-box .warning-img {
    float: left;
    width: 30px;
    height: 30px;
    margin-right: 5px;
}
.dialog-box .phone-msg-text .warning-img{
    float: none;
    width: 35px;
    height: 35px;
    display: block;
    margin: 5px auto;
}
/*移动端弹出框样式*/
.phone-bg {
    opacity: .4;
}

.phone-dialog {
    padding: 0px;
    border: none;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 15px;
}

.phone-msg-text {
    font-size: 16px;
    height: calc(100% - 45px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-msg-text .text-content {
    vertical-align: middle;
    display: inline-block;
    padding: 0px 10px;
}

.phone-msg-text .pos-span {
    height: 100%;
    width: 0px;
    vertical-align: middle;
    display: inline-block;
}

.phone-btn-group {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 40px;
}

.phone-btn-group:before {
    content: '';
    display: block;
    width: 100%;
    border-top: 1px solid #ddd;
    transform: scale(1, 0.7);
    position: absolute;
}

.phone-btn {
    font-size: 16px;
    text-align: center;
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
}

.dialog-box .phone-cancel_button {
    /*color: #FF4949;*/
    /*border-right: 1px solid #f4f4f4;*/
    border-right: 1px solid #ededed;
    color: #333;
}

/*.dialog-box .phone-confirm {*/
    /*color: #0074ff;*/
/*}*/

.video-message {
    position: relative;
    /*padding: 11px 12px !important;*/
}

.video-message .preview-video {
    height: 100px;
    width: 120px;
    background: #000;
    position: relative;
}

/*.video-message .preview-video-img {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    z-index: 1;*/
/*    content: '';*/
/*    display: block;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: url('../../assets/images/video-play.png');*/
/*    background-size: 33%;*/
/*    background-repeat: no-repeat;*/
/*    background-position: 45px;*/
/*    cursor: pointer;*/
/*}*/
.video-message .preview-video-img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-align: center;
    background: rgba(0, 0, 0, 0.27);
}
.video-message .preview-video-img .icon-video-preview{
    display: inline-block;
    color: rgba(255,255,255,0.8);
    font-size: 36px;
    margin: 30px 0 15px;
}
/*视频预览*/
#videoPlayerDiv {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
}

#videoPlayerDiv .video-box {
    width: 90%;
    height: 85%;
    margin: 34px auto;
    display: block;
    background: #000;
    position: relative;
    padding: 30px 0 0 0;
}

#videoPlayerDiv #video-player {
    width: 100%;
    height: 100%;
    display: block;
}

#videoPlayerDiv .move-close {
    height: 30px;
    opacity: .96;
    font-size: 32px;
    font-weight: bold;
    line-height: 32px;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    text-align: right;
    border-bottom: 1px solid #ffffff57;
    padding-right: 8px;
}

/*发送视频消息过程*/
.sending:before, .sending, .sending:after {
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    content: '';
    border-radius: 50%;
    -webkit-animation: sending 1.7s infinite ease-in-out;
    animation: sending 1.7s infinite ease-in-out;
}

.sending {
    top: 50%;
    left: 50%;
    margin: 1em 0 0 -.75em;
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.sending:before {
    left: -2.5em;
    animation-delay: -0.32s;
}

.sending:after {
    left: 2.5em;
}

@keyframes sending {
    0%, 100% {
        box-shadow: 0 -1.5em 0 -1.5em #fff;
    }
    50% {
        box-shadow: 0 -1.5em 0 0 #fff;
    }
}

.ie-tip-content {
    width: 400px;
    margin: 10px auto;
}

/*访客常见问题搜索框*/
.search-input {
    border: 1px solid #eee;
    /*background-color: #F7F7F7;*/
    background-color: #fff;
    height: 32px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 10px;
    padding-top: 3px;
}
.search-input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
    color: #CBCBCB;
    font-size: 12px;
    font-family: "Microsoft YaHei";
    /*padding-left: 40px;*/
}
/*.theme-new .search-input{*/
    /*background-color: #fff;*/
    /*border:1px solid #eee;*/
    /*border-radius:24px;*/
/*}*/
/*.theme-new .search-icon {*/
    /*margin-bottom: 10px;*/
/*}*/

.search-icon:before, .search-icon:after {
    display: inline-block;
    content: '';
    position: absolute;
    border: 1px solid #ccc;
}

.search-icon:before {
    width: 4px;
    top: 24px;
    /*left: 34px;*/
    right: 18px;
    transform: rotate(45deg);
}

.search-icon:after {
    width: 12px;
    height: 12px;
    /*left: 24px;*/
    right: 20px;
    top: 10px;
    border-radius: 50%;
}

/*常见问题 2110加分级*/
.question-tab-wrap{
    white-space: nowrap;
    overflow: hidden;
    margin: 0 auto;
}
.question-tab-move,.robot-question-tab-move,
.question-tab-move,.robot-picture-question-tab-move{
    transition: transform .3s;
    float: left;
}
.question-tab-list{
    height: 40px;
    line-height: 40px;
    min-width: 24px;
}
.picture-tab-list{
    /*height: 115px;*/
    /*line-height: 40px;*/
    /*min-width: 24px;*/
    /*margin: 0 5px 0 0;*/
}
.selected-tab .question-tab-list .tab-header-line{
    bottom: 0;
}
.question-tab-source{
    border: 5px solid #eee;
    border-left: 10px solid #eee;
    border-right: 10px solid #eee;
    word-break: break-all;
}
.question-tab-source:first-child{
    border-top: 10px solid #eee;
}
.question-tab-source:last-child{
    border-bottom: 10px solid #eee;
}
.question-tab-source div.clicked .icon-angle-right{
    transform: rotate(90deg);
    transition: all .3s ease;
}
.question-tab-source img,.cust-familiar-question-content img{
    max-width: 100% !important;
    max-height: 150px;
    border-radius: 10px;
}
.question-tab-source table{
    width: 100% !important;
}
.question-tab-source video,.chat-robot-message video{
    max-width: 100%;
    max-height: 200px;
}
.web-chat .robot-question-tab-move,
.web-chat .robot-picture-question-tab-move{
    width: 100%;
    overflow: auto;
}
.web-chat .robot-question-tab-move::-webkit-scrollbar,
.web-chat .robot-picture-question-tab-move::-webkit-scrollbar {
    display: none;
}
.web-chat .robot-question-tab-move > div,
.web-chat .robot-picture-question-tab-move > div {
    user-select: none;
}
/*机器人推荐问题 2113加分级*/
/*.theme-new .robot-question-wrapper{*/
/*    margin-left: -20px;*/
/*}*/
/*避免移动端创新版tab多时，右侧遮挡且无法滑动 yinjie 3.3*/
.theme-new.phone-chat .robot-question-wrapper{
    width: 105% !important;
}
.theme-normal.phone-chat .robot-question-wrapper{
    width: 110% !important;
}
.web-chat .robot-question-wrapper{
    width: 100%;
    /*min-width: 100%;*/
}

.robot-question-tab-wrap{
    white-space: nowrap;
    overflow: hidden;
}
/*.theme-normal.web-chat .robot-question-tab-wrap{*/
/*    margin: 0 auto;*/
/*}*/
.theme-new .robot-question-tab-wrap .question-tab-list{
    height: auto;
    line-height: normal;
    background-color: #fff;
    border-radius: 7px;
    padding: 9px 3px;
}
.question-tab-list-icon-wrap{
    display: inline-block;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    width: 24px;
    height: 23px;
}
.question-tab-list-icon{
    display: inline-block;
    background-color: #eee;
    border-radius: 50%;
    text-align: center;
    padding: 3px 3px;
}
/************************模块样式 start******************************/
/*主页部分*/
.status-stop {
    padding-top: 150px;
    text-align: center;
    color: #3D7EFF;
}

/*********聊天框 start*********/
.chat-content {
    height: 100%;
    display: flex;
    align-items: stretch;
}
/*.chat-content ul,.chat-content ol{*/
/*    padding-left: 20px;*/
/*}*/
.chat-content .my-chat-content ul,.chat-content .my-chat-content ul li{
    list-style: disc inside;
}
.chat-content .my-chat-content ol,.chat-content .my-chat-content ol li{
    list-style: decimal inside;
}
/*左边*/
.chat-content .chat-content-left {
    /*border-right: 1px solid #ccc;*/
    height: 100%;
    overflow: auto;
    position: relative;
    transition: all 0.3s linear;
    flex: 1;
    background-color: #f8f8f8;
}
.notifications-dialog-model{
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
}
.notifications-dialog{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.notifications-dialog-head{
    border-radius: 10px 10px 0 0;
    background-color: #F8F5F9;
    padding: 8px 12px;
}
.notifications-dialog-cont{
    padding: 8px 0 8px 12px;
}
.get-info {
    border-radius: 19px;
    background-color: #E8E8E8;
    padding: 6px 15px;
    margin-top: 2px;
    display: inline-block;
    color: #666;
    /*font-weight: bold;*/
    font-size: 13px;
}
.theme-new .get-info{
    background-color:transparent;
}
.theme-new .get-info .fa-angle-double-down{
    cursor:  text;
}
.chat-content .chat-content-left #get_more_message {
    padding: 8px 0;
    text-align: center;
    color: #666;
}

.chat-content .chat-content-left .show-message {
    background-color: #f8f8f8;
    overflow: hidden;
}
.chat-content .chat-content-left .show-message .msgScroll {
    min-height: 100.25%;
}

/*.chat-content-menu .circle {*/
    /*color: #555;*/
/*}*/

/*移动端和web端高度有区别*/
.web-chat .chat-content .chat-content-left .show-message {
    height: calc(100% - 124px);
}

.phone-chat .chat-content .chat-content-left .show-message::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.chat-content .chat-content-left .customer-inputting {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 140px;
    display: inline-block;
    background-color: #fbfbfb;
    border-top: 1px solid #ccc;
}

.web-chat-input {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: #fff;
}

/*选择按钮*/
.web-chat-input .chat-button-bar .select-btn {
    margin-left: 20px;
    margin-top: 5px;
    cursor: pointer;
    float: left;
}

/*输入框*/
.web-chat-input .chat-input-message {
    /*border-top:1px solid #ccc;*/
}

.web-chat-input .chat-input-message #inputMsg {
    height: 90px;
    overflow: hidden;
    resize: none !important;
    overflow-y: auto;
    padding-left: 20px;
    margin-right: 80px;
    position: relative;
    white-space: pre-line;
}

#inputMsg img {
    max-width: 52px;
}
.input-placeholder {
    position: relative;
}

.web-chat-input .chat-input-message .input-placeholder:before {
    content: "请输入内容或粘贴图片发送";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    text-indent: 20px;
    color: #b9b9b9;
}
.web-chat-input .chat-input-message .input-placeholder-en:before {
    content: "Please enter the content or paste the picture to send";
}
.theme-colorful .editable-div:empty::before{
    color: #c0c4cc;
    font-size: 14px;
    content:attr(placeholder);
}
.web-chat-input .chat-input-message .input-message-tip {
    height: 22px;
    line-height: 22px;
    font-size: 13px;
    color: rgba(0, 0, 0, .35);
}

/*按钮*/
.web-chat-input .chat-bottom-button {
    padding-top: 3px;
}

.message-enter-active, .message-leave-active {
    transition: all .5s ease;
}

.message-enter, .message-leave-to {
    height: calc(100% - 119px)
}

/********聊天框 end********/
/*转换时间样式 start*/
/*调整背景横线的左右距离*/
/*.my-chat-content span.tans-time:before {*/
    /*position: absolute;*/
    /*width: 25%;*/
    /*border-bottom: 1px dashed #ccc;*/
    /*left: 0;*/
    /*right: 0;*/
    /*margin: 0 auto;*/
    /*top: 9px;*/
    /*content: "";*/
/*}*/

/*.tans-time-text {*/
    /*!*background: #f1f6fc;*!*/
    /*position: relative;*/
    /*padding: 0 10px;*/
/*}*/

/*.my-chat-content span.tans-time:after {*/
    /*right: 160px;*/
/*}*/

/*转换时间样式 end*/
/********聊天消息 start********/
/*图文消息样式*/
.my-chat-content .graphic-message, .business-pane .graphic-message {
    position: relative;
    /*max-width: 300px;*/
    margin: auto;

}

.my-chat-content .graphic-message .graphic-item:first-child{
    border-radius: 10px 10px 0 0;
}

.my-chat-content .graphic-message .graphic-item:last-child{
    border-radius: 0 0 10px 10px;
    border-bottom: none;
}

.my-chat-content .graphic-message .graphic-item{
    margin: 0 auto;
    /*display: table;*/
    background-color: #fff;
    padding: 5px 0;
    /*width: 100%;*/
    width: 96%;
    /*max-width: 90%;*/
    /*min-width: 90%;*/
    border-bottom: 1px solid #ccc;
    box-shadow: 0 2px 4px 2px #ccc;
    min-height: 80px;
}
.business-pane .graphic-message .graphic-item{
    margin: 10px;
    padding: 5px 10px;
    min-height: 80px;
    background-color: #fff;
    border-radius: 4px;
}
.my-chat-content .graphic-message .graphic-item-show-more, .business-pane .graphic-message .graphic-item-show-more {
    max-width: 90%;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 5px 7px 0 #ccc;
    border-radius: 0 0 10px 10px;
    color: #6971f0;
}

.my-chat-content .graphic-message .graphic-cont, .business-pane .graphic-message .graphic-cont {
    /*display: table-cell;*/
    vertical-align: middle;
    position: relative;
    padding: 5px;
}

.my-chat-content .graphic-message .graphic-cont .graphic-filed, .business-pane .graphic-message .graphic-cont .graphic-filed {
    padding: 0px 12px;
    word-break: break-all;
    padding-bottom: 21px;
}

.my-chat-content .graphic-message .graphic-pic, .business-pane .graphic-message .graphic-pic {
    text-align: center;
    width: 80px;
    padding: 0px;
}

.my-chat-content .graphic-message .graphic-pic img, .business-pane .graphic-message .graphic-pic img {
    max-height: 70px;
    max-width: 70px;
    padding: 5px;
}

.my-chat-content .reply-content-div .graphic-message .graphic-pic img, .business-pane .reply-content-div .graphic-message .graphic-pic img {
    max-width: 70px !important;
}
/*.my-chat-content .graphic-message .graphic-btn {*/

/*}*/

.my-chat-content .graphic-message .send-graphic-btn, .business-pane .graphic-message .send-graphic-btn {
    border: 1px solid;
    padding: 6px 15px;
    border-radius: 4px;
    /*margin-top: 5px;*/
    /*margin-right: 15%;*/
    color: white;
    width: 60px;
    /*float: right;*/
    position: absolute;
    bottom: 0px;
    right: 10px;
}

.my-chat-content .graphic-message .info-tip, .business-pane .graphic-message .info-tip {
    background: #fff;
    text-align: center;
    margin: 0 10%;
    border-radius: 10px;
    height: 40px;
    line-height: 40px;
}
/*访客图文样式*/
.my-chat-content .graphic-message-style {
    /*max-width: 85% !important;*/
    max-width: 100% !important;
}
/*.web-chat .my-chat-content .graphic-message-style{*/
/*    max-width: 100% !important;*/
/*}*/
.business-pane .graphic-message-style {
    max-width: calc(100% - 120px) !important;
}
/*访客图文样式*/
.my-chat-content .style-temp-one-box, .business-pane .style-temp-one-box {
    min-width: 65%;
}

.my-chat-content .graphic-message.style-temp-two .graphic-cont .graphic-filed, .business-pane .graphic-message.style-temp-two .graphic-cont .graphic-filed {
    padding: 0px;
}

/*图文第二模版*/
.my-chat-content .style-temp-two .graphic-msg-header, .business-pane .style-temp-two .graphic-msg-header {
    color: #666;
    padding: 3px 15px;
    font-size: 13px;
    /*display: flex;*/
}

.my-chat-content .style-temp-two .graphic-msg-body, .business-pane .style-temp-two .graphic-msg-body {
    /*width:calc(100% - 30px);*/
    /*display: flex;*/
    margin: 5px;
    background-color: #fef4f5;
    color: #333;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.my-chat-content .style-temp-two .graphic-cont, .business-pane .style-temp-two .graphic-cont {
    color: #333;
}

.my-chat-content .style-temp-two .graphic-msg-body .graphic-pic {
    width: 80px;
    padding: 0px;
}
.business-pane .style-temp-two .graphic-msg-body .graphic-pic{
    margin: 0;
    text-align: left;
}
.my-chat-content .style-temp-two .graphic-msg-body .graphic-pic img {
    max-width:70px;
    max-height:70px;
    padding: 0px;
    margin: 5px;
}
.business-pane .style-temp-two .graphic-msg-body .graphic-pic img{
    max-width:70px;
    max-height:70px;
    padding: 0;
    margin: 5px 0;
}
.my-chat-content .style-temp-two .graphic-msg-body .graphic-filed, .business-pane .style-temp-two .graphic-msg-body .graphic-filed {
    padding: 0 5px 5px 12px;
}
.my-chat-content .style-temp-two .send-graphic-btn{
    position: static;
    margin-right: 10px;
}
/*第三版样式*/
.my-chat-content .style-temp-thr {

}
.my-chat-content .style-temp-thr .graphic-pic-bg {
    padding:0px;
}
.my-chat-content .style-temp-thr .graphic-pic-bg img{
    width: 100%;
    max-height: 70px;
}
.my-chat-content .graphic-message .style-temp-thr .graphic-cont .graphic-filed{
    padding: 0px 10px;
}
.style-temp-thr-box{
    min-width: 80%;
}
.my-chat-content .style-temp-thr .send-graphic-btn{
    position: static;
    margin-right: 10px;
}
/*消息样式*/
/*图片样式*/
.my-chat-content img{
    max-width: 100% !important;
    max-height: 150px;
    border-radius: 10px;
}
.picture-question-tab-wrap{
    white-space: nowrap;
    overflow: hidden;
}
.picture-question-tab-wrap .picture-question-class{
    height: 70px;
    width: 70px;
}

/*二维码样式*/
.my-chat-content .qrcode-tooltip {
    width: 150px;
    font-size: 12px;
    font-weight: bold;
    color: red;
}

.my-chat-content .mapClass img {
    max-width: none !important;
    max-height: none;
}

.receive, .reply {
    padding: 10px 0px;
    min-height: 35px;
    width: 100%;
}

.system {
    padding: 7px 0px;
}

.reply .left-name {
    padding-right: 10px;
}

.receive .right-name {
    padding-left: 10px;
    color: #666;
}

/*访客消息样式*/
.my-chat-content .reply-content-div {
    display: inline-block;
    position: relative;
    max-width: 65%;
    min-height: 20px;
    padding: 12px;
    margin: 8px 10px 0 10px;
    border-radius: 16px 0 16px 16px;
    color: #fff;
    word-wrap: break-word;
    text-align: left;
    line-height: 18px;
    word-break: break-all;
    font-size: 13px;
}
.theme-new .my-chat-content .reply-content-div{
    border-radius: 8px;
}
.theme-new .reply-content-div-message{
    float: none;
}
/*引用，撤回按钮*/
.my-chat-content .customer-icon-style {
    position: absolute;
    cursor: pointer;
    color: #333;
    width: 80px;
    text-align: center;
    font-size: 12px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 1px 5px 1px #e4e4e4;
    box-shadow: 0px 1px 5px 1px #e4e4e4;
    background-color: #fff;
    z-index: 1;
    float: right;
    /*margin-right: 3px;*/
    margin: 10px 0 0 0;
    top: -5px;
    right: calc(100% + 10px);
}
.my-chat-content .customer-icon-style.mid-top-style{
    margin-top: 10px;
}

.my-chat-content .quote-cus-bor .reply-content-div{
    max-width: 100%;
}
.my-chat-content .reply-content-div .message-text a {
    color: white;
    text-decoration: underline;
}

.my-chat-content .reply-content-div .message-text img {
    max-width: 100%;
}

.my-chat-content .reply-content-div .file-upload-pic-cus {
    display: inline-block;
    width: 33px;
    height: 33px;
    /*background-image: url("../../assets/images/file-white.png");*/
}

/*.agent-color {*/
    /*color: blue;*/
/*}*/

/*语音消息*/
/*语音播放*/
#voicePlayerDiv {
    display: none;
}

#voicePlayerDiv #voice-player {
}

.voice-box {
    height: 35px;
    padding: 0px !important;
    margin-top: 5px;
}

/*语音图标*/
.voice-box .voice-border {
    height: 23px;
    border-radius: 20px 10px 10px 20px;
    overflow: hidden;
    width: 25px;
    padding-left: 10px;
    cursor: pointer;
    float: left;
    padding-top: 4px;
}
/*.voice-box .voice-border .voice-icon {*/
/*    background-image: url(../../assets/images/voice_icon.png);*/
/*    background-repeat: no-repeat;*/
/*    background-size: 28px 25px;*/
/*    width: 40px;*/
/*    height: 25px;*/
/*    background-position: 10px -1px;*/
/*    border-radius: 50%;*/
/*    overflow: hidden;*/
/*    float: right;*/
/*    margin-right: 10px;*/
/*}*/
.voice-box .voice-border .icon-sound{
    width: 25px;
    height: 25px;
    /*border-radius: 50%;*/
    overflow: hidden;
    float: left;
    /*margin-right: 10px;*/
}

.voice-box .voice-time {
    float: left;
    display: inline-block;
    line-height: 25px;
    height: 34px;
    color: #fefefe;
    margin-left: 12px;
}

.voice-playing {
    animation: voicePlayer 1.5s cubic-bezier(0.97, 0.03, 0, 0.98) infinite;
}

@keyframes voicePlayer {
    0%, 100% {
        width: 35px;
    }
    50% {
        width: 7px;
    }
}

/*坐席消息*/
.my-chat-content .receive-content-div {
    display: inline-block;
    position: relative;
    max-width: 65%;
    min-height: 20px;
    padding: 12px;
    border-radius: 0 16px 16px 16px;
    margin: 8px 0 0 10px;
    word-wrap: break-word;
    text-align: left;
    background-color: #fff;
    line-height: 18px;
    word-break: break-all;
}
.my-chat-content .receive-content-div.receive-chat-portal-salutatory{
    padding: 0 !important;
    margin: 0 0 0 10px;
    background-color: transparent !important;
    box-shadow: none !important;
}
.my-chat-content .receive-content-div.receive-chat-portal-salutatory .chat-portal-salutatory-item{
    padding: 12px;
    margin: 8px 0 0 0;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 2px 4px 0 rgba(201,201,201,0.2);
}
.theme-normal .my-chat-content .receive-content-div.receive-chat-portal-salutatory .chat-portal-salutatory-item,
.theme-new .my-chat-content .receive-content-div.receive-chat-portal-salutatory .chat-portal-salutatory-item{
    border-radius: 0 16px 16px 16px;
    box-shadow: none;
}
/*坐席消息*/
.my-chat-content .chat-robot-message .receive-content-div {
    max-width: 87%;
}
.my-chat-content .receive-content-div .message-text img {
    max-width: 100%;
}
.my-chat-content .receive-content-div .message-text table{
    width: 100% !important;
}
.my-chat-content .receive-content-div .help-message-text {
    /*border-bottom: 1px solid #757575;*/
    /*padding: 5px 0 10px 0;*/
    /*margin-bottom: 10px;*/
    /*color: #757575;*/
    padding: 8px 10px;
    border-radius: 3px;
    background:rgba(248,248,248,1);
    color: #999;
    word-break: break-all;
}

.my-chat-content .receive-content-div .help-message-text .message-text {
    color: #333;
}
.theme-new .help-message-text,.theme-onePiece .help-message-text,.theme-colorful .help-message-text{
    border-left: 2px solid #999;
    margin: 12px 0 0 12px;
    word-break: break-all;
    max-width: 80%;
}
/*附件样式*/
.my-chat-content .attachment-style {
    /*padding-left: 0px;*/
    margin-right: 10px;
    padding: 11px 12px !important;
}
.my-chat-content .reply-content-div.attachment-style{
    padding: 23px 12px 23px 14px !important;
}
/*width-60 fl inline-block height-per100 text-c*/
.my-chat-content .attachment-style .attachment-type {
    width: 55px;
    height: 50px;
    margin-left: 12px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    display: inline-block;
    float: left;
}

.my-chat-content .attachment-style .attachment-name {
    margin-left: 74px;
    line-height: 25px;
    font-size: 13px;
    vertical-align: top;
}

/*访客附件*/
.reply-content-div .attachment-type {
    color: #fff;

}

.reply-content-div .attachment-name {
    color: #000;
}
.reply-content-div a[href^='tel:'],.receive-content-div a[href^='tel:']{
    display: inline-block;
    border-radius: 10px;
    padding: 4px 5px;
    background-color: #fff;
}
.receive-content-div a[href^='tel:']{
    background-color: #3899fc;
}
/*正在发送状态图*/
.uploading-file {
    margin-right: 10px;
    width: 80px;
    height: 60px;
    border-radius: 10px 0 10px 10px;
    background-color: #c7c7c7;
    /*background-image: url(../../assets/images/file-upload.png);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    display: inline-block;
    position: relative;
    border: 8px solid #fff;
    float:right;
}

.uploading-video {
    margin-right: 10px;
    width: 80px;
    height: 60px;
    border-radius: 10px 0 10px 10px;
    background-color: #c7c7c7;
    /*background-image: url(../../assets/images/uploading-video.png);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    display: inline-block;
    position: relative;
    border: 8px solid #fff;
}

.uploading-bg {
    height: 100%;
    width: 100%;
    background: #4e4d4d3b;
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px 0 10px 10px;
}

.uploading-box {
    width: 30%;
    max-width: 50px;
    padding-bottom: 30%;
    height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.uploading-img {
    width: 100%;
    padding-bottom: 100%;
    height: 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
}

.uploading-img:before, .sending-img:before {
    display: inline-block;
    content: "";
    width: 100%;
    /*height: 100%;*/
    left: 0;
    top: 2px;
    /*background-size: 100%;*/
    position: absolute;
    /*background-image: url(../../assets/images/jiazai.png);*/
    animation: rotate360 1.5s linear infinite;
    -webkit-animation: rotate360 1.5s linear infinite;
    -o-animation: rotate360 1.5s linear infinite;
    -moz-animation: rotate360 1.5s linear infinite;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*客服附件*/
.my-chat-content .receive-content-div .attachment-type {
    color: #000;
    background-color: #fff;
    margin-left: 0px;
}

.my-chat-content .receive-content-div .attachment-name .wx-title {
    width: 256px;
    font-size: 12px;
    position: absolute;
    bottom: -46px;
    left: -20px;
    color: #868788;
}
.my-chat-content .receive-content-div .attachment-name {
    color: #fff;
    margin-left: 64px;
    margin-right: 32px;
}

.my-chat-content .receive-content-div .attachment-load,.reply-content-div .attachment-load{
    position: absolute;
    right: -20px;
    bottom: -16px;
    text-align: center;
    cursor: pointer;
}
.reply-content-div .attachment-load{
    right: 12px;
    bottom: 13px;
}
.my-chat-content .receive-content-div .attachment-load .iconfont{
    color: #fff !important;
}
/*.my-chat-content .attachment-style .file-upload-pic-agent {*/
/*    display: inline-block;*/
/*    width: 33px;*/
/*    height: 33px;*/
/*    background-image: url(../../assets/images/file-black.png);*/
/*}*/

/*聊天知识*/
.chat-knowledge-item {
    display: inline-block;
    margin-left: 10px;
    margin-top: 10px;
    position: relative;
    max-width: 70%;
    min-height: 20px;
    padding: 8px 10px 8px 15px;
    word-wrap: break-word;
    text-align: left;
    background-color: #fff;
    border-radius: 10px;
}

.chat-knowledge-item .chat-knowledge-item-content {
    position: relative;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}
.chat-knowledge-item .chat-knowledge-item-content span{
    white-space: normal;
}
.theme-new .chat-knowledge-item .chat-knowledge-item-content{
    border-bottom: none;
}
.chat-knowledge-item-content .fa-circle{
    transform: scale(0.5);
}

/*已读消息样式*/
.already-message {
    width: 45px;
    height: 20px;
    padding: 15px 5px;
    display: inline-block;
    /*vertical-align: 14px;*/
}

/*重发消息*/
.re-send-message {
    position: absolute;
    top: -18px;
    color: #000;
    left: -10px;
}

.re-send-icon {
    position: absolute;
    left: -22px;
    top: 21px;
    cursor: pointer;
}

.re-send-icon:before, .re-send-icon:after {
    position: absolute;
    content: '';
}

.re-send-icon:before {
    width: 13px;
    height: 12px;
    left: 3px;
    top: 0px;
    border: 2px solid #151516;
    border-right: 2px solid transparent;
    border-radius: 50%;
}

.re-send-icon:after {
    width: 4px;
    height: 4px;
    left: 13px;
    top: 0px;
    border-top: 2px solid black;
    border-right: 2px solid black;
    transform: rotate(90deg);
}

/*系统消息*/
/*.system-time {*/
    /*padding-bottom: 8px;*/
/*}*/

.my-chat-content .system-content-div {
    display: inline-block;
    position: relative;
    max-width: 70%;
    min-height: 20px;
    font-size: 13px;
    color: #666;
}
.my-chat-content .system-content-div .queue_count{
    font-size: 14px ;
    color: #d40000;
    font-weight: bold
}

.my-chat-content .system-content-div .system-content {
    padding: 6px 15px;
    background: #E8E8E8;
    border-radius: 15px;
    max-width: 100%;
    word-wrap: break-word;
}
.theme-new .my-chat-content .system-content-div .system-content{
    background-color: transparent;
}
/*219服务提示*/
.system-server-img{
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
/*导航菜单*/
.my-chat-content .chat-content-menu .select-col {
    color: #ddd;
}

@media screen and (min-width: 950px) {
    .graphic-message .graphic-cont .graphic-filed {
        /*margin-right: 18%;*/
    }

    .reply-content-div .graphic-message .graphic-cont .graphic-filed {
        margin-right: 0;
    }

    .graphic-message .graphic-btn {
        position: absolute;
        width: 18%;
        /*height: 100%;*/
        right: 0%;
        bottom: 0;
    }

    .graphic-message .send-graphic-btn {
        position: absolute;
        bottom: 35%;
        right: 15%;
    }
}

@media screen and (max-width: 700px) {
    .chat-content .chat-content-left {
        border-right: none;
    }
    .chat-knowledge-item-content:after {
        margin-top: 5px;
    }

    .my-chat-content .receive-content-div {
        padding: 12px 12px 12px 14px;
        font-size: 13px;
    }
    .theme-colorful .my-chat-content .receive-content-div{
        font-size: 14px;
    }

    .receive .right-name {
        font-size: 12px;
        /*padding-left: 23px;*/
    }

    .my-chat-content .attachment-style {
        padding-left: 0px;
    }

    .my-chat-content .system-content-div {
        font-size: 12px;
        padding: 7px 0;
    }

    .web-chat .receive, .web-chat .reply {
        padding: 6px 0px;
    }

    .my-chat-content .graphic-message .send-graphic-btn {
        padding: 3px 10px;
        width: 50px;
        font-size: 12px;
    }

    .graphic-message .graphic-cont .graphic-filed {
        font-size: 12px;
    }
    /*.theme-new .search-input{*/
        /*border: 1px solid transparent;*/
        /*background-color: #F7F7F7;*/
        /*border-radius:24px;*/
    /*}*/
}

/********聊天消息 end********/

/********右边 start********/
/*经典*/
.tab-header {
    height: 54px;
    border-bottom: 1px solid #ccc;
}

.tab-header .tab-list {
    /*width: 50%;*/
    /*text-align: center;*/
    /*line-height: 55px;*/
    background: #fff;
}

.tab-header .tab-header-title {
    height: 53px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/*.tab-header .selected-tab .tab-header-title {*/
    /*border-bottom: 2px solid;*/
/*}*/
.selected-tab .tab-header-line{
    bottom: -3px;
    left: 0;
    right: 0;
    margin: auto;
    width: 24px;
    height: 4px;
}
.tab-content {
    height: calc(100% - 55px);
    background-color: #fff;
}

/*.collapse-header-list .company-card,.collapse-header-list .customer-familiar-question{*/
    /*max-height: 40vh;*/
/*}*/
/********右边 end********/

/********公司名片start********/
.company-header-center .company-card-img-border {
    margin-bottom: 50px;
    transform: scale(1.5);
    margin-top: 100px;
}

.company-header-center .company-card-name {
    font-size: 26px;
    font-weight: bold;
}

.company-card-img-border {
    width: 100px;
    height: 100px;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

.company-card-img {
    width: 80px;
    height: 80px;
    margin-top: 12px;
}

.theme-border-i{
    border: 6px solid #FBC1C8;
    position: absolute;
}
.theme-border-o{
    border: 8px solid #FBC1C8;
    position: absolute;
}

.theme-border-i {
    width: 80px;
    height: 80px;
    opacity: 0.19;
    left: 4px;
    top: 7px;
}

.theme-border-o {
    opacity: 0.06;
    width: 90px;
    height: 90px;
    left: -3px;
    top: 0;
}

.company-card-name {
    font-size: 20px;
    color: #bbb;
}

.company-card-content {
    padding: 20px;
    word-break: break-all;
}

.company-card-content img,.company-card-content video{
    max-width: 98%;
}

/********公司名片end********/

/********访客常见问题start********/
.customer-familiar-question .cust-familiar-question-icon {
    border: 1px solid #ccc;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
    vertical-align: -3px;
    line-height: 16px;
    text-align: center;
    font-size: 14px;
    margin-left: 15px;
    float: left;
    color: #999;
}
.theme-new .customer-familiar-question .cust-familiar-question-icon{
    background-color: #999;
    color: #fff;
}
.cust-familiar-question-list {
    float: left;
}

.cust-familiar-question-content-icon {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
    line-height: 14px;
    text-align: center;
    border: 1px solid;
    font-size: 12px;
    margin-left: 15px;
    /*color: #fff;*/
    /*background: #98b5f7;*/
    vertical-align: middle;
    text-indent: 1px;
}
.theme-new .cust-familiar-question-content-icon{
    display: none;
}
.customer-familiar-question-list {
    padding: 15px 0;
    margin: 0 10px;
    border-radius: 7px;
    color: #fff;
}
.theme-new .customer-familiar-question-list{
    padding: 5px 0;
    margin: 0;
    border-radius: 0;
}
.customer-familiar-question-item{
    font-size: 13px;
    padding: 15px 0;
    margin: 0 10px;
    color: #656565;
    border-bottom: 1px solid #f7f7f7;
}
.theme-new .customer-familiar-question-item{
    margin: 0;
    padding: 10px 0;
    border-bottom: 0;
}
.cust-familiar-question-content {
    vertical-align: top;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 52px);
    word-break: break-all;
}
.cust-familiar-question-content li{
    list-style: unset;
}
/*.cust-familiar-question-content * {*/
    /*max-width: calc(100% - 52px);*/
/*}*/
.theme-new .cust-familiar-question-content{
    margin-left: 42px;
}
    /********访客常见问题end********/

/********对接页面start********/
.interface-page {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    bottom: 0px;
    z-index: 99;
    overflow: hidden;
}
.interface-page.interface-navigate{
    top: 60px;
}
.theme-onePiece .interface-page.interface-navigate{
    top: 0;
}
.interface-page .interface-header {
    height: 35px;
    color: #fff;
}

.interface-header-button {
    /*height: 28px;*/
    /*width: 28px;*/
    position: absolute;
    left: 5px;
    bottom: 55px;
}
.interface-header-button.interface-navigate{
    top: 50vh;
    left: 80vw;
}
.interface-header-button .icon-return-round{
    font-size: 50px;
    color: rgba(53, 132, 255,0.8);
}
/*.interface-header-button.text-c:before, .interface-header-button.text-c:after {*/
/*    content: '';*/
/*    display: block;*/
/*    width: 10px;*/
/*    height: 10px;*/
/*    border: 1px solid #fff0;*/
/*    transform: rotate(-45deg);*/
/*    border-top: 1px solid #fff;*/
/*    border-left: 1px solid #fff;*/
/*    top: 8px;*/
/*    left: 6px;*/
/*    position: absolute;*/
/*}*/

/*.interface-header-button.text-c:after {*/
/*    left: 15px;*/
/*}*/

.interface-page .interface-header .interface-header-name {
    line-height: 35px;
    font-size: 16px;
    letter-spacing: 0px;
    text-indent: 5px;
    display: inline-block;
}

.interface-page .interface-header .web-style {
    font-size: 22px;
    letter-spacing: 5px;
}

.interface-page .interface-header .interface-back-btn {
    right: 15px;
    top: 8px;
    /*background-size: 17px;*/
    /*background-image: url(../../assets/images/close.png);*/
    width: 18px;
    height: 17px;
}

.interface-page .interface-iframe {
    position: absolute;
    right: 0px;
    left: 0px;
    bottom: 0px;
    /*允许内部区域独立滚动，该部分只适用移动端*/
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    background-color: #fff;
}
.interface-none {
    top: 0px;
}

.interface-blank {
    top: 35px;
}

.interface-flex {
    z-index: -1;
}

/********对接页面end********/

/********满意度 start********/
.satisfaction-option {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;  /*要高于窗口通知的10*/
    width: 100%;
    height: 100%;
    min-height: 360px;
    /*text-align: center;*/
}

.satisfaction-option.notes-focus {
    min-height: unset;
}

.satisfaction_temp_white {
    width: 30vw;
    /*height: 50vh;*/
    background-color: #fff;
    position: absolute;
    top: 10vh;
    left: 38vw;
    /*margin-left: -150px;*/
    /*text-align: center;*/
    border-radius: 10px;
    /*margin-top: -125px;*/
    /*padding-bottom: 50px;*/
}
@media screen and (max-width: 1200px){
    .satisfaction_temp_white {
        width: 325px;
        /*height: 50vh;*/
        background-color: #fff;
        position: absolute;
        top: 10vh;
        left: 50%;
        margin-left: -162px;
        /*text-align: center;*/
        border-radius: 10px;
        /*margin-top: -125px;*/
        /*padding-bottom: 50px;*/
    }
    .theme-onePiece .satisfaction_temp_white,.theme-colorful .satisfaction_temp_white{
        width: 100vw;
        top: auto;
        left: 0;
        bottom: 0;
        margin-left: 0;
        border-radius: 10px 10px 0 0;
    }
}

.satisfaction-option.notes-focus .satisfaction_temp_white {
    bottom: 0px;
    margin-top: auto;
    top: auto;
}

.satisfaction-option.more-bottom .satisfaction_temp_white {
    bottom: 75px;
}

.satisfaction-header-back {
    /*background-size: 14px;*/
    /*background-image: url(../../assets/images/closeTab.png);*/
    width: 18px;
    height: 17px;
    /*margin-left: 261px;*/
    /*margin-top: 3px;*/
    position: absolute;
    right: 12px;
    top: 18px;
}

.show_satisfaction_text {
    /*font-size: 1.2em;*/
    /*position: absolute;*/
    /*left: 16px;*/
}

.time_out_satisfaction {
    font-size: 1.5em;
    font-weight: 500;
}

.show_satisfaction a {
    height: 30px;
    font-size: 16px;
    line-height: 30px;
}

.show_satisfaction_div li a {
    color: #23a1e8;
}

.add-border {
    border: 1px solid;
}

.interface-back-btn {
    right: 15px;
    top: 8px;
    /*background-size: 17px;*/
    /*background-image: url(../../assets/images/closeTab.png);*/
    width: 18px;
    height: 17px;
    margin-left: 261px;
}

.satisfy-emoji-class {
    width: 100px;
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
    font-size: 0;
}
.theme-normal .satisfy-emoji-class{
    min-height: 80px;
}

.satisfaction_option {
    font-size: 12px;
    line-height: 20px;
    color: #999;
}

.secondTags {
    width: 50%;
    float: left;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
}

.satisfy-icon {
    background: url(../image/satisfy-emoji-new.png) no-repeat;
    width: 68px;
    height: 58px;
    display: inline-block;
}

.satisfy-icon-laugh {
    background-position: -5px -4px;
}

.satisfy-icon-laugh-confirm,.satisfy-icon-laugh:hover {
    background-position: -5px -74px;
}

.satisfy-icon-smile {
    background-position: -74px -4px;
}

.satisfy-icon-smile-confirm,.satisfy-icon-smile:hover {
    background-position: -74px -74px;
}

.satisfy-icon-calm {
    background-position: -143px -4px;
}

.satisfy-icon-calm-confirm,.satisfy-icon-calm:hover {
    background-position: -143px -74px;
}

.satisfy-icon-sad {
    background-position: -214px -4px;
}

.satisfy-icon-sad-confirm,.satisfy-icon-sad:hover {
    background-position: -214px -74px;
}

.satisfy-icon-angry {
    background-position: -283px -4px;
}

.satisfy-icon-angry-confirm,.satisfy-icon-angry:hover {
    background-position: -283px -74px;
}

.second-content {
    border-bottom: 1px dashed #eee;
}
.theme-new .second-content {
    border-bottom: 1px solid #eee;
    margin: 20px 10px 0;
    font-size: 12px;
}
.second-content-line{
    position: absolute;
    background-color: #fff;
    padding: 0 15px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.second-content-textarea{
    width: 86%;
    resize: none;
    border: 1px solid #D1DBE2;
    border-radius: 4px;
    height: 40px;
    padding: 10px;
    margin: 0 auto;
}
.second-content .second-Tags {
    padding: 2px 0;
}

.second-content .second-Tags span {
    padding: 0px 3px;
    border-radius: 3px;
    box-sizing: border-box;
}

.chose_btn {
    border-top: 1px solid #ccc;
    text-align: center;
    padding: 5px 0px;
    font-size: 0px;
}

.close, .refresh {
    box-sizing: border-box;
    color: #000;
}

.satisfaction_bg_shadow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.5);
    filter: alpha(opacity=80);
}

/********满意度end********/
/******** 表情 start******/
.emoji-list {
    display: none;
    z-index: 999;
    height: auto;
    min-height: 150px;
    max-height: 260px;
    left: 10px;
    right: 15px;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 0px;
    bottom: calc(100% + 10px);
    border-radius: 5px;
    -webkit-box-shadow: 0 6px 17px 0px rgba(0, 0, 0, .2), 0 4px 6px rgba(0, 0, 0, .15);
    box-shadow: 0 6px 17px 0px rgba(0, 0, 0, .2), 0 4px 6px rgba(0, 0, 0, .15);
    padding: 10px 0 35px 0;
}

.emoji-list.scrollBar-inner::-webkit-scrollbar {
    width: 3px;
}

.emoji-list:after {
    content: "";
    /*display: inline-block;*/
    position: absolute;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 10px;
    height: 10px;
    bottom: -6px;
    left: 12px;
    transform: rotateZ(45deg);
    background: #fff;
    display: none;
}

.emoji-list .emoji-control {
    padding: 1px 2px;
}
.emoji-content{
    max-height: 260px;
    padding: 0 10px;
}
.theme-colorful.phone-chat .emoji-content{
    max-height: 120px;
}
.emoji-content.scrollBar-inner::-webkit-scrollbar{
    width: 3px;
}
.emoji-tab{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 0;
}
.emoji-tab-item{
    width: 50px;
    font-size: 20px;
    text-align: center;
    padding-top: 5px;
}
.emoji-tab-item img{
    width: 20px;
    height: 20px;
}
.emoji-content img{
    width: 48px;
    height: 48px;
}
/******** 百度地图*/
.BMap_cpyCtrl, .anchorBL {
    display: none;
}

.my-chat-content .information-collection-message {
    min-width: 200px;
    /*border: 1px solid #ccc;*/
}
.map-message-box{
    width: 280px;
    min-height: 217px;
}
@media screen and (max-width: 480px) {
    .map-message-box{
        width: auto;
    }
}
.theme-new .map-message-box,.theme-new .img-box{
    color: #333;
    padding: 0;
}
.theme-new .map-message-box .map-head{
    background-color: #fff;
    padding: 10px 10px 1px;
    border-radius: 10px 10px 0 0;
}
.my-chat-content .information-collection-img img {
    width: 70px;
    height: 70px;
    margin-left: 3px;
    border: 1px solid #ccc;
}
/*web 端地图样式*/
.chat-content-left .map-panel {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 1;
}

.chat-content-left .business-pane-modal{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(0,0,0,0.5);
}
.chat-content-left .business-pane {
    position: fixed;
    z-index: 101;
    bottom: 0;
    width: 100%;
    background-color: #EDF0F7;
    border-radius: 20px 20px 0 0;
    /*box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.06);*/
    color: #666;
    /*padding-bottom: 10px;*/
}
.web-chat .chat-content-left .business-pane-modal{
    left: 16%;
    right: 16%;
    top: calc(5vh + 60px);
    bottom: 5vh;
}
.web-chat .chat-content-left .business-pane{
    left: 16%;
    right: 16%;
    bottom: 5vh;
    width: 68vw;
}
.web-chat .business-pane .graphic-message{
    width: 68vw;
    /*height: calc(100vh - 360px);*/
    height: 40vh;
    margin: 0 auto;
}
.phone-chat .business-pane .graphic-message{
    /*height: calc(100vh - 218px);*/
    height: 50vh;
}
/*.phone-chat .business-pane .graphic-message.has-input{*/
/*    height: calc(100vh - 375px);*/
/*}*/
/*.phone-chat.theme-onePiece .business-pane .graphic-message{*/
/*    height: calc(100vh - 160px);*/
/*}*/
/*.phone-chat.theme-onePiece .business-pane .graphic-message.has-input{*/
/*    height: calc(100vh - 320px);*/
/*}*/
.chat-content-left .map-panel .web-map-search-input {
    height: 24px;
    border: none;
    box-shadow: 1px 1px 5px 1px #ccc;
    padding: 2px 8px;
    border-radius: 3px;
    position: absolute;
    left: 11px;
    top: 10px;
    z-index: 1;
}

/*地图按钮样式*/
.chat-content-left .map-panel .map-select-btn {
    z-index: 99;
    position: absolute;
    top: 10px;
    right: 11px;
}

.chat-content-left .map-panel .map-select-btn .map-btn {
    width: 53px;
    height: 24px;
    border: none;
    border-radius: 5px;
    color: #fff;
    background-color: #ccc;
}
/*地图搜索列表样式*/
.chat-content-left .map-panel .map-select-list {
    z-index: 1;
    position: absolute;
    left: 11px;
    top: 40px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    max-height: 300px;
    overflow: auto;
}

.chat-content-left .map-panel .map-select-item {
    padding: 5px;
    display: block;
    color: #545454;
    font-size: 14px;
}

/*
 *   引用撤回样式
 *   2.1.7 zhouting
 */
.my-chat-content .agent-quote-border .agent-quote-style {
    float: left;
    cursor: pointer;
    color: #333;
    font-size: 12px;
    width: 80px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 2px;
    -webkit-box-shadow: 0px 1px 5px 1px #e4e4e4;
    box-shadow: 0px 1px 5px 1px #e4e4e4;
    background-color: #fff;
    margin-left: 3px;
}

.my-chat-content .agent-quote-border {
    padding-top: 16px;
}

.my-chat-content .agent-quote-area {
    height: 100%;
}
.my-chat-content .agent-quote-area video{
    width: 200px;
    max-height: 200px;
}
.my-chat-content .agent-quote-border .agent-quote-style:hover {
    background-color: #d8d8d8;
}

.my-chat-content .customer-icon-box {
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
}
.my-chat-content .customer-icon-box:hover {
    background-color: #d8d8d8;
}
/*引用撤回按钮*/
.chat-quote-btn,.chat-withdraw-btn {
    background-repeat: no-repeat;
    background-size: 14px;
    display: inline-block;
    width: 14px;
    height:14px;
    vertical-align: -2px;
    margin-right: 8px;
}
/*.chat-quote-btn{*/
/*    background-image: url("../../assets/images/chat-quote-btn.png");*/
/*}*/
/*.chat-withdraw-btn{*/
/*    background-image: url("../../assets/images/chat-withdraw-btn.png");*/
/*}*/
.my-chat-content .border-t {
    border-top: 1px solid #ccc;
}
.my-chat-content .border-t-e{
    border-top: 1px solid #eee;
}

.my-chat-content .receive-box {
    /*height: 90%;*/
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/*引用文字样式-经典版*/
.reply-content-div .help-message-text-a {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius:3px;
    background-color: rgba(255,255,255,0.2);
}
/*引用文字样式-创新版*/
.theme-new .help-message-text-a,.theme-onePiece .help-message-text-a,.theme-colorful .help-message-text-a {
    border-right: 2px solid;
    margin: 8px 12px 0 0;
    padding-right: 5px;
    max-width:65%;
    background-color: rgba(255,255,255,0.2);
}

.quote-cus {
    padding: 0px !important;
    margin: 0px !important;
    max-width: 100% !important;
}

.quote-cus-bor {
    padding: 0 0 20px 1px !important;
    max-width: 65% !important;
    float: right;
}

/*创新版公司简介与常见问题悬浮*/
.new-template-right{
    position: absolute;
    top: 20px;
    right: 0;
    display: none;
}
.new-template-tab{
    width: 30px;
    border-radius: 10px 0 0 10px;
}
.long-len-text{
    padding-top: 1px;
    line-height: 18px;
}
/*.company-block,.company-white,.question-black,.question-white{*/
/*    background-size: 22px;*/
/*    width: 22px;*/
/*    height: 22px;*/
/*    display: inline-block;*/
/*}*/
/*.company-block{*/
/*    background-image: url(../../assets/images/219/company-black.png);*/
/*}*/
/*.company-white{*/
/*    background-image: url(../../assets/images/219/company-white.png);*/
/*}*/
/*.question-black{*/
/*    background-image: url(../../assets/images/219/question-black.png);*/
/*}*/
/*.question-white{*/
/*    background-image: url(../../assets/images/219/question-white.png);*/
/*}*/
.onePiece-card,.web-chat.theme-onePiece .onePiece-card{
    display: none;
}
@media screen and (max-width : 900px){
    .new-template-right{
        display: block;
    }
    .onePiece-card{
        display: inline-block;
    }
    /*.theme-new .cust-familiar-question-list{*/
        /*margin-left: 42px;*/
    /*}*/
}
/*创新版头像*/
.theme-new .head-portrait,.theme-new .head-portrait img,.theme-new .head-portrait .icon-head-portrait-visitors{
    width: 38px;
    height: 38px;
    border-radius: 50%;
}
.theme-new .head-portrait.system-server-img{
    width: 45px;
    height: 45px;
    background-color: #fff !important;
}
.theme-new .head-portrait.system-server-img img{
    position: absolute;
    top: 4px;
    right: 3px;
}
/*创新版右侧tab*/
.collapse-header-list .collapse-header-img{
    width: 16px;
    height: 16px;
}
.collapse-header-flag .icon-angle-double-down{
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.show-company-card,.show-customer-question{
    top: 0;
    bottom: 0;
    position: fixed;
    right: 0;
    background: #fff;
    z-index: 12;  /*高于窗口通知的11*/
    left: 0;
}
.show-company-card .icon-return-round,.show-customer-question .icon-return-round{
    font-size: 30px;
    position: absolute;
    top: 13px;
    left: 20px;
    color: #2190FB;
}
.show-company-card .tab-title-text,.show-customer-question .tab-title-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px 0 50px;
}
/*.show-customer-question .cust-familiar-question-icon{*/
    /*display: none;*/
/*}*/
/*.show-customer-question .search-input{*/
    /*border-radius: 20px;*/
/*}*/
/*创新版满意度*/
.satisfaction-option-Message .satisfy-emoji-class{
    width: 80px;
    min-height: 60px;
}
.satisfaction-option-Message .satisfy-icon{
    width: 40px;
    height: 30px;
    background-size: 220px;
}
.satisfaction-option-Message .satisfy-icon-laugh {
    background-position: -4px -8px;
}
.satisfaction-option-Message .satisfy-icon-laugh-confirm,.satisfaction-option-Message .satisfy-icon-laugh:hover{
    background-position: -4px -52px;
}
.satisfaction-option-Message .satisfy-icon-smile {
    background-position: -49px -7px;
}
.satisfaction-option-Message .satisfy-icon-smile-confirm,.satisfaction-option-Message .satisfy-icon-smile:hover {
    background-position: -49px -51px;
}
.satisfaction-option-Message .satisfy-icon-calm {
    background-position: -91px -6px;
}
.satisfaction-option-Message .satisfy-icon-calm-confirm,.satisfaction-option-Message .satisfy-icon-calm:hover {
    background-position: -91px -50px;
}
.satisfaction-option-Message .satisfy-icon-sad {
    background-position: -134px -7px;
}
.satisfaction-option-Message .satisfy-icon-sad-confirm,.satisfaction-option-Message .satisfy-icon-sad:hover{
    background-position: -134px -51px;
}
.satisfaction-option-Message .satisfy-icon-angry {
    background-position: -180px -6px;
}
.satisfaction-option-Message .satisfy-icon-angry-confirm,.satisfaction-option-Message .satisfy-icon-angry:hover{
    background-position: -180px -50px;
}
@media screen and (max-width: 700px) {
    .web-chat .chat-content .chat-content-left .show-message {
        height: calc(100% - 76px) !important;
    }

    .web-chat-input .chat-button-bar .select-btn {
        margin-left: 14px;
        margin-top: 4px;
    }
    /*市场部需求，web端小窗口加大输入区域高度 3.6.1 yinjie*/
    /*.web-chat-input .chat-input-message #inputMsg {*/
    /*    height: 46px;*/
    /*}*/

    .web-chat .web-chat-input {
        border-top: 1px solid #dddded;
        background-color: #fff;
    }
    .theme-new .width-per90{
        width: 85%;
    }
    .my-chat-content .agent-quote-border .agent-quote-style,.my-chat-content .customer-icon-style{
        width: 60px !important;
    }
    /*移动端地图适配*/
    .mapdetail{
        width: 100% !important;
    }
    .mapClass{
        width: 178px;
    }
    .theme-new .second-content-line{
        font-size: 10px;
    }
}

/*大号文字模式*/
#app.big-font-size .web-chat,#app.big-font-size .web-chat .server-name,#app.big-font-size .my-chat-content .system-content-div,
#app.big-font-size .chat-knowledge-item .chat-knowledge-item-content,#app.big-font-size .font13,#app.big-font-size .get-info,
#app.big-font-size .my-chat-content .receive-content-div,#app.big-font-size .my-chat-content .reply-content-div,
#app.big-font-size .get-info .icon-angle-double-down,#app.big-font-size .system-time,#app.big-font-size .receive .right-name,
#app.big-font-size .phone-chat-input-form .input-style,#app.big-font-size .font14,#app.big-font-size .font11,#app.big-font-size .artificial-text{
    font-size: 16px;
}
#app.big-font-size .web-chat .server-company{
    font-size: 14px;
}
/*折叠按钮*/
.fold{
    transform: rotate(180deg);
    display: inline-block;
}
#linkMark{
    display: none;
}
/*解决富文本链接加粗的问题 3.4 yinjie*/
.amazing-a small,.font-per100{
    font-size: 100%;
}
/*回到最新位置*/
.scroll-to-bottom{
    position: absolute;
    z-index: 10;
    bottom: 80px;
    right: 20px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(190,197,201,0.25);
    padding: 10px 10px 8px 10px;
}
.has-interface.scroll-to-bottom{
    bottom: 114px;
}

.ios-full-screen.scroll-to-bottom{
    bottom: 100px;
}
.web-scroll-bottom.scroll-to-bottom{
    bottom: 146px;
}
.show-phone-line.scroll-to-bottom{
    bottom: 263px;
}

.ios-full-screen.scroll-to-bottom.has-interface{
    bottom: 134px;
}
.web-scroll-bottom.scroll-to-bottom.has-interface{
    bottom: 180px;
}
.show-phone-line.scroll-to-bottom.has-interface{
    bottom: 297px;
}
/******领航版  开始******/
/*信息流的顶部信息图片*/
.title-message img{
    width: 64px;
    height: 64px;
    margin: 0 12px 12px 12px;
    border-radius: 50%;
    background-color: #fff;
}
/*去掉气泡框上边的机器人名称，调整上边距*/
/*.theme-onePiece .my-chat-content .chat-robot-message .receive-content-div{*/
/*    margin: 0 0 0 10px;*/
/*}*/
/*机器人头部消息后边的气泡消息 我是智能机器人，很高兴为您服务!*/
.theme-onePiece .chat-robot-message .receive{
    padding-top: 0;
}
/*机器人热门问题tab样式*/
.theme-onePiece .question-tab-list-onePiece,.theme-colorful .question-tab-list-onePiece{
    margin-right: 8px;
    padding: 3px 10px;
    border-radius: 16px;
    border: 1px solid #D1DBE2;
    display: inline-block;
    white-space: nowrap;
    height: unset;
    line-height: normal;
}
.theme-colorful .question-tab-list-onePiece{
    background-color: #fff;
    border: 1px solid #D0D0D0;
    color: #999;
}
/*机器人热门问题每一条*/
.theme-onePiece .chat-knowledge-item .chat-knowledge-item-content,
.theme-colorful .chat-knowledge-item .chat-knowledge-item-content{
    border-bottom: none;
    padding: 8px 0;
}
.theme-colorful .chat-knowledge-item .chat-knowledge-item-content{
    font-size: 14px;
}
.theme-onePiece .picture-tab-list,.theme-colorful .picture-tab-list{
    display: inline-block;
    width: 80px;
    height: auto;
    line-height: unset;
    min-width: 24px;
    margin: 0 12px 0 0;
}
.theme-colorful .picture-tab-list{
    width: 80px;
    text-align: center;
    background-color: #fff;
    border-radius: 4px;
    padding: 8px 0;
}
.theme-onePiece .picture-tab-list.question-svg{
    width: 66px;
    margin: 0;
}
.theme-onePiece .picture-question-tab-wrap .picture-question-class{
    width: 65px;
    height: 65px;
    box-shadow: 0 2px 4px 0 rgba(201,201,201,0.2);
}
.theme-onePiece .picture-question-tab-wrap,.theme-colorful .picture-question-tab-wrap{
    white-space: nowrap;
    overflow: hidden;
}
/*访客气泡框*/
.theme-onePiece .my-chat-content .reply-content-div,.theme-colorful .my-chat-content .reply-content-div{
    padding: 10px 22px 10px 12px;
    border-radius: 20px 20px 0 20px;
    box-shadow: 0 2px 4px 0 rgba(201,201,201,0.2);
    max-width: 70%;
}
.theme-colorful .my-chat-content .reply-content-div{
    border-radius: 12px 12px 0 12px;
    font-size: 14px;
}
.theme-onePiece .my-chat-content .receive-content-div,.theme-colorful .my-chat-content .receive-content-div{
    padding: 10px 22px 10px 12px;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 2px 4px 0 rgba(201,201,201,0.2);
}
.theme-colorful .my-chat-content .receive-content-div{
    border-radius: 0 12px 12px 12px;
}
.theme-onePiece .receive,.theme-onePiece .reply,.theme-colorful .receive,.theme-colorful .reply{
    padding: 0;
}
/*系统消息*/
.theme-onePiece .onePiece-system-message .system-content-div,.theme-colorful .onePiece-system-message .system-content-div{
    margin-left: 10px;
    color: #333;
}
.theme-onePiece .onePiece-system-message .system-content-div .system-content,
.theme-colorful .onePiece-system-message .system-content-div .system-content{
    font-size: 13px;
    margin-top: 5px;
    padding: 10px 12px;
    border-radius: 0 20px 20px 20px;
    word-wrap: break-word;
    text-align: left;
    background-color: #fff;
    line-height: 18px;
    word-break: break-all;
    box-shadow: 0 2px 4px 0 rgba(201,201,201,0.2);
}
.theme-colorful .onePiece-system-message .system-content-div .system-content{
    font-size: 14px;
}
/*地图消息*/
@media screen and (max-width: 700px){
    .theme-onePiece .mapClass,.theme-colorful .mapClass{
        width: 70vw;
    }
}
.theme-onePiece .mapClass .map-head,.theme-colorful .mapClass .map-head{
    /*position: absolute;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*z-index: 10;*/
    padding: 8px 0 1px 12px;
    border-radius: 0 0 0 20px;
}
.theme-onePiece .receive-content-div .mapClass .map-head,
.theme-colorful .receive-content-div .mapClass .map-head{
    border-radius: 0 0 20px 0;
    color: #fff;
}
.theme-onePiece .map-message-box,.theme-colorful .map-message-box{
    background-color: transparent;
}
/*视频消息*/
.theme-onePiece .my-chat-content .reply-content-div.video-message,.theme-onePiece .my-chat-content .receive-content-div.video-message,
.theme-colorful .my-chat-content .reply-content-div.video-message,.theme-colorful .my-chat-content .receive-content-div.video-message{
    padding: 0;
}
.theme-onePiece .my-chat-content .reply-content-div.video-message .preview-video,
.theme-onePiece .my-chat-content .reply-content-div.video-message .preview-video-img{
    border-radius: 20px 20px 0 20px;
}
.theme-colorful .my-chat-content .reply-content-div.video-message .preview-video,
.theme-colorful .my-chat-content .reply-content-div.video-message .preview-video-img{
    border-radius: 12px 12px 0 12px;
}
.theme-onePiece .my-chat-content .receive-content-div.video-message .preview-video,
.theme-onePiece .my-chat-content .receive-content-div.video-message .preview-video-img{
    border-radius: 0 20px 20px 20px;
}
.theme-colorful .my-chat-content .receive-content-div.video-message .preview-video,
.theme-colorful .my-chat-content .receive-content-div.video-message .preview-video-img{
    border-radius: 0 12px 12px 12px;
}
/*附件消息*/
.theme-onePiece .my-chat-content .attachment-style,
.theme-colorful .my-chat-content .attachment-style{
    margin-right: 0;
    padding: 0 !important;
}
.theme-onePiece .my-chat-content .attachment-style .attachment-type,
.theme-colorful .my-chat-content .attachment-style .attachment-type{
    width: 60px;
    height: 60px;
    margin-left: 0;
}
.theme-onePiece .my-chat-content .attachment-style .attachment-name,
.theme-colorful .my-chat-content .attachment-style .attachment-name{
    float: left;
    margin: 0 0 0 10px;
    width: calc(100% - 80px);
    line-height: 20px;
}
.theme-onePiece .my-chat-content .attachment-style .attachment-load,
.theme-colorful .my-chat-content .attachment-style .attachment-load{
    position: unset;
    margin: 5px 0 0 10px;
    text-align: left;
    float: left;
}
.theme-onePiece .reply-content-div .attachment-type,.theme-onePiece .receive-content-div .attachment-name,
.theme-colorful .reply-content-div .attachment-type,.theme-colorful .receive-content-div .attachment-name{
    color: #333;
}
.theme-onePiece .reply-content-div .attachment-name,
.theme-colorful .reply-content-div .attachment-name{
    color: #fff;
}
.theme-onePiece .my-chat-content .receive-content-div .attachment-load .iconfont,
.theme-colorful .my-chat-content .receive-content-div .attachment-load .iconfont{
    color: #333 !important;
}
/*满意度*/
.theme-onePiece .satisfy-emoji-class,
.theme-colorful .satisfy-emoji-class{
    width: 60px;
    height: auto;
    min-height: auto;
    font-size: unset;
}
.theme-onePiece .second-Tags-onePiece,
.theme-colorful .second-Tags-onePiece{
    margin: 0 10px 12px 0;
    padding: 8px 20px;
    text-align: center;
    border-radius: 30px;
    width: calc(12vw - 40px);
}
.phone-chat .second-Tags-onePiece-0,.phone-chat .second-Tags-onePiece-2, .phone-chat .second-Tags-onePiece-4,
.phone-chat .second-Tags-onePiece-6,.phone-chat .second-Tags-onePiece-8{
    float: left;
}
.phone-chat .second-Tags-onePiece-1,.phone-chat .second-Tags-onePiece-3,.phone-chat .second-Tags-onePiece-5,
.phone-chat .second-Tags-onePiece-7,.phone-chat .second-Tags-onePiece-9{
    float: right;
}
@media screen and (max-width: 1200px) {
    .theme-onePiece .second-Tags-onePiece,.theme-colorful .second-Tags-onePiece{
        width: calc(50vw - 40px);
        padding: 8px 0;
    }
}
.theme-onePiece .show-satisfaction-btn,
.theme-colorful .show-satisfaction-btn{
    text-align: center;
    padding: 8px 0;
    border-radius: 30px;
    border: 1px solid #eee;
}
@media screen and (max-width: 900px){
    .theme-onePiece .chat-knowledge-item,.theme-colorful .chat-knowledge-item{
        max-width: calc(100% - 45px);
    }
}
/*引用、撤回*/
.theme-onePiece .my-chat-content .customer-icon-style,
.theme-colorful .my-chat-content .customer-icon-style{
    color: #aaa;
    width: 62px;
    background-color: transparent;
    box-shadow: none;
}
.theme-onePiece .my-chat-content .customer-icon-box,
.theme-colorful .my-chat-content .customer-icon-box{
    height: 23px;
    line-height: 23px;
    border-radius: 30px;
    background-color: #ECEFF3;
    font-size: 13px;
}
.theme-onePiece .my-chat-content .agent-quote-border .agent-quote-style,
.theme-colorful .my-chat-content .agent-quote-border .agent-quote-style{
    color: #aaa;
    width: 62px;
    box-shadow: none;
    height: 23px;
    line-height: 23px;
    border-radius: 30px;
    background-color: #ECEFF3;
    font-size: 13px;
}
.theme-onePiece .my-chat-content .customer-icon-box:hover,
.theme-onePiece .my-chat-content .agent-quote-border .agent-quote-style:hover,
.theme-colorful .my-chat-content .customer-icon-box:hover,
.theme-colorful .my-chat-content .agent-quote-border .agent-quote-style:hover{
    background-color: #E6E6E6;
}

/*发送消息图标外容器*/
.theme-onePiece-send{
    position: absolute;
    top: 14px;
    right: 16px;
    background-color: #e0e0e0;
    border-radius: 50%;
    line-height: 1;
    text-align: center;
    padding: 2px;
}
/*对接*/
.theme-onePiece .chat_interface .interface-btn,
.theme-colorful .chat_interface .interface-btn{
    border-radius: 16px;
    color: #666;
    border: 1px solid rgba(231,231,231,1);
}
.theme-onePiece .chat_interface .interface-item-header,
.theme-colorful .chat_interface .interface-item-header{
    color: #666;
}
/*正在输入*/
.theme-onePiece-inputting{
    padding: 4px 18px;
    width: auto;
    border-radius: 16px;
    color: #fff;
}
/*图文消息第一版*/
.theme-onePiece .my-chat-content .graphic-message .graphic-item:first-child,
.theme-colorful .my-chat-content .graphic-message .graphic-item:first-child {
    border-radius: 12px 12px 0 0;
}

.theme-onePiece .my-chat-content .graphic-message .graphic-item:last-child,
.theme-colorful .my-chat-content .graphic-message .graphic-item:last-child {
    border-radius: 0 0 12px 12px;
    border-bottom: none;
}

.theme-onePiece .my-chat-content .graphic-message .graphic-item,
.theme-colorful .my-chat-content .graphic-message .graphic-item {
    margin: 0 0 0 10px;
    background-color: #fff;
    padding: 16px 16px 12px 10px;
    width: 70%;
    border-bottom: 1px solid #eee;
    box-shadow: 0 4px 8px 0 rgba(219,222,223,0.25);
    min-height: 80px;
}
.theme-onePiece .my-chat-content .reply-content-div .graphic-message .graphic-item,
.theme-colorful .my-chat-content .reply-content-div .graphic-message .graphic-item {
    margin: 0;
}
.theme-onePiece .my-chat-content .reply-content-div .graphic-message .graphic-item,
.theme-colorful .my-chat-content .reply-content-div .graphic-message .graphic-item{
    padding: 0 0 10px 0;
    color: #333;
}
.theme-onePiece .my-chat-content .graphic-message .graphic-cont,
.theme-onePiece .my-chat-content .graphic-message .graphic-pic img,
.theme-colorful .my-chat-content .graphic-message .graphic-cont,
.theme-colorful .my-chat-content .graphic-message .graphic-pic img{
    padding: 0;
}
.theme-onePiece .my-chat-content .graphic-message .graphic-cont .graphic-filed,
.theme-colorful .my-chat-content .graphic-message .graphic-cont .graphic-filed{
    padding: 0 10px 0 10px;
}
.theme-onePiece .my-chat-content .graphic-message .graphic-btn,
.theme-colorful .my-chat-content .graphic-message .graphic-btn{
    right: 0;
}
.theme-onePiece .my-chat-content .graphic-message .send-graphic-btn,
.theme-colorful .my-chat-content .graphic-message .send-graphic-btn{
    padding: 2px 0;
    border-radius: 12px;
    width: 68px;
    right: 0;
}
.theme-onePiece .my-chat-content .graphic-message .graphic-item-show-more,
.theme-colorful .my-chat-content .graphic-message .graphic-item-show-more{
    width: 70%;
    border-bottom: 1px solid #eee;
    box-shadow: 0 4px 8px 0 rgba(219,222,223,0.25);
    border-radius: 0 0 10px 10px;
    margin-left: 10px;
    padding: 10px 13px;
}
.phone-chat.theme-onePiece .my-chat-content .graphic-message .graphic-item,
.phone-chat.theme-colorful .my-chat-content .graphic-message .graphic-item{
    width: 88%;
}
.phone-chat.theme-onePiece .my-chat-content .graphic-message .graphic-cont .graphic-filed,
.phone-chat.theme-colorful .my-chat-content .graphic-message .graphic-cont .graphic-filed{
    padding-right: 0;
}
.phone-chat.theme-onePiece .my-chat-content .graphic-message .graphic-btn,
.phone-chat.theme-colorful .my-chat-content .graphic-message .graphic-btn{
    text-align: right;
}
.phone-chat.theme-onePiece .my-chat-content .graphic-message .send-graphic-btn,
.phone-chat.theme-colorful .my-chat-content .graphic-message .send-graphic-btn{
    position: static;
}
.phone-chat.theme-onePiece .my-chat-content .graphic-message .graphic-item-show-more,
.phone-chat.theme-colorful .my-chat-content .graphic-message .graphic-item-show-more{
    width: 88%;
}
/*文字分类图片*/
.theme-onePiece-textClassifyImg{
    position: absolute;
    z-index: 2;
    left: 0;
    top: -40px;
}
.theme-onePiece-textClassifyImg img{
    width: 60px;
    height: 60px;
}
/*机器人问题动效*/
.robotAnimation-dot1, .robotAnimation-dot2, .robotAnimation-dot3 {
    width: 8px;
    height: 8px;
    border-color:black;
    border-radius: 50%;
    margin: 0 3px;
    display: inline-block;
}

.robotAnimation-dot1 {
    animation: jump 1.4s -0.32s linear infinite;
    opacity: 0.3;
}
.robotAnimation-dot2 {
    animation: jump 1.4s -0.16s linear infinite;
    opacity: 0.6;
}
.robotAnimation-dot3 {
    animation: jump 1.4s linear infinite;
    opacity: 0.9;
}

@keyframes jump {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1.2);
          transform: scale(1.2);
      }
}

.scroll-container {
    width: 100%;
    overflow: hidden;
}
.scroll-content {
    display: inline-block;
    white-space: nowrap;
    transform: translateX(0);
    animation: scroll 30s linear infinite;
}
/* 鼠标悬停后暂停动画 */
.scroll-container:hover .scroll-content {
    animation-play-state: paused;
}
/* 滚动动画 */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
        --scroll-x: 0;
    }
}
/******领航版  结束******/

/******炫彩版  开始******/
.theme-colorful .font13{
    font-size: 14px !important;
}
.theme-colorful.phone-chat .window-notifications{
    position: fixed;
    top: 60px;
    border-radius: 4px !important;
    background-color: #fff !important;
}
.theme-colorful.phone-chat .window-notifications-mask{
    position: fixed;
    top: 60px;
    height: 36px;
}
.theme-colorful.phone-chat.hide-title .window-notifications {
    top: 0;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: 0 2px 18px 0 rgba(153,153,153,0.28);
}
.theme-colorful.phone-chat .window-notifications-text{
    color: #F57B1E !important;
}
.theme-colorful .window-notifications .scroll-container{
    margin: 3px 10px 5px 0 !important;
}
.theme-colorful.phone-chat .phone_Tline{
    background: #fff;
}
.theme-colorful .select-btn-onePiece {
    text-align: center;
    line-height: 52px;
    background-color: #F5F5F5;
    border-radius: 12px;
}
.theme-colorful .phone-chat .top-nav .server-info{
    height: auto;
}
.theme-colorful .picture-question-tab-wrap .picture-question-class{
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
}
.theme-colorful .picture-question-tab-wrap{
    white-space: nowrap;
    overflow: hidden;
}
/******炫彩版  结束******/
hollya{
    border-color: #3D7EFF !important;
    background-color: #3D7EFF !important;
}
hollypbutton{
    border-color: #3899fc !important;
    background-color: #3899fc !important;
    color: #fff;
    border-radius: 10px;
    padding: 2px 8px;
    margin-top: 5px;
    display: inline-block;
}
hollywbutton{
    border-color: #3D7EFF !important;
    background-color: #3D7EFF !important;
}

/*下拉式导航菜单*/
.menu-selected-options{
    height: 35px;
    line-height: 34px;
    user-select: none;
}
.menu-selected-options-wrap{
    white-space: nowrap;
    overflow: hidden;
}
.web-chat .menu-selected-options-wrap{
    overflow-y: auto;
}
/*.menu-selected-options-wrap .scroll-bar {*/
/*    position: absolute;*/
/*    top: 56px;*/
/*    right: 0;*/
/*    width: 8px;*/
/*    height: 60px;*/
/*    background-color: #ccc;*/
/*    border-radius: 4px;*/
/*    opacity: 0;*/
/*    transition: opacity 0.3s ease;*/
/*}*/
/*.menu-selected-options-wrap:hover .scroll-bar{*/
/*    opacity: 1;*/
/*}*/
.popup-modal{
    top: 0;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 998;
    width: 100%;
    height: 100% !important;
    display: none;
}
.popup-box{
    top: 20vh;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 999;
    padding-top: 5px;
    border-radius: 12px 12px 0 0;
    overflow-x:inherit;
    box-shadow: 0 4px 23px 5px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.15);
}