/* 
* @Author: Marte
* @Date:   2016-06-15 09:20:35
* @Last Modified by:   Marte
* @Last Modified time: 2016-06-23 14:18:30
*/
*{margin:0 auto;}
html,body{height:100%;width:100%;/*overflow: hidden;*/font-family:"Microsoft YaHei";/*min-width: 900px;*/}
.frameshape{width:100%;height:100%;position:relative;}
  .frameshape .frameshapeT{width:100%;height:64px;background: url(../img/bg-header.png);background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./img/bg-header.png',  sizingMethod='scale');}
    .frameshape .insideshape{width:100%;height:64px;box-sizing:border-box;padding:0px 22px;}
      .frameshape .logo{width:98px;height:40px;background:red;float:left;margin-top:12px; background:url(../img/logo.png);}
      .frameshape .online-service,.frameshape .common-problem{font-size: 18px;color:#333333;float:left;line-height: 64px;padding-left:15px;}
      .frameshape .common-problem{font-size: 14px;float:right;position:relative;}
        .frameshape .common-problem a{color:#49a6fc;text-decoration:none;cursor:pointer;}
        .frameshape .common-problem a:hover{text-decoration: underline;}
        .frameshape .problem-icon{display:inline-block;height:14px;width:14px;background:url(../img/problem-icon.png);position:absolute;top:25px;left:-2px;}
  .frameshape .frameshapeB{width:100%;}
    .clearfix:after {content: " ";display: block; clear: both;height: 0;}
    /* IE 6/7 */.clearfix { zoom: 1; }
      .frameshape .frameshapeBl{width:100%;float:left;/*padding-right: 252px;*/}
      .frameshape .frameshapeBr{width:252px;border-left:6px solid #f7f7f7;position:absolute;right:0;}
        .frameshape .chat-shape{padding-right:258px;} 
/*模拟滚动条开始*/
.scrollbar1 {clear: both;}
.scrollbar1 .viewport {height:530px;overflow: hidden; position: relative; }
.scrollbar1 .overview {list-style: none; position: absolute; left: 22px; top: 0;right:2px; }
/*#scrollbar1 .thumb .end,*/
.scrollbar1 .thumb {background: #D0D0D0;background: rgba(208,208,208,0.3);filter: "alpha(opacity=30)";-ms-filter: "alpha(opacity=30)";border-radius: 10px;}
.scrollbar1 .scrollbar {position: relative; float: right; width: 15px;}
.scrollbar1 .track {height: 100%; width:10px; position: relative; padding: 0 1px; background: #E9E9E9;background: rgba(233,233,233,0.1);filter: "alpha(opacity=10)";-ms-filter: "alpha(opacity=10)";}
.scrollbar1 .track:hover{background: #E9E9E9; background: rgba(233, 233, 233, 1); filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)";}
.scrollbar1 .track:hover .thumb { background:#D0D0D0;background: rgba(208,208,208,0.6);filter: "alpha(opacity=60)";-ms-filter: "alpha(opacity=60)";}
.scrollbar1 .thumb { height: 20px; width: 10px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
.scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
.scrollbar1 .disable{ display: none;}
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
/*模拟滚动条结束*/
/*广告区域模拟滚动条开始*/
.scrollbar2 {clear: both;}
.scrollbar2 .viewport {height:530px;overflow: hidden; position: relative; }
.scrollbar2 .overview {list-style: none; position: absolute; left: 0px; top: 0; }
/*#scrollbar1 .thumb .end,*/
.scrollbar2 .overview  .widthlimit{/*max-width:236px;*/}
.scrollbar2 .thumb {background: #D0D0D0;background: rgba(208,208,208,0.3);filter: "alpha(opacity=30)";-ms-filter: "alpha(opacity=30)";border-radius: 10px;}
.scrollbar2 .scrollbar {position: relative; float: right; width: 15px;}
.scrollbar2 .track {height: 100%; width:10px; position: relative; padding: 0 1px; background: #E9E9E9;background: rgba(233,233,233,0.1);filter: "alpha(opacity=10)";-ms-filter: "alpha(opacity=10)";}
.scrollbar2 .track:hover{background: #E9E9E9; background: rgba(233, 233, 233, 1); filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)";}
.scrollbar2 .track:hover .thumb { background:#D0D0D0;background: rgba(208,208,208,0.6);filter: "alpha(opacity=60)";-ms-filter: "alpha(opacity=60)";}
.scrollbar2 .thumb { height: 20px; width: 10px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
.scrollbar2 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
.scrollbar2 .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
/*广告区域模拟滚动条结束*/
.position-bot{padding-right:258px;}
      .frameshape .menu-navigation{width:100%;height:50px;background:#f7f7f7;padding:0px 25px 0px 22px;box-sizing: border-box;}
        .frameshape .expression,.frameshape .image,.frameshape .voice,.frameshape .but-end-service{display:inline-block;margin-top:15px;margin-right:10px;border:1px solid transparent;height:20px;float:left;}
        .frameshape .expression:hover,.frameshape .image:hover,.frameshape .voice:hover{border:1px solid #bbb;}
        .frameshape .but-end-service{margin-right:0px;}
        .frameshape .but-end-service{float:right;width:88px;height:30px;border:1px solid #d3d3d3;border-radius:2px;text-align:center;line-height: 30px;font-size: 14px;margin-top:10px;color:#666666;cursor:pointer;}
        .frameshape .but-end-service a{text-decoration: none;display:block;color:#666666;cursor:pointer;}
          .frameshape .but-end-service a:hover{color:#fff; transition-duration:1s; /* Firefox 4 */ -moz-transition-duration:1s; /* Safari and Chrome */ -webkit-transition-duration:1s;/* Opera */  -o-transition-duration:1s;
            transition-timing-function:ease;
            -moz-transition-timing-function:ease; /* Firefox 4 */
            -webkit-transition-timing-function: ease; /* Safari 和 Chrome */
            -o-transition-timing-function: ease; /* Opera */

           }
      .frameshape .input-module{width:100%;box-sizing: border-box;}
        .frameshape .input-area{height:145px;}
          .frameshape .input-area textarea{width:100%;height:100%;border:none;overflow:auto;resize:none;outline: none;padding:5px 22px;box-sizing: border-box;font-size:14px;}
        .frameshape .bg-send{height:50px;width:100%;background:#f7f7f7;}
        .but-send-box{width:115px;background:#d3d3d3;border-radius: 4px;float:right;margin-right:20px;margin-top:20px;}
           .swith-language{
            display:inline-block;
            width:26px;
            height:28px;
            color:#fff;
            border-left:1px dotted #fff;
            text-align: center;
            border-top-right-radius:4px;
            border-bottom-right-radius:4px;

           }
           .swith-language>button{
            background:transparent;
            border:0;
            display:block;
            height:28px;
            line-height: 28px;
            transform:rotate(90deg);
            cursor:pointer;
            color:#fff;
            outline: none;
           }

          .frameshape .but-send{background:inherit;display:inline-block;height:28px;width:88px;font-size:14px;float:left;text-align:center;line-height:28px;box-sizing: border-box;border-top-left-radius:4px;
            border-bottom-left-radius:4px;}
            .frameshape .but-send a{display:block;color:#ffffff;text-decoration: none;cursor:pointer;
                border-radius: 4px;
            }
            .frameshape .but-send a:hover{background:#b9b6b6;color:#fff;
              transition-duration:1s; /* Firefox 4 */ -moz-transition-duration:1s; /* Safari and Chrome */ 
              -webkit-transition-duration:1s;/* Opera */  -o-transition-duration:1s;
              transition-timing-function:ease;
              -moz-transition-timing-function:ease; /* Firefox 4 */
              -webkit-transition-timing-function: ease; /* Safari 和 Chrome */
              -o-transition-timing-function: ease; /* Opera */
            }
/*聊天室overview里面的内容*/
.frameshape .loooknore{display:inline-block;width:100%;height:33px;line-height:68px;text-align: center;font-size:14px;color:#49a6fc;}
  .frameshape .loooknore a{color:#49a6fc;text-decoration:none;cursor:pointer;}
  .frameshape .loooknore a:hover{text-decoration:underline;}
  .frameshape .customer-service{width:100%;margin:10px 0;}
    .frameshape .customer-service .customer-service-logo{float:left;width:46px;height:46px; background-image: url(../img/customer-service-logo.png); background-size: 100% 100%; border-radius: 50%;}
    .frameshape .customer-service .service-logo{background-image: url(../img/service-logo.png); background-size: 100% 100%; border-radius: 50%;}
    .frameshape .customer-service .chat-content{float:left;max-width:74%;font-size: 14px;color:#333333;background:#fff4d7;padding:12px;margin-left:14px;border-radius:4px;/*max-width: 925px;*/word-wrap:break-word;}
  .frameshape .customer{width:100%;margin:30px 0px;}
    .frameshape .customer .customer-service-logo{float:right;height:46px;width:46px;margin-right: 10px;}
    .frameshape .customer .customer-service-logo img{width:100%;height:100%;}
    .frameshape .customer .chat-content{float:right;max-width:68%;font-size: 14px;color:#333333;background:#f0f0f0;padding:12px;margin-right:14px;border-radius:4px;position:relative;word-wrap:break-word;}
  .frameshape .chat-time{display:inline-block;width:100%;font-size:12px;color:#b8b8b8;text-align:left;}
  .frameshape .Loading-hints{display:inline-block;width:100%;font-size:14px;color:#999999;text-align:center;line-height:1.8rem;margin:0px 0px;}
    .frameshape .Loading-hints a{font-size:14px;color:#49a6fc;text-decoration: none;/*letter-spacing:2px;*/cursor:pointer;}
    .frameshape .Loading-hints a:hover{color:#d0dbe1;}
    .frameshape .Loading-hints .load{display:inline-block;width:12px;height:12px;background:url(../img/load.png);margin-left:8px;}
  /*overserver 弹层*/
  .mark{width:100%;height:100%;background:#000;background:rgba(0,0,0,0.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)";position:absolute;top:0;left:0;z-index: 554;display:none;}
 .layer-server-shape{width:380px;height:auto;background:#fff;position:absolute;top:50%;margin-top:-200px;left:50%;margin-left:-200px;border-radius:2px;display:none;z-index: 555;}
.layer-server-shape p.title{font-size: 14px;display:inline-block;height:54px;width:100%;background:#f7f7f7;text-align: left;line-height:54px;padding-left:32px;box-sizing: border-box;border-top-left-radius:2px;border-top-right-radius:2px;}
 .layer-server-shape .form-shape{width:100%;padding:16px 0px 22px 30px;box-sizing: border-box;font-size: 14px;}
 .layer-server-shape .form-shape p{display:inline-block;width:100%;line-height:28px;}
.layer-server-shape .form-shape p .ckb{font-size: 14px;margin-right:15px;}
 .layer-server-shape .form-shape .contact{margin-top:15px;display:inline-block;font-size: 14px;}
 .layer-server-shape .form-shape .phonenum{height:26px;width:252px;border:1px solid #d9d9d9;padding-left:5px;box-sizing: border-box;margin-left:9px;outline:none;}
 .layer-server-shape .form-shape  .remarks-textarea{position:relative;}
 .layer-server-shape .form-shape .remarks{width:320px;height:68px;border:1px solid #d9d9d9;margin-top:12px;padding:0;outline:none;padding:5px 10px;box-sizing: border-box;resize:none;}
 .layer-server-shape .form-shape .remarks-txt1-none{color:#bbb;text-align: center;position:absolute;top:35px;left:140px;}
.layer-server-shape .form-shape .but-choose{display:inline-block;width:100%;box-sizing: border-box;padding:0px 80px 0px 55px;margin-top:14px;}
 .layer-server-shape .form-shape .determine,.cancel{display:inline-block;width:88px;height:30px;background:#45a5fd;font-size: 14px;color:#fff;text-align: center;line-height: 30px;border:none;border-radius: 2px;float:left;}
 .layer-server-shape .form-shape .determine:hover,.cancel:hover{background:#a6d1f8;}
.layer-server-shape .form-shape .cancel{float:right;}
      

 /*留言弹层*/
   .layer-msg-shape{width:380px;height:400px;background:#fff;position:absolute;top:50%;margin-top:-200px;left:50%;margin-left:-200px;border-radius:2px;display:none;z-index: 555;}
    .layer-msg-shape p.title{font-size: 14px;display:inline-block;height:54px;width:100%;background:#f7f7f7;text-align: left;line-height:54px;padding-left:32px;box-sizing: border-box;border-top-left-radius:2px;border-top-right-radius:2px;}
    .layer-msg-shape .form-shape{width:100%;padding:5px 30px 22px 30px;box-sizing: border-box;}
       .layer-msg-shape .form-shape p{display:inline-block;width:100%;line-height:28px;}
      .layer-msg-shape .form-shape .contact{margin-top:15px;/*display:inline-block;*/font-size: 14px;}
         .layer-msg-shape .form-shape .phonenum{height:26px;width:230px;border:1px solid #d9d9d9;padding-left:5px;box-sizing: border-box;float:right;}
         .textarea-border{position:relative;}
         .layer-msg-shape .form-shape .remarks{width:320px;height:125px;border:1px solid #d9d9d9;margin-top:12px;padding:0;outline:none;padding:5px 10px;box-sizing: border-box;resize:none;}
          .layer-msg-shape .form-shape .remarks-txt2-none{color:#bbb;text-align: center;text-align: center;position:absolute;top:68px;left:97px;}
         .layer-msg-shape .form-shape .but-choose{display:inline-block;width:100%;box-sizing: border-box;padding:0px 55px;margin-top:14px;}
           .layer-msg-shape .form-shape .determine,.cancel{display:inline-block;width:88px;height:30px;background:#45a5fd;font-size: 14px;color:#fff;text-align: center;line-height: 30px;border:none;border-radius: 2px;float:left;}
           .layer-msg-shape .form-shape .determine:hover,.layer-msg-shape .form-shape .cancel:hover{background:#a6d1f8;}
           .layer-msg-shape .form-shape .cancel{float:right;}

/*模拟selected*/
.simulation{width:320px;height:26px;margin-top:15px;position:relative;}
.recovery-mode{display:block;float:left;width:68px;font-size: 14px;height:26px;line-height:26px;}
.layer-msg-shape .form-shape p.simulation-select{height:26px;display:block;float:right;width:230px;border:1px solid #d9d9d9;position:relative;padding:1px 0px;box-sizing: border-box;}
.bor-none{border:none;width:206px;position:absolute;top:0;height:26px;padding-left:5px;box-sizing: border-box;outline:none;line-height: 26px;color:#d9d9d9;font-size: 14px;}
.select-icon-border{display:block;float:right;width:22px;height:23px;border-left:1px solid #d9d9d9;background:#fff;}
.select-icon{display:block;height:0px;width:0px;border-top:6px solid #666;border-left:5px solid transparent;border-bottom:6px solid transparent;border-right:5px solid transparent;margin-top:10px;position:relative;}
.select-icon::after{content:'';height:0px;border-top:6px solid #fff;border-left:7px solid transparent;border-bottom:10px solid transparent;border-right:6px solid transparent;position:absolute;top:-8px;left:-7px;}
.choose-mode-list{width:230px;position:absolute;z-index: 9999;top:25px;list-style: none;box-sizing: border-box;right:0;border:1px solid #d9d9d9;background:#f7f7f7;display:none;color:#666;}
.choose-mode-list li{margin-left: -34px;line-height: 22px;font-size: 14px;}
 .phcolor{border:1px solid red;}
 .chat-content i.send-message-fails{font-style: normal;}
 .frameshape .customer .chat-content b{position:absolute;top:50%;margin-top:-11px;width:100%;text-align: center;}
 .word_reminder_info{position:absolute;right:48px;bottom:8px;}
 .word_reminder_info2{position:absolute;right:18px;bottom:8px;}
 .word_prompt{font-size: 12px;color:#333333;}
.leave_import_empty {
    width: 16px;
    vertical-align: bottom;
}






/**/
#facebox{
	border: 1px solid #f7f7f7;
    padding: 10px;
    top:-174;
    box-shadow: rgb(102, 102, 102) 0px 0px 10px;
}
#facebox td{
	width:30px;height:30px;
}
#facebox a {
    display: block;
}
.chat-content img{
    height: 100px;
    max-width: 100px;
}

.error-tip {
    line-height: 30px;
    color: #FFFFFF;
    background: #262626;
    border-radius: 5px;
    position: fixed;
    z-index: 10;
    left: 25%;
    top: 40%;
    width: 50%;
    text-align: center;
}
i.send-message-fails {
    display: none;
    width: 22px;
    height: 22px;
    -webkit-border-radius: 100px;
    text-align: center;
    line-height: 22px;
    color: #fff;
    background: #f00;
    font-size: 16px;
    position: absolute;
    left: -30px;
    top: 50%;
    margin-top: -11px;
}
.loading-mask {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
    z-index: 1;
    display: none;
}
.layermsg{
    cursor: pointer;
}
.suggestQue{
    cursor: pointer;
}
.artificial{
    cursor: pointer;
}
.vipArtificial{
    cursor: pointer;
}
.touch-left .weui_panel_bd{
    border: 1px solid whitesmoke;
}
.weui_panel_access{
    width: 80%;
}
.bg-send{
    position:relative;
}
.swith-language-bg{
    width:170px;
    height:38px;
    background:#fff;
    position:absolute;
    bottom:0;
    right:47px;
    border:1px solid #bbb;
    font-size: 12px;
    display:none;

}
.tool-enter,.tool-ctrl-enter{
    text-align: left;
    padding-left:5px;
    display:block;
    box-sizing: border-box;
    height:18px;
    line-height: 18px;
    margin:0;
    float:left;
    cursor: pointer;

}
.selected-icon-box{
    display:block;
    float:left;
    height:19px;
    width:28px;
    background:#ece6e6;
    padding:0;
    margin:0;
    padding-left:8px;
    padding-top:2px;
    box-sizing: border-box;

}
.selected-icon{
    display:inline-block;
}
.selected-icon>a{
    display: inline-block;
    width: 6px;
    height: 2px;
    background:#797474;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
}
.selected-icon>a:after {
    content: '/';
    display: block;
    width: 12px;
    height: 2px;
    background: #797474;
    -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
}
.placeholder{color:#aaa}

.scrollbar2 .viewport{
  background:#ffffff;
}
.position-bot{
  position:relative;
}
.xz-word-syle{
  width:100%;
  position:absolute;
  top:0px;
  height:30px;
  line-height: 30px;
  background:#f9f9f9;
  border-top:1px solid #c5c6c7;
  padding:5px 20px;
  box-sizing: border-box;
  padding-right:400px;
}
.frameshape .menu-navigation{
  position:relative;
  z-index: 99;
}
#fontSize,#fontFamily{
  float:left;
  margin-right:10px;
}
#fontColor{
  width:18px;
  height:18px;
  background:url(../img/seban-icon.jpg) no-repeat;
  background-size:100% 100%;
  float:left;
  display:none;
}
.word-size{
  float:left;
  display:inline-block;
  height:20px;
  width:16px;
  background:url(../img/word-size.png) no-repeat;
  background-size:100% 100%;
  margin-top:15px;
  margin-right:10px;
  cursor:pointer;
  border: 1px solid transparent;
}
#btn-snapscreen{
    display: none;
    margin-top: 15px;
    margin-right: 10px;
    border: 1px solid transparent;
    height: 20px;
    float: left;
    background: url(../img/screen-capture.png);
    width: 22px;
}
.msg-error{
    width: 20px;
    height: 20px;
    color:#FFF;
    border-radius: 50%;
    background:red;
    text-align:center;
    line-height:20px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    display:none;
}

.layer-account-mark {
    width:100%;
    height:100%;
    background:#000;
    background:rgba(0,0,0,0.5);
    filter:"alpha(opacity=50)";
    -ms-filter:"alpha(opacity=50)";
    position:absolute;
    top:0;
    left:0;
    z-index: 554;
    display:none;
}

.layer-account-shape{
    z-index: 555;
    width:330px;
    /* border: 1px solid #baceda;*/
    position:absolute;top:50%;margin-top:-105px;left:50%;margin-left:-165px;
    font-size: 12px;
    height: 210px;
    border-radius: 8px;
    display: none;
}
.y-z-mask {
    height: 160px;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    left: 0;
    top: 30px;
    display: none;
}
.tit-bg{
    width:100%;
    height:35px;
    background:#ff3c46;
    /*background:url(/app_images/title-bg.png) no-repeat;*/
    background-size:100% 100%;
    color:#fff;
    font-size:15px;
    line-height: 35px;
    padding-left:40px;
    box-sizing: border-box;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.ly-cot-box{
    width:315px;
    margin-left:7px;
    background:#fff;
    padding-bottom: 20px;
    padding-top: 12px;
    /* border: 1px solid #baceda;*/
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top:-2px;
}
.lay_accout_name,.lay_accout_pwd{
    margin-top:20px;
    margin-left:40px;

}
.lay_accout_name{
    /* margin-top:35px;*/
}
.lay_accout_but{
    display:inline-block;
    width:100%;
    text-align: center;
    margin-top:35px;
}
.lay_accout_but-confirm,.lay_accout_but-reset{
    display: inline-block;
    width: 80px;
    height: 25px;
    border-radius: 12px;
    background: #c5c6c7;
    margin: 0 auto;
    line-height: 25px;
    color:#fff;

}
.lay_accout_but-confirm{
    background: #ff3c46;
    color:#fff;
}
.lay_accout_but-confirm:hover,.lay_accout_but-reset:hover{
    cursor: pointer;
}
.lay_accout_but-confirm{
    margin-left:10px;
}
.lay_accout_but-reset{
    margin-right:10px;
}



.loading-img {
    padding-top: 38px;
    margin: 0 auto;
}

.loadig-text {
    font-size: 0.24rem;
    color: #fff;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

/**/
.sk-circle {
    width: 45px;
    height: 45px;
    position: relative;
}

.sk-circle .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sk-circle .sk-child:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

.sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}

.sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}

.sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}

.sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}

.sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

.sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.sk-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.sk-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.sk-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.sk-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.sk-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.sk-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.sk-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.sk-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.sk-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleBounceDelay { 0%, 80%,
100% {
    -webkit-transform: scale(0);
    transform: scale(0);
}
    40%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes sk-circleBounceDelay { 0%, 80%,
100% {
    -webkit-transform: scale(0);
    transform: scale(0);
}
    40%{
        -webkit-transform:scale(1);
        transform:scale(1);
    }
}

.stopQueue {
    float: right;
    width: 70px;
    height: 20px;
    border: 1px solid #ff3c46;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    margin-top: 15px;
    color: #ff3c46;
    cursor: pointer;
    margin-right: 0;
    display: none;
}

.stopQueue a {
    text-decoration: none;
    display: block;
    color: #ff3c46;
    cursor: pointer;
}
/*发送时间*/
.customer .send-time{
    text-align: right;
    margin-right: 10px;
}
.send-time{
    font-size:14px;
    color:#999999;
    margin-bottom:10px;
}
/*机器人回复评价*/
.evaluate {
    color: #6b6b6b;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    border-top: 1px solid #f0f0f0;
    margin-left: 14px;
}

.evaluate-tit {
    display: inline-block;
    /* width:20%;*/
    box-sizing: border-box;
}

.evaluate-useful, .evaluate-Useless {
    color: #6b6b6b;
    margin-left: 40px;
}

.evaluate-useful {
    display: inline-block;
    background: url(../app_images/useful.png) no-repeat left center;
    background-size: 15px auto;
    padding-left: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.evaluate-useful-selected {
    display: inline-block;
    background: url(../app_images/useful-selected.png) no-repeat left center;
    background-size: 15px auto;
    padding-left: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.evaluate-useless {
    display: inline-block;
    background: url(../app_images/useless.png) no-repeat left center;
    background-size: 15px auto;
    padding-left: 20px;
    box-sizing: border-box;
    margin-left: 20px;
    cursor: pointer;
}

.evaluate-useless-selected {
    display: inline-block;
    background: url(../app_images/useless-selected.png) no-repeat left
    center;
    background-size: 15px auto;
    padding-left: 20px;
    box-sizing: border-box;
    margin-left: 20px;
    cursor: pointer;
}

.evaluate-input {
    display: none;
    margin-bottom: 14px;
    margin-left: 14px;
}

.evaluate-but-submit {
    display: block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: #38adff;
    border-radius: 2px;
    margin-top: 15px;
    margin-left: 40px;
}

.evaluate-but-cancel {
    display: block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: #38adff;
    border-radius: 2px;
    margin-top: 15px;
    margin-left: 20px;
}

.evaluate-textarea {
    resize: none;
    font-size: 15px;
    width: 80%;
    height: 60px;
}

.fl {
    float: left;
}

.inputFromTimeToTime {
	position: absolute;
	bottom: 5px;
	left: 10px;
	display: none;
	color: #b9b6b6;
	font-size: 14px;
}

.PromptBox {
    max-width: 600px;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    bottom: 215px;
    padding: 5px;
    background-color: #FFF;
    z-index: 9999;
    display: none;
}
.PromptBox p{
    font-size:14px;
}

.PromptBox .suggestQue {
    text-decoration: none;
    color:red;
    line-height: 23px;
}

.footer_prompt {
    height: 100%;
    line-height: 50px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    float: left;
    max-width: 400px;
}
.footer_prompt>div {
    height: 100%;
    overflow: auto;
    white-space: nowrap;
    margin: 0 10px;
}
.footer_prompt span {
    border: 1px solid #ff3344;
    border-radius: 20px;
    font-size: 14px;
    color: #ff3344;
    line-height: 28px;
    height: 28px;
    margin: 10px 5px 0;
    padding: 0 10px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.footer_prompt span a{
    color: inherit;
    text-decoration: none;
}