.header .header-block-nav {

	.notifications {
		font-size: 16px;


		a {
			padding-right: 10px;
		}

		.counter {
			font-weight: bold;
			font-size: 14px;
			position: relative;
			top: -3px;
			left: -2px;
		}

		&.new .counter {
			color: $color-primary;
			font-weight: bold;
		}

		@include media-down(sm) {
			position: static;
		}
	}


	.notifications-dropdown-menu {
		white-space: normal;
		left: auto;
		right: 0;
		min-width: 350px;

		&:before {
			position: absolute;
			right: 20px;
			bottom: 100%;
			margin-right: -1px;
			// @include triangle(up, 10px, $dropdown-border);
		}

		&:after {
			position: absolute;
			right: 20px;
			bottom: 100%;
			// @include triangle(up, 9px, $dropdown-bg);
		}


		.notifications-container {
			.notification-item {
				border-bottom: 1px solid $dropbown-color-border;
				padding: 5px;

				&:hover {
					background-color: $dropdown-link-hover-color-bg;
				}
			}


			.img-col {
				display: table-cell;
				padding: 5px;
			}

			.body-col {
				padding: 5px;
				display: table-cell;
			}

			.img {
				width: 40px;
				height: 40px;
				border-radius: 3px;
				vertical-align: top;
				display: inline-block;

				@include bg-cover();
			}


			p {
				color: $color-text;
				display: inline-block;
				line-height: 18px;
				font-size: 13px;
				margin: 0;
				vertical-align: top;

				.accent {
					font-weight: bold;
				}
			}

		}



		footer {
			text-align: center;

			a {
				color: $dropdown-link-color;
				transition: none;

				&:hover {
					background-color: $dropdown-link-hover-color-bg;
					color: $color-primary;
				}
			}
		}

		@include media-down(sm) {
			min-width: 100px;
			width: 100%;
			margin-top: 5px;

			&:before,
			&:after {
				right: 107px;
			}
		}
	}
}