/* Style the navigation menu */
/* Add a black background color to the top navigation */
.topnav {
	font-size: 1.5em;
	display: flex;
	justify-content: space-between;
	width: 100%;
	flex-shrink: 0;
	flex-grow: 0;
	height: 100%;
	z-index: 90;
}

.topnav img{
	width: 58px;
	height: auto;
}

.topnav ul {
	display: flex;
}

/* Style the links inside the navigation bar */
.topnav a {
	display: block;
	color: white;
	background: #114488;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 1.5rem;
	margin: 0.5em 1em;
	min-width: 6em;
	width: fit-content;
	transition: all 300ms;
}

/* Change the color of links on hover */
.topnav a:hover {
	opacity: .5;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
}

.topnav #LogoHead {
	width: fit-content;
	justify-content: center;
	flex-grow: 0;
	align-content: center;
}

.topnav #LogoHead>a {
	margin: auto;
	width: fit-content;
	background: inherit;
}

.topnav li > ul{
	display: none;
}

@media screen{
.topnav.responsive li > ul{
	display: block;
	position: absolute;
	height: fit-content;
	background: #03071e;
	padding-bottom: 0.5em
}
}
.topnav .icon{
	display: inherit;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px){
/*.topnav, .topnav ul {
	display: block;
}

.topnav a {
	display: none;
	min-width: unset;
	padding: unset;
	margin: auto;
	padding-top: 1em;
}

.topnav a.icon {
	float: right;
	display: block;
	background: inherit;
	width: 100%;
	margin: auto 0;
	text-align: center;

}
*/
.topnav{
	flex-shrink: unset;
	font-size: 1rem;
	margin: auto;
}

.topnav ul{
	width: 100%;
    justify-content: center;
}

.topnav a{
	font-size: 1rem;
}

.topnav #LogoHead, #desktop {
		display: none;
	}
}



.backend li > ul{
	display: none;
}


@media screen{
.backend.responsive li > ul{
	display: block;
	position: absolute;
	height: fit-content;
	background: #03071e;
	padding-bottom: 0.5em
}
}
.backend .icon{
	display: inherit;
}



/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
	/*.topnav.responsive{
		position: relative;
		height: fit-content;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		position: relative;
		width: 100%;
		top: 5rem;
		padding: 0;
		margin:auto;
		padding: 1em 0;
		border-bottom: 1px solid black;
	}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}*/
}


/*Side Navigation*/

.sidenav {
	flex-shrink: 0;
	flex-grow: 0;
	font-size: 1.2em;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 10rem;
	height: 100%;
	z-index: 90;
	overflow: auto;
	background-color: #03071e;
	color: white;
}

.sidenav h2 {
	position: sticky;
	top: 0;
	z-index: 100;
	background: inherit;
	width: 100%;
	text-align: center;
	padding-bottom: 1em;
}


.sidenav .icon {
	display: none;
}

.sidenav ul{
	display: flex;
	flex-direction: column;
}

.sidenav a {
	display: block;
	color: white;
	background: #114488;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: inherit;
	margin: 0.5em 1em;
	min-width: 4em;
	width: fit-content;
	transition: all 300ms;
}

.sidenav a:hover {
	opacity: .5;
}

@media screen and (max-width: 768px){
.sidenav{
	height: 5rem;
	overflow: hidden;
	border-top: 1px solid white;
}
.sidenav, .sidenav ul {
	display: block;
	width: 100%
}

.sidenav a {
	display: none;
	min-width: unset;
	padding: unset;
	margin: auto;
	background: inherit;
	}

.sidenav a.icon {
	float: right;
	display: block;
	/*background: inherit;*/
	width: 100%;
	margin: auto;
	padding-top: 1.5rem;
	text-align: center;
	font-size: 1.5rem;
}

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
	.sidenav.responsive{
		position: relative;
		height: 100%;
		overflow: auto;
	}
	.sidenav.responsive a {
		float: none;
		display: block;
		position: relative;
		width: 100%;
		top: 5rem;
		padding: 0;
		margin:auto;
		padding: 1em 0;
		border-bottom: 1px solid black;
	}
	.sidenav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
}

.legAuswahl{
	flex-shrink: 0;
	flex-grow: 0;
	font-size: 1.2em;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 10rem;
	height: 100%;
	z-index: 90;
	overflow: auto;
	background-color: #03071e;
	color: white;
}

.legAuswahl h3{
	top: 5rem;
}

.legAuswahl ul{
	display: flex;
	flex-direction: column;
}

.legAuswahl .icon {
	display: none;
}

.legAuswahl a {
	display: block;
	color: white;
	background: #114488;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: inherit;
	margin: 0.5em 1em;
	min-width: 4em;
	width: fit-content;
	transition: all 300ms;
}

.legAuswahl a:hover {
	opacity: .5;
}

@media screen and (max-width: 768px){
.legAuswahl{
	height: 5rem;
	border-top: 1px solid white;
}
.legAuswahl, .legAuswahl ul {
	display: block;
	width: 100%
}

.legAuswahl a {
	display: none;
	min-width: unset;
	padding: unset;
	margin: auto;
}

.legAuswahl a.icon {
	float: right;
	display: block;
	background: inherit;
	width: 100%;
	margin: auto;
	padding-top: 1.5rem;
	text-align: center;
	font-size: 1.5rem;
}

}

@media screen and (max-width: 768px) {
	.legAuswahl.responsive{
		position: relative;
		height: 1000px;
	}
	.legAuswahl.responsive a {
		float: none;
		display: block;
		position: relative;
		width: 100%;
		top: 5rem;
		padding: 0;
		margin:auto;
		padding: 1em 0;
		border-bottom: 1px solid black;
	}
	.legAuswahl.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
}

.radioAuswahl{
	flex-shrink: 0;
	flex-grow: 0;
	font-size: 1.2em;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 10rem;
	height: 100%;
	z-index: 90;
	overflow: auto;
	background-color: #03071e;
	color: white;
}

.radioAuswahl h3{
	top: 5rem;
}

.radioAuswahl ul{
	display: flex;
	flex-direction: column;
}

.radioAuswahl .icon {
	display: none;
}

.radioAuswahl a {
	display: block;
	color: white;
	background: #114488;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: inherit;
	margin: 0.5em 1em;
	min-width: 4em;
	width: fit-content;
	transition: all 300ms;
}

.radioAuswahl a:hover {
	opacity: .5;
}

@media screen and (max-width: 768px){
.radioAuswahl{
	height: 5rem;
	border-top: 1px solid white;
}
.radioAuswahl, .radioAuswahl ul {
	display: block;
	width: 100%
}

.radioAuswahl a {
	display: none;
	min-width: unset;
	padding: unset;
	margin: auto;
}

.radioAuswahl a.icon {
	float: right;
	display: block;
	background: inherit;
	width: 100%;
	margin: auto;
	padding-top: 1.5rem;
	text-align: center;
	font-size: 1.5rem;
}

}

@media screen and (max-width: 768px) {
	.radioAuswahl.responsive{
		position: relative;
		height: 1000px;
	}
	.radioAuswahl.responsive a {
		float: none;
		display: block;
		position: relative;
		width: 100%;
		top: 5rem;
		padding: 0;
		margin:auto;
		padding: 1em 0;
		border-bottom: 1px solid black;
	}
	.radioAuswahl.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
}