/*head*/
#chatbox.dhidden{white-space:normal;}
#chatbody{ display:none; width:390px; position:fixed; right:60px; bottom:10px; z-index:999;box-shadow: 0 0 24px 0 rgba(15,66,76,.25);}

#chatbody input{letter-spacing:2px;padding-left:8px;}
#chatbody .msghead{height:60px; border-radius:5px 5px 0 0 ; position:relative;}
#chatbody .headimg{width: 42px;height: 42px;border-radius: 50%;float:left; margin:10px 10px 5px 9px; background:url(/public/images/icon/livehead.png); background-size:contain;}
.blockstyle2 #chatbody .headimg{ background:url(/public/images/icon/livehead_red.jpg); background-size:contain;}
.blockstyle3 #chatbody .headimg{ background:url(/public/images/icon/livehead_gray.jpg); background-size:contain;}
#chatbody .headinfo{float: left;height:32px; padding:15px 0 10px 0; line-height:16px;color:#fff;}
#chatbody .msghead .headoperate{ float:right;}
#chatbody .msghead .headoperate i{display:inline-block; margin:12px 10px 4px 0;width:10px; height:10px;cursor:pointer;}
#chatbody .msghead .headoperate i#closetalk { float:right;background: url(/public/images/icon/liveserver.png) no-repeat -150px 0px;}
#chatbody .msghead .headoperate i#closetalk:hover{background: url(/public/images/icon/liveserver.png) no-repeat -150px -18px;}
#chatbody .msghead .headoperate i#changebig {float:right;background: url(/public/images/icon/liveserver.png) no-repeat -125px 0px;}
#chatbody .msghead .headoperate i#changesmall {float:right;background: url(/public/images/icon/liveserver.png) no-repeat -125px -18px;}
/*content*/
#chatbody .msgcont{ height:423px;color:#333;overflow-y:auto;overflow-x:hidden;width:100%;padding:0;background:#fafdff;position:relative;scrollBar-face-color:#c9cce7;}
#chatbody .msgcont::-webkit-scrollbar{width:6px}
#chatbody .msgcont::-webkit-scrollbar-thumb{width:6px;background-color:#c9cce7;border-radius:4px}
#chatbody .msgcont .kefutips{ padding:5px; font-size:13px; line-height:1.8em; text-align:center; color:#666; cursor:pointer; background:#F5F5F5; border-radius:5px;}

#chatbody .msgcont ul{ padding:0 20px 10px;}
#chatbody .msgcont ul li{ margin:14px 0;}
#chatbody .msgcont .kefumsgtalk { padding:0 20px 0;}
#chatbody .msgcont .kefutips{ margin:20px;}

#chatbody .msgcont .leftmsg{padding-top: 10px;}
#chatbody .msgcont .rightmsg{padding-top: 10px;}
#chatbody .msgcont .leftName{width:100%;font-size:13px;color: #999;margin-bottom:2px;}
#chatbody .msgcont .leftmsg .cont{ background:#f0f1fa;color:#333; max-width:80%; padding:10px; min-height:20px; display:inline-block; border-radius:2px; line-height:1.8em; position:relative;white-space:normal;word-break:break-all;word-wrap:break-word;font-size:13px; }
#chatbody .msgcont .leftmsg .cont:before{content:""; position:absolute; right:100%; top:10px; width:0; border-width:0 12px 12px 0; border-style:solid; border-color:transparent #f0f1fa;}
#chatbody .msgcont .rightmsg{ text-align:right;font-size:13px; }
#chatbody .msgcont .rightmsg .cont{ text-align:left;background:#7F87D2; color:#fff; max-width:80%; padding:10px; min-height:20px; display:inline-block; border-radius:2px; line-height:1.8em; position:relative; color:#fff;white-space:normal;word-break:break-all;word-wrap:break-word;font-size:13px; }
#chatbody .msgcont .rightmsg .cont:before{content:""; position:absolute; left:100%; top:10px; width:0; border-width:0 0 12px 12px; border-style:solid; border-color:transparent #7F87D2;}
#chatbody .msgcont p{ text-indent:0;}
#chatbody .msgcont img{ max-width:100%;}

#chatbody .msgcont .kefumsgtalk .tuijianquestion {cursor: pointer;}
#chatbody .msgcont .kefumsgtalk .tuijianquestion:hover { color:#f60;}
/*foot*/
#chatbody .msgfoot{ height:120px; border-top:1px solid #eee; background:#fafdff;}
#chatbody .msgtools{ padding:10px; height: 25px;}
#chatbody .msgtools a{ color:green;}
#chatbody .msgtools a.right{ float:right;}
#chatbody .msgtools a:hover{ color:#f60}
#chatbody .msgtools .dn{display: none;}
#chatbody .msgtools .dhidden{display: inline-block;}
#chatbody .msgtools #tupian{cursor: pointer;}

#chatbody .msgtools  .upfile{margin: 1px;cursor: pointer;background-size: cover;position: relative;cursor: pointer;color:green;}
#chatbody .msgtools  .upfile #upfile1{opacity: 0;width: 28px;height: 18px;position: absolute;z-index: 1;cursor: pointer;left: -15px;font-size:0;}




#chatbody .inputmsg{ position:relative; padding:0 10px;}
#chatbody .inputmsg textarea{ border:0; padding:10px; color:#333; resize:none; width:83%; background:none; line-height:1.5em; height:3em; outline:none;box-shadow: 0 0 24px 0 rgba(15,66,76,.12);}
#chatbody .inputmsg .sendmsgbtt{padding:8px 8px 8px 10px;margin-right:-3px; opacity:0.8; border:0; color:#fff; border-radius:2px; position:absolute; right:5px; top:24px; outline:none; cursor:pointer;}
#chatbody .inputmsg .sendmsgbtt:hover{ opacity:1}

/*beforequestion*/
#chatbody .beforequestion{position:absolute; width:20px; height:20px; top:40px; right:0;z-index: 1; transition:all linear 300ms;}
#chatbody #question-close{ height:20px;width:20px; background: url(/public/images/icon/livebgicon.png) no-repeat -775px 1px  ; position:absolute; top:14px;right:10px;}
#chatbody #question-close:hover{ background: url(/public/images/icon/livebgicon.png) no-repeat -815px 1px; cursor:pointer;}
#chatbody .beforequestion .question-title{ display:none;}
#chatbody .beforequestion .question-close:hover{ background: url(/public/images/icon/livebgicon.png) no-repeat -815px 1px; }
#chatbody .beforequestion .question-main{ display:none;height:68%;width:92%;margin: 0 auto;}
#chatbody .beforequestion .question-main ul li{line-height: 1.5em;border-width: 1px; border-style: solid;
    background: #fff; border-radius: 50%;text-align: center;cursor: pointer; width: 70px; height: 70px;display: table-cell; vertical-align: middle; float: left; padding: 10px 15px; box-sizing: border-box; margin: 10px 0px; opacity:0.8;}
#chatbody .beforequestion .question-main ul li:nth-child(3n+2){ margin:10px 30px;}
#chatbody .beforequestion .question-main ul li:hover{ opacity:1;}
#chatbody .beforequestion .question-foot{ display:none;margin: 12px auto auto;width:180px;height:36px;color:#fff;font-size:16px;text-align: center;border-radius: 2px;background: #e1e3f1;cursor:pointer;text-indent:10px;}
#chatbody .beforequestion .question-commit{ padding:7px;font-weight:bold; color:#fff;}
#chatbody .beforequestion .question-icon{ width:68px; height:20px; background:url(/public/images/icon/normalquestion.png) center center no-repeat;background-position:48px 1px; color:#fff; margin-left:-45px;cursor:pointer;font-size:12px;}
#chatbody .beforequestion.show{ top:0; height:94%;width:76%; background:#fafdff; font-size:16px; padding:17px;box-shadow: 0 0 24px 0 rgba(15,66,76,.25); border-radius:0 5px 0 0; transition:none;}
#chatbody .beforequestion.show .question-icon{ display:none;}
#chatbody .beforequestion.show .question-title{ display:block; text-align:center;font-size:16px; padding:20px 0px;}
#chatbody .beforequestion.show .question-main{ display:block;}
#chatbody .beforequestion.show .question-foot{ display:block;}


#chatbody .tologin{margin:auto;top:0;right:0;bottom:0;left:0;height:32%;width:50%;}
#chatbody .biaoqingbox{margin:316px 205px 0 0;width:434px;height:126px;}
#chatbody .beforequestion.show{height:569px;width:273px; border-radius:0 5px 5px 0 ; background:#fafdff;position:absolute; left:auto; right:0; top:0; z-index:1;font-size:16px; padding:17px;box-shadow: 0 0 24px 0 rgba(15,66,76,.25); margin:0; border:1px solid #eee;}
#chatbody .beforequestion .question-icon{cursor:pointer;}
#normalquestion{border-left:1px solid #ccc;height:544px;width:307px; box-sizing:border-box; padding:17px; background:#fafdff;position:absolute;font-size:16px; right:0; top:60px;}
#normalquestion img{width:275px;}
#chatbody .noramlquestionbox{height:90%;overflow-y:auto;overflow-x:hidden;font-size:14px; }
#chatbody .normalquestion ul{ dispaly:block;}
#chatbody .normalquestion ul li{ padding-bottom:15px;margin:15px;white-space:normal; word-break : break-all; word-wrap: break-word;border-bottom:1px solid #d9d9d9;fontsize:12px;}
#chatbody .normalquestion ul li a{font-size:12px;color:#666666;}
#chatbody .normalquestion .nqlist{cursor:pointer;}
#changebig {display:none;}
#changesmall{display:none;}
#chatbody .beforequestion .question-main ul li:nth-child(3n+2){ margin:10px 20px;}



/*liuyan*/
#chatbody .liuyan{display:none;top:0; right:0; transition:all linear 300ms;height:94%;width:80%; max-width:310px; background:#fafdff; border-radius:5px 5px 0 0 ; position:absolute;z-index: 1;font-size:13px; padding:17px;box-shadow: 0 0 24px 0 rgba(15,66,76,.25);z-index: 1000;}
#chatbody .liuyan.show{display:block;}
#chatbody .liuyan.single{width: 37%;}
#chatbody .liuyan .liuyan-title{font-size:18px;}
#chatbody .liuyan .liuyan-close{ height:20px;width:20px; background: url(/public/images/icon/livebgicon.png) no-repeat -775px 1px  ; position:absolute; top:14px;right:10px;}
#chatbody .liuyan .liuyan-close:hover{ background: url(/public/images/icon/livebgicon.png) no-repeat -815px 1px; }
#liuyantext{padding:1px 0 ; color:#333; resize:none; width:304px; background:none; line-height:1.5em; height:10em; outline:none;}
#liuyansubmit{float:right;padding:8px;background:#a9add9; border:0; color:#fff;border-radius:2px; outline:none; cursor:pointer;margin-top:20px;font-size:14px;}
#chatbody .liuyan #liuyantel{width:245px;height:45px;letter-spacing:0px;border: 1px solid rgb(224,233,232);}
#chatbody .liuyan #liuyanemail{width:245px;height:45px;margin-top:20px;letter-spacing:0px;border: 1px solid rgb(224,233,232);}
#chatbody .liuyan #liuyantext{border: 1px solid #eee;padding:2px;}
#liuyansubmit:hover{ background:#f60;}
#chatbody .liuyan .liuyan-icon{ height:30px;width:30px; background: url(/public/images/icon/liuyan.png) no-repeat ;background-size:30px 30px; position:absolute; top:10px;left:12px;}

/*dafen*/
#chatbody .pingjia{display:none;height:94%;top:0; right:0; transition:all linear 300ms;;width:80%; background:#fafdff; border-radius:5px 5px 0 0 ; position:absolute;z-index: 1;font-size:13px; padding:17px;box-shadow: 0 0 24px 0 rgba(15,66,76,.25);z-index: 1000;}
#chatbody .pingjia.single{width: 37%;}
#chatbody .pingjia.show{display:block;}
#chatbody .pingjia .dafen-title{font-size:18px;}
#chatbody .pingjia .closedafen{ height:20px;width:20px; background: url(/public/images/icon/livebgicon.png) no-repeat -775px 1px  ; position:absolute; top:14px;right:10px;}
#chatbody .pingjia .closedafen:hover{ background: url(/public/images/icon/livebgicon.png) no-repeat -815px 1px; }
#chatbody .pingjia #dafen ul{float:left;}
#chatbody .pingjia #dafen ul li{list-style: none; width:35px;height:27px;float:left;background:url(/public/images/icon/liveserver.png) no-repeat -174px 0px;}
#chatbody .pingjia #dafen ul li.on{background:url(/public/images/icon/liveserver.png) no-repeat -174px -35px;}
#chatbody .pingjia #dafensubmit{float:right;background:#a9add9; border:0; color:#fff; padding:8px; border-radius:2px; outline:none; cursor:pointer;}
#chatbody .pingjia #dafensubmit:hover{ background:#f60;}
#chatbody .pingjia #dafentext{ padding:10px 0 ; color:#333; resize:none; width:304px; background:none; line-height:1.5em; height:9em; outline:none;margin-bottom:10px;margin-left:3px;}
#chatbody .pingjia #canceldafen{float:left;background:#a9add9; border:0; color:#fff; padding:8px; border-radius:2px; position:absolute; outline:none; cursor:pointer;margin-left: 8px;}
#chatbody .pingjia #canceldafen:hover{ background:#f60;}
#chatbody .pingjia #pingStar li {cursor: pointer;}