/**
 
 @Name: layim
 @Author: 贤心
 @Site: http://layim.layui.com
 
 */

/* 加载就绪标志 */
html #layuicss-skinlayim-mobilecss{display: none; position: absolute; width: 1989px;}

/* 辅助 */


/* 聊天面板 */
.layim-chat{position: fixed; bottom: 0; top: 0; left: 0; right: 0; background-color: #eee;}

.layim-chat-title{position: fixed; top: 0; left: 0; right: 0; height: 50px; line-height: 50px; text-align: center; background-color: #36373C; color: #fff; font-size: 16px;}
.layim-chat-status{padding-left: 5px; font-size: 14px;}

.layim-chat-main{position: fixed; width: 100%; bottom: 85px; top: 50px; left: 0; right: 0; padding: 15px;   overflow-y: auto; overflow-x: hidden; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}
.layim-chat-main[nonetitle]{top: 0;}
.layim-chat-main ul{overflow-x: hidden;}
.layim-chat-main ul li{position: relative; font-size: 0; margin-bottom: 10px; padding-left: 60px; min-height: 68px;}
.layim-chat-user,
.layim-chat-text{display: inline-block; *display:inline; *zoom:1; vertical-align:top; font-size: 14px;}
.layim-chat-user{position: absolute; left: 3px;}
.layim-chat-user img{width: 40px; height: 40px; border-radius: 100%;}
.layim-chat-user cite{position: absolute; left: 60px; top: -2px; width: 500px; line-height: 24px; font-size: 12px; white-space: nowrap; color: #999; text-align: left; font-style: normal;}
.layim-chat-user cite i{padding-left: 15px; font-style: normal;}
.layim-chat-text{position: relative; min-height: 22px; line-height: 22px; margin-top: 25px; padding: 8px 15px; background-color: #fff; border-radius: 3px; color: #333; word-break: break-all;}
.layim-chat-text:after{content: ''; position: absolute; left: -10px; top: 13px; width: 0; height: 0; border-style: dashed; border-color:transparent; overflow:hidden; border-width: 10px; border-top-style: solid; border-top-color: #fff;}
.layim-chat-text a{color: #33DF83;}
.layim-chat-text img{ max-width: 100%; vertical-align: middle;}
.layui-layim-file,
.layim-chat-text .layui-layim-file{display: block; text-align: center; }
.layim-chat-text .layui-layim-file{color: #333;}
.layui-layim-file:hover{opacity: 0.9}
.layui-layim-file i{font-size: 80px; line-height: 80px;}
.layui-layim-file cite{display: block; line-height: 20px; font-size: 14px;}
.layim-chat-main ul .layim-chat-system{min-height: 0; padding: 0;}

.layim-chat-main ul .layim-chat-mine{text-align: right; padding-left: 0; padding-right: 60px;}
.layim-chat-mine .layim-chat-user{left: auto; right: 3px;}
.layim-chat-mine .layim-chat-user cite{left: auto; right: 60px; text-align: right;}
.layim-chat-mine .layim-chat-user cite i{padding-left: 0; padding-right: 15px;}
.layim-chat-mine .layim-chat-text{margin-left: 0; text-align: left; background-color: #5FB878; color: #fff;}
.layim-chat-mine .layim-chat-text:after{left: auto; right: -10px; border-top-color: #5FB878;}
.layim-chat-mine .layim-chat-text a{color: #fff;}

.layim-chat-main ul .layim-chat-system{min-height: 0; margin: 20px 0 5px; padding: 0;}
.layim-chat-system{margin: 10px 0; text-align: center;}
.layim-chat-system span{display: inline-block; line-height: 30px; padding: 0 15px; border-radius: 3px; background-color: #ddd; color: #fff; font-size: 14px;}

.layim-chat-footer{ position: fixed; bottom: 0; left: 10px; right: 10px; height: 80px;}
.layim-chat-send{display: -webkit-box; display: -webkit-flex; display: flex;}
.layim-chat-send input{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; height: 36px; padding-left: 5px; border: none 0; background-color: #fff; border-radius: 3px;}
.layim-chat-send button{border-radius: 3px; height: 36px; padding: 0 10px; border: none 0; margin-left: 10px; background-color: #5FB878; color: #fff;}

.layim-chat-tool{position: relative; width: 100%; overflow-x: auto; padding: 0; height: 38px; line-height: 38px; margin-top: 5px; font-size: 0; white-space: nowrap;}
.layim-chat-tool span{position: relative; margin: 0 10px; display: inline-block; *display:inline; *zoom:1; vertical-align:top; font-size: 24px; cursor: pointer;}
.layim-chat-tool .layim-tool-log{position: absolute; right: 5px; font-size: 14px; }
.layim-tool-log i{position: relative; top: 2px; margin-right: 5px; font-size: 20px; color: #999}
.layim-tool-image input{position: absolute; font-size: 0; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.01; filter: Alpha(opacity=1); cursor: pointer;}


.layim-layer{position: fixed; bottom: 85px; left: 10px; right: 10px; margin: 0 auto;}

.layui-layim-face{position:relative; max-height: 180px; overflow: auto; padding: 10px; font-size: 0;}
.layui-layim-face li{cursor: pointer; display: inline-block; vertical-align: bottom; padding: 5px 2px; text-align: center; width: 10%; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}
.layui-layim-face li img{width: 22px; height: 22px;}