.im-header-notification{cursor:pointer;display:inline-block;position:relative}.im-header-notification .action-icon svg{fill:currentColor}.im-header-notification:hover .balloon-wrapper{display:block}.im-header-notification .balloon-wrapper{background-color:#fff;border-radius:10px;box-shadow:0 4px 10px #ddd;display:none;left:-182px;padding:12px 0;position:absolute;top:36px;width:380px;z-index:99}[dir=rtl] .im-header-notification .balloon-wrapper{left:auto;right:-182px}.im-header-notification .balloon-wrapper:before{background-color:#fff;content:"";display:inline-block;height:16px;left:186px;position:absolute;top:-8px;transform:rotate(45deg);width:16px}[dir=rtl] .im-header-notification .balloon-wrapper:before{left:auto;right:186px;transform:rotate(-45deg)}.im-header-list .unread-count,.im-header-notification .unread-count{background-color:#e52828;border-radius:8px;color:#fff;font-size:12px;height:16px;line-height:16px;padding:0 6px;position:absolute;text-align:center}.im-header-notification .unread-count{left:50%;top:-8px}[dir=rtl] .im-header-notification .unread-count{left:auto;right:50%}.im-header-list{padding:6px 4px}.im-header-list .list-header{color:#222;font-size:14px;font-weight:700;margin-bottom:20px;padding:0 14px}.im-header-list .im-header-list-item{align-items:stretch;background-color:#fff;box-sizing:border-box;cursor:pointer;display:flex;flex-flow:row nowrap;justify-content:flex-start;margin-bottom:10px;padding:0 14px;position:relative}.im-header-list .im-header-list-item:hover{background-color:#e6e9ed}.im-header-list .contact-left{align-items:center;box-sizing:border-box;display:flex;flex-flow:column;flex-shrink:0;height:60px;justify-content:center;line-height:60px;margin-right:10px;position:relative;text-align:center;width:40px}[dir=rtl] .im-header-list .contact-left{margin-left:10px;margin-right:0}.im-header-list .contact-left img,.im-header-list .letter{border-radius:50%;height:40px;width:40px}.im-header-list .letter{background-color:#50e3c2;color:#fff;display:inline-block;font-size:20px;line-height:40px;text-align:center}.im-header-list .unread-num{background-color:#f33;border:1px solid #fff;border-radius:50%;color:#fff;font-size:12px;font-weight:400;height:20px;line-height:20px;position:absolute;right:2px;text-align:center;top:4px;transform:scale(.8);width:20px}[dir=rtl] .im-header-list .unread-num{left:2px;right:auto}.im-header-list .contact-right{align-items:stretch;display:flex;flex-flow:column nowrap;flex-grow:1;justify-content:flex-start;overflow:hidden;padding:6px 0 10px}.im-header-list .contact-info{align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;min-width:0;position:relative}.im-header-list .name{color:#333;font-size:14px;font-weight:700;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.im-header-list .contact-time{color:#999;flex-grow:1;flex-shrink:0;font-size:12px;text-align:right}[dir=rtl] .im-header-list .contact-time{text-align:left}.im-header-list .contact-company{color:#666;font-size:12px;line-height:20px;overflow:hidden;padding-right:44px;text-overflow:ellipsis;white-space:nowrap}[dir=rtl] .im-header-list .contact-company{padding-left:44px;padding-right:0}.im-header-list .msg-wrapper{margin:2px 0}.im-header-list .msg-wrapper p{margin:0;padding:0}.im-header-list .latest-msg{align-items:center;color:#666;display:flex;flex-flow:row nowrap;font-size:12px;justify-content:flex-start;position:relative}.im-header-list .latest-msg.latest-msg-rec{padding-right:25px}[dir=rtl] .im-header-list .latest-msg.latest-msg-rec{padding-left:25px;padding-right:0}.im-header-list .latest-msg .latest-msg-oneline{width:100%}.im-header-list .latest-msg .latest-msg-oneline p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.im-header-list .unread-count{left:auto;right:14px;top:30px}[dir=rtl] .im-header-list .unread-count{left:14px;right:auto}.im-header-list .button-bar{padding:0 14px}.im-header-list .list-view-more{background-color:#f60;border:none;border-radius:18px;color:#fff;cursor:pointer;font-size:14px;height:36px;line-height:36px;width:100%}.im-header-list .list-view-more:active,.im-header-list .list-view-more:hover{background-color:#d04a0a}.im-header-list .no-data-img{display:block;margin:30px auto 0;width:160px}.im-header-list .login-tip,.im-header-list .no-data-tip{color:#222;font-size:12px;margin:20px 0;text-align:center}.im-header-list .login-tip{line-height:20px;margin:40px 0}