@main_bgcolor :#e9e9e9;/*主界面背景色*/

@chat_left_bgcolor: #374760;/*左聊天框背景顏色*/
@chat_right_bgcolor: #ffffff;/*右聊天框背景顏色*/

@chat_left_color: white;/*左聊天框字體顏色*/
@chat_right_color: black;/*右聊天框字體顏色*/

@icon_width:40px;/*頭像寬度*/

@name_font_size:12px;/*nickname字体大小*/
@text_font_size: 14px;/*消息文本字体大小*/
@time_font_size: 12px;/*时间字体大小*/
@time_color:black;/*时间顏色*/
@input_top_line_height:1px;/*輸入框上邊框高度*/
@input_top_line_color :#F1F1F1;/*輸入框上邊框顏色*/
@input_bgcolor:#F6F6F6;/*輸入框背景色*/
@input_font_size:14px;/*輸入框字體大小*/
@input_color:black;/*輸入框字體顏色*/
@toolbar_bgcolor: #F6F6F6;/*工具欄背景色*/

@chat_title_color:#dc4848;/*chat标题颜色背景色*/

@chat_colorStripe_bgimg:;/*chat背景图片*/
@chat_colorStripe_pbposition:center;/*chat背景图片对齐方式*/
@chat_colorStripe_height:6px;/*chat背景图片高度*/

@chat_jumbotron_bgcolor:#eee;/*Pc端webchat背景颜色*/
@chat_jumbotron_color:inherit;/*Pc端webchat字体颜色*/
@chat_jumbotron_overflow:scroll;/*Pc端webchat滚动条类型*/

body {
    line-height: 24px;
     font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}
blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
    background-color: #e2e2e2;
}
::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: rgba(0,0,0,.3);
}
::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
    background-color: #e2e2e2;
}

body .chat {
    background-color: #fff;
}
body .chat {
    background-size: cover;
}
body .layui-layim, body .chat {
    border: 1px solid #D9D9D9;
    border-color: rgba(0,0,0,.05);
    background-repeat: no-repeat;
    background-color: #F6F6F6;
    color: #333;
    font-family: \5FAE\8F6F\96C5\9ED1;
}
.anim {
    -webkit-animation-name: layer-bounceIn;
    animation-name: layer-bounceIn;
}
.boxbg {
    border-radius: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
}
.boxbg {
    /*-webkit-overflow-scrolling: touch;*/
    top: 150px;
    left: 0;
    margin: 0;
    padding: 0;
    background-color: #fff;
    -webkit-background-clip: content;
    box-shadow: 1px 1px 50px rgba(0,0,0,.3);
}
/*.boxbg, .layui-layer-shade {
    position: fixed;
    _position: absolute;
    pointer-events: auto;
}*/
.box, .box * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body .chat .title {
    height: 48px;
    border-bottom: none;
    background-color: #F8F8F8;
    background-color: rgba(245,245,245,.7);
}
.title {
    padding: 0 80px 0 20px;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    background-color: #F8F8F8;
    border-radius: 2px 2px 0 0;
}
.layui-layer-imgbar, .layui-layer-imgtit a, .layui-layer-tab .title span, .title {
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .chat .content {
    background: 0 0;
}
body .layui-layim .content, body .chat .content {
    overflow: visible;
}
.boxpage .content {
    position: relative;
    overflow: auto;
}
.content {
    position: relative;
}


.layui-btn, .layui-tree li i, .unselect {
    -moz-user-select: none;
}
.layui-btn, .unselect {
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}



li {
    list-style: none;
}


img {
    display: inline-block;
    border: none;
}
.layui-btn, .layui-inline, img {
    vertical-align: middle;
}

.layim-chat-list li span, .layui-layim-min .content span {
    width: 100px;
    padding-left: 10px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatmain ul .systemMessage {
    min-height: 0;
    margin: 20px 0 5px;
    padding: 0;
}

.systemMessage {
    margin: 10px 0;
    text-align: center;
}

.systemMessage span {
    display: inline-block;
    line-height: 30px;
    padding: 0 15px;
    border-radius: 3px;
    background-color: #777171;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}


.imchat {
    display: none;
    position: relative;
    background-color: #fff;
    background-color: rgba(255,255,255,.9);
}
.show {
    display: block!important;
}

.chattitle {
    position: absolute;
    top: -48px;
    height: 48px;
}

.other {
    position: relative;
    top: 8px;
    left: 15px;
    padding-left: 50px;
    cursor: default;
}

.other img {
    position: absolute;
    left: 0;
    top: -5px;
    width: 38px;
    height: 38px;
    /*border-radius: 100%;*/
}

.other span {
    color: #444;
}
.servicename {
    position: relative;
    top: 5px;
    font-size: 18px;
}


.chatmain {
    /*height: 326px;*/
    padding: 15px 15px 5px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color:@main_bgcolor;
}
.chatmain ul .myself {
    text-align: right;
    padding-left: 0;
    padding-right: 60px;
}
.chatmain ul li {
    position: relative;
    /*font-size: 0;*/
    margin-bottom: 10px;
    padding-left: 60px;
    min-height: 68px;
}
.myself .userinfo {
    left: auto;
    right: 3px;
}
.userinfo {
    position: absolute;
    left: 3px;
}
.chattext, .userinfo {
    display: inline-block;
    vertical-align: top;
    font-size: @text_font_size;
}
.userinfo img {
    width: @icon_width;
    height: 40px;
    /*border-radius: 100%;*/
}
.myself .userinfo cite {
    left: auto;
    right: 60px;
    text-align: right;
}
.userinfo cite {
    position: absolute;
    left: 60px;
    top: -19px;
    line-height: 24px;
    font-size: 12px;
    white-space: nowrap;
    color: #999;
    text-align: left;
    font-style: normal;
}
.layui-layim cite, .layui-layim em, .chat cite, .chat em {
    font-style: normal;
}

.userinfo cite i {
    padding-right: 10px;
    font-style: normal;
}
.myself .chattext {
    margin-left: 0;
    text-align: left;
    background-color: @chat_right_bgcolor;
    color: @chat_right_color;
}
.chattext {
   position: relative;
    line-height: 22px;
    /*margin-top: 25px;*/
    padding: 8px 15px;
    background-color:@chat_left_bgcolor;
    border-radius: 3px;
    color:@chat_left_color; 
    /*word-break: break-all;*/
    max-width: 462px\9;
}
.myself .chattext:after {
    left: auto;
    right: -10px;
    border-top-color: @chat_right_bgcolor;

}
.chattext:after {
    content: '';
    position: absolute;
    left: -10px;
    top: 13px;
    width: 0;
    height: 0;
    border-style: solid dashed dashed;
    border-color: @chat_left_bgcolor transparent transparent;
    overflow: hidden;
    border-width: 10px;
}

.chattext .username {
    font-size: @name_font_size;
}

.chatmain .chattime {   
    font-size:@time_font_size; 
    color:@main_bgcolor;
 }

.chatmain .datecolor {
    font-size:@time_font_size;
    color: @time_color;
}

.chatstatus {
    position:absolute;
    right:0;
    bottom:0;
}

.chatfooter {

    border-top: @input_top_line_height solid @input_top_line_color;
    background-color:@input_bgcolor;
}


.upload input {
    /*position: absolute;*/
    font-size: 0;
    /*left: 0;
    top: 0;*/
    width: 100%;
    height: 100%;
    opacity: .01;
    filter: Alpha(opacity=1);
    cursor: pointer;
    -webkit-appearance: none;
}
button, input, optgroup, option, select, textarea {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    outline: 0;
}

.inputarea textarea {
    display: block;
    width: 100%;
    padding: 5px 0 0 10px;
    min-height: 60px;
    line-height: 20px;
    border: none;
    overflow: auto;
    resize: none;
    background: 0 0 @input_bgcolor;
    font-size:@input_font_size;
    color:@input_color;
}

.chatbottom {
    position: relative;
    height: 46px;
    background-color:@toolbar_bgcolor;
}
.send {
    position: absolute;
    right: 15px;
    top: 3px;
    height: 32px;
    line-height: 32px;
    font-size: 0;
    cursor: pointer;
}
.send div {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 32px;
    margin-left: 5px;
    /*padding: 0 20px;*/
    background-color: transparent;
    background-repeat:no-repeat;
    background-size:contain;
    width:26px;
    height:26px;
    color: #fff;
    border-radius: 3px;
}


.layui-layim cite, .layui-layim em, .chat cite, .chat em {
    font-style: normal;
}




.setwin {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 0;
    line-height: initial;
}
.setwin a {
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    font-size: 12px;
    _overflow: hidden;
}
.layui-layer-btn a, .layui-layer-dialog .icon, .setwin a {
    display: inline-block;
    vertical-align: top;
}
a {
    color: #333;
}

.setwin .min cite {
    position: absolute;
    width: 14px;
    height: 2px;
    left: 0;
    top: 50%;
    margin-top: -1px;
    background-color: #2E2D3C;
    cursor: pointer;
    _overflow: hidden;
}
a cite {
    font-style: normal;
}

/*.setwin .layui-layer-max {
    background-position: -32px -40px;
}*/
.icon {
    background: url(../images/icon.png) no-repeat;
}
.setwin .close1 {
    background-position: 1px -40px;
    cursor: pointer;
}
.chatclose {
    position: absolute;
}

.layui-layer-resize {
    position: absolute;
    width: 15px;
    height: 15px;
    right: 0;
    bottom: 0;
    cursor: se-resize;
}

.mask {
    display: none;
}

.mask-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 80;
    opacity: 0.5;
    background: transparent;
}

.mask-pic {
    display: none;
}

.mask-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 80;
    opacity: 0.5;
    background: #000;
}

 .big-pic-wrap{  
    position:absolute;
    top:0;
    width:100%;
    padding: 25% 0;
    /*width:920px;  
    height:620px;*/  
    z-index:90;
 }  
 .bigPic{  
     height: 450px;
     display: block;
     margin: 0 auto;
 }  
  /*关闭大图按钮*/  
  .close-pic{  
      background-image:url(../images/cancel.png);
      background-repeat:no-repeat, space;
      background-position:center;
      background-size: cover;
     position:absolute;  
     top:-5px;  
     right:-5px;  
     display:inline-block;  
     width: 35px;  
     height: 35px;  
     cursor:pointer;  
     border-radius:50% !important;  
     /*background: #393A3C;*/  
     text-align: center;  
     line-height: 40px;  
  }  
  /*.close-pic:hover{  
      background: #D43F27;  
  }*/  
  .close-pic>i{  
  font-size: 25px;  
   color:#fff;  
  }

.filedown {
    background-image: url(../images/download.png);
    background-size: 100%;
    width: 20px;
    height: 20px;
    display:inline-block;
    cursor: pointer;
    line-height: 100px;
    vertical-align: text-bottom;
    margin-right: 5px;
}

.layim-chat-list {
    display: none;
    position: absolute;
    z-index: 1000;
    /*top: -80px;*/
    width: 20vw;
    height: 100%;
    background-color: #D9D9D9;
    overflow: hidden;
    font-size: 0;
}

.layim-chat-list li {
    white-space: nowrap;
}

.layim-chat-list li, .layui-layim-min .layui-layer-content {
    position: relative;
    margin: 5px;
    padding: 5px 30px 5px 5px;
    line-height: 40px;
    cursor: pointer;
    border-radius: 3px;
}

.layim-chat-list li img, .layui-layim-min .layui-layer-content img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}

.layim-chat-list li *, .layui-layim-min .layui-layer-content * {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}

.layim-chat-list li span, .layui-layim-min .layui-layer-content span {
    width: 100px;
    padding-left: 10px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layim-chat-list li .layui-icon {
    display: none;
    position: absolute;
    right: 5px;
    top: 7px;
    color: #555;
    font-size: 22px;
}

.layui-icon {
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.layim-chat-list .active {
    background-color: #F3F3F3;
}

.chat-tool {
    float: right;
    position: relative;
    padding: 0 8px;
    height: 38px;
    line-height: 38px;
    font-size: 0;
  }

.chat-tool > span {
    position: relative;
    margin: 0 10px;
    display: inline-block;
    vertical-align: top;
    font-size: 24px;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    width: 26px;
    height: 26px;
}

.chat-tool input {
    position: absolute;
    font-size: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .01;
    filter: Alpha(opacity=1);
    cursor: pointer;
}

.modal-dialog {
    margin: 25px !important;
}

.agentLinkA,.agentLinkA:hover{ 
   text-decoration:underline;
   color:white; 
   word-wrap:break-word;
}

.loginBtn{
    display:inline-block;
    width:32px;
    height:32px;
    background-size:32px 32px;
}
.fbLoginBtn{
    background-image:url(../images/Facebook.png);
}
.wechatLoginBtn{
    background-image:url(../images/wechat.png);
}

.CSInputingTips{
   
    background-color:yellow;
position:absolute;
padding:5px;
top:-32px;
left:0;
}
h1, .h1, h2, .h2, h3, .h3
{
    margin-top: 20px;
    margin-bottom: 10px;
    text-align:left;
    color:@chat_title_color;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: @chat_title_color;
}
.colorStripe
{
    background-image:@chat_colorStripe_bgimg;
    background-position: @chat_colorStripe_pbposition center;
    height: @chat_colorStripe_height;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}