.enlistbody {
	width:70%;
	margin:auto;
}

.header {
	width:100%;
	margin:auto;
	display:grid;
	grid-template-columns:auto 60%;
	height:165px;
	margin-top: 5px;
}

.headerheadline {
	line-height:165px;
	font-size:30px;
	font-weight:bold;
	text-align:right;
}

#challengeContainer {
	width:400px;
	margin:auto;
}

.challengeText {
	line-height:45px;
	font-size:20px;
}

.enlistHeadline {
	font-weight:bold;
	font-size:24px;
}

.enlistText {
	font-size:20px;
}

.enlistSpacer {
	height:20px;
}

.challengeContainer {
	display:grid;
	grid-template-columns: auto auto;
}

.challengeButton {
	width:100%;
	height:45px;
	margin-top:5px;
}

.challengeError {
	color:red;
	font-weight:bold;
}

.eventEntry {
	padding-bottom:25px;
}

.exertionDay {
	margin-left: 34px;
	font-size: 20px;
	line-height: 28px;
	padding-top:5px;
	padding-bottom:5px;
}

.location_1::before {
	background-color: #eb7517;
}

.eventEntry::before {
	content: '';
	position: absolute;
	width: 26px;
	height: 26px;
	border: 2px solid #000046;
	border-radius: 50%;
	z-index: 5;
	/*left: -16px;*/
}

.eventTitle {
	margin-left: 40px;
	font-size: 21px;
	line-height: 30px;
}

.eventDescription {
	margin-top: 10px;
	margin-left: 35px;
}

.eventDescription p {
	margin: 0px;
}

.eventLink {
margin-top: 10px;
  margin-left: 35px;
}


.switchbox {
  position: relative;
  left: 30px;
  top: 0px;
  z-index: 0;
  -webkit-appearance: none;
}
.switchbox + label {
  position: relative;
  display: block;
  cursor: pointer;
  padding-left:70px;
  position: relative;
}

.switchbox + label:before { /* Slider Area */
  width: 50px;
  height: 25px;
  border-radius: 25px;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
  z-index: 3;
  position: absolute;
  left: 0px;
}
.switchbox + label:after { /* Knubbel */
  width: 25px;
  height: 25px;
  border-radius: 25px;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 4;
}
.switchbox:checked:not([disabled]) + label:before {
  background-color: #2b8718;
}
.switchbox:checked:disabled + label:before {
  background-color: #ff0000;
}
.switchbox:checked + label:after {
  margin: 0 0 0 25px;
}

.marshal_setting + label {
	margin-top: -10px;
}

.exertion_day + label {
	margin-top: -30px;
}

.exertionsSaveButton {
	width:200px;
}

#infoPopupContainer {
	position: fixed;
	width: 50%;
	border: 1px solid black;
	top: 50px;
	background-color: white;
	margin: auto;
	left: 25%;
	padding: 15px;
	z-index:6;
	box-sizing: border-box;
}

#infoPopupContainer .infoLink {
	margin-top:5px;
	text-decoration:underline;
	font-size:14px;
	cursor:pointer;
}

#infoPopupContainer .infoText .infoLoadingImage {
	background-image: url('/grph/loading_car.gif');
	width: 340px;
	aspect-ratio: 4/3;
	background-size: contain;
	margin:auto;
}

#infoOverlay {
  position: fixed; /* Sit on top of the page content */
   width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 5; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.personalDataContainer {
	display:grid;
	grid-template-columns:20% 30% 20% 30%;
	grid-gap:5px;
}


.personalDataContainer .label, .furtherDataContainer .label, .eventDataContainer .label {
	font-size:20px;
	line-height:45px;
	text-align:right;
	padding-right:10px;
}

.personalDataContainer .gridcolspan {
	grid-column: 1 / 5;
	text-align: left;
}

.personalDataContainer .middlegridcolspan {
	grid-column: 2 / 5;
	text-align: left;
}

.furtherDataContainer {
	display:grid;
	grid-template-columns:20% auto;
	grid-gap:5px;
}

.furtherDataContainer .gridcolspan {
	grid-column: 1 / 3;
	text-align: left;
}

.enlistdivider {
	border-bottom:1px solid #eb7517;
	margin-top:15px;
	margin-bottom:15px;
}

.modernCheckBoxContainer {
	height:50px;
}

.explainer {
	line-height:18px;
}

.eventDataContainer {
	margin-top:5px;
	display:grid;
	grid-template-columns:30% auto;
	grid-gap:5px;
}

.marshal_select_container {
	display:grid;
	grid-template-columns:20% auto;
	column-gap:5px;
}

.marshal_select_add_row {
	cursor:pointer;
}

@media (max-width: 1023px) {
	.enlistText {
		margin-bottom:5px;
	}
	
	#infoPopupContainer { /* makes no sense but this way it looks centered in fire fox */
		width:94%;
		left:3%;
	}
	
	#infoPopupContainer .infoText .infoLoadingImage {
		width: 240px;
	}

	.personalDataContainer {
		grid-template-columns: 100%;
		grid-gap: 3px;
	}

	.furtherDataContainer {
		grid-template-columns: 60% 40%;
		grid-gap: 3px;
	}

	.personalDataContainer .label {
		font-size:18px;
		text-align:left;
	}

	 .furtherDataContainer .label {
		font-size:18px;
		text-align:left;
		line-height:20px;
	}

	.marshal_setting + label {
		margin-top: -20px;
	}

	.furtherDataContainer .gridcolspan {
		padding-bottom:15px;
	}

}

@media (max-width: 1024px) {
	.enlistbody {
		width:98%;
	}
	
	.headerheadline {
		line-height:unset;
		font-size:26px;
	}
	
	.header {
		grid-template-columns:100%;
	}
	
	.header .logo {
		margin:auto;
	}
	
	.headerheadline {
		text-align:center;
	}
	
	#challengeContainer {
		width:96%;
		margin:auto;
	}
	
	.exertionsSaveButton {
		width:100%;
	}
}

@media (min-width: 1024px) and (max-width: 1740px) {
	.enlistbody {
		width:94%;
	}
	
	#infoPopupContainer {
		width:70%;
		left:15%;
	}
}

@media (min-width: 1920px) {
	.enlistbody {
		width:1400px;
	}
}