.componentNotices {width: 400px; box-shadow: 0 0 5px 0 #bbb; border-radius: 3px;}
.componentNotices .button {height: 24px; line-height: 24px !important; margin-bottom: 0;}

.componentNotices .header {height: 40px; display: flex; border-bottom: 1px solid #aaa; background-color: #eee;}
.componentNotices .header .title {margin-right: 1rem; line-height: 40px;}
.componentNotices .header .button {margin: 7px 0 0 1rem; padding: 0 .5rem;}
.componentNotices .header .close:hover {color: #000;}
.componentNotices .header .close {
	width: 40px; height: 40px; margin-right: auto; cursor: pointer;
	text-align: center; line-height: 40px; font-size: 20px; color: #777;
}

.componentNotices .notices {height: 0; overflow: auto; background: white;}
.componentNotices .notices ul {margin: 0;}
.componentNotices .notices li {padding: 1rem; display: flex; align-items: center; min-height: 2.3rem;}
.componentNotices .notices li + li,
.componentNotices .notices ul + ul {border-top: 1px solid #d4d4d4;}
.componentNotices .notices li > i {width: 24px; margin-left: 1rem; text-align: center; font-size: 20px;}
.componentNotices .notices li > p {width: calc(100% - 85px); margin-bottom: 0;}
.componentNotices .notices li > p > b {display: block;}
.componentNotices .notices li > p a {color: #00588b;}

.componentNotices .notices li.warning {background-color: #fffaee;}
.componentNotices .notices li.warning > i {color: #f28800;}
.componentNotices .notices li.alert {background-color: #fff0f0;}
.componentNotices .notices li.alert > i {font-size: 24px; color: #f03e14;}

.componentNotices .notices .user .read {background-color: #f8f8f8; color: #777;}
.componentNotices .notices .user .button {width: 30px; margin-right: auto; padding: 0;}

.componentNotices .empty:not(.dn) {
	display: flex; height: 80px; background-color: #fafafa;
	justify-content: center; align-items: center;
}
.componentNotices .empty i {width: 30px;}
.componentNotices .empty span {margin-right: 1rem; font-size: 14px;}