/*
	@modCssClasses
	@customTag: header
	@cssMod: mod_constrained
	@cssMod: mod_minimal
	@cssMod: mod_withExplainer
	@cssMod: mod_app
	--theme-bodyBackgroundColor 			rgba(255, 255, 255, 1)
	--theme-errorFont 						rgba(255, 68, 68, 1)
	--theme-highlightedBackgroundColor 		rgba(255, 255, 255, 0.15)
	--theme-importantDetail 				rgba(255, 0, 255, 1)
	--theme-inputBackgroundColor 			rgba(0, 0, 0, 0)
	--theme-mainFont 						rgba(0, 0, 0, 1)
	--theme-modal-boxShadow 				rgba(0, 0, 0, 1)
	--theme-modalButton-backgroundColor 	rgba(68, 68, 255, 1)
	--theme-modalText-color 				rgba(255, 255, 255, 1)
	--theme-secondaryFont 					rgba(0, 0, 0, 0.6)
	--theme-transitionDuration 				0.15s
*/




header {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 4rem;
	margin-left: 0;
	transition-property: background-color, box-shadow, border-bottom-color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
	align-items: center;
	position: sticky;
	top: 0;
	background-color: var(--theme-bodyBackgroundColor, rgba(255, 255, 255, 1));
	box-shadow: 0 0 0.25rem 0.25rem var(--theme-bodyBackgroundColor, rgba(255, 255, 255, 1));
	z-index: 1;
	display: flex;
	flex-flow: wrap;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--theme-highlightedBackgroundColor, rgba(255, 255, 255, 0.15));
}

header.mod_app {
	background-color: transparent;
	box-shadow: unset;
	border: medium none;
	margin-bottom: unset;
	position: sticky;
	top: 0;
}

header.mod_constrained {
	max-width: 80rem;
	width: 90vw;
	margin-right: auto;
	margin-left: auto;
}

header.mod_minimal {
	margin-top: 2rem;
	background-color: var(--theme-inputBackgroundColor, rgba(0, 0, 0, 0));
	margin-bottom: 2.5rem;
	border-bottom: medium none;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	padding-top: 0.5rem;
	padding-right: 0;
	padding-bottom: 0.5rem;
	padding-left: 0;
	position: unset;
	box-shadow: 0 0 0 var(--theme-inputBackgroundColor, rgba(0, 0, 0, 0));
}

header.mod_minimal.mod_withExplainer {
	margin-bottom: 0.5rem;
}

header .left {
	margin-right: 1rem;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: var(--theme-highlightedBackgroundColor, rgba(0, 0, 0, 0.1));
	cursor: pointer;
	min-height: 3rem;
	transition-property: border-right-color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
	display: flex;
	padding-right: 1rem;
}

header .leftMain {
	display: flex;
	margin-right: 1rem;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: var(--theme-highlightedBackgroundColor, rgba(0, 0, 0, 0.1));
	cursor: pointer;
	min-height: 3rem;
	transition-property: border-right-color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
	flex-direction: column;
	justify-content: center;
	padding-right: 0.5rem;
}

header.mod_app .leftMain {
	border-right-width: 0px;
	margin-right: 0;
}

header.mod_minimal .leftMain {
	min-height: 2rem;
}

header .left .icon, header .leftMain .icon {
	display: flex;
	width: 1.5rem;
	height: 2.8rem;
	margin-right: 0.5rem;
	opacity: 0.66;
	transition-property: opacity;
	transition-duration: var(--theme-transitionDuration, 0.15s);
}

header.mod_app .leftMain .icon {
	align-items: center;
}

header .left:hover .icon, header .leftMain:hover .icon {
	opacity: 1;
}

header.mod_minimal .leftMain .icon {
	height: 2rem;
}

header .left .icon svg, header .leftMain .icon svg {
	width: 1.5rem;
	fill: var(--theme-mainFont, rgba(0, 0, 0, 1));
	transition-property: fill;
	transition-duration: var(--theme-transitionDuration, 0.15s);
}

header .left .text, header .leftMain .text {
	display: flex;
	flex-direction: column;
}

header .left .text .subtitle, header .leftMain .text .subtitle {
	font-size: 0.8rem;
	color: var(--theme-mainFont, rgba(0, 0, 0, 1));
	transition-property: color, opacity;
	transition-duration: var(--theme-transitionDuration, 0.15s);
	opacity: 0.66;
	text-align: right;
	display: inline-block;
}

header .left:hover .text .subtitle, header .leftMain:hover .text .subtitle {
	opacity: 1;
}

header .left .text .title, header .leftMain .text .title {
	color: var(--theme-mainFont, rgba(0, 0, 0, 1));
	transition-property: color, opacity;
	transition-duration: var(--theme-transitionDuration, 0.15s);
	font-size: 1.25rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-weight: 600;
	opacity: 0.66;
}

header .left:hover .text .title, header .leftMain:hover .text .title {
	opacity: 1;
}

header .main {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 4rem;
	justify-content: center;
}

header .main.reverse {
	flex-direction: column-reverse;
}

header.mod_minimal .main {
	min-height: 3rem;
}

header .main .title {
	color: var(--theme-mainFont, rgba(0, 0, 0, 1));
	transition-property: color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
	font-size: 1.25rem;
	font-weight: 600;
}

header.mod_minimal .main .title {
	font-size: 1.1rem;
	font-weight: 100;
	color: var(--theme-mainFont, rgba(0, 0, 0, 1));
	transition-property: color, text-shadow;
	transition-duration: var(--theme-transitionDuration, 0.15s);
}

header .main .subtitle {
	font-size: 0.8rem;
	color: var(--theme-highlightedBackgroundColor, rgba(0, 0, 0, 0.1));
	display: inline-block;
	transition-property: color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
}

header.mod_minimal .main .subtitle {
	font-weight: 100;
	color: var(--theme-mainFont, rgba(0, 0, 0, 1));
}




@media only screen and (max-width: 900px) {

	header .left {
		display: block;
	}

}

@media only screen and (max-width: 680px) {

    header .left {
		border-right-width: 0px !important;
		margin-right: 0;
		min-height: unset;
		align-items: center;
		padding-right: 0.5rem;
	}

    header .left .icon, header .leftMain .icon {
		width: 1.5rem;
		height: 1.5rem;
		display: flex;
		align-items: center;
		margin-right: 0;
	}

    header .left .icon svg, header .leftMain .icon svg {
		width: 1rem;
	}

    header .left .text, header .leftMain .text {
        display: none;
    }

	header .main .title {
		font-size: 1rem;
	}

	header .main .subtitle {
		display: none;
	}

	header.mod_minimal {
		margin-top: 1rem;
		margin-left: 1rem;
	}

}