ul {
	margin: 0;
}

div#header {
	display: flex;
	justify-content: center;
	div#top {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: $header-height;

		#logo.has-logo {
			padding: 0 1rem;
			a::before {
				max-width: 90vw;
				background-position: center;
				margin-right: 0;
			}
		}
	}

	div#toplinks a {
		@extend %button;
		border-radius: 20px 10px 10px 0;
		margin-top: 0.5rem;
		padding: 0.3rem 0.4rem;
		margin-right: 0.5rem;

		@media ($min-desktop-viewport) {
			margin-top: 1rem;
			padding: 0.5rem 0.8rem;
			&::before {
				font-family: FontAwesome;
				margin-right: 0.5rem;
			}

			&.login-link::before, &.account-link::before {
				content: '\f007';
			}

			&.registration::before {
				content: '\f234';
			}

			&.logout::before {
				content: '\f08b';
			}
		}
	}
}

.social-links {
	position: absolute;
	bottom: calc(#{$nav-height} + 5px);
	@media ($max-mobile-viewport) {
		bottom: 5px;
	}
	right: 1rem;
	display: flex;
}

.social-links--item {
	margin: 0rem 0.1rem;

	&[href=""] {
		display: None;
	}
}

div.gru-nav ul li a {
	font-size: $nav-font-size;
	font-weight: normal;
}

@media ($min-desktop-viewport) {
	.site-nav {
		position: sticky;
		top: $nav-height;
		z-index: 200;
		height: 0;

		.gru-nav-wrapper {
			position: relative;
			top: -$nav-height;

			.gru-nav > ul {
				display: flex;

				> li a {
					display: flex;
					border-right: 1px solid white;
					height: $nav-height;
					padding: 0 20px;
					> span {
						margin: auto;
					}
				}
			}
		}
	}
}

div#pwa-navigation {
	a {
		background-size: auto $nav-mobile-bottom-bar-height - 35px;
		background-position: 50% 5px;
		padding-top: $nav-mobile-bottom-bar-height - 25px;
	}
	li.page-profil {
		background-color: $primary-color;
	}
}

div#main-content-wrapper {
	margin-top: 2rem;
}

div#footer{
	display:flex;
	flex-direction: row;

	> * {
		flex-grow: 1;
	}

	a {
		text-decoration: none;
	}

	hr {
		margin: 2rem 0;
		width: 100%;
		height: 1px;
		border: none;
		background: white;
	}

	.ang-footer-logo-list {
		display: flex;
		justify-content: space-evenly;
	}

	@media ($min-desktop-viewport) {
		&::before {
			flex-grow: 0;
			margin: 1rem 2rem;
			content: url(/assets/footer:logo);
		}
	}
}

%cell-links-list {
	li > a {
		border-left: 0 solid $cell-entry-color;
		transition: border-width 200ms;
		&:hover {
			border-left-width: 5px;
		}
	}
	ul li a {
		text-decoration: underline;
	}
}

%button {
   box-shadow: none; 
   transition: none;
   &:hover {
		box-shadow: none;
   }
}

%cancel-button {
	background: $gray-2;
}

%title {
	a {
		color: white;
	}
}

.form-content--title {
	background: transparent;
	border-bottom: 2px solid $primary-color;
	color: $gray;
	font-size: $fz-1;
}

div.cell.has-asset-picture {
	position: relative;
	z-index: 0;
	h2:first-child {
		padding-left: 4rem;
	}
	picture {
		width: 4rem;
		height: 4rem;
		position: absolute;
		top: 0;
	}
}

div.cell.wcsformsofcategorycell {
	&.foldable > div {
		> h2:first-child {
			&::after {
				top: 1rem;
			}
		}
	}
}

@media ($max-mobile-viewport) {
	body.has-header-background .site-header {
		background-image: none;
	}

	div#header div#top {
		height:auto;
		padding-top: 50px;
	}
}
