@charset "utf-8";
/* CSS layout */

/* 默认样式 */
/*html{ min-width: 1200px; }*/
body,div,ul,li,span,img,input,form{ margin:0; padding:0;}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dd{ margin:0;}
h1,h2,h3,h4,h5,h6{ font-weight: normal;}
ul,ol{padding:0;}

body{ font-size:12px;font-family:"微软雅黑",Arial,sans-serif;padding:0; overflow: scroll; overflow-x: hidden; }
a{ text-decoration:none; color:#666666; }
li{ list-style:none; }
img{ border:none 0;}
input{ outline:none; border:none; background:none;}
input,textarea,select{ margin:0; }
input,textarea{ padding:0;}

/* 浮动公共样式 */
.left{ float:left; _display:inline; }
.right{ float:right; _display:inline; }
.clear:after{ display:block; content:''; clear:both;}
.clear{ zoom:1;}

/*滚动条样式*/
/*---滚动条默认显示样式--*/
textarea::-webkit-scrollbar-thumb,
.select_user::-webkit-scrollbar-thumb,
.history_message::-webkit-scrollbar-thumb,
.user_l_content::-webkit-scrollbar-thumb{
     background-color:#D4D1D1;
     height:30px;
     -webkit-border-radius:5px;
     border: 1px solid #fff;
 }
/*---鼠标点击滚动条显示样式--*/
textarea::-webkit-scrollbar-thumb:hover,
.select_user::-webkit-scrollbar-thumb:hover,
.history_message::-webkit-scrollbar-thumb:hover,
.user_l_content::-webkit-scrollbar-thumb:hover{
     background-color: #cbc8c8;
     height:50px;
     -webkit-border-radius:4px;
 }
/*---滚动条大小--*/
textarea::-webkit-scrollbar,
.select_user::-webkit-scrollbar,
.history_message::-webkit-scrollbar,
.user_l_content::-webkit-scrollbar{
     width:10px;
     height:10px;
 }
/*---滚动框背景样式--*/
textarea::-webkit-scrollbar-track-piece,
.select_user::-webkit-scrollbar-track-piece,
.history_message::-webkit-scrollbar-track-piece,
.user_l_content::-webkit-scrollbar-track-piece{
     background-color:#fff;
     -webkit-border-radius:0;
 }
.w_main{
    border-radius: 3px;
    width: 830px;
    box-shadow: 1px 1px 50px rgba(0,0,0,.3);
}
.w_user_list{
    width: 290px;
}
.w_user_list .u_top{
    box-sizing: border-box;
    background: #4A4A5F;
    height: 85px;
    padding: 10px;
    color: #fff;
    border-radius: 3px 0 0 0;
}
.u_top .search_input {
    margin-top: 15px;
    background: #868693;
    border-color: #868693;
    color: #fff;
    border-radius: 15px;
    height: 30px;
}
.top_hide span{
    font-size: 16px;
}
.top_hide img:hover{
    cursor: pointer;
}
.w_user_info{
    width: 540px;
    height: 560px;
}
.user_l_content{
    height: 435px;
    overflow-y:auto;
    border-bottom: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
}
.user_name_info:hover{
    background: #E6E6E6;
    cursor: pointer;
}
.user_name_info .user_text{
    margin-left: 12px;
}
.user_name_info .user_text p:nth-child(1){
    font-size: 14px;
    color: #363636;
}
.user_name_info .user_text p:nth-child(2){
    font-size: 12px;
    color: #7F7F7F;
}
.group_content{
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
}
.g_c_click{
    width: 100px;
}
.group_content .g_c_click:hover{
    cursor: pointer;
}
.history_message{
    height: 355px;
    padding: 0 10px;
    overflow-y: auto;
}
.sent_text{
    height: 145px;
}
.history_message .history_time{
    text-align: center;
    color: #999999;
    font-size: 12px;
    margin: 3px 0;
}
.message_accept{
    margin-bottom: 10px;
}
.history_message .message_accept img{
    margin-right: 10px;
}
.history_message .message_accept .message_text{
    position: relative;
    max-width: 250px;
    word-wrap: break-word;
    font-size: 14px;
    padding: 10px;
    background: #D3D3D3;
    border-radius: 3px;
    color: #363636;
}
.message_accept .message_text:after{
    display:inline-block;
    position: absolute;
    top: 15px;
    left: -4px;
    content: '';
    border: 1px solid #D3D3D3;
    border-bottom: 0;
    border-left: 0;
    width: 10px;
    height: 10px;
    background-color: #D3D3D3;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.message_send{
    margin-bottom: 10px;
}
 .message_send img{
    margin-left: 10px;
}
 .message_send .message_text{
    position: relative;
    max-width: 250px;
    word-wrap: break-word;
    font-size: 14px;
    padding: 10px;
    background: #CC1313;
    border-radius: 3px;
     color: #fff;
}
.message_send .message_text:after{
    display:inline-block;
    position: absolute;
    top: 15px;
    right: -4px;
    content: '';
    border: 1px solid #CC1313;
    border-bottom: 0;
    border-left: 0;
    width: 10px;
    height: 10px;
    background-color: #CC1313;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.select_face{
    position: relative;
    border-top: 1px solid #EBEBEB;
    padding: 0 10px;
    height: 20%;
}
.select_face img{
    padding: 8px 5px;
}
.select_face img:hover{
    cursor: pointer;
}

.message_list{
    height: 100%;
}
.message_list .send_title{
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #EBEBEB;
    margin-left: 20px;
}
.message_list .layui-textarea{
    border-radius: 0;
    height: 56%;
    min-height: 40px;
    font-size: 14px;
}
.message_list textarea{
    border: 0;
    resize:none;
}
.message_list .layui-btn{
    background: #CC1313;
    height: 28px;
    line-height: 28px;
    padding: 0 31px;
    margin-right: 20px;
}
.message_list .layui-btn-primary{
    background: #fff;
}

.sfend_select_face{
    padding: 0 10px;
    background: #E5E4E4;
}
.sfend_select_face img{
    padding: 8px 5px;
}
.sfend_sent_text .select_face{
    padding: 10px 20px;
}
.sfend_sent_text .select_user{
    margin-left: 20px;
    border: 1px solid #E3E2E2;
    border-left: 0;
    border-right: 0;
    height: 179px;
    margin-bottom: 6px;
    overflow-y: auto;
}
.sfend_sent_text .layui-form-checkbox{
    width: 120px;
    margin: 5px 0;
}
.sfend_sent_text .layui-form-checkbox span{
    width: 75px;
}
.sfend_sent_text .layui-icon{
    float: left;
}
.message_list .sfend_sent_text textarea{
    height: 200px;
}
.i_sub_text{
    font-size: 14px;
    color: #363636;
    height: 30px;
}
.active{
    background-color: #BCBCBD;
}
.chat_face {
    text-align:center;
    /*height:28px;*/
    /*line-height:28px;*/
    color:#333;
    cursor:pointer;
    overflow:hidden;
    display:inline-block;
}

.chat_face_hover {
    color:#f25000;
    /*height:28px;*/
    /*line-height:28px;*/
    overflow:hidden;
}

.show_face {
    position: absolute;
    bottom: 30px;
    left: 0;
    background:#FFFFFF;
    border:#ccc 1px solid;
    width:279px;
    display:none;
    z-index:9999;
}
.show_face_hovers {
    display:block;
    position:absolute;
}


.face {
    width:30px;
    margin-right:1px;
    height:30px;
    line-height:30px;
    font-size:13px;
    text-align:center;
    background:#f6f6f6;
    vertical-align:top;
    margin-bottom:1px;
    display:inline-block;
}

.r_p_kefu{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #ec0b0b;
}

.hide_btn{
    position: absolute;
    right: 12px;
    top: 12px;
}
.layui-colla-title {
    background-color: #fff !important;
}
.layui-colla-content{
    border-color: transparent !important;
}
