* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	background: #f8f8f8;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	color: #777;
}

a {
	color: #337ab7;
	text-decoration: none;
}

ul {
	list-style: none;
}

.container {
	max-width: 1040px;
	width: 100%;
	top: calc(100vh - 48px);
	margin: 10px auto;
}

/* Breadcrumb */
.breadCrumb {
	width: 100%;
	background: #fff;
	padding: 20px;
	border-radius: 5px;
	border: 1px solid #efefef;
	font-size: 13px;
	margin-bottom: 10px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.breadCrumb span {
	margin-right: 10px;
}

.breadCrumb a {
	color: #777;
	font-style: italic;
}
/* Breadcrumb */


/* Formularbereich */
.formular {
	width: 100%;
	background: #fff;
	padding: 20px;
	border-radius: 5px;
	border: 1px solid #efefef;
	margin-bottom: 10px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.formular h3 {
	font-size: 16px;
	font-weight: 600;
	padding: 0 15px 5px 15px;
	border-bottom: 1px solid #c0c0c0;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.formular h3 a.closeButton {
	background: #bf6060;
	color: #fff;
	font-weight: 400;
	padding: 8px 24px;
	border-radius: 5px;
}

.formular h3 a.closeButton i {
	margin-right: 6px;
}

.formularContent {
	width: 80%;
	margin: 0 auto;
}

.formFieldLine {
	width: 100%;
	margin-bottom: 15px;
	display: flex;
	align-items: flex-start;
	column-gap: 15px;
}

.formFieldBox {
	flex: 1;
	position: relative;
	width: 100%;
}

.formFieldBox label {
	display: block;
	font-size: 14px;
	margin-bottom: 3px;
}

.formFieldBox input, .formFieldBox select {
	width: 100%;
	height: 50px;
	background: #fff;
	border: 1px solid #c0c0c0;
	outline: none;
	border-radius: 5px;
	font-family: inherit;
	font-size: 15px;
	color: #777;
	padding: 0 15px;
}

.formFieldBox i.eyeIcon {
	position: absolute;
	top: 50px;
	right: 15px;
	transform: translateY(-50%);
	color: #8b8b8b;
	cursor: pointer;
}

.formCheckLine {
	width: 100%;
	position: relative;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	column-gap: 10px;
}

.formCheckBox {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.formCheckTxtBox {
	flex: 10;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.formCheckLinkBox {
	flex: 4;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.formCheckLinkBox a {
	font-size: 15px;
}

.formCheckLinkBox a i {
	margin-right: 6px;
}

.formUplaodLine {
	width: 100%;
	margin-bottom: 15px;
}

.formUploadInfo {
	width: 100%;
	margin-top: 6px;
	font-size: 14px;
}

.formUplaodLine #uploadButton {
	background: #60b4df;
	color: #fff;
	font-size: 16px;
	font-family: inherit;
	padding: 10px 15px;
	border: none;
	outline: none;
	border-radius: 5px;
	cursor: pointer;
}

.formUplaodLine #uploadText {
	margin-left: 10px;
	font-size: 16px;
	color: #777;
}

.formButtonLine {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	column-gap: 15px;
}

.formButtonLine button {
	flex: 1;
	width: 100%;
	height: 50px;
	background: #3183ac;
	border: none;
	outline: none;
	border-radius: 5px;
	font-family: inherit;
	font-size: 16px;
	color: #fff;
}

.formButtonLine button[type=reset] {
	background: #990000;
}

.formButtonLine button i {
	margin-right: 6px;
}

.formInfoLine {
	width: 100%;
	margin-bottom: 15px;
	display: flex;
	align-items: flex-start;
	column-gap: 10px;
}

.formInfoBox {
	flex: 1;
	width: 100%;
}

.formFileInfoLine {
	width: 100%;
	padding: 3px 0;
	font-size: 15px;
	display: flex;
	align-items: center;
	column-gap: 10px;
}

.formFileInfoBox {
	flex: 1;
	width: 100%;
}

.formDetectBox {
	width: 100%;
	background: #fff;
	border-left: 2px solid #3183ac;
	padding: 10px 15px;
	margin-top: 5px;
	font-size: 13px;
}

.formDetectTrue {
	width: 100%;
	color: #72a372;
}

.formDetectFalse {
	width: 100%;
	color: #bf6060;
}
/* Formularbereich */

/* Info- und Actionbereich */
.actionLine {
	width: 100%;
	background: #3a91bd;
	padding: 20px;
	border-radius: 5px;
	margin-bottom: 10px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.infoLine {
	width: 100%;
	margin-bottom: 10px;
	display: flex;
	align-items: stretch;
	column-gap: 10px;
}

.infoFlexBox {
	flex: 1;
	width: 100%;
	background: #fff;
	padding: 20px;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.infoFlexBox h3 {
	font-size: 16px;
	font-weight: 600;
	padding: 0 15px 5px 15px;
	border-bottom: 1px solid #c0c0c0;
	margin-bottom: 15px;
}

.infoPictureBox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.infoPictureBox .btn {
	background: #60b4df;
	color: #fff;
	padding: 8px 24px;
	margin-top: 15px;
	border-radius: 5px;
}

.infoPictureBox .btn i {
	margin-right: 6px;
}

.infoInlineFlexLine {
	width: 100%;
	padding: 2px 0;
	display: flex;
	align-items: center;
	column-gap: 10px;
}

.infoInlineFlexBox {
	flex: 1;
	width: 100%;
	font-size: 15px;
}

.infoInlineFlexOutBox {
	flex: 2;
	width: 100%;
	font-size: 15px;
}
/* Info- und Actionbereich */

/* Systemmeldungen */
.sysError {
	width: 100%;
	background: #bf6060;
	padding: 20px;
	border-radius: 5px;
	margin-bottom: 10px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.sysTrue {
	width: 100%;
	background: #72a372;
	padding: 20px;
	border-radius: 5px;
	margin-bottom: 10px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.sysError ul, .sysTrue ul {
	list-style: square;
	margin-left: 20px;
}

.sysError li, .sysTrue li {
	font-size: 15px;
	color: #fff;
	font-style: italic;
	padding: 3px 0;
}
/* Systemmeldungen */



/* Fussbereich */
.footer {
	width: 100%;
	background: #fff;
	padding: 20px;
	border-radius: 5px;
	border: 1px solid #efefef;
	font-size: 13px;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
/* Fussbereich */


@media (max-width: 700px) {
	.container {
		width: 95%;
	}
	
	.breadCrumb {
		display: none;
	}
	
	.formularContent {
		width: 100%;
	}
	
	.formFieldLine {
		flex-direction: column;
		row-gap: 15px;
	}
	
	.formButtonLine button[type=reset] {
		display: none;
	}
	
	.formInfoLine {
		flex-direction: column;
		row-gap: 10px;
	}
	
	.infoLine {
		flex-direction: column;
		row-gap: 10px;
	}
	
	.infoInlineFlexOutBox {
		flex: 1;
	}
}