.userlist{ width:220px; float:left; text-align:left; margin-left:15px; display:none}
.userlist .bt{ background:#fb3b60; height:40px; line-height:40px; color:#fff; text-align:left; font-size:15px; text-indent:30px; }
.userlist .box{ width:220px; overflow-x:hidden; overflow-y:no-display}
.userlist .box::-webkit-scrollbar{width:0px}
.userlist .li{ height:40px; line-height:40px; border-bottom:1px solid #dfdfdf; cursor:pointer; position:relative; padding:5px 0px; padding-left:60px}
.userlist .li i{ display:block; height:10px; width:10px; border-radius:50%; background:#ff0000; position:absolute; right:2px; bottom:4px}
.userlist .li .img{ width:40px; height:40px;position:absolute; left:10px; top:5px}
.userlist .li .img img{ width:40px; height:40px; border-radius:50%; }
.userlist .li .name{ font-size:15px}
.userlist .li a.delhaoyou{ display:none}
.userlist .li:hover{ background:#f9f9f9;transition:all 0.3s ease-in-out;}
.userlist .li:hover a.delhaoyou{ background:#e43131; display:block; position:absolute;width:80px; height:24px; padding:0px 5px; text-align:center; font-size:13px; line-height:24px; color:#fff; right:4px; top:13px; border-radius:9px}


.magbox{ float:left; margin-left:15px; display:none}
.magbox .bt{ background:#fb3b60; height:40px; line-height:40px; color:#fff; font-size:15px; text-align:center}
.magbox .bt span{ padding:0px 8px; font-size:17px}
.magxx{ background:#fff; padding:15px;overflow-x:hidden; overflow-y:no-display}
.magxx::-webkit-scrollbar{width:0px}
.magxx .li{ width:65%; padding:5px 15px;text-align:left; border:1px solid #e4e4e4; position:relative; background:#f1f1f1;border-radius:4px; margin:9px auto 9px 50px}
.magxx .li .img{ width:40px; height:40px; position:absolute;top:0px;}
.magxx .li .img img{ width:40px; height:40px; border-radius:50%}
.magxx .li i{ display:block; color:#999; border-top:1px dashed #e1e1e1; text-align:right}
.magxx .li.lr{ background:#d8f2ff; border:1px solid #78cdf8; margin:9px 50px 9px auto}
.magxx .li .nr{ overflow:hidden}
.magxx .li span{ position:absolute; cursor:pointer; left:15px; bottom:4px; color:#999; display:none}
.magxx .li:hover span{ display:block}
.magxx .li a.ck{ color:#ff0000}
.magxx .li.ll .img{ left:-45px; }
.magxx .li.lr .img{ right:-45px; }

.maghf{ height:30px; width:100%; padding:4px 0px; border-top:1px solid #dfdfdf; position:relative; margin-top:1px}
.maghf input{ display:block;padding:0px 10px; height:28px; border:0px; outline:0px}
.maghf a{ display:block; width:80px; height:38px; line-height:38px; position:absolute; right:0px; top:0px; background:#4bd6ff; font-size:14px; text-align:center; color:#fff}

.useradd{ height:30px; width:100%;border-bottom:1px solid #dfdfdf; position:relative; margin-top:1px}
.useradd input{ display:block;padding:0px 10px; height:28px; width:130px; border:0px; outline:0px}
.useradd a{ display:block; width:80px; height:30px; line-height:30px; position:absolute; right:0px; top:0px; background:#4bd6ff; font-size:14px; text-align:center; color:#fff}

.bt{ position:relative}
.bt i{ display:block; width:40px; text-indent:0px; height:40px; text-align:center; font-size:20px; color:#fff; font-style:normal; position:absolute; right:0px; top:0px}