SQ12345_Web/WebUI/CallCenterWe.../css/chat.css

		body{
				color: #4d4d4d;
			    font: 14px/1.4em 'Helvetica Neue', Helvetica, 'Microsoft Yahei', Arial, sans-serif;
			    background: #f5f5f5 url(img/chat_bg.jpg) no-repeat center;
			    background-size: cover;
			}
			ul,li{
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			#chat{
				margin: 20px auto;
			    width: 900px;
			    height: 600px;
			    overflow: hidden;
    			border-radius: 3px;
			}
			.chat_left,.chat_sidebar{
					float: left;
			}
			.chat_left ul li{
				    /*padding: 9pt 15px;*/
				   padding: 10px 10px;
				    border-bottom: 1px solid #292c33;
				    cursor: pointer;
				    color: #f4f4f4;
			}
			.chat_left ul li .chat_name{
				margin: 0;
			}
			.chat_sidebar{
			    width: 200px;
			    color: #f4f4f4;
			    background-color: #2e3238;
			}
			#chat .chat_left,#chat .chat_main, #chat .chat_sidebar,.message_mincon{
				    height: 100%;
			}
			#chat .chat_main ,.message_mincon{
			    position: relative;
			    overflow: hidden;
			    background-color: #eee;
			}
			.ver_middle{
				vertical-align: middle;
			}
			#chat .chat_left{
				width: 70px;
			    background: #2f3339;
			    border-right: 1px solid #292c33;
			}
			
			/*chat_sidebar开始*/
			.pic_card{
			    padding: 9pt;
			    border-bottom: 1px solid #24272c;
			}
			.chat_name{
				display: inline-block;
			    margin: 0 0 0 15px;
			    font-size: 1pc;
			    vertical-align: middle;
			    font-size: 14px;
			}
			.chat_sidebar_foot{
				margin-top: 10px;
			}
			.sidebar_foot_seach{
				padding: 0 10px;
			    width: 100%;
			    font-size: 9pt;
			    color: #fff;
			    height: 30px;
			    line-height: 30px;
			    border: 1px solid #3a3a3a;
			    border-radius: 4px;
			    outline: 0;
			    background-color: #26292e;
			}
			.chat_sidebar_list{
				height: 495px;
   				overflow-y: auto;
			}
			.chat_sidebar_list li{
				/*padding: 9pt 15px;*/
				padding: 4pt 15px;
			    border-bottom: 1px solid #292c33;
			    cursor: pointer;
			    -webkit-transition: background-color .1s;
			    transition: background-color .1s;
			        position: relative;
			}
			.chat_sidebar_list li.actives ,.chat_left li.actives{
			    background-color: hsla(0,0%,100%,.1);
			}
			.chat_sidebar_list li.actives:hover ,.chat_left li.actives:hover{
			    background-color: hsla(0,0%,100%,.1);
			}
			.chat_sidebar_list li:hover ,.chat_left li:hover{
				    background-color: hsla(0,0%,100%,.03);
				}
		/*chat_sidebar结束*/
		/*聊天区域开始*/
		.message_count{
			display: inline-block;
			position: absolute;
			right: 0;
			border-radius: 50%;
			background: red;
			color: #fff;
		}
		.disnone{
			display: none;
		}
		.main_message{
			padding: 10px 15px;
		    overflow-y: scroll;
		    height: calc(100% - 12pc);
		    margin-top: 2pc;
		}
		.chat_person{
			      position: absolute;
			    width: 100%;
			    top: 0;
			    left: 0;
			    height: 2pc;
			    line-height: 2pc;
			    border-bottom: 1px solid #ddd;
			    background: #fff;
		}
		.main_message li{
			margin-bottom: 15px;
		}
		.main_message .message_time{
			    margin: 7px 0;
   			 text-align: center;
		}
		.main_message .ver_middle{
			    float: left;
			    margin: 0 10px 0 0;
			    border-radius: 3px;
		}
		.main_message .message_text{
			    display: inline-block;
			    position: relative;
			    padding: 0 10px;
			    max-width: calc(100% - 40px);
			    min-height: 30px;
			    line-height: 2.5;
			    font-size: 9pt;
			    text-align: left;
			    word-break: break-all;
			    background-color: #fafafa;
			    border-radius: 4px;
		}
		.main_message .message_text:before{
			content: " ";
		    position: absolute;
		    top: 9px;
		    right: 100%;
		    border: 6px solid transparent;
		    border-right-color: #fafafa;
		}
		.main_message .self {
			    text-align: right;
			    }
	   .main_message .self .ver_middle {
	    	float: right;
			margin: 0 0 0 10px;
	    }
		.main_message .self .message_text {
			    background-color: #b2e281;
				}
		.main_message .self .message_text:before {
			    right: inherit;
			    left: 100%;
			    border-right-color: transparent;
			    border-left-color: #b2e281;
			    }
		
		.main_sendMessage{
			    position: absolute;
			    width: 100%;
			    bottom: 0;
			    left: 0;
			    height: 10pc;
  				 border-top: 1px solid #ddd;
  				 background: #fff;
		}
		.main_sendMessage textarea{
			    padding: 10px;
			    height: 80%;
			    width: 100%;
			    border: none;
			    outline: 0;
			    font-family: Micrsofot Yahei;
			    resize: none;
		}
		.main_sendMessage .send_btn{
			height: 20%;
			text-align: right;
			color: #4d4d4d;
			    padding-right: 20px;
		}
		.main_sendMessage .send_btn button{
			border: 1px solid #ccc;
			background: #fff;
			outline: none;
		}
		.main_sendMessage .send_btn button:hover{
			background: #b2e281;
		}
		
		/*聊天区域结束*/