/* ---------------------------------------------------------------------- */
/* Farbkonzept: */
/* ---------------------------------------------------------------------- */
/* https://colorpalettes.net/color-palette-1288/ */
/* (1) Dunkel = #D54400 (21) Text */
/* (2) Mittel = #ffcc99 (10) */
/* (3) Hell   = #ffeddb (2)  */
/* (4) Hell   = #ffcb9b (5)  */
/* (5) Text   = #D54400 (21) Einstiegsseite */
/* (6) S-Hell = #fff4eb (1)  */
/* ---------------------------------------------------------------------- */

#root {
	font-size: 12pt;
	color: #000;
	font-family: 'Open Sans Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-display: swap;
	font-weight: normal;
	margin: 0;
	width: 100%;
}

/* --- main ------------------------------------------------------------- */

#main {
	width: 1000px;
	z-index: -10;
	margin: 0px auto;
	margin-top: 0px;
	margin-bottom: 0px;
	border: 0px solid #fff;
}

#main_wide {
	width: 100%;
	z-index: -10;
	margin: 0px auto;
	margin-top: 0px;
	margin-bottom: 0px;
	border: 0px solid #fff;
}

/* --- erp_main --------------------------------------------------------- */

#erp_main {
	z-index: -10;
	margin: 0px auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-right: 20px;
	border: 0px solid #fff;
}

#erp_hinweis {
	z-index: 10000;
	background-color: #f1f1f1;
	width: 100%;
	height: 400px;
	border: 0px solid #000;
	margin: 0px;
	position: absolute;
	top: 0px;
	margin-left: -20px;
	margin-top: -400px;
	overflow: hidden;
	font-family: 'Open Sans Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 2em;
}

.erp_input {
	margin: 1em;
	background-color: #ffcc99;
	padding: 1em;
	display: table-cell;
	border-radius: 25px 25px 25px 25px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid black;
	opacity: 1.0;
	padding-bottom: 15px;
	cursor: pointer;
}

#erp_hinweis_content {
	background-color: #ffcc99;
	width: 800px;
	height: 200px;
	border: 1px solid #000;
	margin: 0px;
	position: relative;
	top: 50%;
	left: 50%;
	margin-left: -400px;
	margin-top: -100px;
	padding-left: 20px;
	padding-right: 20px;
	overflow: hidden;
}

/* --- subtitle --------------------------------------------------------- */

#subtitle {
	z-index: 100;
	clear: both;
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 400px;
	min-height: 400px;
	overflow: hidden;
	border: 0px solid #000;
	margin-top: -80px;
	text-align: center;
}

/* --- subiconmenu ------------------------------------------------------ */

#subiconmenu {
	z-index: 102;
	width: 1000px;
	background-color: url(/wps/erp/bgimg.png) repeat-x;
	position: relative;
	margin-top: 15px;
	left: 0px;
	float: left;
	height: 55px;
	font-size: 1.0em;
	display: flex;
	justify-content: space-between;
	background-image: none;
	margin-top: -390px;
}

#subiconmenu img {
	height: 55px;
	padding: 0;
	margin: 0;
	border: 0;
}

#subiconmenu_wide {
	z-index: 102;
	width: 100%;
	background-color: url(/wps/erp/bgimg.png) repeat-x;
	position: relative;
	margin-top: 15px;
	left: 0px;
	float: left;
	height: 55px;
	font-size: 1.0em;
	display: flex;
	justify-content: space-between;
	background-image: none;
	margin-top: -390px;
}

#subiconmenu_wide img {
	height: 55px;
	padding: 0;
	margin: 0;
	border: 0;
}

/* --- showpoint -------------------------------------------------------- */

#showpoint {
	z-index: 1000;
	border: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0px solid #fff;
	margin-top: 130px;
	margin-left: 680px;
	padding-top: 5px;
	width: 300px;
	height: 300px;
	text-align: center;
	opacity: 0.9;
}

#showpoint:hover {
	opacity: 1;
}

#showpoint img {
	width: 300px;
	height: 300px;
}

/* --- erp_layout ------------------------------------------------------- */

#erp_layout {
	position: relative;
	margin-top: -65px;
	float: right;
	height: 65px;
}

/* --- content_wide ---------------------------------------------------- */

#content_wide {
	float: left;
	clear: both;
	width: 98%;
	margin: 1%;
	border: 0px solid #000;
}

/* --- languagemenu ---------------------------------------------------- */

#languagemenu {
	z-index: 103;
	position: relative;
	top: -40px;
	height: 0px;
	left: -25px;
	margin: 0;
	padding: 0;
	border: 0;
	float: right;
	background-image: none;
	margin-top: -318px;
}

#languagemenu a {
	display: block;
	font-size: 0.9em;
	color: #fff;
	text-decoration: none;
	text-transform: lowercase;
	font-weight: bold;
}

#languagemenu a:hover {
	color: #D54400;
}

#languagemenu ul li.mark a {
	color: #D54400;
}

#languagemenu ul {
	display: inline;
	left: -999em;
	padding: 0;
	margin: 0;
}

#languagemenu li {
	display: block;
	border: 0;
	padding: 0;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0;
	float: left;
	font-weight: bold;
}

#languagemenu li.mark {
	color: #fff;
}

/* --- mainmenu --------------------------------------------------------- */

#mainmenu {
	z-index: 102;
	float: left;
	position: relative;
	height: 29px;
	padding-bottom: 10px;
	background-image: none;
	margin-left: 300px;
	margin-top: -360px;
}

#mainmenu a:hover {
	color: #D54400;
}

#mainmenu a {
	display: block;
	font-size: 1.1em;
	font-weight: normal;
	color: #fff;
	text-decoration: none;
	text-transform: lowercase;
	font-weight: bold;
}

#mainmenu ul li.mark a {
	color: #D54400;
}

#mainmenu ul {
	display: inline;
	left: -999em;
}

#mainmenu ul li {
	padding-left: 5px;
	padding-right: 25px;
}

#mainmenu li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	border-right: 2px solid #D54400;
}

#mainmenu li:first-child {
	border-left: 2px solid #D54400;
}

#mainmenu li:last-child {
	border-right: 0px;
}

#mainmenu ul li.mark {
	color: #D54400;
}

#mainmenu ul li {
	color: #fff;
}

/* --- content ---------------------------------------------------------- */

#content {
	z-index: 10;
	float: right;
	position: relative;
	background-color: #fff;
	width: 960px;
	margin: 0;
	top: 0px;
	right: 0px;
	padding: 0;
	padding-top: 20px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
	min-height: 25em;
}

.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #f2f2f2;
	padding: 15px;
	text-align: center;
	z-index: 9999;
	box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}

.cookie-banner button {
	background-color: #D54400;
	color: #fff;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
}

/* --- erp_content ------------------------------------------------------ */

#erp_content {
	z-index: 10;
	float: left;
	position: relative;
	background-color: #fff;
	margin: 0;
	padding: 0;
	padding-top: 50px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 60px;
	min-height: 60em;
	border-top: 0px solid #000;
}

.lb-close-btn {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
	background: transparent;
	color: white;
	border: none;
	font-size: 32px;
	cursor: pointer;
	font-family: sans-serif;
	line-height: 1;
	display: none;
}

.lb-close-btn:hover {
	color: #D54400;
}

/* --- footer ----------------------------------------------------------- */

#footer {
	clear: both;
	position: relative;
	border-top: 1px solid #6B6B6B;
	margin: 0px;
	top: 2em;
	left: 0px;
	padding: 0px;
	height: 13px;
	font-size: 0.9em;
	padding-top: 2px;
	color: #6B6B6B;
	padding-bottom: 2em;
	display: flex;
	justify-content: space-between;
}

#footer a[href^="/default"] {
	font-size: 0.9em;
	color: #000;
	text-decoration: none;
}

/* --- editmenu --------------------------------------------------------- */

#editmenu {
	position: fixed;
	top: 4px;
	right: 10px;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
}

/* --- diverse ---------------------------------------------------------- */

table {
	border-collapse: collapse;
	empty-cells: show;
	border: 0;
}

th, td {
	border: 0;
	padding: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
	background-color: rgba(0, 0, 0, 0.075);
}

img {
	border: none;
}

div {
	color: #000;
}

.WPSADMIN {
	color: red;
	border: 1px solid #808080;
	background-color: #fff4eb;
	padding: 1em;
	margin-bottom: 1em;
}

body {
	background-color: #fff;
	font-size: 12pt;
	color: #000;
	font-family: 'Open Sans Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-weight: normal;
	margin: 0;
	width: 100%;
}

.titlecontent {
	margin: 0.1em 0 1em 0;
	background-color: #E6E6E6;
	padding: 0.4em;
	border: 1px solid #999;
}

.sectiontitle {
	background-color: #DADADA;
	padding: 0.4em;
	border: 1px solid #999;
}

.message {
	margin: 0.1em 0 0.8em 0;
	background-color: #FFFFCC;
	padding: 1em;
	border: 1px solid #999;
	text-align: center;
	font-weight: normal;
}

.success {
	margin: 0.1em 0 0.8em 0;
	background-color: #CCFF99;
	padding: 1em;
	border: 1px solid #999;
	text-align: center;
	font-weight: normal;
}

.neutral {
	margin: 0.1em 0 0.8em 0;
	background-color: #fff;
	padding: 1em;
	border: 1px solid #fff;
	text-align: center;
	color: #fff;
	font-weight: normal;
}

.error {
	margin: 0.1em 0 0.8em 0;
	background-color: #FFC0CB;
	padding: 1em;
	border: 1px solid #999;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	text-align: center;
	font-weight: normal;
}

.shoppingbasket {
	background-color: #E6E6E6;
	font-size: 12pt;
}

p, td {
	font-size: 1em;
	color: #000;
	font-weight: normal;
}

b {
	font-size: 1em;
	color: #57bba3;
	font-weight: bold;
}

th {
	background-color: #E6E6E6;
	text-align: right;
	padding: 4px;
	padding-right: 10px;
}

fieldset {
	background-color: #E6E6E6;
	border: 1px solid #999;
	padding: 1em;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 1em;
}

a {
	text-decoration: none;
	font-size: 1em;
	color: #D54400;
	font-weight: bold;
}

a:hover {
	text-decoration: underline;
	font-size: 1em;
	color: #D54400;
}

h1 {
	font-size: 1.4em;
	font-weight: bold;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #000;
	padding-top: 50px;
	padding-bottom: 5px;
	margin-bottom: 30px;
	color: #000;
}

h2 {
	font-size: 1.1em;
	font-weight: bold;
	padding: 0;
	margin: 0;
	color: #000;
}

h3 {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 0em;
	color: #000;
}

h4 {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 0.8em;
	color: #000;
}

section {
	margin-bottom: 60px;
}

/* --- wps-system ------------------------------------------------------- */

.module {
	border: 1px solid #999;
	background-color: #FFC0CB;
	text-align: center;
	padding: 2px;
}

table.wps {
	background-color: #E6E6E6;
	margin: 0;
	margin-bottom: 1em;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
}

table.wps td {
	padding: 2px;
}

#content .abcMenuItem a {
	float: left;
	width: 20px;
	color: #FFFFFE;
	vertical-align: middle;
	border-right: 1px solid #fff;
	text-align: center;
	text-decoration: none;
}

#erp_content table {
	white-space: nowrap;
}

#erp_content .abcMenuItem a {
	float: left;
	width: 20px;
	color: #FFFFFE;
	vertical-align: middle;
	border-right: 1px solid #fff;
	text-align: center;
	text-decoration: none;
}

#thumbs {
	height: 455px;
	width: 192px;
	text-align: center;
	background-color: #b3b3b3;
	overflow: auto;
	float: left;
}

ul.wps-system {
	list-style-image: url('/wps/icons/check_ok.png');
	list-style-position: outside;
	margin: 0;
	padding: 0;
	padding-left: 60px;
}

li.wps-system {
	list-style-type: none;
	margin: 0;
	margin-left: 0px;
	margin-bottom: 10px;
	border-bottom: 1px solid #000;
	color: #000;
}

/* --- input-objects ---------------------------------------------------- */

input[class="SEARCH"]:focus, textarea:focus, select:focus {
	background-image: none;
	color: black;
	background-color: #ffcc99;
}

#content form input.formSubmit {
	background-color: #E6E6E6;
	background-image: none;
	border: 1px solid #000;
	width: auto;
	border-radius: 1em 1em 1em 1em;
	padding-left: 1em;
	padding-right: 1em;
}

#erp_content form input.formSubmit {
	background-color: #c4f3dd;
	color: #000;
	font-size: 1em;
	background-image: none;
	border: 1px solid #000;
	width: auto;
	border-radius: 1em 1em 1em 1em;
	padding-left: 1em;
	padding-right: 1em;
}

html {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#accesskey {
}

/* --- Search ----------------------------------------------------------- */

#search {
	z-index: 10;
	position: relative;
	float: left;
	right: 0;
	padding: 0;
	margin: 0;
	border: 0;
	margin: 0;
	margin-top: 80px;
	padding-top: 3px;
	padding-right: 4px;
	padding-left: 4px;
	border-bottom: 1px solid white;
	height: 32px;
	width: 460px;
	background-color: #d6d6d6;
}

/* --- Portlet ---------------------------------------------------------- */

.title_portlet {
	font-weight: bold;
	color: #d6d6d6;
	margin-top: 0px;
}

.link_portlet {
	color: #d6d6d6;
}

.spec-cols {
	overflow: hidden;
	width: 100%;
	display: inline-block;
	padding: 0 0 0 0;
	margin: 0 0;
	margin-left: 5px;
	margin-right: auto;
	color: #000;
	max-height: 160px;
}

.spec-cols4 {
	float: left;
	width: 280px;
	padding: 0 0 0 0;
	margin: 0;
	padding: 10px;
	padding-top: 25px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	border-right: 0px solid #000;
	min-height: 160px;
}

#phone_answer {
	position: fixed;
	background-color: #d6d6d6;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	z-index: 200;
	right: 0;
	top: 60%;
	text-align: right;
	padding: 15px;
	padding-right: 10px;
	width: 2em;
	margin-top: -2.5em;
}

.debug_time {
	float: left;
	width: 100%;
	margin: 0;
	margin-bottom: 1em;
	border: 0em;
	padding: 1em;
	background-color: #A1E4EE;
	border-radius: 1em 1em 1em 1em;
	box-sizing: border-box;
	outline: 1em solid white;
}

.erp_tarif_individuell {
	background-color: #ffeddb;
}

.erp_order {
	display: table;
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 0;
	border-bottom: 5px solid #ffcc99;
}

.erp_order .erp_boxmarked {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	border: 0px solid black;
	width: 10%;
	opacity: 1;
	padding-bottom: 5px;
	background-color: #ffcc99;
	border-radius: 1.2em 1.2em 0px 0px;
}

.erp_order .roundedcorners {
	border-radius:1em 1em 1em 1em;
}

.erp_boxer {
	display: table;
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 0;
	border-bottom: 10px solid #ffcc99;
}

.erp_boxer .erp_box-row {
	display: table-row;
}

.erp_boxer .erp_box {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	border: 0px solid black;
	width: 10%;
	opacity: 0.25;
	padding-bottom: 5px;
}

.erp_boxer .erp_boxmarked {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	border: 0px solid black;
	width: 10%;
	opacity: 1;
	padding-bottom: 5px;
	background-color: #ffcc99;
	border-radius: 1.2em 1.2em 0px 0px;
}

.erp_highlight {
	opacity: 0.8;
	cursor: pointer;
	font-size: 1.2em;
	padding: 5px;
	padding-left: 1em;
	padding-right: 1em;
	margin: 0px;
	border: 0px;
	color: #D54400;
	border-radius: 1em 1em 1em 1em;
}

.nomarkBox {
	opacity: 0.8;
	cursor: pointer;
	font-size: 1.2em;
	padding: 0px;
	margin: 0px;
	border: 0px;
	color: #D54400;
	background-color: #e9e9e9;
}

.markBox {
	opacity: 1.0;
	cursor: pointer;
	font-size: 1.2em;
	padding: 0px;
	margin: 0px;
	border: 0px;
	color: #000;
	background-color: #ffcb9b;
}

.markLang {
	font-weight: bold;
	color: #fff;
	font-size: 1em;
}

.markLang:hover {
	font-weight: bold;
	color: #D54400;
	font-size: 1em;
}

.noMarkLang {
	font-weight: bold;
	color: #fff;
	font-size: 1em;
}

.noMarkLang:hover {
	font-weight: bold;
	color: #D54400;
	font-size: 1em;
}

.markLg {
	color: #000;
	background-color: #ffcb9b;
}

.markDoku {
	color: #000;
	background-color: #ffcb9b;
}

.markDoku_KV {
	color: #000;
	background-color: #ffcccc;
}

.markDoku_LS {
	color: #000;
	background-color: #ffffcc;
}

.markDoku_RE {
	color: #000;
	background-color: #c6eafd;
}

.nomarkLanguage {
	opacity: 0.8;
	cursor: pointer;
	font-size: 1.0em;
	padding: 0px;
	margin: 0px;
	border: 0px;
	color: #D54400;
	background-color: #e9e9e9;
}

.markLanguage {
	opacity: 1.0;
	cursor: pointer;
	font-size: 1.0em;
	padding: 0px;
	margin: 0px;
	border: 0px;
	color: #000;
	background-color: #ffcb9b;
}

.erp_highlight:hover {
	opacity: 1.0;
}

.erp_layout {
	opacity: 0.25;
}

.erp_layout:hover {
	opacity: 1;
}

.erp_layout_disabled {
	opacity: 0.25;
}

.erp_small_icon {
	max-height: 1.8em;
	max-width: 1.8em;
	padding-top: 0.3em;
}

.erp_cursor {
	cursor: pointer;
}

.erp_red {
	background-color: red;
}

.erp_icon {
	height: 5vw;
	width: 5vw;
	max-height: 5em;
	max-width: 5em;
	margin-top: 15px;
	cursor: pointer;
	outline: none;
}

.erp_icon_order {
	height: 5vw;
	width: 5vw;
	max-height: 5em;
	max-width: 5em;
	cursor: pointer;
	outline: none;
}

.erp_icon_doc {
	height: 4.8vw;
	width: 4.8vw;
	max-height: 65px;
	max-width: 65px;
	max-height: 4.8em;
	max-width: 4.8em;
	cursor: pointer;
	outline: none;
}

/* --- Print ------------------------------------------------------------ */
@media print {
	#mainmenu, #languagemenu, #postit, #postitBG, #subiconmenu, #subtitle, #emotionmenu, #printmenu, #functionmenu, #editmenu, #usermenu, #submenu, #actualpathmenu, #mainmenuBG, #submenuBG, #contentBG, #newsmenu, #sitemapmenu, #advertisementmenu, #time, #actuality, #accesskey, #phone_answer, #footer_full_width, #portlet, #erp_layout, #md_mobile_header, #ACTUAL_MWST, #customer_footertext {
		display: none;
	}

	#root {
		margin-top: -60px;
	}

	.erp_boxer {
		display: none;
	}

	body {
		background-color: #fff;
	}

	#main {
		width: 95%;
		left: 5px;
		right: 5px;
		border: 0px solid #000;
		background-color: #fff;
	}

	#LISTE {
		width: 95%;
		left: 5px;
		right: 5px;
		border: 0px solid #000;
		background-color: #fff;
		font-size: 0.5em;
	}

	#content {
		top: 0px;
		left: 5px;
		right: 5px;
		width: 95%;
		background-color: #fff;
		border: 0;
		max-height: 100%;
	}

	#erp_content {
		top: 20px;
		left: 20px;
		background-color: #fff;
		border: 0;
		max-height: 100%;
		max-width: 95%;
	}

	#content .foto {
		width: 300px !important;
	}

	#content .video {
		width: 95%;
		left: 5px;
		right: 5px;
	}
}

@media only screen and (max-width:800px) and (orientation:portrait) {
	#root {
		margin-top: -130px;
	}

	#md_actual_content {
		padding-top: 130px;
		padding-bottom: 200px;
	}

	.erp_highlight image {
		width: 15px;
	}

	#content {
		margin-top: -50px;
	}

	#subtitle {
		margin-top: 0px;
	}

	.subicon_img {
		width: 100%;
		display: none;
	}

	.subtitle_opaque {
		margin-top: 120px;
	}

	.marker-canvas {
		display: none !important;
	}
}

@media screen and (min-width:800px) {
	#body {
		max-width: 90%;
	}

	#erp_content {
		width: 90%;
	}

	.subicon_img {
		width: 100%;
		min-width: 1920px;
		min-height: 400px;
	}

	.subtitle_opaque {
		background-color: #535353;
		opacity: 0.8;
		height: 80px;
	}
}

.erpTable {
	margin: 0.2em;
	padding: 0.2em;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	text-align: center;
}

body {
	font-family: 'Open Sans Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: #E4E1DF !important;
}

pre {
	color: #000;
	font-size: 14px;
	font-family: 'Open Sans Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.clear {
	clear: both;
}

.separator {
	padding: 0.375em 0.375em 0.375em 0.375em;
}

.column {
	display: block;
	position: relative;
	margin-right: 0.000em;
}

.news_liste {
	margin-left: 5px;
	padding-left: 15px;
}

.news_liste li {
	margin-left: 0;
}

#content form {
	padding: 0em;
	box-sizing: border-box;
	margin-bottom: 0.5em;
}

#content input[type="text"],
#content input[type="password"] {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	display: block;
}

.password-wrapper {
	position: relative;
	width: 100%;
}

	.password-wrapper input {
		padding-right: 2.2em;
	}

#eyeIcon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	height: 20px;
	width: 20px;
	cursor: pointer;
	fill: #000;
}

.form-group {
	margin-bottom: 1.5em;
}

	.form-group label {
		display: block;
		font-size: 0.9em;
		margin-bottom: 0.3em;
		color: #333;
	}

/* TABLET/NETBOOK */
@media only screen and (max-width:800px) {
	body {
		font-size: 85%;
	}

	.column {
		display: inline;
		float: left;
	}

	.nav {
		padding: 0.313em 0.000em 0.313em 0.000em;
		background-color: #CCCCCC;
	}

	.hide_nav {
		display: none;
	}

	.hide_off {
		display: none;
	}
}

@media only screen and (min-width:801px) {
	.column {
		position: relative;
		width: 100%;
		display: inline;
		float: left;
	}

	.hide_on {
		display: none;
	}
}

#md_menu_header {
	padding: 0px;
	width: 100%;
	height: 52px;
	text-decoration: none;
	position: relative;
	z-index: 1;
	background-color: #333333;
}

#md_mobile_header {
	padding: 0px;
	width: 100%;
	height: 80px;
	margin-bottom: 30px;
	text-decoration: none;
	position: relative;
	z-index: 1;
	box-shadow: 0px 3px 7px 0px #999999;
	background-color: #ffcc99;
	-webkit-box-shadow: 0px 3px 7px 0px #999999;
	padding-top: 20px;
}

#mobile_header {
	width: 100%;
	position: relative;
	top: -30px;
}

#md_mobile_text {
	color: #fff;
	font-family: 'Open Sans Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#md_mobile_text a {
	color: #fff;
	font-family: 'Open Sans Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#md_menu_right {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15.625em;
	right: -15.625em;
	height: 100%;
	-webkit-transform: translate(0px, 0px);
	-moz-transform: translate(0px, 0px);
	-o-transform: translate(0px, 0px);
	-ms-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
	-webkit-transition: 0.25s ease;
	-moz-transition: 0.25s ease;
	-o-transition: 0.25s ease;
	transition: 0.25s ease;
	background-color: #3D3D3D;
	z-index: 1;
	box-shadow: 0px 3px 7px 0px #333333;
	-webkit-box-shadow: 0px 3px 7px 0px #333333;
}

#md_mobile_left {
	background-color: #D54400;
	padding: 3px 4px;
	border-radius: 3px;
	border: 1px solid #fff;
	border-image: none;
	width: 25px;
	height: 24px;
	display: block;
	position: relative;
	cursor: pointer;
	font-family: 'Open Sans Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#md_mobile_left div {
	border-radius: 2px;
	border: 1px solid #EEEEEE;
	border-image: none;
	width: 93%;
	height: 2px;
	margin-top: 3px;
	background-color: #fff;
}

#mobile_logo {
	float: right;
	height: 100px;
	position: relative;
	top: -20px;
	width: auto;
}

#md_mobile_right {
	background-color: #D54400;
	padding: 3px 4px;
	border-radius: 3px;
	border: 1px solid #fff;
	border-image: none;
	width: 25px;
	height: 24px;
	display: block;
	position: relative;
	cursor: pointer;
	font-family: 'Open Sans Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#md_mobile_right div {
	border-radius: 2px;
	border: 1px solid #EEEEEE;
	border-image: none;
	width: 93%;
	height: 6px;
	margin-top: 3px;
	background-color: #D54400;
}

a[href^="http"] {
	text-decoration: none;
}

a[href],
a[href]:visited {
	text-decoration: none;
	font-size: 1em;
	color: #D54400;
}

a[href]:hover,
a[href]:visited:hover {
	text-decoration: underline;
	color: #D54400;
}

#sidr-left {
	width: 250px;
}

#sidr-right {
	width: 250px;
	font-size: 1.0em;
	background-color: #3D3D3D;
}

#sidr-id-md_Navigation > ul {
	padding-left: 0;
}

#sidr-id-md_Navigation {
	font-size: 1.0em;
}

#sidr-id-md_Navigation ul a:hover {
	color: #ffcc99;
	text-decoration: underline;
}

#sidr-id-md_Navigation ul a.sidr-class-act {
	color: #ffcc99;
}

@media screen {
	.erp_highlight image {
		width: 60px;
	}
}

@media screen and (max-width:800px) {
	#content table td {
		min-width: 20px !important;
	}

	#content {
		min-height: 30em;
		padding: 1em;
	}

	#sitemapmenu {
		display: none;
	}

	#content .foto {
		min-width: 8em !important;
	}

	#subtitle {
		height: 300px;
		min-height: 300px;
	}

	#languagemenu {
		float: none;
		text-align: right;
		width: 100%;
		padding: 5px 10px;
		box-sizing: border-box;
		left: 0;
		top: 0;
		height: 35px;
		margin-top: -300px;
	}

		#languagemenu ul {
			float: right;
			padding-bottom: 10px;
		}

	#erp_layout {
		display: none;
	}

	.erp_highlight {
		width: 40px;
	}

	.erp_boxmarked, .erp_box {
		font-size: 1.0em;
	}

	.erp_boxer {
		min-width: 460px;
		padding: 1em;
	}

	body, p, th, td, a, b, h1, h2, h3, h4, ul, li {
		font-size: 1.0em;
	}

	h1 {
		padding-top: 1.0em;
	}

	video {
		width: 100%;
	}
}

.tiles_box {
	float: left;
	width: 22%;
	margin-right: 4%;
	background-color: #fff;
	box-sizing: border-box;
	margin-bottom: 1em;
}

.tiles_box:last-child {
	margin-right: 0px;
}

.tiles_content:hover {
	background-color: lightgray;
	cursor: pointer;
}

.tiles_box a:hover {
	text-decoration: none;
}

.tiles_content {
	background-color: #57bba3;
	padding: 1em;
}

.tiles_content_top, .tiles_content_bottom {
	color: #fff;
}

.tiles_content_top {
	min-height: 4em;
	overflow: auto;
}

.tiles_content_bottom {
	color: #fff;
	text-align: right;
	border-top: 1px solid #fff;
	padding-top: 0.5em;
}

.table_cell_center {
	margin: 0.2em;
	padding: 0.2em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	text-align: center;
}

.table_row {
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}

.table_cell_center {
	margin: 0.2em;
	padding: 0.2em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	text-align: center;
}

.table_cell_center2 {
	margin: 0.4em;
	padding: 0.4em;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	text-align: center;
}

#abonnement_left {
	float: left;
	width: 20%;
	text-align: right;
	padding-right: 20px;
	border-right: 1px solid #808080;
}

#abonnement {
	float: left;
	width: 200px;
	text-align: right;
	border-right: 1px solid #808080;
}

.hover-div {
	padding: 0px;
	transition: background-color 0.5s ease;
}

.hover-div:hover {
	background-color: rgba(0, 0, 0, 0.075);
}

.collapsible {
	background-color: #fff4eb;
	padding: 20px;
	border: 1px solid #808080;
}

.collapsible-header {
	cursor: pointer;
}

.collapsible-content {
	display: none;
}

.toggle-icon {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-image: url('/WPS/images/erp/erp_arrow_down.webp');
	background-size: cover;
	background-position: right center;
}

.active .collapsible-header .toggle-icon {
	background-image: url('/WPS/images/erp/erp_arrow_up.webp');
}

.active .collapsible-headerX {
	display: none;
}

.collapsible_blue {
	background-color: #b8d7ef;
	padding: 20px;
	border: 1px solid #808080;
}

.collapsible_blue-header {
	cursor: pointer;
}

.collapsible_blue-content {
	display: none;
}

.collapsible_grey {
	background-color: #fcfcfc;
	padding: 20px;
	border: 1px solid #d6d6d6;
	margin-bottom:10px;
}

.collapsible_grey-header {
	cursor: pointer;
}

.collapsible_grey-content {
	display: none;
}

.collapsible_ERP {
	background-color: #fff4eb;
	padding: 20px;
	border: 1px solid #808080;
}

.collapsible_ERP-header {
	cursor: pointer;
}

.collapsible_ERP-content {
	display: none;
}

.toggle-icon {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-image: url('/WPS/images/erp/erp_arrow_down.webp');
	background-size: cover;
	background-position: right center;
}

.active .collapsible_blue-header .toggle-icon {
	background-image: url('/WPS/images/erp/erp_arrow_up.webp');
}

.active .collapsible_ERP-header .toggle-icon {
	background-image: url('/WPS/images/erp/erp_arrow_up.webp');
}

.erp_inputform {
	background: #fffaf5;
	cursor: pointer;
	color: black;
}

.dropzone {
	width: 100%;
	height: 300px;
	border: 2px dashed #888;
	justify-content: center;
	background-color: #f9f9f9;
	margin-bottom: 10px;
	padding: 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	cursor: pointer;
}

.dropzone.hover {
	border-color: #666;
	background-color: #eee;
}

.dropzone img {
	pointer-events: auto !important;
}

#file-input {
	display: none;
}

#dd_progress_bar {
	width: 100%;
	height: 10px;
	border: 1px solid #888;
	background-color: #f3f3f3;
	display: none;
}

#dd_progress {
	height: 100%;
	width: 100%;
	background-color: #4caf50;
	width: 0%;
}

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

.fotoszumauftrag_container {
	padding-right: 0.5vw;
	padding-bottom: 4.0vw;
	height: 220px;
	width: 232px;
	float: left;
	text-align: center;
	border: 0px solid #808080;
}

.scanner {
	z-index: 1;
	border: 0px solid grey;
	height: 20em;
}

.wrapper {
	z-index: 0;
	color: transparent;
	background-color: transparent;
	border: 0px solid;
	margin-top: -200px;
	margin-bottom: 200px;
}

.scantext {
	color: transparent;
	background-color: transparent;
	border: 0px solid;
}

.scantext:focus {
	color: transparent;
	background-color: transparent;
	border: 0px solid;
	outline: none;
}

#ERPmodal {
	display: none;
	position: fixed;
	z-index: 2000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	cursor: pointer;
}

#ERPmodal:hover {
	cursor: pointer;
}

#ERPsurvey {
	display: none;
	position: fixed;
	z-index: 2000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}

.modal-box {
	position: relative;
	z-index: 101;
	top: 20%;
	margin: auto;
	padding: 1em;
	border: 1px solid #888;
	width: 70%;
	max-width: 900px;
	font-family: Nunito, sans-serif;
	font-size: 1.2em;
	box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

.modal-box .formSubmit {
	background-color: #E6E6E6;
	background-image: none;
	border: 1px solid #000;
	width: auto;
	border-radius: 1em 1em 1em 1em;
	padding-left: 1em;
	padding-right: 1em;
}

#comments {
	text-align: center;
}

@media screen and (max-width: 600px) {
	#comments {
		width: 100%;
		max-width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 768px) {
	#comments {
		width: 100%;
		max-width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

@media (max-width: 768px) {
	#ERPmodal {
		display: none !important;
	}
}

.benefitModal_content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	cursor: auto;
	width: 50%;
	max-width: 800px;
	cursor: pointer;
}

.benefitModal_content:hover {
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.surveyModal_content {
	position: fixed;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	cursor: auto;
	width: 50%;
	max-width: 800px;
}

.rating-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 0px;
}

.star {
	font-size: 2rem;
	cursor: pointer;
	color: #ccc;
	transition: color 0.2s ease-in-out;
}

.star.selected {
	color: gold !important;
}

.star:hover {
	color: gold;
}

.circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #4CAF50;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: bold;
	font-family: 'Open Sans Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	transition: background-color 0.3s, color 0.3s;
}

	.circle:hover, .circle.selected {
		background-color: #4CAF50;
		color: white;
	}

.rating-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom:5px;
}

#selectedRating {
	margin-top: 15px;
	font-size: 18px;
	font-weight: bold;
}

#imageContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 2vw 0;
	text-align: center;
}

	#imageContainer img {
		max-width: 80%;
		height: auto;
	}

	#imageContainer p {
		margin: 0;
		padding: 0;
		font-size: 1rem;
	}

#surveyContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 2vw 0;
	text-align: center;
}

	#surveyContainer h1 {
		margin: 0;
		padding: 0;
	}

	#surveyContainer .formSubmit {
		background-color: #E6E6E6;
		background-image: none;
		border: 1px solid #000;
		width: auto;
		border-radius: 1em 1em 1em 1em;
		padding-left: 1em;
		padding-right: 1em;
	}

	#surveyContainer .formSubmit:disabled {
		opacity: 0.5 !important;
		cursor: default !important;
	}

	#surveyContainer img {
		max-width: 80%;
		height: auto;
	}

	#surveyContainer p {
		margin: 0;
		padding: 0;
		padding-left: 2vw;
		padding-right: 2vw;
		font-size: 1rem;
	}

.counter_comma {
	vertical-align: super;
	font-size: smaller;
	position: relative;
	top: -0.5em;
}

.counter_label {
	font-size: 0.8em;
	font-weight: bolder;
	text-align: left;
	display: inline-block;
	width: 60%;
	line-height: 1.2em;
	margin-left: 0.5em;
	vertical-align: bottom;
}

.counter_value {
	font-size: 1.0em;
	font-weight: bolder;
	text-align: right;
	display: inline-block;
	width: 35%;
	line-height: 1.2em;
	padding-right: 0.5em;
	vertical-align: bottom;
}

.counter_row {
	line-height: 1.2em;
	height: 2.5em;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

@media (max-width: 600px) {
	.counter_label {
		width: 100%;
		text-align: left;
		margin-left: 0;
	}

	.counter_value {
		width: 100%;
		text-align: right;
		padding-right: 0;
	}

	.counter_row {
		height: auto;
		margin-bottom: 20px;
	}
}

#fade-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

#loading-spinner {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	text-align: center;
}

#loading-spinner > div {
	border: 5px solid #f3f3f3;
	border-top: 5px solid #5abba3;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
	margin: 0 auto;
}

#loading-spinner p {
	margin-top: 10px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	color: #5abba3;
	text-align: center;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

#footer_full_width {
	width: 100%;
	text-align: center;
	color: #000;
	padding: 15px 0;
	position: fixed;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	height: auto;
	background-color: #ededed;
	border-top: 1px solid #535353;
	transition: transform 0.3s ease;
	z-index: 1000;
}

.hide-footer {
	transform: translateY(100%);
}

#footer_full_width p {
	margin: 0;
	font-size: 14px;
}

#footer_full_width img {
	width: 30px;
	margin: 5px 10px 0 10px;
}

#footer_full_width img:last-child {
	margin-right: 0;
}

#customer_footertext {
	float: left;
	width: 100%;
	text-align: center;
	background-color: #FBEEE2;
}

.data_protection_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 10px;
}

.data_protection_item {
	flex: 1 1 calc(33.333% - 10px);
	max-width: 380px;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
}

.data_protection_item img {
	height: auto;
	display: block;
	margin: 0 auto;
	margin-bottom: 15px;
}

@media (max-width: 500px) {
	.data_protection_item {
		flex: 1 1 100%;
	}
}