.notification {
	position: relative;
	color: var(--tt);
}

.notification--bell {
	animation: bell 2.2s linear infinite;
	transform-origin: 50% 0%;
}

.notification--bellClapper {
	animation: bellClapper 2.2s 0.1s linear infinite;
}

.notification--num {
	position: absolute;
	top: -4px;
	left: 8px;
	min-width: 16px;
	padding: 0 3px;
	background-color: var(--accent);
	color: #fff;
	border-radius: 16px;
	font-size: 9px;
	line-height: 16px;
	transition: .1s ease;
	text-align: center;
}

.user-notification:hover {
	color: #fff;
}

.notification:hover .notification--num {
	transform: scale(0);
}

.user-notification {
	cursor: pointer;
	font-size: 20px;
	margin: 0 20px;
	color: #fff;
	display: block;
}

#notices-menu {
	margin-right: 30px;
}

#notices-menu li {
	height: 36px;
	line-height: 34px;
	background-position: right 8px top 50%;
	background-color: var(--bg);
	color: var(--tt-3);
	border: 1px solid var(--bg-2);
	border-radius: 4px;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 13px;
	margin-bottom: 5px;
}

#notices-menu li a {
	display: block;
}

#notices-menu li a span {
	margin-right: 5px;
	color: var(--tt-2);
}

#notices-menu li.active, #notices-menu li:hover {
	background-color: var(--bg-2);
}

#notices-menu li.active span, #notices-menu li:hover span {
	color: var(--accent);
}

.bell__container-header {
	height: 36px;
	line-height: 35px;
	background-position: right 8px top 50%;
	background-color: var(--bg);
	color: var(--tt-3);
	border: 1px solid var(--bg-2);
	border-radius: 4px;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 0px 0 13px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bell__container-header .default-button {
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	padding: 0px 13px;
	vertical-align: middle;
	background-color: var(--bg-2);
	cursor: pointer;
	border-right: 1px solid #fff;
}

.bell__container-header .default-button:last-child {
	border-right: 0;
}

.bell__container-header .default-button:hover {
	background-color: var(--bg-gr);
}

.notif-list li {
	border-radius: 3px;
	display: flex;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #deeddf;
	align-items: center;
}

.notif-list li.not-viewed {
	background-color: #fdecec;
}

.notif-date {
	font-size: 11px;
	margin-right: 10px;
}

.notif-list li > a {
	margin: 0 13px;
	font-weight: 600;
}

.list-buttons {
	margin-left: 10px;
	display: flex;
	align-items: center;
}

.list-buttons button {
	width: 30px;
	height: 30px;
	line-height: 30px;
	padding: 0;
	background: var(--bg-3);
	margin: 0 5px;
}
.list-buttons button {
	    font-family: 'Font Awesome 5 Pro'!important;
}
@media screen and (max-width: 760px) {
    .bell__container-menu {
        width: 100%;
    }
    #notices-menu {
        margin-right: 0;
    }
    .notif-list li {
        flex-wrap: wrap;
    }
    .bell__container-header {
        flex-wrap: wrap;
        height: auto;
        padding-left: 0;
    }
    .bell__header-left {
        width: 100%;
        padding: 0 12px;
    }
    .list-buttons {
        margin-left: 0;
        width: 100%;
    }
}