@charset "utf-8";
*::-webkit-input-placeholder { 
color: #aaaaaa; font-size:14px;
} 
*:-moz-placeholder { 
color: #aaaaaa; font-size:14px; 
} 
*:-ms-input-placeholder { 
/* IE10+ */ 
color: #aaaaaa; font-size:14px; 
} 
/*head*/
#chatbox{ display:none; width:390px; position:fixed; right:60px; bottom:10px; z-index:999;box-shadow: 0 0 24px 0 rgba(15,66,76,.25);font-family:Microsoft Yahei;}
#chatbox input{font-family:Microsoft Yahei;letter-spacing:2px;padding-left:8px;}
#chatbox .msghead{height:60px; background:#445386; border-radius:5px 5px 0 0 ; position:relative;}
#chatbox .headimg{width: 42px;height: 42px;border-radius: 50%;float:left; margin:10px 10px 5px 9px;}
#chatbox .headinfo{float: left;height:32px; padding:15px 0 10px 0; line-height:16px;color:#fff;}
#chatbox .msghead .headoperate{ float:right;}
#chatbox .msghead .headoperate i{display:inline-block; margin:12px 10px 4px 0;width:10px; height:10px;cursor:pointer;}
#chatbox .msghead .headoperate i#closetalk { float:right;background: url(/public/images/icon/liveserver.png) no-repeat -150px 0px;}
#chatbox .msghead .headoperate i#closetalk:hover{background: url(/public/images/icon/liveserver.png) no-repeat -150px -18px;}
#chatbox .msghead .headoperate i#changebig {float:right;background: url(/public/images/icon/liveserver.png) no-repeat -125px 0px;}
#chatbox .msghead .headoperate i#changesmall {float:right;background: url(/public/images/icon/liveserver.png) no-repeat -125px -18px;}
/*content*/
#chatbox .msgcont{ height:423px;color:#333;overflow-y:auto;overflow-x:hidden;width:100%;padding:0;background:#fafdff;position:relative;scrollBar-face-color:#c9cce7;}
#chatbox .msgcont::-webkit-scrollbar{width:6px}
#chatbox .msgcont::-webkit-scrollbar-thumb{width:6px;background-color:#c9cce7;border-radius:4px}
#chatbox .msgcont .msgdate{ padding:5px; font-size:13px; line-height:1.8em; text-align:center; color:#666; cursor:pointer; background:#F5F5F5; border-radius:5px;}
#chatbox .msgcont ul{ padding:0 20px 10px;}
#chatbox .msgcont ul li{ margin:14px 0;}
#chatbox .msgcont .leftName{width:100%;font-size:13px;color: #999;margin-bottom:2px;}
#chatbox .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; }
#chatbox .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;}
#chatbox .msgcont .rightmsg{ text-align:right;font-size:13px; }
#chatbox .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; }
#chatbox .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;}
#chatbox .msgcont p{ text-indent:0;}
#chatbox .msgcont img{ max-width:100%;}
#chatbox .msgcont .leftmsg .cont a{ color:#21428C}
#chatbox .msgcont .leftmsg .cont a:hover{ color:#f60}

/*foot*/
#chatbox .msgfoot{ height:120px; border-top:1px solid #eee; background:#fafdff;}
#chatbox .msgtools{ padding:10px;}
#chatbox a{ text-decoration:none;}
#chatbox .msgtools a{ color:green}
#chatbox .msgtools a.right{ float:right;}
#chatbox .msgtools a:hover{ color:#f60}
#chatbox .inputmsg{ position:relative; padding:0 10px;}
#chatbox .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);}
#chatbox .inputmsg .sendmsg{padding:8px 8px 8px 10px;margin-right:-3px;background:#445386; border:0; color:#fff; border-radius:2px; position:absolute; right:5px; top:24px; outline:none; cursor:pointer;}
#chatbox .inputmsg .sendmsg:hover{ background:#f60;}

/*beforequestion*/
#chatbox .beforequestion{position:absolute; width:20px; height:20px; top:40px; right:0;z-index: 1; transition:all linear 300ms;}
#question-close{ height:20px;width:20px; background: url(/public/images/icon/livebgicon.png) no-repeat -775px 1px  ; position:absolute; top:14px;right:10px;}
#question-close:hover{ background: url(/public/images/icon/livebgicon.png) no-repeat -815px 1px; cursor:pointer;}
#chatbox .beforequestion .question-title{ display:none;}
#chatbox .beforequestion .question-close:hover{ background: url(/public/images/icon/livebgicon.png) no-repeat -815px 1px; }
#chatbox .beforequestion .question-main{ display:none;height:68%;width:100%; text-align:center;}
#chatbox .beforequestion .question-main ul li{line-height: 42px;border: 1px solid #e0e9e8;color:#535656;background: #fff;border-radius: 2px;text-align: center;cursor:pointer;width:100px;height: 42px;margin: 10px; display:inline-block;}
#chatbox .beforequestion .question-main ul li:hover{border:1px solid #a8add9; color:#a8add9;}
#chatbox .beforequestion .question-foot{ display:none;margin: 12px auto auto;width:180px;height:36px;color:#fff;font-size:17px;text-align: center;border-radius: 2px;background: #e1e3f1;cursor:pointer;text-indent:10px;}
#chatbox .beforequestion .question-commit{ padding:7px;font-weight:bold;}
#chatbox .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;}
#chatbox .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;}
#chatbox .beforequestion.show .question-icon{ display:none;}
#chatbox .beforequestion.show .question-title{ display:block;}
#chatbox .beforequestion.show .question-main{ display:block;}
#chatbox .beforequestion.show .question-foot{ display:block;}

/*tologin*/
#chatbox .tologin{ position:absolute; left:50%; top:50%; width:280px; height:180px; margin:-100px 0 0 -150px; background:#fff; box-shadow: 0 0 20px rgb(68,83,134); border:1px solid #B5BDD4; padding:10px; font-size:13px;}

/*dafen*/
#chatbox .dafenbox{display:none;}
#chatbox .dafenbox.show{display:block;top:0; right:0; transition:all linear 300ms;height:94%;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);}
#chatbox .dafenbox .dafen-title{font-size:18px;}
#chatbox .dafenbox .closedafen{ height:20px;width:20px; background: url(/public/images/icon/livebgicon.png) no-repeat -775px 1px  ; position:absolute; top:14px;right:10px;}
#chatbox .dafenbox .closedafen:hover{ background: url(/public/images/icon/livebgicon.png) no-repeat -815px 1px; }

/*liuyan*/
#chatbox .liuyanbox{display:none;}
#chatbox .liuyanbox.show{ display:block;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);}
#chatbox .liuyanbox .liuyan-title{font-size:18px;}
#chatbox .liuyanbox .liuyan-close{ height:20px;width:20px; background: url(/public/images/icon/livebgicon.png) no-repeat -775px 1px  ; position:absolute; top:14px;right:10px;}
#chatbox .liuyanbox .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;}

#liuyansubmit:hover{ background:#f60;}
#chatbox .liuyanbox .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;}

/*superstatus*/
#chatbox .superstatus{ position:absolute; left:50%; bottom:122px; width:120px; margin-left:-60px; text-align:center; background:#eee; border-radius:5px; line-height:2em; padding:0 10px; color:#999; font-size:13px;}
/*biaoqing*/
#chatbox .biaoqingbox{display:none;}
#chatbox .biaoqingbox.show{display: block;height: 33%;width: 95%;max-width: 392px;top: 0;left: 0;background: #fafdff;border-radius: 5px 5px 0 0;position: absolute;z-index: 1;font-size: 13px;padding: 8px;box-shadow: 0 0 24px 0 rgba(15,66,76,.25);margin: 312px 0px 0 1px;}
#chatbox .biaoqingbox.show .addface{width: 44px;height:44px;}
#chatbox .filebox{ height:16%;width:86%; background:#A8ADD9; border-radius:5px 5px 0 0 ; position:absolute;z-index: 1;font-size:13px; padding:9px;box-shadow: 0 0 24px 0 rgba(15,66,76,.45);margin:367px 22px 0 0;}
#allface li{ display:inline-block; width:44px; height:44px; padding:0px; border:1px solid #f8f8f8; float:left;}
#allface li img{width: 44px;height: 44px;}
/*zhezhao*/
#chatbox .zhezhao{position: absolute;top:60px;bottom:0;left:0;right:0;background:#000;opacity:0.7;}
#chatbox .zhezhaotips{background: url(/public/images/icon/livetips.png);width: 260px;height: 156px; margin:auto auto;color:#fff;position: absolute;top:0;bottom:0;left:0;right:0;}
#chatbox .zhezhaotips input{margin:86px 0 0 151px;cursor:pointer;opacity:0}
#dafen ul{float:left;}
#dafen ul li{list-style: none; width:35px;height:27px;float:left;background:url(/public/images/icon/liveserver.png) no-repeat -174px 0px;}
#dafen ul li.on{background:url(/public/images/icon/liveserver.png) no-repeat -174px -35px;}


#commenttag .commenttag{padding:3px 16px 3px ;float:left;color:#666666;display: inline-block;margin: 5px 6px 5px 6px;background: #ccc;cursor:pointer;border-radius: 12px;font-size: 13px}
#commenttag .commenttag:hover{background: #a8add9;color: #fff;}
#canceldafen{float:left;background:#a9add9; border:0; color:#fff; padding:8px; border-radius:2px; position:absolute; outline:none; cursor:pointer;margin-left: 8px;}
#canceldafen:hover{ background:#f60;}

#dafensubmit{float:right;background:#a9add9; border:0; color:#fff; padding:8px; border-radius:2px; outline:none; cursor:pointer;}
#dafensubmit:hover{ background:#f60;}
#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;}

#biaoqing {float:left; display:inline-block;margin:4px 10px 4px 0;background: url(/public/images/icon/liveserver.png) no-repeat 0px 0px;width:20px;height:20px;cursor:pointer;}
#biaoqing:hover{background: url(/public/images/icon/liveserver.png) no-repeat 0px -25px;}
#tupian {float:left; display:inline-block;margin:4px 10px 4px 0;background: url(/public/images/icon/liveserver.png) no-repeat -60px 0px;width:20px;height:20px;cursor:pointer;position: relative;}
#tupian:hover{background: url(/public/images/icon/liveserver.png) no-repeat -60px -25px;}

#msgclear {float:left; display:inline-block;margin:4px 10px 4px 0;background: url(/public/images/icon/liveserver.png) no-repeat -90px 0px;width:20px;height:20px;cursor:pointer;}
#msgclear:hover{background: url(/public/images/icon/liveserver.png) no-repeat -90px -25px;}

.tencolor{background:#d8cb85 !important;}
.tencolor:hover{background:#f60 !important;}
.tenheadcolor{background:#d8cb85 !important;}
#dafen.tendafen ul li{list-style: none; width:35px;height:27px;float:left;background:url(/public/images/icon/liveserver10.png) no-repeat -174px 0px;}
#dafen.tendafen ul li.on{background:url(/public/images/icon/liveserver10.png) no-repeat -174px -35px;}
.tencont{background: #efe5b2 !important;color: #9c8e44 !important;}
.tencont:before{content:""; position:absolute; left:100%; top:10px; width:0; border-width:0 0 12px 12px; border-style:solid; border-color:transparent #efe5b2 !important;}