@charset "utf-8";
/*chat_tab*/

.chat_tab{width: 100%;height: 42px;background-color: #FFF; border-bottom: 1px solid #EEE;position: fixed;left: 0;top: 44px; z-index: 1;}
.chat_tab ul{display: -webkit-box;display: -webkit-flex;display: flex;}
.chat_tab li{-webkit-box-flex: 1;-moz-box-flex: 1;-webkit-flex: 1;flex: 1;overflow: hidden;}
.chat_tab li a{display: block; margin: 0 20px;height: 40px;line-height: 42px; text-align: center;color: #222;font-size: 14px;text-decoration: none;border-bottom: 2px solid #FFF;overflow: hidden;}
.chat_tab li.current a{color: #F60;border-bottom: 2px solid #F60;}
.chat_tabh{width: 100%;height: 42px;overflow: hidden;}

/*chat_dialog_list*/

.chat_last_dialog{ background-color: #FFF;}
.chat_last_dialog .cell{ display: block; padding: 12px; height: 52px; overflow: hidden; position: relative;}
.chat_last_dialog .cell .icon{ width: 52px; height: 52px; border-radius: 3px; overflow: hidden; position: absolute; top: 12px; left: 12px;}
.chat_last_dialog .cell .icon img{ display: block; width: 100%; height: 100%;}
.chat_last_dialog .cell .dot{ display: none; width: 10px; height: 10px; background-color: #F00; border-radius: 50%; overflow: hidden; position: absolute; top: 10px; left: 58px; z-index: 8;}
.chat_last_dialog .cell .time{ width: 76px; height: 20px; line-height: 20px; text-align: right; color: #999; font-size: 13px;overflow: hidden; position: absolute; top: 14px; right: 12px;}
.chat_last_dialog .cell .desc{ padding: 0 64px;}
.chat_last_dialog .cell .desc .tits{height: 28px; line-height: 28px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.chat_last_dialog .cell .desc .tits span{ padding-right: 2px; color: #222; font-size: 16px;}
.chat_last_dialog .cell .desc .tits em{ color: #999;}
.chat_last_dialog .cell .desc .last{ padding-top: 2px; color: #888;height: 20px; line-height: 20px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

/*chat_find_friend*/

.chat_find_friend{ margin-top: 20px; padding: 0 12px 0 50px; height: 50px; background-color: #FFF; position: relative;}
.chat_find_friend .icon{ display: block; width: 50px; height: 50px; text-align: center; line-height: 48px; color: #888;font-size: 21px;font-weight: bold; position: absolute; left: 0; top: 50%; z-index: 1; margin-top: -24px;}
.chat_find_friend .input{ display: block; width: 100%; height: 50px; line-height: 50px;color: #222;font-size: 16px; border: 0; border: none;}

/*chat_friend_list*/

.chat_friend_list {}
.chat_friend_list .tit{padding: 0 16px;height: 32px;line-height: 32px;color: #999;font-size: 16px;}
.chat_friend_list .cell{ display: block; padding: 12px; height: 36px;background-color: #FFF; overflow: hidden; position: relative;}
.chat_friend_list .cell .icon{ width: 36px; height: 36px; border-radius: 3px; overflow: hidden; position: absolute; top: 12px; left: 12px;}
.chat_friend_list .cell .icon img{ display: block; width: 100%; height: 100%;}
.chat_friend_list .cell .desc{ padding: 0 48px; height: 36px; line-height: 36px; font-size: 16px;}

/*chat_friend_letter*/

.chat_friend_letter{flex-direction: column;padding-top: 54px;width: 40px;line-height: 19px;text-align: center;justify-content: center;color: #666;font-size: 14px;position: fixed;top: 0;right: 0;z-index: 990;}
.chat_friend_letter_show{width: 80px;height: 80px;line-height: 80px;text-align: center;color: #FFF;font-size: 40px;border-radius: 6px;background-color: rgba(0, 0, 0, 0.5);position: fixed;top: 50%;left: 50%;margin: -40px;z-index: 991;display: none;}

/*chat_friend_detail_basic*/

.chat_friend_detail_basic{ margin-top: 20px; padding: 12px; height: 68px;background-color: #FFF; overflow: hidden; position: relative;}
.chat_friend_detail_basic .icon{ width: 68px; height: 68px; overflow: hidden; position: absolute; top: 12px; left: 12px;}
.chat_friend_detail_basic .icon img{ display: block; width: 100%; height: 100%;}
.chat_friend_detail_basic .desc{ padding: 0 12px 0 80px;}
.chat_friend_detail_basic .desc span{color: #222; font-size: 16px;}
.chat_friend_detail_basic .desc em{ color: #999;font-size: 14px;}
.chat_friend_detail_basic .desc i{font-size: 18px;}
.chat_friend_detail_basic .desc i.male{ color: #38f;}
.chat_friend_detail_basic .desc i.female{ color: #f30;}
.chat_friend_detail_basic .desc p{ padding-top: 2px; color: #999;}

/*chat_friend_detail_list*/

.chat_friend_detail_list{ margin-top: 20px; background-color: #FFF; overflow: hidden;}
.chat_friend_detail_list .cell{ margin: 0 12px; min-height: 48px; overflow: hidden; position: relative;}
.chat_friend_detail_list .cell .tits{ width: 90px;height: 48px; line-height: 48px; color: #222; font-size: 16px; overflow: hidden; position: absolute; left: 0; top: 0; overflow: hidden;}
.chat_friend_detail_list .cell .desc{ padding: 12px 0 12px 90px; line-height: 24px; color: #888; font-size: 14px;}

/*chat_friend_detail_btn*/

.chat_friend_detail_btn{ display: block; margin: 20px 12px 12px; height: 48px; line-height: 48px; text-align: center; color: #FFF; font-size: 16px; background-color: #F60; border-radius: 3px;}

/*chat_form*/

.chat_dialog_form{width: 100%;background-color: #FFF;-webkit-box-shadow: 0 0 8px 0 rgba(80%, 80%, 80%, 0.5);box-shadow: 0 0 8px 0 rgba(80%, 80%, 80%, 0.5);position: fixed;left: 0;bottom: 0; z-index: 2;}
.chat_dialog_formh{width: 100%; height: 90px; overflow: hidden;}

/*chat_form_area*/

.chat_dialog_form_area{margin-top: 6px;padding: 0 140px 0 10px;height: 82px;position: relative;overflow: hidden;}
.chat_dialog_form_area .input{ padding: 4px;height: 64px;border: 1px solid #E4E5E9; overflow: hidden;}
.chat_dialog_form_area ._input{display: block;padding-top: 6px;width: 99%;height: 74px;line-height: 22px;font-size: 14px;border: 0;background-color: transparent;outline: none;}
.chat_dialog_form_area .btn{width: 50px;height: 34px;position: absolute;right: 10px;top: 0;z-index: 10;}
.chat_dialog_form_area ._btn{display: block;width: 100%;height: 34px;line-height: 34px;text-align: center;color: #FFF;font-size: 14px;text-decoration: none;background-color: #F60;border: 0;border-radius: 3px;cursor: pointer;}
.chat_dialog_form_area .plus, .chat_dialog_form_area .emoji{width: 34px;height: 34px;background-position: 0 center; background-repeat: no-repeat;background-size: auto 100%;position: absolute;top: 0;z-index: 3;}
.chat_dialog_form_area .plus{background-image: url(../image/chat_plus.png);right: 98px;}
.chat_dialog_form_area ._plus{ display: block;width: 40px;height: 34px;opacity: 0;filter: alpha(opacity=0);}
.chat_dialog_form_area .emoji{ display: block;background-image: url(../image/chat_emoji.png);right: 64px;}

/*dialog_form_tips*/

.dialog_form_tips{line-height: 50px;text-align: center;color: #F00;font-size: 14px;}

/*chat_form_emoji*/

.dialog_form_emoji{width: 100%;height: 1px;overflow: hidden;}
.dialog_form_emoji .bd ul{display: block;padding-top: 10px;}
.dialog_form_emoji .bd li{display: inline-block;float: left;width: 14%;}
.dialog_form_emoji .bd li img{display: block;margin: 6px auto;}
.dialog_form_emoji .hd ul{display: block;padding-top: 6px;text-align: center;}
.dialog_form_emoji .hd li{display: inline-table;margin: 0 2px;width: 6px;height: 6px;background-color: #DDD;border-radius: 50%;overflow: hidden;}
.dialog_form_emoji .hd li.on{background-color: #F60;}

/*chat_dialog_list*/

.chat_dialog_list{padding: 10px 0;font-family: "Microsoft Yahei", "微软雅黑", Arial, "宋体";}
.chat_dialog_list .cell{clear: both;margin: 20px 12px 0;position: relative;}
.chat_dialog_list .cell .icon{display: inline-block;width: 44px;height: 44px;border-radius: 50%;overflow: hidden;position: absolute;top: 0;}
.chat_dialog_list .cell .icon img{display: block;width: 100%;height: 100%;}
.chat_dialog_list .cell .desc {}
.chat_dialog_list .cell .desc .con {}
.chat_dialog_list .cell .desc .tits{overflow: hidden;}
.chat_dialog_list .cell .desc .tits .span{display: block;font-size: 13px;overflow: hidden;}
.chat_dialog_list .cell .desc .tits .em{display: block;height: 14px;line-height: 14px;color: #999;font-size: 11px;font-style: normal;overflow: hidden;}
.chat_dialog_list .cell .desc .note{display: inline-table;margin-top: 2px;padding: 10px 12px; line-height: 20px; color: #333; font-size: 15px;word-wrap: break-word;word-break: break-all;background-color: #FFF;border-radius: 3px;position: relative;}
.chat_dialog_list .cell .desc .note a{color: #5080BC;}
.chat_dialog_list .cell_l{text-align: left;}
.chat_dialog_list .cell_l .icon{left: 0;}
.chat_dialog_list .cell_l .desc{padding-left: 58px;}
.chat_dialog_list .cell_l .desc .note{ margin-right: 44px;background-color: #B1DD4A;}
.chat_dialog_list .cell_l .desc .note:before{ content: ""; width: 0; height: 0; border-width: 8px 8px 8px 0; border-style: solid; border-color: transparent #B1DD4A transparent transparent; position: absolute; left: -6px; top: 12px;}
.chat_dialog_list .cell_r{text-align: right;}
.chat_dialog_list .cell_r .icon{right: 0;}
.chat_dialog_list .cell_r .desc{padding-right: 58px;}
.chat_dialog_list .cell_r .desc .note{ margin-left: 44px;text-align: left;background-color: #FFF;}
.chat_dialog_list .cell_r .desc .note:before{ content: ""; width: 0; height: 0; border-width: 8px 0 8px 8px; border-style: solid; border-color: transparent transparent transparent #FFF; position: absolute; right: -6px; top: 12px;}
.chat_dialog_list .cell_m{margin-top: 10px;text-align: center;}
.chat_dialog_list .cell_m .note{ display: inline-table;margin-top: 2px;padding: 4px 6px 2px;line-height: 16px;text-align: left;color: #FFF;font-size: 12px;background-color: #BBB;border-radius: 3px;}