header {
	position: sticky;
	top: 0;
	left: 0;
	height: 65px;
	z-index: 100;
	background: var(--header-background-color);
	padding: 15px 0;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

	header .nav-menu-icon {
		font: 400 1.5rem/1.5rem var(--font-icon);
		padding: 8px;
		color: var(--nav-menu-icon-color);
		cursor: pointer;
	}

		header .nav-menu-icon::before {
			content: "\f0c9";
		}

	header .search {
		background: var(--background-color);
		border-radius: 20px;
		position: relative;
		margin-left: 2vw;
		padding: 8px 12px;
		display: flex;
		align-content: space-between;
		align-items: center;
	}

		header .search input[type='text'] {
			background: none;
			border: none;
			color: var(--color-dark);
			padding: 0;
			font-size: 1rem;
			line-height: 1rem;
		}

		header .search a {
			text-decoration: none;
		}

			header .search a::before {
				font: 400 1rem/1rem var(--font-icon);
				content: "\f002";
				color: var(--color-gray);
			}

header .dash-filter {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: block;
}

	header .dash-filter .date-input {
		padding: 8px 12px;
		background: var(--background-color);
		border-radius: 20px;
		cursor: pointer;
		display: flex;
		align-items: center;
	}

		header .dash-filter .date-input i {
			margin: 0 8px;
			font-size: 1.2rem;
		}

		header .dash-filter .date-input input {
			background: none;
			border: none;
			padding: 0 !important;
			margin: 0 !important;
			cursor: pointer;
			font-size: 1.1rem;
			line-height: 1.1rem;
			font-weight: 500;
			width: auto;
		}

	header .user {
		position: absolute;
		right: 2vw;
		display: flex;
		align-items: center;
		height: 33px;
	}

			header .user img {
				aspect-ratio: 1/1;
				height: 100%;
				width: auto;
				border-radius: 50%;
				margin-right: 10px;
			}

		header .user .menu {
			color: var(--sub-text-color);
			padding-right: 50px;
			position: relative;
			cursor: pointer;
		}

		header .user .menu::after {
			content: "\f107";
			font-family: var(--font-icon);
			color: var(--sub-text-color);
			position: absolute;
			top: 2px;
			right: 0;
			visibility: visible;
			cursor: pointer;
			transition: all 200ms;
			padding: 0 20px;
		}

			header .user ul {
				list-style: none;
				margin: 0;
				padding: 0;
				position: absolute;
				top: 15px;
				left: -10px;
				width: 100%;
				background: var(--color-lightest);
				border-radius: 10px;
				opacity: 0;
				visibility: hidden;
				padding: 6px 0 6px 0;
			}

			header .user ul li {
				
			}

				header .user ul li a {
					display: block;
					padding: 6px 10px;
					font-size: 1rem;
					line-height: 1rem;
					text-decoration: none;
					color: var(--sub-text-color);
				}

				header .user ul li a:hover {
					color: var(--text-color);
				}

		header .user .menu.active ul {
			visibility: visible;
			opacity: 1;
			transition: all 200ms;
		}

		header .user .menu.active::after {
			transform: scaleY(-1);
			top: 0;
		}