.im-msg_tip, .im-panel_box, .im-tip_p, .im-big_img, .im-photo, .im-notes_panel, .im-video_box {display: block;}

.im-mask{width: 100%; height: 100%; background: rgba(0,0,0,0); position: absolute; top: 0; left: 0; right: 0; bottom: 0;z-index: 5;  display: none;}
/*新消息底部弹出框s*/
.im-msg_tip:hover{cursor: pointer;}
.im-msg_tip{width: 304px; background-color: #f5f6f7;  font-size: 16px; color: #38393b;  padding: 7px 0;position: fixed; bottom: 0; right: 0; z-index: 99999; /*display: none;*/ font-weight: bold;  border: solid 1px #e8eaed;}
.im-msg_tip p{display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;}
/*.im-msg_tip p.im-newtip{animation: blink 1.2s  infinite;}*/
.im-msg_tip span.im-tip_head{content: ''; float: left;  margin: 0 10px 0 20px; width: 30px; height: 30px; /*background-image: url(../../images/im/msg_tip.png);*/ background-position: center; background-size: 30px; background-repeat: no-repeat;  vertical-align: middle;}
.im-msg_tip .im-news_num{margin-right: 20px; margin-left: 10px; font-style: normal; font-size: 14px; text-align: center; border-radius: 9px;  border: solid 1px #38393b;  line-height: 14px; padding: 0 3px; height: 14px; font-weight: bold; display: inline-block;}
.im-msg_tip i{float: right; background-image: url(../../images/im/up_arr.png); width: 16px; height: 16px; background-repeat: no-repeat; background-position: bottom; margin-right: 18px; margin-top: 2px;}
.im-msg_tip span.im-tip_head img{border-radius: 50%; width: 100%; height: 100%; display: block;}
.im-panel_box{position: relative; position: fixed; right: 0; bottom: -550px;box-shadow: 0px 5px 47px 0px rgba(26, 30, 61, 0.23);
; overflow: hidden; border-radius: 10px 0 0 0 ; border:solid 1px #e8eaed; box-sizing: border-box;z-index: 99999;}


/*----------------------------------------好友列表的panel-----------------------------------------*/
/*空状态*/
.im-no_list{ margin: auto; margin-top: 78px; text-align: center;}
.im-no_list img{width: 100%; max-width: 150px; display: block; margin: auto;}
.im-no_list p{font-size: 14px; color: #97989c; display: block; text-align: center; margin-top: 26px;}
.im-panel_list{width: 304px; height: 550px; background-color: #f2f3f5;   float: right; box-sizing: border-box; background: #f2f3f5;}
.im-user_info .im-_left.im-no_login  i{background-color: #bec0c4; border-radius:50%; text-align: center; vertical-align: middle; width: 14px; height: 14px; padding: 3px;}
.im-user_info .im-_left.im-no_login  i img{display: none;}
.im-user_info .im-_left.im-no_login  i:after{content: ''; display: inline-block; width: 14px; height: 14px;  border-radius: 50%; background-color: #8c8d91;  behavior: url(pie.htc)}
.im-user_info .im-_left{float: left; margin-top: 14px; margin-left: 14px;}
.im-user_info .im-_left i{display: inline-block; width: 26px; height: 26px;   vertical-align: middle; position: relative;}
.im-user_info .im-_left i img{width: 100%; height: 100%; object-fit: cover;border-radius: 50%; }
.im-user_info .im-_left span{vertical-align: middle; font-size: 16px; margin-left: 6px; display: inline-block; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold;}
.im-hide_btn{float: right; background-image:url(../../images/im/down_arr.png); width: 16px; height: 16px; background-repeat: no-repeat; background-position: bottom; margin-top: 16px; margin-right: 18px;}
.im-tab_ul{margin-top: 23px;}
.im-tab_ul li{float: left; width: 33.3%;  padding-bottom: 10px;}
.im-tab_ul li.im-on{border-bottom: solid 3px #00d550;}
.im-tab_ul li a{display: block; width: 22px; height: 22px; background-size: cover; background-repeat: no-repeat; margin: auto; position: relative;}
.im-tab_ul .im-cur_btn a{background-image: url(../../images/im/clock.png);}
.im-tab_ul .im-F_btn a{background-image: url(../../images/im/friend.png);}
.im-tab_ul .im-tip_btn a{background-image: url(../../images/im/msg.png);}
.im-tip_num{height: 16px; border-radius: 8px; display: block; background-color: #ff4e47; color: #fff; font-size: 12px; font-style: normal; text-align: center; line-height: 16px; padding: 0 4px; position: absolute; left: 16px; bottom: 14px;}
/*列表*/
.im-listBox{width: 100%; height: 406px; background-color: #fff; overflow-y: auto;}
.im-listBox>ul{display: none;}
.im-show{display: block !important;}
 .im-f_msg{height: 20px; overflow: hidden; max-width: 220px; text-overflow: ellipsis; white-space: nowrap; position: relative;}
.im-chat_list>li{ background-color: #fff; padding: 12px 16px; cursor: default; position: relative;}
.im-chat_list>li:hover{background-color: #f7f8fa;}
.im-chat_list>li:hover .im-delbox{display: block;}
.im-chat_list>li .im-headimg{width: 40px; height: 40px;  float: left; position: relative;}
.im-chat_list>li .im-headimg img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.im-chat_list>li .im-_right{margin-left: 52px;}
.im-chat_list>li .im-_right img{width: 18px; vertical-align: middle;}
.im-chat_list>li .im-_right h2{font-size: 16px; color: #38393b; overflow: hidden; line-height: 22px ;}
.im-chat_list>li .im-_right h2>span{float: left; max-width: 142px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.im-chat_list>li .im-_right p{font-size: 12px; color: #97989c; overflow: hidden;}
.im-chat_list>li .im-_right p>span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.im-cur_chat.im-chat_list>li .im-_right p>span{ max-width: 160px;float: left;}
 /*最新聊天列表*/
.im-cur_chat>li .im-_right .im-f_msg>i{line-height: 16px; height: 16px; background-color: #ff4e47; color: #fff; font-size: 12px; border-radius: 8px; padding: 0 5px; font-style: normal; float: right; text-align: center; margin-left: 4px; position: absolute; right: 0;}
.im-cur_chat>li .im-_right h2>i{float: right; font-style: normal; font-size: 12px; color: #97989c; margin-left: 4px;}
.im-cur_chat .im-delbox{width: 50px; height: 64px; position: absolute; right: 0; background-color:#f7f8fa ; top: 0;display: none;}
.im-cur_chat .im-delbox a{display: block; width: 18px; height: 18px; background-image: url(../../images/im/del_01.png); background-repeat: no-repeat;  background-position: center; background-size: 18px; margin: auto; margin-top: 24px; }
.im-cur_chat .im-delbox a:hover{background-image: url(../../images/im/del_02.png);}

 /*好友列表*/
.im-f_list.im-chat_list .im-_right h2 span{display: inline-block; vertical-align: middle; float: none;}
.im-f_list .im-_right h2>i{font-style: normal; font-size: 12px; color: #00d550; background-color: #d9fae6;  display: inline-block; padding: 0 4px ; border-radius: 2px; height: 16px; vertical-align: middle; margin-left: 6px; line-height: 16px;}
.im-f_list.im-chat_list>li .im-_right p>span{ display: block; float: none;}
.im-op_box{position: fixed;  background-color: #fff; padding: 4px; border:  solid 1px #e6e6e8; display: none; z-index: 9; box-shadow:0 3px 9px rgba(26,30,61,.1);}
.im-op_box li{border-radius: 6px; font-size: 14px; color: #5c5c5e; padding: 11px 0; width: 120px; text-align: center;}
.im-op_box li:hover{background-color: #f2f3f5;}
.im-op_box li:before{content: ''; display: inline-block; width: 15px;  height: 14px; margin-right: 10px; background-position: center; background-repeat: no-repeat; vertical-align: middle;}
.im-op_box li.im-chat_to:before{background-image: url(../../images/im/msg01.png); background-size: 15px 14px; }
.im-op_box li.im-look_info:before{background-image: url(../../images/im/look_info.png); background-size: 11px 11px; margin-bottom: 4px;}
.im-op_box li.im-del_f:before{background-image: url(../../images/im/del_03.png); background-size: 11px 11px; margin-bottom: 4px;}

/*账户信息列表*/
.im-msg_list{padding-bottom:20px ;}
.im-msg_list>li:hover{/*box-shadow:0 3px 9px rgba(26,30,61,.17);*/ border-color: rgb(235, 236, 237); border-style: solid;background-color: rgb(255, 255, 255);box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);}
.im-msg_list>li{margin: 9px;  background-color: #f7f8fa; border: solid 1px #f2f3f5; padding: 20px 12px;}
.im-msg_list>li>a{display: block; }
.im-msg_list>li dt{font-size: 15px; color: #333; margin-bottom: 10px; max-width: 234px; }
.im-msg_list>li dt span{display: inline-block;overflow: hidden; white-space: nowrap; text-overflow:ellipsis; max-width: 220px; vertical-align: middle;}
.im-msg_list>li dt.im-new:after{display: inline-block; width: 6px; height: 6px; content: ''; background-color: #ff4e47; border-radius: 100%; margin-left: 6px; vertical-align: middle; }
.im-msg_list>li dd{font-size: 14px;}
.im-msg_list>li dd label{font-size: 14px; color: #a6a7ab; line-height: 30px;}
.im-msg_list>li dd span{font-size: 14px; color: #3b3b3b; margin-left: 14px;}
.im-msg_list>li dd.im-acc_add span{color: #4772ee;}
.im-msg_list>li dd.im-acc_jian span{color: #ff6800;}
.im-msg_list>li dl{position: relative;}
.im-msg_list>li dl .im-delbox{ position: absolute; right: 0;  top: 0;display: none; width: 20px; height: 20px;}
.im-msg_list>li dl .im-delbox i{display: block; width: 18px; height: 18px; background-image: url(../../images/im/del_01.png); background-repeat: no-repeat;  background-position: center; background-size: 18px; margin: auto;  }
.im-msg_list>li dl .im-delbox i:hover{background-image: url(../../images/im/del_02.png);}
.im-msg_list>li:hover .im-delbox{display: block;}
.im-msg_list .im-msg_loading{font-size: 12px; text-align: center; line-height: 14px;padding: 6px 0;}
.im-msg_list .im-msg_loading i{display: inline-block; width: 14px; height: 14px; background-image: url(../../images/im/loading.gif); background-repeat: no-repeat; background-size: 14px; vertical-align: middle; margin-right: 10px;}
/*底部搜索按钮*/
.im-bottom_btn.im-btn_group{margin-left: 28px;/* margin-top: 13px;*/ }
.im-bottom_btn.im-btn_group>a{float: left; width: 20px; height: 20px; background-position:bottom center; background-repeat: no-repeat; background-size: 20px; margin-right: 30px; padding-top: 13px;}
.im-bottom_btn.im-btn_group>a.im-search_btn{background-image: url(../../images/im/search.png);}
.im-bottom_btn.im-btn_group>a.im-msg_btn{background-image: url(../../images/im/msg_02.png); position: relative; height: 20px; background-position: bottom center;  }
.im-bottom_btn.im-btn_group>a.im-msg_btn:hover >.im-op_tip{display: block;}
.im-bottom_btn.im-btn_group>a.im-msg_btn .im-tip_num{left: 14px; bottom: 10px;}
.im-op_tip{position: absolute; bottom: 26px; left:0; width: 100px; background-color: #fff; border: solid 1px #e6e6e8;  box-shadow:0 3px 9px rgba(26,30,61,.17); display: none;}
.im-op_tip ul{padding: 4px; }
.im-op_tip ul li{border-radius: 6px; padding-left: 14px; line-height: 40px; font-size: 14px; color: #5c5c5e;}
.im-op_tip ul li span{display: block;}
.im-op_tip ul li:hover{background-color: #f2f3f5;}
/*----------------------------------------查看好友资料panel，搜索用户panel-----------------------------------------*/
.im-big_panel{width: 550px; height: 550px ; box-sizing: border-box;  background-color: #fff;  float: right; border-right: solid 1px #e8eaed; ; position: relative;box-sizing: border-box;}
.im-big_panel>h2,.im-notes_panel>h2{color: #38393b; font-size: 16px; padding:0 16px 0 20px; line-height: 49px; background-color: #f5f6f7; border-bottom: solid 1px #e8eaed; position: relative;}
.im-big_panel>h2.center_align{font-weight: bold; text-align: center;}
.im-big_panel>h2 span,.im-notes_panel>h2 span{font-weight: bold; margin-right: 8px; display: inline-block;}
.im-big_panel>h2 span.im-limit_width{max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.im-big_panel>h2 i.im-close_btn ,.im-notes_panel>h2 i{display: block; width: 12px; height: 12px; background-image: url(../../images/im/cha.png); background-position: center; background-size: 12px; background-repeat: no-repeat; position: absolute; top: 18px; right: 18px; cursor: pointer; }
.im-f_box,.im-s_box{height: 500px; overflow-y: auto; display: none;}
.im-big_panel>h2 i.im-back_btn{display: block; font-size: 14px; position: absolute;  font-weight: normal; font-style: normal; cursor: pointer;}
.im-big_panel>h2 i.im-back_btn:before{content: ''; display: inline-block; width: 8px; height: 14px; background: url(../../images/im/left_arrow.png) no-repeat; background-size: contain;vertical-align: middle;margin-right: 6px;}
/*----好友信息----*/
.im-info_box{display: none;}
.im-info_list,.im-f_search{margin: 28px 26px; position: relative;}
.im-info_list li{margin-bottom: 16px;}
.im-info_list li label{color: #97989c; font-size: 14px; margin-right: 24px;}
.im-info_list li span{font-size: 14px; color: #38393b;}
.im-btn_group.im-info_btn{position: absolute; right: 0; top: -20px;}
.im-btn_group.im-info_btn a{display: block; width: 100px; height: 30px; border-radius: 15px; border:  solid 1px #00d550; color: #00d550; font-size: 14px; text-align: center; line-height: 30px; margin-top: 20px; }
.im-btn_group.im-info_btn a.im-chat_with{background-color: #00d550; color: #fff; }
.im-btn_group.im-info_btn a.im-chat_with:hover{ background-color: #00c44b; border:  solid 1px #00c44b;}
.im-btn_group.im-info_btn a.im-add_f:hover,.im-btn_group.im-info_btn a.im-del_f:hover{background-color: rgba(0, 213, 80, 0.071)}
/*好友店铺*/
.im-shop_box {margin: 50px 26px 28px 26px; }
.im-shop_box h3{font-size: 16px; color: #38393b; margin-bottom: 20px;}
.im-shop_box li{margin-top: 16px;}
.im-shop_box li a{display: block; padding: 9px 24px; background-color: #f7f8fa;}
.im-shop_box li a:hover{background-color: #f0f1f2;}
.im-shop_box li a:before{content: ''; float: right; width: 24px; height: 24px; background-size: 24px; background-position: center; background-image: url(../../images/im/right_arr.png); background-repeat: no-repeat; margin-top: 24px;}
.im-_leftLogo{float: left; font-size: 14px; color: #38393b; line-height: 1em; padding: 7px 0; padding-right: 24px; border-right: dashed 1px #d3d6de;}
.im-_leftLogo span{display: block;}
.im-_leftLogo i{display: block; width: 30px; height: 30px; border-radius: 4px; background-position: center; background-repeat: no-repeat; background-size: cover; margin-bottom: 7px;}
.im-shop_box li.im-shop .im-_leftLogo i{background-image: url(../../images/im/icon.png);}
.im-shop_box li.im-zhaopin .im-_leftLogo i{background-image: url(../../images/im/icon2.png);}
.im-shop_box li .im-shop_info{margin-left: 74px; padding: 12px 0; margin-right: 30px;}
.im-shop_box li .im-shop_info h3{color: #38393b; font-size: 16px; margin-bottom: 2px;}
.im-shop_box li .im-shop_info p{color: #97989c; font-size: 12px; white-space: nowrap; overflow: hidden;}
.im-shop_box li .im-shop_info p em{margin: 0 10px;}

/*----搜索用户----*/
.im-f_search input{padding: 10px 12px; width: 278px; border-radius: 4px; border: solid 1px #e8eaed; font-size: 14px;}
.im-f_search a{display: inline-block; width: 100px; text-align: center; color: #fff !important; font-size: 14px; background-color: #00d550; border-radius: 4px; padding: 10px 0; margin-left: 16px;}
.im-f_search a:hover,.im-chat_panel h2 .im-btn_group a.im-btn_agree:hover{background-color: #00c44b;}
.im-s_list{margin: 30px 26px; }
.im-s_list li{background-color: #f7f8fa; padding-left: 16px; margin-bottom: 20px;cursor: pointer;}
.im-s_list li .im-left_info{margin-right: 116px; padding: 16px 0; }
.im-s_list li .im-s_head{float: left; width: 40px; height: 40px; margin-right: 8px; position: relative;}
.im-s_list li .im-s_head img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.im-s_list li .im-_info h3{font-size: 14px; color: #38393b;}
.im-s_list li .im-_info p{font-size: 12px; color: #97989c;}
.im-s_list li .im-right_addbtn{float: right; width: 90px; height: 28px; color: #fff; background-color: #00d550; border-radius: 4px; line-height: 28px; text-align: center; margin-top: 22px; margin-right: 24px;}
.im-s_list li .im-right_addbtn:hover{background-color: #00c44b;}
.im-s_list li .im-keyval{color: #00d550;}
/*好友验证*/
.im-f_test{position: absolute; bottom: -150px; width: 100%; height: 150px; background-color: #fff; border-top: solid 1px #e8eaed; text-align: right; }
.im-f_test .im-text-box{margin:28px 20px 14px 24px ; text-align: left;}
.im-f_test textarea{width: 100%; height: 64px; border: none; resize: none; font-size: 14px; outline: none;}
.im-f_test .im-send_btn{display: inline-block; width: 100px; height: 30px; border-radius: 4px; background-color: #00d550; color: #fff; font-size: 14px; text-align: center; line-height: 30px; margin-right: 20px;}
.im-f_test .im-send_btn:hover{background-color: #00c44b;}
/* 消息提示 */
.im-popMsg{position: absolute; top: 50%; left: 50%; background-color: rgba(0,0,0,.7); padding: 18px; border-radius: 4px; transform: translate(-50%,-50%); min-width: 100px; text-align: center;}
.im-popMsg p{color: #fff; font-size: 14px; }

/*-------------------------聊天窗口----------------------------------------*/
.im-chat_panel{display: none;}
.im-chat_panel h2{background: none;}
.im-chat_panel h2 .im-btn_group{position: absolute; top: 10px; right: 50px; font-size: 14px; display: none;}
.im-chat_panel h2 .im-btn_group a{display: inline-block; padding: 6px 10px; border-radius: 2px; margin-left: 6px;}
.im-chat_panel h2 p{line-height: 1em;}
.im-chat_panel h2 .im-btn_group a.im-btn_agree{color: #fff; background-color: #00d550; border:solid 1px #00d550; margin-left: 12px;}
.im-chat_panel h2 .im-btn_group a.im-btn_refuse,.im-chat_panel h2 .im-btn_group a.im-btn_add{color: #97989c; border: solid 1px #e3e3e8; background-color: #f5f5f7;}
.im-chat_panel h2 .im-from_f{display: none;}
/*对话框*/
.im-record_box{height: 328px; overflow-y: auto; padding: 10px 20px; }
.im-msg_time{color: #8c8d91; font-size: 12px; text-align: center; padding: 20px 0 5px 0 ;}
.im-more{text-align: center; font-size: 12px; color: #184eff !important; display: block;}
.im-more i{display: inline-block; width: 12px; height: 12px; background-image: url(../../images/im/clock_1.png);background-size: 12px; background-position: center;  margin-right: 6px;}
.im-more.im-rec_loading1 span{background-image: url(../../images/im/loading.gif); background-repeat: no-repeat; background-position: center; background-size: 14px; min-width: 14px; min-height: 14px; display: inline-block;}
/*.im-more.im-rec_loading1 span{display: none;}*/
.im-to_other div.im-m_head,.im-to_other div.im-m_content{float: right; cursor: default;}
.im-to_other .im-m_head{width: 40px; height: 40px;  position: relative;}
.im-to_other .im-m_head img{width: 100%; height: 100%; object-fit: cover;border-radius:50% ;}
.im-to_other .im-m_content{max-width: 328px; margin-right: 14px; background-color: #f2f4f5; border-radius: 4px; padding: 10px 16px; position: relative;}
.im-to_other .im-m_content:after{content: ''; display: block; width: 0; height: 0; border: solid 5px rgba(0,0,0,0); border-left: solid 5px #f2f4f5; position: absolute; top: 15px; right: -10px;}
.im-to_other .im-m_content div.im-text_msg{line-height: 20px; color: #414345; font-size: 14px; word-wrap:break-word;  }
.im-from_other div{float: left;}
.im-from_other .im-m_head{width: 40px; height: 40px;  position: relative;}
.im-from_other .im-m_head img{width: 100%; height: 100%; object-fit: cover; border-radius:50% ;}
.im-from_other .im-m_content{max-width: 328px; margin-left: 14px; background-color: #f2f4f5; border-radius: 4px; padding: 10px 16px; position: relative; cursor: default;}
.im-from_other .im-m_content:after{content: ''; display: block; width: 0; height: 0; border: solid 5px rgba(0,0,0,0); border-right: solid 5px #f2f4f5; position: absolute; top: 15px; left: -10px;}
.im-from_other .im-m_content div.im-text_msg{line-height: 20px; color: #414345; font-size: 14px; }
.im-m_content div.im-text_msg img{vertical-align: middle; margin: 0 4px; width: 24px;}
.im-m_content{margin-bottom: 30px;}

/*语音消息样式*/
.im-m_content.im-s_content{cursor: pointer;}
.im-m_content div.im-speak_msg{min-width: 50px; color: #38393b;}
.im-m_content div.im-speak_msg:before{content: ''; display: block; width: 14px; height: 18px; background-image: url(../../images/im/media_01.png);  background-repeat: no-repeat;  float: right;  background-position:2%;}
.im-from_other .im-m_content div.im-speak_msg.im-voicePlay:before{animation: voicePlay 1s steps(3) infinite;}
.im-to_other .im-m_content div.im-speak_msg.im-voicePlay:before{animation: voicePlay1 1s steps(3) infinite;}
.im-from_other .im-m_content div.im-speak_msg:before{background-image: url(../../images/im/media2_01.png); float: left; background-position: 98%;}
.im-from_other .im-m_content div.im-speak_msg{text-align: right;}
/*商品链接样式*/
.im-LinkBox{width: 400px;  border-radius: 4px; border: solid 1px #e8eaed; background-color: #f7f8fa; margin:20px auto; padding: 10px 0;}
.im-LinkBox a{display: block; overflow: hidden;}
.im-pro_img{float: left; width: 60px; height: 60px;  margin-left: 12px; position: relative;}
.im-pro_img img{width: 100%; height: 100%; object-fit: cover; border-radius: 4px;}
.im-pro_info{float: left; margin-left: 10px; width: 290px;  position: relative; height: 60px;}
.im-pro_info h2{font-size: 14px; color: #3b3b3b; line-height: 18px;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.im-pro_info p.im-pro_price{font-size: 14px; color: #ff4e3b; position: absolute; bottom: 0;}
/*图片消息样式*/
.im-img_content.im-m_content{padding: 0; max-width: 180px; max-height: 180px; border-radius: 4px;  text-align: center; overflow: hidden; background-image: url(../../images/im/loading.gif); background-repeat: no-repeat; background-position: 20px
 center; background-color: #fff; min-width: 30px; background-size: 20px;}
.im-img_content.im-m_content img{max-width: 100%; max-height: 100%; display: block; border-radius:4px ; background-color: #fff; margin: auto; min-width: 20px;}
.im-m_content .im-video_msg{border:solid 1px #f5f5f5; border-radius: 10px; overflow: hidden; max-height: 180px;}
.im-m_content .im-video_msg video{max-width: 100%; max-height: 180px; display: block; border-radius:4px ; background-color: #fff; margin: auto; min-width: 20px;}
.im-m_content .im-video_msg:after{width: 44px; height: 44px; content: ''; display: block; background-image: url(../../images/im/video_btn.png); background-size: contain; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.im-img_content.im-m_content:after{display: none; }
.im-img_content.im-m_content.im-sending:before{content: ''; position: absolute; left:-24px; width: 14px; height: 14px; background-image: url(../../images/im/loading.gif); background-size: 14px; vertical-align: middle; top: 50%; transform: translate(0,-50%);}

/*红包样式*/
.im-hb_content.im-m_content{padding: 0;  border-radius: 0px; background: none; overflow: hidden; }
.im-hb:before{content: ''; float: left; width: 34px; height: 40px; background: no-repeat  cover; background-image: url(../../images/im/hongbao.png); margin-left: 16px; margin-right: 14px;  }
.im-hb_null.im-hb{background-color: #ffd09c; border: solid 1px #eec191; }
.im-hb{background-color: #fa9d3b; color: #fff; min-height: 40px; padding:14px 0;  border: solid 1px #f2922c;width: 240px; border-radius: 4px 4px 0 0 ;}
.im-hb h2{font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 164px; }
.im-hb_type{color: #97989c; font-size: 12px; line-height: 24px;  border: solid 1px #e4e4e3; width: 100%; width: 240px; border-top: none; border-radius: 0 0 4px 4px;}
.im-hb_type span{ padding-left: 14px;}
.im-hb h2,.im-hb>p{margin-right: 16px;}
/*输入框*/
.im-msgto_box{height: 150px; border-top: solid 1px #e8eaed; }
.im-msgto_box:after{content: ''; display: block; clear: both;}
.im-msgto_box .im-btn_group, .im-msgto_box .im-textarea,.im-msgto_box .im-msg_sendbox,.im-com_sendbox {margin: 0 20px;}
.im-msgto_box .im-btn_group .im-left_icon{float: left;}
.im-msgto_box .im-btn_group .im-left_icon a.im-emoj_btn{display: inline-block; width: 22px; height: 22px; background-image: url(../../images/im/e_icon.png); background-repeat: no-repeat; background-size: cover; vertical-align: middle; margin-right: 24px;}
.im-msgto_box .im-btn_group .im-left_icon a.im-img_btn{display: inline-block; width: 24px; height: 18px; background-image: url(../../images/im/img_icon.png); background-repeat: no-repeat; background-size: cover; vertical-align: middle;}
.im-msgto_box .im-btn_group .im-left_icon a.im-img_btn input{display: block; width: 100%; height: 100%; opacity: 0; filter:alpha(opacity=0);}
.im-msgto_box .im-btn_group .im-record_btn{float: right; padding: 4px; border-radius: 4px;}
.im-msgto_box .im-btn_group .im-record_btn:hover{ background-color: #f2f4f5; color: #333;}
.im-msgto_box .im-btn_group .im-record_btn:before{content: ''; display: inline-block; width: 16px; height: 15px; background-image: url(../../images/im/msg_icon.png); background-size: 16px 15px; background-repeat: no-repeat; vertical-align: middle; margin-right: 9px;}
.im-msgto_box .im-btn_group {font-size: 14px; color: #747578; padding: 12px 0; }
.im-msgto_box .im-textarea{ height: 50px; overflow-y: auto; resize: none; display: block; border: none; outline: none; font-size: 14px; color: #414345; margin-bottom: 4px; }
.im-msgto_box .im-textarea img{width: 24px; height: 24px; vertical-align: middle; }
.im-msg_sendbox,.im-com_sendbox{float: right; font-size: 14px; color: #fff; padding: 0 13px; height: 30px; background-color: #00d550; border-radius: 4px; text-align: center; position: relative;}
.im-msg_sendbox:hover,.im-com_sendbox:hover{background-color: #00c44b;}

.im-msg_sendbox a,.im-com_sendbox a{display: inline-block; line-height: 30px; color: #fff !important; vertical-align: middle; margin-left: 26px;}
.im-msg_sendbox i{width: 0; height: 0; border: solid 5px rgba(0,0,0,0); border-top: solid 5px #fff; display: inline-block; vertical-align: middle;}
.im-msg_sendbox span{text-align: center; float: right; margin-left: 30px;height: 20px; width: 20px; border-radius: 4px;margin-top: 5px;}
.im-msg_sendbox span:hover{background-color: #59d98a; }
.im-send_way{position: absolute; width: 170px; border: solid 1px #e6e6e8; background-color: #fff; bottom: 26px; left: 75px; text-align: left; box-shadow: 0 3px 9px rgba(26,30,61,.17); display: none;}
.im-send_way li{font-size: 14px; color: #5c5c5e; line-height: 45px; padding:0 12px; cursor: default;}
.im-send_way li:hover{background-color: #f2f3f5;}
.im-send_way li:before{content: ''; display: inline-block; width: 13px; height: 10px; margin-right: 7px; }
.im-send_way li.im-active:before{ background-repeat: no-repeat; background-size: 13px 10px; background-image: url(../../images/im/gou.png); }
/*表情*/
.im-emoji-hide{width: 360px;  position: absolute; left: 20px; bottom: 144px; background-color: #fff; padding: 16px 16px 12px 16px; box-shadow: 0 3px 9px rgba(26,30,61,.17); display: none; border: solid 1px #e1e4ed; z-index: 11;}
.im-emoji-hide ul li{float: left; margin-right: 6px;}
.im-emoji-hide ul li img{width: 25px; display: block; margin: auto; margin-top: 3.5px;}
.im-emoji-hide ul li a{display: block; padding: 1px;width: 32px; height: 32px; border-radius: 4px;}
.im-emoji-hide ul li a:hover{background-color: #f2f3f5;}
.im-emoji-hide ul{height: 210px;  margin-top: 10px; overflow-y: auto; }
.im-emoji-hide h2{color: #38393b; font-size: 14px;}

/*好友推荐*/
.im-recf_head {width: 48px; height: 48px; border-radius: 50%; float: left;}
.im-recf_head img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.im-m_content.im-recf_content{background-color: #fff; border: solid 1px #e8eaed; width: 230px;}
.im-m_content.im-recf_content dt{color: #97989c; font-size:12px; padding-bottom: 10px; border-bottom: solid 1px #e8eaed;}
.im-m_content.im-recf_content dd{padding:14px 0 4px 0 ;}
.im-m_content.im-recf_content dd .im-recf_info{margin-left: 55px; float: none;}
.im-m_content.im-recf_content dd .im-recf_info h2{font-size: 16px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.im-m_content.im-recf_content dd .im-recf_info p{font-size: 12px; color: #97989c;}

/*地图*/
.im-m_content.im-post_content{background-color: #fff; border: solid 1px #e8eaed;  width: 270px;padding: 0;}
.im-m_content.im-post_content .im-post_text{padding: 14px 16px 10px 16px;}
.im-m_content.im-post_content .im-post_text h2{font-size: 16px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.im-m_content.im-post_content .im-post_text p{font-size: 12px; color: #919191;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.im-m_content.im-post_content .im-area_show img{width: 100%; display: block;}
/*-------------------删除好友和好友验证-------------------*/
.im-test_msg{color: #00d550;}
/*.im-f_add{transform: scale(1) !important;}*/
.im-f_add textarea{width:280px; height: 66px; border-radius: 4px; border: solid 1px #e8eaed; margin: auto; resize: none; display: block; margin-top: 20px;padding: 10px;}
.im-f_add .im-con_del a.im-send_test{border: solid 1px #00d550; background-color: #00d550; color: #fff;}
.im-f_add .im-btn_group{width: 300px; margin: auto;}
.im-f_add .im-con_del{padding-bottom: 14px; font-size: 14px; color: #333;}
.im-f_add .im-con_del a.im-send_test:hover{background-color: #00c44b;}
.im-f_del,.im-f_add{position: fixed; right:255px; bottom: 214px; width: 340px; background-color: #fff; border-radius: 6px; box-shadow: 0 3px 23px rgba(26,30,61,.31); overflow: hidden;  -moz-transform:scale(0);-o-transform: scale(0);-webkit-transform: scale(0);transform:scale(0); z-index: 10;
  display:none\9 ;
  border:solid 1px #e3e3e8 \9;
  box-shadow: 0 3px 23px #ccc \9;
}

.im-f_del.im-an_show,.im-f_add.im-an_show{animation:f_del 200ms forwards ;  display:block\9;   z-index:99999; behavior: url(pie.htc);}
.im-f_del>h2,.im-f_add>h2{padding: 0 16px; background-color: #f2f3f5; font-size: 14px; color: #5c5c5e; line-height: 40px; overflow: hidden;}
.im-f_del>h2 i,.im-f_add>h2 i{display: block; width: 12px; height: 12px; background-image: url(../../images/im/cha.png); background-position: center; background-size: 12px; background-repeat: no-repeat; position: absolute; top: 13px; right: 16px; padding: 4px; border-radius: 2px;}
.im-f_del>h2 i:hover,.im-f_add>h2 i:hover{background-color: rgba(0,0,0,.1)}
.im-f_del .im-con_del>p{font-size: 14px; color: #5c5c5e;}
.im-f_del .im-con_del{margin: 24px 14px 14px 30px;}
.im-f_del .im-con_del a,.im-f_add .im-con_del a{display: inline-block; width: 80px; height: 28px; text-align: center; line-height: 28px; background-color: #f5f5f7; color: #97989c; border: solid 1px #e3e3e8; border-radius: 4px; margin-top: 20px; margin-left: 16px;}
.im-f_del .im-con_del a.im-cancel:hover,.im-f_add .im-con_del a:hover,.im-chat_panel h2 .im-btn_group a.im-btn_refuse:hover, .im-chat_panel h2 .im-btn_group a.im-btn_add:hover{background-color: #edeef0; }
.im-f_del .im-btn_group,.im-f_add .im-btn_group{text-align: right; }
.im-del_box .im-del_head{width: 40px; height: 40px; float: left; position: relative;}
.im-del_box .im-del_head img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.im-del_box:after{content: ''; display: block; clear: both;}
.im-del_box .im-del_info h2{font-size:16px ; color: #38393b; line-height: 18px;}
.im-del_box .im-del_info {font-size: 14px; color: #5c5c5e; margin-left: 52px; margin-top: 28px;}
.im-f_del .im-con_del a.im-sure_del:hover{color: #fff; border: solid #00d351 1px; background-color: #00d351;}
.im-vip_head:after{content: ''; display: block; width:16px ; height: 17px; background-image: url(../../images/im/icon03.png); background-repeat: no-repeat; background-size: 16px 17px; position: absolute; bottom: -4px; right: -2px;}
@keyframes f_del{
	from{transform: scale(0);}
	to{transform: scale(1);}
}
/*----------------------------------------互动的panel-----------------------------------------*/
.im-act_panel{display: none;}
.im-act_panel>h2{padding-left: 0; box-shadow: 0 -3px 6px 0px rgba(26,30,61,.07) inset; }
.im-act_panel>h2 ul{display: inline-block;}
.im-act_panel>h2 ul li{display: inline-block; width: 120px; text-align: center; border-radius: 10px 10px 0 0; font-weight: bold;}
.im-act_panel>h2 ul li a{color: #8c8d91; display: block;}
.im-act_panel>h2 ul li.im-on_panel{background-color: #fff; }
.im-act_panel>h2 ul li.im-on_panel a{color: #00cf4f;}
.im-act_box{width: 100%; height: 500px; overflow: auto;}
.im-zan_head{width: 40px; height: 40px; float: left;}
.im-zan_head img{width: 100%; height: 100%; border-radius: 50%;}
.im-act_box ul{display: none;}
.im-act_box ul li{border-top: solid 1px #e8eaed;}
.im-act_box ul li:hover{background-color: #f7f8fa;}
.im-act_box ul li:hover a{color: #333;}
.im-act_box ul li:first-child{border: none;}
.im-act_box ul li a{padding: 20px; display: block;}
.im-zan_con{margin-left: 56px;}
.im-zan_con:after{content: '' ; display: block; clear: both;}
.im-zan_con h3{font-size: 14px; color: #97989c; margin-bottom: 2px;}
.im-zan_con h3 span.im-nicname{color: #38393b; margin-right: 10px;}
.im-zan_con p{font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.im-zan_con p img{width: 25px; vertical-align: middle;}
.im-zan_con .im-reply_box em{font-size: 12px; color: #8c8d91;}
.im-zan_con .im-reply_box{margin-top: 12px;}
.im-zan_con .im-reply_box span.im-btn_reply{font-size: 14px; color: #737478; display: inline-block; width: 56px; height: 24px; text-align: center; line-height: 24px; border-radius: 2px; border: solid 1px #a7a7ab; margin-left: 16px;}
.im-zan_con .im-con_img{width: 60px; height: 60px; position: relative; float: right; margin-left: 20px; margin-top: 8px; background-color: #f5f5f5;}
.im-zan_con .im-con_img img{max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
/*回复输入框*/
.im-replyto_box{width: 100%; height: 0; border-top:solid 1px #e8eaed ; position: absolute; bottom: -1px; background-color: #fff; z-index: 10;}
.im-replyto_box .im-com_sendbox a{display: block; margin: 0; text-align: center;}
.im-replyto_box .im-com_sendbox{width: 100px; padding: 0;}
.im-replyto_box .im-area_box{height: 50px; overflow-y: auto;  border: none; outline: none; font-size: 14px; color: #414345; margin: 0 20px; }
.im-replyto_box .im-area_box label{color: #bec0c4;}
div[contenteditable]:empty:before{
    content: attr(placeholder);
    color: #CCCCCC;
}
/*-----------------------------聊天记录查看-----------------------------*/
.im-notebox.im-notes_panel{width: 480px; height: 100%; border: solid 1px #e8eaed; position: relative;  position: fixed; right: -540px;  box-shadow: 0px 0px 47px 0px rgba(26, 30, 61, 0.09);  background-color: #fff; box-sizing: border-box; padding: 50px 0 ; top: 0;z-index: 99999; }
.im-notebox.im-notes_panel h2{position: absolute; top: 0; left: 0; right: 0; width:100% ; box-sizing: border-box;}
.im-bottom_box{width: 100%; height: 50px; background-color: #f5f6f7; box-sizing: border-box; padding: 0 20px; position: relative; position: absolute; bottom: 3px; left: 0; }
.im-bottom_box input{background: none; border: none; outline: none; cursor: pointer; color: #333 !important; font-weight: normal !important;}
.im-date_chose{float: left; font-size: 14px; color: #414345; line-height: 54px; cursor: default; display: none;}
/*.im-date_chose em{vertical-align: middle;}*/

.im-date_chose:before{content: ''; display: inline-block; width: 22px; height: 22px; background-image: url(../../images/im/date.png); background-size: cover; background-repeat: no-repeat; vertical-align: middle; margin-right: 14px;}
.im-pop_record a{display: block; width: 90px; line-height: 40px; text-align: center; border-radius: 6px; }
.im-pop_record a:hover{background-color: #f2f3f5;}
.im-pop_record{padding: 4px; border: solid 1px #e6e6e8; box-shadow: 0px 0px 47px 0px rgba(26, 30, 61, 0.09); position: absolute; right:10px; bottom: 44px; background-color: #fff; display: none;}
.im-page_chose{padding: 13px 0; text-align: center; position: absolute; right: 10px;}
.im-page_chose .im-page_mum{ width: 40px; height: 26px; border: solid 1px #dcdee3; font-size: 14px; color: #414345; box-sizing: border-box; padding:0 6px; margin-right: 22px; text-align: center;}
.im-page_chose>a,.im-page_chose i{display: inline-block; }
.im-page_chose>a{width: 13px; height: 16px; background-position: center; background-repeat: no-repeat; vertical-align: middle; margin-right: 22px; background-size: contain;}
.im-page_chose>a.im-to_first{background-image: url(../../images/im/to_left.png);}
.im-page_chose>a.im-to_last{background-image: url(../../images/im/to_right.png);}
.im-page_chose>a.im-prev{background-image: url(../../images/im/left.png);}
.im-page_chose>a.im-next{background-image: url(../../images/im/right.png); }
.im-page_chose i{background-position: center; background-repeat: no-repeat; vertical-align: middle; width: 10px; height: 16px; background-image: url(../../images/im/icon_04.png); background-position: center; background-size: 3px auto; cursor: pointer; display: none;}
.im-zhe{background:none; position: absolute; width: 30px; height: 60px; bottom: 0; right: -10px; }

/*聊天记录*/
.im-msg_record{padding: 0 20px; height: 100%; overflow-y: auto; }
.im-msg_record .im-chat-user{font-size: 14px; margin-bottom: 12px;}
.im-msg_record .im-chat-user.im-msg_to{color: #00cf4f;}
.im-msg_record .im-chat-user.im-msg_from{color: #184eff;}
.im-msg_record .im-chat-text{font-size: 14px; color: #414345; line-height: 20px;}
.im-msg_record .im-chat-text img{vertical-align: middle; padding: 4px; max-width: 200px; max-height: 200px; vertical-align: middle;}
.im-msg_record li{margin-top: 26px; margin-bottom: 20px;}
.im-msg_record .im-chat-text .im-text-msg img{width: 24px; height: 24px;}
.im-rec_loading2 ,.com_loading{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) ; text-align: center; display: none;}
.im-rec_loading2 i,.com_loading i{display: block; width: 30px; height: 30px; background-image: url(../../images/im/loading.gif); background-size: 30px; background-repeat: no-repeat; margin: auto; margin-bottom: 10px;}
/*图片预览*/
.im-big_img{position: relative; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); box-shadow: 0px 0px 47px 0px rgba(26, 30, 61, 0.09); display: none; z-index: 999999; max-height: 90%; min-width: 100px; min-height: 100px;}

/* 视频 */
.im-msg_record .im-video_msg{border:solid 1px #f5f5f5; border-radius: 10px; overflow: hidden; max-height: 180px; display: inline-block; position: relative;}
.im-msg_record .im-video_msg video{max-width: 100%; max-height: 180px; display: block; border-radius:4px ; background-color: #fff; margin: auto; min-width: 20px;}
.im-msg_record .im-video_msg:after{width: 44px; height: 44px; content: ''; display: block; background-image: url(../../images/im/video_btn.png); background-size: contain; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.im-big_img img{display: block; margin: auto; max-height: 100%; max-width: 100%;}
.im-big_img i{display: block; width: 30px; height: 30px; position: absolute; right: 0; top: 0; background-image: url(../../images/im/cha.png); background-position: center; background-repeat: no-repeat; background-size: 12px;}
.im-big_img i:hover{background-color: rgba(255,255,255,.5);}

/*图片传输样式*/
.im-chat_panel .thumb .uploadinp.thumbtn{height: 18px; width: 24px; overflow: hidden; opacity: 0;}
.im-photo{position: fixed; bottom: -30px; right: 0;}
/*修改滚动条样式*/
.im-record_box::-webkit-scrollbar,.im-listBox::-webkit-scrollbar,.im-f_box::-webkit-scrollbar,.im-emoji-list::-webkit-scrollbar,.im-act_box::-webkit-scrollbar,.im-textarea::-webkit-scrollbar,.im-msg_record::-webkit-scrollbar{
	width: 8px;
	height: 0;
	border-radius: 4px;
	background: none;
}
/*滚动条里面小方块*/
.im-record_box::-webkit-scrollbar-thumb,.im-listBox::-webkit-scrollbar-thumb ,.im-f_box::-webkit-scrollbar-thumb ,.im-emoji-list::-webkit-scrollbar-thumb,.im-act_box::-webkit-scrollbar-thumb,.im-textarea::-webkit-scrollbar-thumb
,.im-msg_record::-webkit-scrollbar-thumb{

  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #bec0c4;
  background: #bec0c4;
}


@keyframes voicePlay {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100%;
  }
}
@keyframes voicePlay1 {
  0% {
    background-position: 100%;
  }
  100% {
    background-position: 0;
  }
}

.im-video_box{width: 80%; position: relative; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);z-index: 99999; display: none;}
.im-video_box .im-close_video{width: 30px; height: 30px; background-image: url(../../images/im/cha.png); background-color: rgba(255,255,255,.8); position: absolute; right: 0; top: 0; background-repeat: no-repeat; background-position: center; display: none;z-index: 999;}
.im-video_box:hover .im-close_video{display: block;}
.im-notice_all{font-size: 14px;  color: #fff; display: block; width: 100px ; background-color: #00d550; border-radius: 4px; line-height: 30px; margin: auto; margin-top: 10px;  box-shadow: 0px 1px 3px 0px rgba(0, 213, 80, 0.31);}
.im-notice_all:hover{color: #fff; background: #00c44b;}
.im-to_fdetail{cursor: default;}
/*.im-pannel_curr{background-color: #f7f8fa;}*/
.im-pro_description{font-size: 12px; color: #999;}


/* 一键清空 */
.im-msg_list{padding-top: 40px;}
.im-listBox a.im-clearOut{display: none; width: 84px; line-height: 24px; text-align: center; color: #999; background-color: #F2F3F5; border-radius: 12px; position: absolute; right: 212px; top: 109px; z-index: 9; box-shadow: 1px 1px 10px #f5f5f5}
.im-listBox a.im-clearOut:after{content: ''; display: inline-block; width: 14px; height: 14px; background: url(/static/images/clearout.png) no-repeat center; background-size: cover; vertical-align: middle; margin-bottom: 4px; margin-left: 3px;}