div#top {
	width: 100%;
	display: flex;
}

div#header {
	display: flex;
	max-width: 100%;
	min-height: 95px;
	padding: 0px;

	@media screen and ($max-mobile-viewport) {
		min-height: 60px;
	}

	#logo {
		flex: 0 1 187px;
		display: flex;
		font-size: 1em;

		margin-bottom: 0.5em;
		margin-top: 0.5em;
		margin-left: 1em;
		margin-right: 4em;
		@media screen and ($max-mobile-viewport) {
			margin-left: 0em;
			margin-right: 0em;
			padding-left: 0.5em;
		}

		a {
			display: block;
			width: 100%;
			min-width: 0;
		}
	}
}

button#nav-button {
	right: 5px;
	left: unset;
}

nav.site-nav {
	flex-grow: 1;
	display: flex;

	div {
		display: flex;
	}
}

div.gru-nav {
	.gru-nav-button + ul::before {
		height: 20px;
	}

	> ul {
		display: flex;
		margin: 0;

		> li {
			display: flex;

			> a {
				@media screen and ($max-mobile-viewport) {
					padding: 0.3em;
					border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				}

				@media screen and ($min-desktop-viewport) {
					text-transform: uppercase;
					align-items: center;
					text-align: center;
					display: flex;
					flex-direction: row;
					font-size: 1.2em;
					padding-bottom: 1.5em;
					padding-left: 1em;
					padding-right: 1em;
					padding-top: 1.5em;
				}

			}

			ul {
				top:100%;

				> li {
					border-bottom: 1px solid rgba(255, 255, 255, 0.2);

					@media screen and ($min-desktop-viewport) {
						border-bottom-color: rgba(0, 0, 0, 0.1);
						padding-right: 0.3em;
						padding-left: 0.3em;
					}

					> a {
						padding-top: 0.3em;
						padding-bottom: 0.3em;
						@media screen and ($min-desktop-viewport) {
							padding-right: 0.3em;
							padding-left: 0.3em;
						}

						font-size: 1em;
						font-weight: 400;
						text-transform: none;
					}

					a:hover {
						background:$primary-color;
						color: $font-color;
					}
				}
			}
		}
	}
}

div#toplinks {
	justify-content: center;
	flex-direction: column;
	display: flex;
	position: static;

	margin-right: 2em;
	margin-left: 1em;
	@media screen and ($max-mobile-viewport) {
		margin-right: 60px;
	}
}

%title {
	display: inline;
	left: 15px;
	margin-bottom: -1em;
	margin-top: 1.5em;
	position: relative;
	top: -0.5em;
}

main {
	margin-top: 2em;
}

.column div.a2-block,
.gru-content div.cell,
.block {
	margin-bottom: 30px;
}

.form-content--title {
	@media screen and ($max-mobile-viewport) {
		font-size: 2em;
	}
	background: transparent;
	display: block;
	font-size: 4em;
	font-weight: 800;
	margin: 0em;
}

@media ($mq-min--wcs-steps-horizontal-layout) {
	.wcs-step.current .wcs-step--label {
		margin: 0.5em;
		color: black;
	}
}

@include desktop-vertical-steps() {
	.wcs-step.current .wcs-step--label {
		margin: 0em;
		color: $primary-color;
	}
	header#steps {
		border-left: 2px solid $font-color;
	}
}

.gru-content div.a2-block h2,
.gru-content .block h2 {
  background-color: $gray-light;
}

%button {
	transition: none;
	box-shadow: none;

	&:hover {
		box-shadow: none;
		text-decoration: none;
	}
}

body.authentic-page, body.registration-page {
	div#header {
		background: $authentik-header-background;
		#logo {
			display: none;
		}
	}
	div.gru-nav-wrapper {
		background: $gray-light;
		li:hover > a {
			background-color: $gray-light;
			color: black;
			text-decoration: underline;
		}
	}
	#nav > *:not(#back-portal) {
		display: none;
	}

	div#footer-wrapper {
		background: $authentik-header-background;
	}

	%button {
		background: $authentik-button-background;
		color: $authentik-button-color;

		&:hover {
			background: $authentik-button-hover-background;
			color: $authentik-button-hover-color;
		}
	}

}
