.header {
	background-color: $color-bg-header;
	height: $header-height;
	position: absolute;
	left: 0px;
	right: 0;
	transition: left 0.3s ease;
	-webkit-transition: left 0.3s ease;
	z-index: 20;
	border-bottom: 1px solid #cfd8dc;
	display: flex;
	align-items: center;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;


	@include media-down(md) {
		left: 0;
	}

	@include media-down(sm) {
		left: 0;
		height: $header-height-xs;
	}

	.header-fixed & {
		position: fixed;
	}

	.header-block {
		@include media-down(sm) {
			padding: 5px;
		}
	}	
}

.header-sidebar {
	background-color: $sidebar-header-color;
    color: $sidebar-header-text;
	height: 100%;
	width: $sidebar-width;
	display: flex;
    align-items: center;
    justify-content: center;
}

.header .header-block-buttons {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	white-space: nowrap;

	.btn.header-btn {
		background-color: transparent;
		border: 1px solid lighten($color-text, 10%);
		color: white;
		margin: 0 5px;
		border-radius: 0.2rem;

		&:hover,
		&:focus {
			border: 1px solid darken($color-text, 10%);
			color: darken($color-text, 10%);
		}


		@include media-down(sm) {
			span {
				display: none;
			}
		}
	}
}


.header .header-block-collapse {

	padding-right: 5px;

	@include media-down(sm) {
		width: 155px;
	}

	.collapse-btn {
		background: none;
		border: none;
		box-shadow: none;
		color: hsla(0, 0%, 100%, .7);
		font-size: 24px;
		line-height: 40px;
		border-radius: 0;
		outline: none;
		padding: 0;
		padding-left: 10px;
		padding-right: 10px;
		vertical-align: initial;
	}
}

.header .header-block-nav {
	margin-left: auto;
	white-space: nowrap;
	padding-right: 15px;

	@include media-down(sm) {
		padding-right: 25px;
	}

	@include clearfix();

	a {
		text-decoration: none;
	}

	// All lists
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	& > ul {
		display: table;
	}

	// First level items
	& > ul > li {
		display: table-cell;
		position: relative;

		&:before {
			display: block;
			content: " ";
			width: 1px;
			height: 24px;
			top: 50%;
			margin-top: -12px;
			background-color: darken($color-divider, 25%);
			position: absolute;
			left: 0;
		}

		&:first-child:before {
			display: none;
		}
	}

	// First leve items links
	& > ul > li > a {
		padding: 0 15px;
		color: $link-color;

		&:hover {
			color: $header-hover;
		}
	}

	// Dropdown menus
	.dropdown-menu {
		margin-top: 15px;
	}

}

.header .header-block-nav {
	.profile {
		.img {
			display: inline-block;
			width: 30px;
			height: 30px;
			line-height: 30px;
			border-radius: 4px;
			background-color: darken($color-divider, 25%);
			color: $color-text-inverse;
			text-align: center;
			margin-right: 10px;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			vertical-align: middle;
		}

		.name {
			display: inline-block;	
			margin-right: 9px;
			font-weight: bold;

			@include media-down(sm) {
				display: none;
			}
		}

		.arrow {
			color: $color-primary;
		}
	}

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

		&:before {
			position: absolute;
			right: 10px;
			bottom: 100%;
			margin-right: -1px;
		}

		&:after {
			position: absolute;
			right: 10px;
			bottom: 100%;
		}

		a {
			padding: 6px 15px;
			.icon {
				color: $color-primary;
				text-align: center;
				width: 16px;
			}

			span {
				display: inline-block;
				padding-left: 5px;
				text-align: left;
				color: $color-text-light;
			}
		}

		.profile-dropdown-menu-icon {
			padding: 0;
		}

		.profile-dropdown-menu-topic {
			color: #7e8e9f;
			padding: 0;
		}

		.dropdown-divider {
			margin: 0;
		}

		.logout {
			border-top: 1px solid $dropbown-color-border;
		}


		@include media-down(sm) {
			margin-top: 8px;
		}
	}
}

.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;		
		}

		&: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;
			}
		}
	}
}

.header .header-block-search {
	$line-height: $header-height - 30px;
	margin-right: auto;
	padding-left: 20px;

	@include media-down(sm) {
		padding-left: 10px;
	}

	@include media(md) {
		padding-left: 20px;
	}

	@include media(lg) {
		padding-left: 20px;
	}

	@include media(xl) {
		padding-left:  35px;
	}

	& > form {
		float: right;

		@include media-down(sm) {
			padding-left: 0;
		}
	} 

	.input-container {
		position: relative;
		color: $color-text-light;

		i {
			position: absolute;
			pointer-events: none;
			display: block;
			line-height: $line-height;
			height: 35px;
        	margin-left: 8px;
	        margin-top: 4px;
	        left: 5;
		}

		input {
			background: $input-search-color;
			color: $input-search-text-color;
			border: none;
			padding-left: 30px;
			height: 30px;
			max-width: 250px;
			border-radius: 30px;
	        display: inline-block;

			@include media-down(sm) {
				max-width: 140px;
			}
		}

		input:focus + .underline {
			transform: scaleX(1);
		}

	}
}