@font-face {
    font-family: 'Material Icons Extended';
    font-style: normal;
    font-weight: 400;
    src:url(../../assets/other/MaterialIconsExtended.eot);
    src: local('Material Icons Extended'), local('Material Icons Extended'), url(../../assets/other/MaterialIconsExtended.eot?#iefix) format('embedede-opentype'), url(../../assets/other/MaterialIconsExtended.woff) format('woff');
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(../../assets/other/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(../../assets/other/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body,html{height:100%;width:100%;}
body{background-color:#f1f1f1;color:#333;font-size:12px;padding:0;margin:0;font-family: "Microsoft YaHei", "微软雅黑", Arial, Helvetica, "黑体", Tahoma;}
table{font-size:12px;}
.chatLeft,.chatHead,.chatInfo,.chatScrollBox,.pictureShow .editWrap{-moz-user-select:none;/*火狐*/-webkit-user-select:none;/*webkit浏览器*/-ms-user-select:none;/*IE10*/-khtml-user-select:none;/*早期浏览器*/user-select:none;}
.clr999{color:#999;}
.noselect *{user-select:none !important;cursor:w-resize !important;}
ul , ol ,li{list-style-type:none;padding:0;}
.clear{width:0;height:0;margin:0;padding:0;clear:both;}
.chatBox{background-color:#ccc;border:none;position:absolute;top:0;left:0;bottom:0;right:0;min-height:430px;min-width:610px;}
.customerPage .chatBox{position:relative;width:1200px;height:100%;margin:0 auto;border-left:1px solid #ccc;border-right:1px solid #ccc;}
.chatShowBottom{height:20px;}

body .guestOn{display:block;}

.less1Chat .chatLeft{display:none;}
.less1Chat .chatContent{left:0;}

.disconnectOpa{position:absolute;left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,0.1);z-index:100;display:none;}
.disconnectOpa div{margin:0 auto;background-color:#ffb408;padding:5px;border-radius:2px;width:230px;margin-top:5px;text-align:center;}
/* 头部start */
.chatHead{height:40px;line-height:40px;background-color:#f5f5f5;border-bottom:1px solid #e5e5e5;}
/* 放大缩小图片相关start */
.pictureShow{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.8);z-index:15;overflow:hidden;display:none;}
.pictureShow .fa{font-size:18px;line-height:36px;color: #eee;}
.pictureShow #picture{position:absolute;cursor:move;}
.pictureShow .close{font-family: Helvetica, Arial, sans-serif;font-size:30px;}

.pictureShow .editWrap{position:absolute;bottom:0;left:50%;width:0;}
.pictureShow  .edit{width:200px;height:36px;line-height:36px;margin-left:-100px;background-color:rgba(0,0,0,0.6);border-top-left-radius:5px;border-top-right-radius:5px;text-align:center;}
.pictureShow  .edit > div{display:inline-block;margin:0;cursor:pointer;width:40px;vertical-align:top;}
.pictureShow  .edit > div:hover{background-color:rgba(0,0,0,0.6)}
/* 放大缩小图片相关end */
.chatHead div{float:left;}
.chatLogo img{height:20px;margin-top:10px;}
.chatName{font-size:12px;font-weight:800;}
.chatSatae{color:#555;}
.chatPerson{height:35px;line-height:15px;margin-left:10px;padding-top:5px;-webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;}
#fromUrl{padding-right:40px;}
#fromUrl a,#fromUrl a:visited{color: blue;}
.chatClose{position:absolute;width:20px;height:20px;line-height:20px;top:15px;right:5px;border-radius:50%;font-family:'Material Icons Extended';font-size:18px;color:#ccc;cursor:pointer;text-align:center;display:none;}
.gusetSingleTitle:hover .chatClose{display:block;}
.chatClose:hover{background-color:#ffb408;color:#fff;}
.chatHead .chatMore{float:right;margin-right:13px;cursor:pointer;text-decoration:underline;}
.chatHead .chatMoreBtn{width: 7px;height: 7px;border: 3px solid #006;border-radius: 50%;margin-top: 14px;}
.chatHead  .statusHidden .chatMoreBtn{border-color:#ffb408;}
.chatHead .chatMore:hover{color:#ffb408;}
.chatHead .chatMoreGraph{display: inline-block;width: 0; height: 0;border: 6px solid transparent;border-top-color: #666;border-width: 5px 4px;position: relative;top: 5px;left:2px;}
.chatHead .chatMore:hover .chatMoreGraph{border-top-color: #ffb408;}
.chatMoreBox {right: 10px;top:30px;color:#333;}

.chatMoreBox.flowMenuBase li {padding-right: 24px;cursor: pointer;padding-left:0;}
.chatMoreBox div {width: 24px;height: 29px;text-align:center;float: left;margin-right: 8px;}
.chatMoreBox .fa{line-height: 30px;}
.chatMoreBox .ring{width: 7px;height: 7px;border: 3px solid #ffb408;border-radius: 50%;margin-top: 8px;margin-left: 6px;}
.chatMoreBox.statusHidden .ring{border-color:#006;}
/* 头部end */

/* 左侧列表start */
.chatLeft{position: absolute;width: 280px;top: 41px;left: 0;bottom: 0;background-color: #fff;z-index: 2;overflow-x:hidden;overflow-y:hidden;background-color:#f3f3f3;}
.chatLeft:hover{overflow-y:auto;}
.chatLeft #gusetList{  margin: 0;padding-right:2px;margin-top: 10px;}
.chatLeft .gusetSingleTitle {height: 50px;line-height: 50px;cursor: default;font-size: 13px;position:relative;padding-left:65px;border-left:3px solid transparent;white-space: nowrap;}
.chatLeft .gusetSingleTitle.systemMessage .messageName{color:red;}
.chatLeft .gusetSingleTitle.systemMessage .chatInfoDetailBtn{display:none;}
.chatLeft .platformMark{background-image:url("../imgs/platform.png");background-repeat:no-repeat;position:absolute;top:0px;left:15px;background-position-y:10px;background-position-x:-58px;width:50px;height:50px;background-size:150px;line-height:50px;text-align:center;font-size:14px;color:#fff;}
/*.chatLeft .platformMark{background-color:#006;}

.gusetSingleTitle .platformMark:after{content:"phone_iphone";position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;color:#eee;}
.platformMobile .platformMark:after{content:"phone_iphone";}
.platformWeixin  .platformMark:after{content:"phone_iphone";}*/
/*.chatLeft .statusLeft .platformMark{background-color:#9fa0a0;}
.chatLeft .statusChange .platformMark{background-color:#ffb408;}*/
.chatLeft .statusLeft .platformMark{background-position-x:0;}
.chatLeft .statusChange .platformMark{background-position-x:-116px;}
.chatLeft .platformWeixin .platformMark{background-position-y:-88px;}
.chatLeft .platformMobile .platformMark{background-position-y:-40px;}
.chatLeft .platformSms .platformMark{background-position-y:-136px;background-position-x: -57px;}
.chatLeft .statusLeft .messageName,.chatLeft .gusetSingleTitle.statusLeft .messageDetail{color: rgba(0,0,0,0.34);}
.chatLeft .statusChange .messageName,.chatLeft .gusetSingleTitle.statusChange .messageDetail{color: #ffb408;}
.chatLeft .gusetSingleTitle .messageMenu .fa{color: #006;}
.chatLeft .statusLeft .messageMenu .fa{color: rgba(0,0,0,0.34);}
.chatLeft .statusChange .messageMenu .fa{color: #ffb408;}
.gusetListDetail{height: 50px;line-height: 50px;overflow:hidden;}
.chatLeft .gusetSingleTitle .guestEditMenu {right: 1px;top:28px;}
.chatLeft .gusetSingleTitle .guestEditMenu.showFromBottom{top: auto;bottom:28px;}
.chatLeft .online{color:#ffb408;}
.chatLeft .guestOn{border-left-color:#3b7bea;}
.chatLeft .gusetSingleTitle:hover{background-color:#e5e5e5}
.chatLeft .gusetSingleTitle .messageDetail{font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;display:inline;}
.chatLeft .gusetSingleTitle .messageName{display:inline;font-size:16px;}
.chatLeft .messageNum{position:absolute;width: 20px;height: 16px;border-radius: 10px;background-color: #f36a09;top: 25px;right: 5px;line-height: 18px;text-align: center;color: #fff;display:none;z-index: 1;}
.chatLeft .messageMenu{position: absolute;width: 20px;height: 70px;text-align: center;top:0;right: 0;cursor: pointer;background-color: #fff;}
.chatLeft .guestOn .messageMenu{background-color:#f5f5f5;}
.chatLeft .messageMenu .fa{line-height: 70px;font-size: 14px;}
.chatLeft .msgNumOn{display:block;}
.chatLeft .gusetSingleTitle:hover .messageNum{display:none;}
.chatLeft .gusetSingleTitle:hover .messageMenu{background-color: #e5e5e5;}
.chatLeft .chatLeftDrag{position: absolute;width: 6px;right: -3px;top: 0;bottom: 0;cursor: w-resize;}
/* 左侧列表end */

/* 显示对话start */
.chatContent{background-color:#fff;border:none;position:absolute;top:41px;left:280px;;bottom:0;right:350px;}
.chatContent p{padding:0;margin:0;}
.chatShow,.mainLogScroll{padding:0;overflow-y:auto;position:absolute;top:0;left:0;bottom:159px;right:0;min-width:100px;min-height:100px;;word-wrap:break-word;word-break:break-all;}
.mainLogScroll{bottom:30px;overflow:hidden;right:10px;}
.mainLogBox{position:absolute;left:0;right:0;bottom:0;z-index:-1;}
.guestOn.mainLogBox{z-index:1;right:1px;}

.usertitle{padding:0;margin:3px 10px 2px 7px;color:blue;}
.singleTalk{overflow:hidden;position:relative;padding-left:50px;padding-right:50px;margin:20px;}
/*.singleTalk.mySelf{text-align:right;}*/
.singleTalk .portrait{width:50px;height:50px;border-radius:50%;position:absolute;left:0;top:0;background-color:#f1f1f1;}
.servicePage .singleTalk.mySelf .portrait,.customerPage .singleTalk .portrait{background-image:url(../imgs/service_portrait.png);background-position:0;}
.servicePage .singleTalk .portrait,.customerPage .singleTalk.mySelf .portrait{background-image:url(../imgs/head_portrait.png);background-position: -4px 0;}
/*.singleTalk.mySelf .portrait{right:0;left:auto;}*/
.singleTalk .usermessage {float:left;background-color:#f1f1f1;padding:10px;margin:0 10px;font-size: 14px;border-radius:4px;position:relative;}
.singleTalk.mySelf .usermessage{float:left;background-color:#ccf3fa;}
.singleTalk .usermessage:after{content:" ";position:absolute;width:0;height:0;border:6px solid transparent;border-right-color:#f1f1f1;border-left-width:0;top:10px;left:-6px;}
.singleTalk.mySelf .usermessage:after{border:6px solid transparent;border-right-color:#ccf3fa;border-left-width:0;}

.singleTalk.mySelf .usertitle{color:#0094a2}
.usertitle span{margin:0 3px;}
.usermessage img{max-width:80%;max-height:80%;}
.usermessage .showmenu{color:blue;cursor:pointer;position:relative;text-decoration:underline;user-select:all;}
.chatOperatingSpace{position:absolute;left:0;bottom:0;right:0;height:159px;}
.chatOperatingSpace .disabledOpa{position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0);z-index: 1;display:none;}
.stateAnnounce{padding: 7px 0px;text-align: center;color: #999;}
.stateAnnounce div{display: inline-block;width: 70px;height: 5px;background: transparent url("../imgs/stateannounce.png") no-repeat scroll;}
.stateAnnounce .sleft{margin-right:10px;background-position:-70px 0;}
.stateAnnounce .sright{margin-left:10px;}
.mainLogBoxPre{position:absolute;bottom:0;left:0;right:1px;height:29px;line-height:29px;overflow:hidden;padding-left:10px;border-top:1px solid #ddd;background-color:#f5f5f5;}
.mainLogBoxPre.guestOn{z-index:1;}
/* 自制滚动条start */
.chatScrollBox{position:absolute;width:0px;background-color:#eee;top:0;bottom:30px;right:1px;overflow:hidden;visibility:hidden;}
.chatShow:hover .chatScrollBox{visibility:visible;}
.chatScrollBox:hover,.chatScrollBox:active{background-color:#e9e9e9;}
.chatScrollSlider{position:absolute;height:40px;background-color:#aaa;width:10px;}
.chatScrollSlider:hover{background-color:#999}
/* 自制滚动条end */
/* 显示对话end */
/* 按条件查询的历史记录样式要重写start */
#messageQueryBlock{position:relative;}
#messageInfoWrap{margin-left:0;position:absolute;top:63px;left:0;right:-10px;left:0;bottom:30px;overflow:auto;}
#messageInfoWrap .singleTalk.mySelf{text-align:left;}
#messageInfoWrap  .singleTalk{margin:0;padding:0 0 10px;}
#messageInfoWrap  .singleTalk.selectedTalkMark,#messageInfoWrap  .singleTalk.selectedTalkMark:hover{background-color:#ffedc4;}
#messageInfoWrap  .singleTalk .usermessage{float:left;background-color:transparent;padding:0;}
#messageInfoWrap  .singleTalk .usermessage:after{display:none;}
#messageQueryBlock  .extraBlockContent{position:relative;}
#messageQueryBlock  .showContext{color:blue;text-decoration:underline;font-size:12px;text-align:right;margin-right:10px;visibility:hidden;}
#messageQueryBlock  .showContext span{cursor:pointer;}
#messageInfoWrap  .singleTalk:hover{background-color:#f5f5f5;}
#messageInfoWrap  .singleTalk:hover .showContext{visibility:visible;}
.messageInfoFoot{position:absolute;bottom:0;left:0;right:-10px;background-color:#f1f1f1;height:30px;line-height:30px;padding:0;text-align:center;font-size:13px;overflow: hidden;}
.messageInfoFoot .pageInfo{display:inline-block;vertical-align:top;}
/* 按条件查询的历史记录样式要重写end */
/* 上传文件start */
.uploadFile{width: 200px;height: 45px;border: 1px solid #bbb;background-color: #fefefe;border-radius: 2px;	margin:10px 0;position:relative;}
.uploadFileImg{position: absolute;width: 25px;height: 31px;background-color: #ccc;border-radius: 2px;margin-left: 7px;margin-top: 7px;}
.uploadFileImg1{position: absolute;right: 0;width: 0;height: 0;border: 4px solid #bbb;border-top-color: #fefefe;border-right-color: #fefefe;}
.uploadFileImg2{position: absolute;width: 9px;height: 9px;border-left: 2px solid #fefefe;border-bottom: 2px solid #fefefe;top: 0;right: 0;}
.uploadFileDetail{margin-left: 38px;margin-top: 3px;line-height: 18px;margin-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.uploadFileDetail a,.uploadFileDetail a:visited{text-decoration:underline;color:#3b4bea;}

.guestInfoInChat{padding: 10px;margin-bottom: 10px;font-size: 14px;color: #000;}
.guestInfoInChat > div{margin:2px 0;}
.guestInfoInChat .remark,.guestInfoInChat a{cursor:pointer;color:blue;text-decoration:underline;}
/* 上传文件end */

/* 工具与输入区域start */

.chatTools{height:30px;/*background-color:#f5f5f5;*/border-top:1px solid #ddd;padding-left:3px;position:relative;}
.chatTools .toolBox {width: 29px;height: 20px;margin-left: 8px;margin-top: 4px;border-radius: 2px;/*border: 1px solid #f5f5f5;*/background: url(../imgs/toolbox.png) no-repeat;cursor:pointer;float:left;}
.chatTools .toolBox {background-image: url(../imgs/toolbox_i8.png)\0;}
/*.chatTools .toolBox:hover{border-color:#aaa;}*/
.chatTools .downFile{background-position:3px 2px;}
.chatTools .downFile:hover{background-position:-32px 2px;}
.chatTools .upFile{background-position:3px -22px; background-size: 50px 130px;}
.chatTools .upFile:hover{background-position:-30px -22px; background-size: 50px 130px;}
.chatTools .saveFile{background-position:3px -46px;background-size: 50px 130px;}
.chatTools .saveFile:hover{background-position:-29px -46px;background-size: 50px 130px;}
.chatTools .phraseBtn{background-size: 55px 139px;  background-position: 2px -100px;}
.chatTools .phraseBtn:hover{background-size: 55px 139px;  background-position: -34px -100px;}
.chatTools .userType{background-position:3px -89px;}
.chatTools .userType:hover{background-position:-32px -89px;}
.chatTools .historyFile.toolBox{background-image: none;float: right;margin-right: 12px;width: auto;text-align: center;line-height: 20px;padding: 0 4px;color: #666;}
.chatTools .changeServer{background-size: 50px 130px; background-position: 2px -69px;position:relative;}
.chatTools .changeServer:hover,.chatTools .changeServerOn{background-size: 50px 130px; background-position: -31px -69px/*;border-color:#aaa;*/}
.changeServerOn .serverListBox{display:block;}
.serverListBox{left:-32px;bottom:26px;}
#changeServerList{white-space:nowrap;border-collapse:collapse;}
#changeServerList tr{line-height:32px;height:32px;}
#changeServerList tr:hover{background-color: #e5e5e5;}
#changeServerList tr:hover .serviceName{border-left-color: #ffb408;}
{border-left-color: #ffb408;}
#changeServerList  .serviceName{border-left:3px solid transparent;padding:0 20px;}
#changeServerList  .serviceStats{padding:0 20px;}
#changeServerList .serviceOn .serviceName,#changeServerList .serviceOn:hover .serviceName,#changeServerList .online:hover .serviceName{border-left-color:#3b7bea}
#changeServerList .online{color:#333;}
#changeServerList .offline{color:#999;}
.inputArea{height:88px;overflow:hidden;font-size:14px;}
.chatInput{height:80px;padding:4px;overflow-x:hidden;overflow-y:auto;font-size:13px;line-height:18px;word-wrap:break-word;word-break:break-all;display:none;}
.chatInput:focus{border:none;outline:none;}
.chatInput img{border:1px solid #fff;max-width:70%;}
.chatInput img:active{border:1px solid #333;}
.chatButton{height:40px;line-height:40px;background: url(../imgs/btmimage.png) repeat-x;text-align:right;}
.chatButton span{border:none;background-color:#ffb408;border-radius:3px;padding:0px 16px;margin-right:10px;cursor:pointer;height:24px;line-height:24px;display: inline-block;float:right;margin-top:7px;}
.chatButton span:focus{border:none;outline:none;}
.chatButton span:hover{background-color: #FFC134;}
.chatButton span:active{background-color: #EFA700;}

span.sendInput{background:url(../imgs/nextbtn_bg1.png) no-repeat;width:100px;background-size:100px 26px;border:none;text-align:left;text-indent:40px;color:#fff;padding:0;overflow:hidden;}
span.sendInput:hover{background-image:url(../imgs/nextbtn_bg.png)}
span.keyInput{border-top-left-radius: 0;border-bottom-left-radius: 0;width: 24px;padding: 0;display:none;}
.triBox{  position: absolute;width: 10px;height: 5px;margin-left: 7px;margin-top: 9px;background-image: url(../imgs/keytype.png);}
.lineBox{width: 1px;height: 14px;background-color: #f3f3f3;position: absolute;margin-top: 4px;}
.typeSelect {padding:1px;position: absolute;width: 180px;right: -150px;bottom: 35px;z-index: 3;background-color: #fff;border: 1px solid #999;border-radius: 2px;display:none;}
.typeDetail {height: 20px;line-height: 20px;text-align: left;}
.typeDetail:hover{background-color:#ffb408;cursor:pointer;}
.typeDetail:hover div{background-color:#ffb408;}
.typeDetail div {display: inline-block;height: 20px;line-height: 20px;width: 25px;background-color: #FFE6AE;margin-right: 10px;text-align:center;}

/* 常用短语区start */
.phraseBox{bottom: 31px;}
.addPhraseBtn{position: absolute;bottom: 0;left: 0;right: 0;height: 24px;line-height: 24px;background-color: #fff;text-align: center;color: blue;text-decoration: underline;cursor: pointer;}
.addPhraseBtn:hover{color:#3b7bea;}
.phraseBoxScroll{min-width: 250px;max-height: 350px;overflow: auto;}
.phraseBox .phraseBoxScroll ul{margin-bottom:24px;}
.phraseBox li{padding:0 10px;}
/* 常用短语区end */

.toolList{position:absolute;margin-left:95px;margin-top:5px;background-color:#fff;border-radius:3px;padding:1px;border:1px solid #ccc;display:none;}
.toolList li{padding:0px 10px 0px 0px;;cursor:pointer;}
.toolList li:hover,.toolList li:hover .serverBG{background-color:#ffb408;}
.toolList .offline{color:#999;}
#userTypeList{margin-left:125px;}
.serverBG{background-color: #f1f1f1;margin-right: 5px;width: 22px;height: 22px;line-height: 22px;display: inline-block;}
/* 工具与输入区域end */

/* 右侧区域start */
.guestInfo{color:#444;padding:10px;}
.guestInfo table{width:100%;}
.guestInfo input{width:100%;border:none;border-bottom:1px solid #ccc;}
.guestInfo input:focus{outline:none;}
.saveUserInfo{color:blue;cursor:pointer;font-size:13px;}
.saveUserInfo:hover{text-decoration:underline;}
.tright{text-align:right;padding:2px 0;}
.guestOn.historyOn{display:block;}
.taskInWaiting li{padding:1px 0 20px;}
.taskInWaiting p {padding: 0;margin: 0;height: 12px;line-height: 12px;margin-top:5px;}
.taskInWaiting .taskDetail{color:#9abbc8;}
.requestLi,.delayLi{cursor:no-drop;}
.uploadFileIframe{display:none;}
.uploadFileTips{position:absolute;left:0;right:0;bottom:0;background-color:#fff;box-shadow:0 -2px 2px 0 rgba(0,0,0,.5);overflow:hidden;}
.uploadFileProgress{height: 20px;margin-top:-1px;line-height: 22px;border-top: 1px dashed;position: relative;padding-left: 30px;text-overflow: ellipsis;overflow: hidden;}
.uploadFileState{position: absolute;background: url(../imgs/toolbox.png) no-repeat;height: 22px;width: 22px;background-position: -32px -21px;left: 4px;}
.complete .uploadFileState{background:none;}
.complete .uploadFileState:after{content: " ";display: block;width: 10px;height: 6px;border-left: 2px solid blue;border-bottom: 2px solid blue;transform: rotate(-45deg);position: absolute;left: 4px;top: 5px;}


.extraBlockTitle {height: 32px;line-height: 32px;border-top: 1px solid #ddd;padding-left: 10px;cursor:default;background-color: #f5f5f5;position:relative;}
.extraBlock.onSpread .extraBlockTitle{border-top-color:#ffb408;}
.extraBlockTitle .fa{position: absolute;right: 10px;top: 5px;font-size: 20px;color:#006;}
.extraBlock .fa-angle-right{display:block;}
.extraBlock.onSpread .fa-angle-right{display:none;}
.extraBlock .fa-angle-down{display:none;}
.extraBlock.onSpread .fa-angle-down{display:block;}
.extraBlockContent{padding:0;overflow-x:hidden;overflow-y:hidden;height:0;}
.extraBlockContent:hover{overflow-y:auto;}
.extraBlockContent .list {padding: 3px 0;margin-left: 10px;}
.extraBlockContent .first{margin-top:5px;}
.extraBlockContent .last{margin-bottom:10px;}
.extraBlockContent1 .extraList{user-select:text;margin-left:40px;line-height:16px;position:relative;display:block;min-height:16px;padding:4px 0;white-space:normal;word-break:break-all;margin-right:10px;}

.extraBlockContent1 .extraList:before{content:"";display:block;width:40px;left:-40px;text-align:right;position:absolute;}
.extraBlockContent1 #policyInfoWrap{padding:0;margin:0;}
.extraBlockContent1 .detailPolicy {padding: 5px;margin: 0;line-height: 18px;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;margin-bottom:20px;position:relative;user-select:text;}
.extraBlockContent1 .detailPolicy:last-child .bottomBackground{display:none;}
.extraBlockContent1 .bottomBackground{position:absolute;left:0;right:0;bottom:-21px;height:20px;background-color:#f5f5f5;}
.extraBlockContent1 .policyNo{line-height:30px;border-bottom:1px solid #ddd;margin-top:-5px;}
.extraBlockContent1  #screenShotButton{color:blue;cursor:pointer;}
.extraBlockContent1  #screenShotButton.screenShotDisabled{color:#999;text-decoration:none;}
.extraBlockContent1  #screenShotButton:hover{text-decoration:underline;}
.extraBlockContent1  .pageImageWrap{margin:0 10px 10px;padding:0;position:relative;display:none;max-height:200px;overflow:hidden;}
.extraBlockContent1  .pageImageWrap img{width:100%;}
.extraBlockContent1  .pageImageTips{position:absolute;left:0;right:0;top:0;text-align:center;background-color:rgba(0,0,0,0.4);color:#fff;height:24px;line-height:24px;}
.policyQuery input,.messageQuery input{width:130px;outline:none;border:1px solid #ccc;padding:2px;height:21px;}
.policyQuery{color:blue;cursor:pointer;text-decoration:underline;}
.serch {position: absolute;width: 20px;height: 22px;cursor: pointer;border: 1px solid #ccc; background-color: #efefef; display: inline-block;margin-left:-1px;}
.serch div { width: 13px;height: 12px;background: url(../imgs/sprites.png);margin-top: 5px;margin-left: 3px;}



.terminalInfoDetail .terminalInfo{position:relative;line-height:12px;min-height:18px;padding:3px 10px 3px 65px;}
.terminalInfoDetail .terminalInfo.first{border-top:1px solid #aaa;}
.terminalInfoDetail .terminalInfo.last{margin-bottom:5px;}
.terminalInfoDetail  .detailTitle{position:absolute;left:0;width:55px;text-align:right;color:#aaa;font-size:12px;}
.terminalInfoDetail   a{color:blue;word-wrap:break-word;}
.terminalInfoDetail   a:hover{color:#ffb408;}
.saveCustomerBtn{font-size:16px;color:#3b7bea;cursor:pointer;}
.saveCustomerBtn:hover{text-decoration:underline;}
/* 右侧区域end */

/* 掉线处理start */

.disconnect{position:absolute;display:none;}
.dsnchat {bottom: 0;height: 109px;left: 0;right: 0;z-index: 8;text-align: center;padding-top: 50px;}
.dsnchat span{color:blue;cursor:pointer;}
.dsnchat span:hover{text-decoration:underline;}
.dsninfo {width: 200px;top: 30px;bottom: 0;right: 0;}
.logopa {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: #000;opacity: 0.3;filter:alpha(opacity=30);z-index: 9;display:none;}
.logbox,.changepsw{position: absolute;z-index: 10;background-color: rgb(255, 255, 255);border-radius: 2px;top: 30%;left: 40%;padding:10px;display:none;}
.logbox input,.changepsw input{height:25px;line-height:25px;width:200px;margin:0;border:1px solid #ccc;font-size:13px;padding:0 5px;}
.logbox input:focus,.changepsw input:focus{outline:none;}
.logbox .username,.changepsw .newpsw{border-bottom-width:0;}
.logbox .submitBtn,.changepsw .submitBtn{height:30px;margin-top:10px;cursor:pointer;border-radius:3px;background-color:#ddd;width:210px;}
.logbox .submitBtn:hover,.changepsw .submitBtn:hover{background-color:#eee;}
.logbox .submitBtn:active,.changepsw .submitBtn:active{background-color:#ccc;}
/* 掉线处理end */

/* 常用短语start */
.shortTitle,.taskTitle{width:300px;border:1px solid #aaa;font-size:12px;height:22px;line-height:22px;}
.shortSequence{width:48px;}
.shortTime{width:100px;border:1px solid #aaa;font-size:12px;}
.shortContent,.taskContent{width:400px;height:150px;resize:none;border:1px solid #aaa;font-size:12px;}
.shortTable {margin: 25px 0 0 10px;}
.newPhrase,.newTask,.moreTask,.editRequest{color:blue;float:left;cursor:pointer;}
.newTask:hover,.newPhrase:hover,.moreTask:hover,.editRequest:hover{text-decoration:underline;}
.moreTask{float:right;}
.ptitle{display:inline-block;width:120px;overflow:hidden;cursor:default;}
.pedit{float:right;color:blue;}
.pedit span{cursor:pointer;margin:7px 0 0 5px;display: inline-block;width: 14px;height: 14px;background: url("../imgs/chatinfo.png") no-repeat 0px 1px;}
.pedit .showPhraseBox{background-position:-15px 1px}
.pedit span:hover{background-position:0px -16px}
.pedit .showPhraseBox:hover{background-position:-15px -16px}
.taskEdit,.requestEdit{height: 24px;line-height: 24px;margin: 11px 10px -10px 10px;border-bottom: 1px dotted #ccc;}
.taskTarget,.taskTime,.taskTime option{border:1px solid #ccc;width:178px;}
.requestShow{color:#555;margin-bottom:20px;}
/* 常用短语end */
/* 弹出层的客户详情start */
.charPersonDetailInfo .portrait{border-radius:50%;margin:0 20px;}
.charPersonDetailInfo .cell1{text-align:center;}
.charPersonDetailInfo .fa{font-size:20px;color:#666;margin-right:10px;}
.charPersonDetailInfo.infoEditBox{height: 350px;}
.charPersonDetailInfo .infoEditBody {height: 290px;}
.charPersonDetailInfo .cell2{padding:5px 0;}
.charPersonDetailInfo .cell2Wrap{width:260px;}
.charPersonDetailInfo .cell3Wrap,.charPersonDetailInfo .cell4Wrap{width:220px}
.charPersonDetailInfo .cell3Wrap{float:left;}
.charPersonDetailInfo .cell4Wrap{float:right;}
.charPersonDetailInfo input{height:24px;line-height:24px;width:100%;border:none;outline:none;}
.cellWrap .underline {margin-top: 2px;height: 1px;background-color: rgba(0,0,0,0.21);}
.cellWrap .underline1{width:0;height:2px;background-color:#2a56c6;margin:0 auto;margin-top:-1px;}
.cellWrap .underline1{
    -webkit-animation: quantumWizPaperInputRemoveUnderline .3s cubic-bezier(0.4,0,0.2,1);
    animation: quantumWizPaperInputRemoveUnderline .3s cubic-bezier(0.4,0,0.2,1);
}
.cellWrap.cellInputFocus .underline1{
    -webkit-animation: quantumWizPaperInputAddUnderline .3s cubic-bezier(0.4,0,0.2,1);
    animation: quantumWizPaperInputAddUnderline .3s cubic-bezier(0.4,0,0.2,1);
    width:100%;
}

@keyframes quantumWizPaperInputRemoveUnderline{0%{width:100%;opacity:1}to{width:100%;opacity:0}}
@-webkit-keyframes quantumWizPaperInputRemoveUnderline{0%{width:100%;opacity:1}to{width:100%;opacity:0}}
@keyframes quantumWizPaperInputAddUnderline{0%{width:0;margin-left:50%;}to{width:100%;margin-left:0;}}
@-webkit-keyframes quantumWizPaperInputAddUnderline{0%{width:0;margin-left:50%;}to{width:100%;margin-left:0;}}
.clearInput{margin: 11px 8px;cursor: pointer;visibility: hidden;}
.addInput{visibility: hidden;}
.trFilled.trFocus  .clearInput,.trFilled:hover  .clearInput,.trFilled.trFocus  .addInput,.trFilled:hover  .addInput{visibility: visible;}
.clearInput:after ,.addInput:after{
    color: rgba(0,0,0,0.54);
    font-family: 'Material Icons Extended';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-rendering: optimizeLegibility;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    content: '\e5c9';
    opacity: .6;
}
.addInput:after{
    color:#2a56c6;
    content: '\e147';
    opacity:1;
    cursor:pointer;
}
/* 弹出层的客户详情end */
/* 切换用户与修改密码start */
.pswClose{position: absolute;width: 20px;height: 20px;margin-left: 212px;margin-top: -16px;background: transparent url("../imgs/lightClose.png") no-repeat scroll 0px 0px;cursor: pointer;}
/* 切换用户与修改密码end */

/* 历史记录区域start */
.infoEditBox.historyBox{height: 400px;width:550px;box-shadow: 0 0 2px 1px #bbb;border:none;}
.historyBox .infoEditBody{height: 340px;}
.pageturning{display: inline-block;width: 21px;cursor: pointer;background: url(../imgs/pageimg.png) no-repeat 0px 0px;height: 20px;line-height: 20px;margin-top:4px;border:1px solid #f1f1f1;border-radius:2px;}
.pageturning:hover{	border:1px solid #ccc;}
.goFirst {background-position: 1px  -4px;}
.goPre {background-position: -22px -4px ;}
.goNext {background-position: -45px -4px ;}
.goLast {background-position: -68px -4px;}
.firstpage .goFirst,.firstpage .goPre,.lastpage .goNext,.lastpage .goLast{background-position-y:-33px;}
.goFirst:hover,.goPre:hover,.goNext:hover,.goLast:hover { background-position-y:  -33px ;}
/* 历史记录区域end */


/* 更多信息展示区域start */
.chatInfo{background-color:#fff;border-left:1px solid #ccc;width:350px;position:absolute;right:0;top:40px;bottom:0;overflow:hidden;}
.chatInfoTitle{background-color:#f1f1f1;height:100%;height:30px;line-height:30px;border-bottom:1px solid #ccc;}
.chatInfoTitle div{float:left;padding:0 9px;cursor:pointer;}
.chatInfoOn{height:27px;border-bottom:4px solid #3b7bea;color:#3b7bea;font-weight:800;}
.chatInfoOn:hover{color:#124bad;}
.chatInfoDetail{overflow:auto;position: absolute;left: 0;right: 0;top: 30px;bottom: 0;}
.infoDetail{display:none;}
.InfoDetailOn{display:block;}
/* 更多信息展示区域end */

/* 标准的浮动菜单start*/
.flowMenuBase{position:absolute;z-index: 3;background-color: #f3f3f3;box-shadow: 0 0 2px 0 rgba(0,0,0,0.4);white-space:nowrap;display: none;}
.flowMenuBase ul{padding:0;margin: 0;}
.flowMenuBase li {border-bottom: 1px dashed #e5e5e5;height: 28px;line-height: 28px;border-left: 3px solid transparent;margin: 0;padding: 0 10px;overflow: hidden;}
.flowMenuBase li:hover {border-left-color: #3b7bea;background-color: #e5e5e5;}
/* 标准的浮动菜单end*/

/* 标准弹出窗口start */
#opa{position:absolute;z-index:9;background-color:#006;opacity:0.1;}
.infoEditBox{width: 480px;height: 300px;position: absolute;z-index: 10;background-color: rgb(255, 255, 255);border: 1px solid rgb(153, 153, 153);border-radius: 2px;overflow: hidden;left: 100px;top: 50px;display:none;font-size:12px;}
.infoEditHead {background-color: #ffb408;cursor: move;height: 30px;line-height: 30px;}
.infoEditTitle {float: left;margin-left: 10px;font-size: 14px;color: #555;}
.infoEditClose {float: right;cursor: pointer;width: 22px;height: 22px;text-align: center;line-height: 22px;font-size: 18px;background:url(../imgs/closebtn.png) no-repeat 50%;}
.infoEditClose:hover{background-color: #ffcd5a;}
.infoEditBody {height: 240px;overflow-y: auto;overflow-x:hidden;word-wrap:break-word;word-break:break-all;}
.infoEditFoot{text-align:center;background-color:#f1f1f1;height:30px;}
.infoEditFootBtn{border: none;background-image: linear-gradient(to bottom, #F9F9F9 0px, #F0F0F0 100%);cursor: pointer;display: inline-block;margin-top: 4px;width: 50px;line-height: 20px;margin-left: 10px;margin-right: 10px;border-radius:2px;border:1px solid #ccc;}
.infoEditFootBtn:hover{border-color:#aaa;}
.infoEditFootBtn:active{border-color:#ccc;}

.loadingOpa{position:absolute;z-index:999;top:0;left:0;bottom:0;right:0;background-color:#000;opacity:0.3;filter:alpha(opacity=30);display:none;}
.loadingBox{position:absolute;z-index:999;height:18px;line-height:18px;overflow-y:hidden;top:1px;left:40%;border: 1px solid #ccc;box-shadow:0 0 5px #ccc;background-color:#ffb408;padding:0 20px;border-radius:2px;display:none;}
/* 标准弹出窗口end */
/* 第二种标准弹出窗口start */
.infoEditBox2  {
    display: none;
    position: absolute;
    width: 700px;
    background-color: #fff;
    z-index: 10;
    box-shadow: 0 0 2px 1px #999;
}
.infoEditHead2 {
    background-color: #E7E7E7;
    background-image: linear-gradient(to bottom, #F2F2F2 0px, #E0E0E0 100%);
    border-bottom: 1px solid #C2C2C2;
    align-items: center;
    height: 64px;
    line-height: 48px;
    padding: 0px 15px;
}
.infoEditTitle2  {
    font-weight: 600;
    font-size: 20px;
    margin-left: 25px;
    vertical-align: middle;
    line-height:3.2em;
    cursor:move;
}
.infoEditBody2{
    max-height:450px;
    overflow-x:hidden;
    overflow-y:auto;
}
.infoEditFoot2 {
    padding: 10px 0;
    margin-top: 10px;
}
.infoEditFoot2:after {
    content: " ";
    display: block;
    clear: both;
}
.infoEditFoot2 .infoEditFootBtn2{
    float: right;
    color: #2a56c6;
    font-size: 14px;
    padding: 0 10px;
    margin-right: 50px;
    cursor: pointer;
    height: 22px;
    line-height: 22px;
}
/* 第二种标准弹出窗口end */