pre{word-break: break-word;}

/* 聊天框 */
.chat_box_top_wrap{height:calc(100% - 228px);background: #fafafa;overflow:auto;}
.chat_box_re_wrap{background: #fff;border-radius: 0 0 5px 5px;border-top: 1px solid #eaeaea;height: 175px;box-sizing:border-box;}
.chat_box_top{padding:14px;overflow: hidden;}

.chat_box_re_toolbar{padding:5px 10px;width: 100%;margin:0 auto;box-sizing:border-box;position: relative;}
.chat_img{position: relative;float:left;}
.chat_img input{position: absolute;opacity:0;filter:alpha(opacity=0);width:32px;height:26px;}
.chat_img img{display:block;}

.chat_box_re{min-height:auto;padding:5px 10px;overflow: auto;width: 98%;margin:0 auto;border:0 none;display:block;resize: none;font-size: 14px;line-height:1.5em;height:6em;box-sizing:border-box;outline: none;}
.chat_box_btn{width: 98%;margin:10px auto 0;}

.chat_p_r{display:inline-block;}
.chat_p_img{width: 30px;height: 30px;overflow: hidden;}
.chat_p_img .zr_chat_img_header{width: 30px;height: 30px;border-radius: 5px;background-size: cover;background-repreat: no-repeat;background-position: center center;}
.chat_p_name{font-size: 14px;height: 20px;line-height: 20px;padding:0 10px;text-align: left;}

.chat_p_word{border: 1px solid #e5e5e5;background: #fff;border-radius: 5px;font-size: 14px;line-height: 24px;margin-left: 13px;margin-right:13px;padding:5px 10px;text-align: left;display:inline-block;position: relative;}
.chat_p_word a{color: #333;}
.chat_p_word a:hover{color: #333;}
.chat_progress{position: absolute;top: 0;bottom: 0;right: 0;left: 0;background: rgba(0,0,0,.5);text-align:center;}
.chat_progress canvas{top:50%;left:50%;transform:translate(-50%,-50%);position: absolute;}
.chat_time{color:#b4b4b4;text-align: right;padding:6px 20px;font-size: 12px;}
.zr_chat_tips_show{position: absolute;left: -24px;bottom: 0;font-size: 15px;color:#40AAFF;line-height: 15px;}

.chat_p{width: 70%;margin-bottom: 30px;}

.chat_p_left .chat_p_img{float: left;}
.chat_p_left .chat_p_r{float:left;width:calc(100% - 40px);width:-webkit-calc(100% - 40px);width:-moz-calc(100% - 40px);width:-ms-calc(100% - 40px);}

.chat_p_right{float: right;}
.chat_p_right .chat_p_img{float: right;}
.chat_p_right .chat_p_r{float: right;width:calc(100% - 40px);width:-webkit-calc(100% - 40px);width:-moz-calc(100% - 40px);width:-ms-calc(100% - 40px);}
.chat_p_right .chat_p_name{text-align: right;}
.chat_p_right .chat_p_word{background: #DCDCDC;border: 1px solid #DCDCDC;color:#000;float: right;}
.chat_p_right .chat_p_word a{}
.chat_p_right .chat_p_word a:hover{}
.chat_p_right .chat_progress{}

.select_label_big{width: 100%;padding:20px 0;}
.select_label_big .select_label_ol{margin-left: 1px;}
.select_label_big .select_label_ol a{background: #fff;border: 1px solid #dcdcdc;margin-left: -1px;}
.select_label_big .select_label_ul{width: 100%;height:auto;}
.select_label_big .select_label_ul li{width:auto;float:none;height:auto;}

.color_list li{float: left;padding:1px 10px;line-height: 28px;position: relative;}
.color_list_block{width: 15px;height: 15px;background: #000;margin-right: 6px;border-radius: 3px;margin-top: 7px;}
.color_list_btns {background:#fff;position: absolute;box-shadow: 1px 3px 10px 1px #999;border-radius: 3px;white-space: nowrap;height: 20px;line-height: 20px;padding:3px 6px;bottom:28px;border: 1px solid #ccc;}
.color_list_btns a{font-size: 14px;color:#666;}
.color_list_btns a:hover{color:#faa33a;}
.color_list_arr{position: absolute;bottom:-8px;left: 14px;}

.color_select_list_wrap{}
.color_select_list_wrap .color_list_block{margin-top: 4px;}
.color_select_list_wrap .select_option{overflow: hidden;}
.color_select_list_wrap .select_option:hover{background: #f0f0f0;color:#515151;}


.edit_icon img{vertical-align: -2px;padding:0 4px;}
.edit_icon {margin:0 4px;}

/* 会话列表 */
.zr_chat_list_piece{width: 100%; height: 62px;background: #f2f2f2;line-height: 62px;font-size: 14px;position: relative;cursor: default;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
.zr_chat_list_piece .tx{background-repeat: no-repeat;background-size: cover;background-position: center;background-color:#e6e6e6;width: 40px;height: 40px;float:left;margin-top:11px;margin-left:11px;border-radius:5px;}

.zr_chat_list_piece:hover{background: #e8e8e8;transition: all 200ms;-ms-transition: all 200ms;-webkit-transition: all 200ms;}
.zr_chat_list_piece.current{background: #dedede;}
.zr_chat_list_piece .name_piece{line-height: 18px;height: 18px;overflow: hidden;padding-top:12px;text-overflow:ellipsis;white-space:nowrap;}
.zr_chat_list_dot{position: absolute;min-width: 20px;min-height: 20px;font-size: 12px;line-height: 20px;text-align:center;border-radius: 100px;background: red;color:#fff;right: 8px;top: 32px;box-sizing:border-box;padding:0 8px;}
.zr_chat_list_piece .last_msg_piece{line-height: 22px;font-size: 12px;color:#999;height: 22px;overflow: hidden;}
.zr_chat_list_piece .last_time_piece{position: absolute;top: 15px;right: 5px;font-size: 12px;line-height: 12px;color:#666;}
.zr_chat_list_piece .last_delBtn_piece{cursor:pointer;position: absolute;bottom: 0;right: -50px;top:0;font-size: 12px;color:#fff;line-height: 62px;background: red;text-align:center;width:50px;}
.zr_chat_list_piece:hover .last_delBtn_piece{transition: right 200ms;right:0;}
/* 搜索会话列表的人 */
.chat_search_box{position: relative;padding:10px 10px 10px;height: 33px;background: #f1f1f1;}
.chat_search_box_input{border: 1px solid #eee;border-radius: 5px;background: #fff;float:left;width: calc(100% - 66px);width: -ms-calc(100% - 66px);width: -webkit-calc(100% - 66px);width: -moz-calc(100% - 66px);height: 100%;font-size: 14px;height: 30px;line-height: 30px;padding:0 6px;}
.chat_search_btn{float:right;}

.chat_add_group{width: 30px;height: 30px;float: right;text-align:center;background: #e6e6e6;border-radius:3px;}

/* 上传的文件展示 */
.zr_chat_file_show{width: 200px;display:block;}
.zr_chat_file_name{width: 136px;overflow: hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;float: left;word-break: break-all;}
.zr_chat_file_icon{width: 50px;float: right;height: 50px;font-size: 40px;line-height: 50px;text-align:center;}

/* 聊天框头部 */
.zr_chat_info_top{height: 53px;background: #f8f8f8;border-bottom:1px solid #eaeaea;}
.zr_chat_info_top_tool_bar{text-align:right;}
.zr_chat_info_top_name{font-size: 15px;line-height: 53px;text-indent:1em;width:calc(100% - 78px);width:-webkit-calc(100% - 78px);width:-ms-calc(100% - 78px);width:-moz-calc(100% - 78px);display:block;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}

.zr_chat_info_show{overflow: hidden;z-index:1;height: calc(100% - 53px);position: absolute;top: 53px;right: -242px;bottom: 0;width: 242px;background: #fff;border: 1px solid #eee;border-top:0;border-bottom:0;transition:all 200ms;-webkit-transition:all 200ms;-ms-transition:all 200ms;-moz-transition:all 200ms;}
.zr_chat_info_show_scroll{overflow-y: scroll;width: 262px;height: 100%;box-sizing:border-box;padding:10px;}
.zr_chat_info_show.current{right: 0;transition:all 200ms;-webkit-transition:all 200ms;-ms-transition:all 200ms;-moz-transition:all 200ms;}
.zr_chat_user_info_add_btn,.zr_chat_user_info_piece{margin-bottom:5px;padding:5px 0 0;float: left;margin-right:4px;margin-left:4px;width: 48px;text-align:center;vertical-align:top;}

.zr_chat_user_info_add_btn_icon{border: 1px solid #ccc;width: 38px;height: 38px;line-height: 34px;display:block;font-size: 28px;color:#ccc;display:inline-block;}
.zr_chat_user_info_add_btn img,.zr_chat_user_info_piece img{width: 40px;height: 40px;object-fit:cover;}
.zr_chat_user_info_name{text-align:center;font-size: 12px;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;height: 16px;overflow: hidden;}

.img_header{object-fit:cover;float:left;box-sizing:border-box;width: 100%;height: 100%;}
.img_header_four{width:50%;height:50%;border:1px solid #fff;}
.img_header_nine{width:33.33%;height:33.33%;border:1px solid #fff;}
.iconfont:before{vertical-align:middle;}

.zr_chat_emoji_wrap{position: absolute;left: 0;bottom: 40px;border: 1px solid #ccc;border-radius:5px;background: #fff;width: 408px;height: 237px;overflow: auto;display:none;}

.editable_imgshow{display:none;position: absolute;bottom: 140px;left: 10px;background: #fff;border: 1px solid #ccc;border-radius:5px;max-width:353px;z-index:1;}
.editable_imgbox{margin:5px 5px 10px;}
.editable_imgshow img{max-width:100%;}
.editable_imgshow_btn_wrap{text-align: right;margin:0 5px 5px;}

.chat_video_mask{position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0,0,0,.5);background-repeat: no-repeat;background-position: center center;background-size: cover;}
.chat_video_mask_icon{position: absolute;top: 0;right: 0;bottom: 0;left: 0;position: absolute;background-repeat: no-repeat;background-position: center center;background-size: 20% auto;background-image: url(/static/skins/images/video_btn.png);}
.zr_chat_right_menu_li{display:block;line-height: 20px;font-size: 12px;color:#333;padding:5px;text-align: center;border-bottom:1px solid #eee;margin:0 5px;}

.menber_search_show{position: absolute;left: 0;right: 0;bottom: 0;top: 54px;background: #fff;z-index:1;display:none;}
.meber_search_result{padding:0 8px 0;}
.chat_search_cancel{display:none;background: url(/static/skins/images/zr_icon_x_grey.png) no-repeat center;position: absolute;top: 5px;right: 50px;width: 20px;height: 20px;}