#notification-icon 						{ position: relative; cursor: pointer;}
#notification-icon .count 				{ display: none; position: absolute; right: 0; top: 0; transform: translate(5px, -50%) scale(.86, .86); background-color: #c00; color: #fff; font-size: 12px; padding: .2em .4em; border-radius: 10px; }
#notification-icon .count.show 			{ display: block;}

#notification-box 						{ display: none; z-index: 1001; position: absolute; right: 6%; top: 64px; width: 88%; max-width: 360px; min-height: 300px; max-height: calc(100vh - 80px); background-color: #fff; color: var(--theme-text-color); border: 1px solid var(--light-border-color); overflow: hidden;}
#notification-box.show 					{ display: flex;}
#notification-box.loading::before 		{ content: '\f3f4'; font: var(--fa-font-regular); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ccc; font-size: 24px; animation:rotation 2s linear infinite; }
#notification-box-header 				{ height: 60px; padding: 22px 20px; text-align: right; border-bottom: 1px solid var(--light-border-color);}
#notification-read-all 					{ cursor: pointer;}
#notification-read-all i 				{ margin-left: 4px;}
#notification-box-body 					{ flex-grow: 1; overflow-y: auto;}
#notification-list li 					{ border-bottom: 1px solid var(--soft-border-color); position: relative; }
#notification-list li.unread::before	{ content: ''; position: absolute; left: 20px; top: 50%; transform: translate(-50%, -50%); width: 5px; height: 5px; border-radius: 50%; background-color: var(--theme-bg-color);}
#notification-list li a 				{ display: block; padding: 14px 36px; transition: all .2s; }
#notification-list li p                 { line-height: 1.25em;}
#notification-list li .label 			{ display: inline-block; padding: .2em .4em; margin-bottom: 6px; font-size: .9em; border-radius: 3px; background-color: #ddd; color: #666; }
#notification-list li:hover 			{ background-color: #f7f7f7;}
#notification-list li:hover .delete 	{ display: block;}
#notification-list .delete				{ display: none; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); opacity: .5; cursor: pointer; }
#notification-list .delete:hover 		{ opacity: .8;}
#notification-empty 					{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; text-align: center; color: #bbb; font-size: 1.33em; line-height: 1.2em;}

/* for 1024px or less */
@media screen and (max-width: 1024px) {

    #notification-box 					{ top: 48px; right: 4%; width: 92%; max-height: calc(100vh - 70px); border-radius: 10px; }
    #notification-box-header 			{ height: 48px; padding: 16px 20px; }
    #notification-list li a 			{ padding: 10px 36px; }

}