.im-header-notification {
				position: relative;
				display: inline-block;
				cursor: pointer;
			}

			.im-header-notification .action-icon svg {
				fill: currentColor;
			}

			.im-header-notification:hover .balloon-wrapper {
				display: block;
			}

			.im-header-notification .balloon-wrapper {
				display: none;
				position: absolute;
				top: 36px;
				left: -182px;
				width: 380px;
				background-color: #fff;
				border-radius: 10px;
				padding: 12px 0;
				z-index: 99;
				box-shadow: 0px 4px 10px #ddd;
			}

			.im-header-notification .balloon-wrapper:before {
				content: "";
				display: inline-block;
				width: 16px;
				height: 16px;
				transform: rotate(45deg);
				position: absolute;
				top: -8px;
				background-color: #fff;
				left: 186px;
			}

			.im-header-notification .unread-count,
			.im-header-list .unread-count {
				position: absolute;
				height: 16px;
				line-height: 16px;
				text-align: center;
				border-radius: 8px;
				background-color: #e52828;
				color: #fff;
				font-size: 12px;
				padding: 0 6px;
			}

			.im-header-notification .unread-count {
				left: 50%;
				top: -8px;
			}

			[dir=rtl] .im-header-notification .unread-count {
				left: -50%;
				top: -8px;
			}

			.im-header-list {
				padding: 6px 4px;
			}

			.im-header-list .list-header {
				color: #222;
				font-size: 14px;
				font-weight: bold;
				margin-bottom: 20px;
				padding: 0 14px;
			}

			.im-header-list .im-header-list-item {
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: stretch;
				position: relative;
				cursor: pointer;
				box-sizing: border-box;
				background-color: #fff;
				margin-bottom: 10px;
				padding: 0 14px;
			}

			.im-header-list .im-header-list-item:hover {
				background-color: #e6e9ed;
			}

			.im-header-list .contact-left {
				position: relative;
				width: 40px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				flex-shrink: 0;
				box-sizing: border-box;
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				margin-right: 10px;
			}

			.im-header-list .contact-left img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}

			.im-header-list .letter {
				display: inline-block;
				width: 40px;
				height: 40px;
				font-size: 20px;
				color: #fff;
				background-color: #50e3c2;
				line-height: 40px;
				text-align: center;
				border-radius: 50%;
			}

			.im-header-list .unread-num {
				position: absolute;
				right: 2px;
				top: 4px;
				background-color: #f33;
				color: #fff;
				font-size: 12px;
				width: 20px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				border-radius: 50%;
				font-weight: normal;
				border: 1px solid #fff;
				transform: scale(0.8);
			}

			.im-header-list .contact-right {
				display: flex;
				flex-flow: column nowrap;
				justify-content: flex-start;
				align-items: stretch;
				flex-grow: 1;
				padding: 6px 0 10px;
				overflow: hidden;
			}

			.im-header-list .contact-info {
				position: relative;
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				min-width: 0;
			}

			.im-header-list .name {
				font-size: 14px;
				color: #333;
				max-width: 260px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-weight: bold;
			}

			.im-header-list .contact-time {
				flex-shrink: 0;
				flex-grow: 1;
				text-align: right;
				color: #999;
				font-size: 12px;
			}

			.im-header-list .contact-company {
				padding-right: 44px;
				font-size: 12px;
				color: #666;
				line-height: 20px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.im-header-list .msg-wrapper {
				margin: 2px 0;
			}

			.im-header-list .msg-wrapper p {
				padding: 0;
				margin: 0;
			}

			.im-header-list .latest-msg {
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				font-size: 12px;
				color: #666;
				position: relative;
			}

			.im-header-list .latest-msg.latest-msg-rec {
				padding-right: 25px;
			}

			.im-header-list .latest-msg .latest-msg-oneline {
				width: 100%;
			}

			.im-header-list .latest-msg .latest-msg-oneline p {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.im-header-list .unread-count {
				top: 30px;
				right: 14px;
				left: auto;
			}

			.im-header-list .button-bar {
				padding: 0 14px;
			}

			.im-header-list .list-view-more {
				width: 100%;
				background-color: #ff1900;
				height: 36px;
				line-height: 36px;
				color: #fff;
				font-size: 14px;
				border: none;
				border-radius: 18px;
				cursor: pointer;
			}

			.im-header-list .list-view-more:hover {
				background-color: #d04a0a;
			}

			.im-header-list .list-view-more:active {
				background-color: #d04a0a;
			}

			.im-header-list .no-data-img {
				width: 160px;
				margin: 30px auto 0;
				display: block;
			}

			.im-header-list .no-data-tip,
			.im-header-list .login-tip {
				color: #222;
				font-size: 12px;
				text-align: center;
				margin: 20px 0;
			}

			.im-header-list .login-tip {
				margin: 40px 0;
				line-height: 20px;
			}