:root {
	/* Originale Farben*/
	--colorpicker1:		rgba(0, 0, 0, 1);
	--colorpicker2:		rgba(221, 221, 221, 1);
	--colorpicker3:		rgba(0, 0, 0, 1);		
	--colorpicker4:		rgba(173, 173, 173, 1);
	--colorpicker5:		rgba(202, 202, 202, 1);
	--colorpicker6:		rgba(255, 255, 255, 1);


	/* Farben zum Testen */
	/*--colorpicker1:		rgba(255, 64, 64, 1);
	--colorpicker2:		rgba(147, 112, 219, 1);	
	--colorpicker3:		rgba(69, 139, 0, 1);	
	--colorpicker4:		rgba(255, 185, 15, 1);
	--colorpicker5:		rgba(0, 255, 0, 1);	
	--colorpicker6:		rgba(151, 255, 255, 1);*/


	--default-color:		var(--colorpicker3);		
	--default-colorW:		rgba(255, 255, 255, 1);	
	--inact-color:			var(--colorpicker6);
	--hover-color:			rgba(48, 48, 48, 1);

	--border-color:			rgba(48, 48, 48, 1);

	--sym-border-color-act:	var(--colorpicker1);
	--sym-border-color:		rgba(241, 241, 241, 1);

	--toolbar-icons:		var(--colorpicker6);

	--btn-color:			var(--colorpicker1);		/* BTN text standard */
	--btn-colorhover:		rgba(0, 0, 0, 1);			/* BTN text hover */
	--btn-bkg-color:		var(--colorpicker2);		/* BTN Hintergrund standard */
	--btn-bkg-colorhover:	rgba(221, 221, 221, 1);		/* BTN Hintergrund hover */

	--btn-color2:			var(--colorpicker6);		/* BTN text standard */
	--btn-color2hover:		rgba(0, 0, 0, 1);			/* BTN text hover */
	--btn-bkg-color2:		var(--colorpicker4);		/* BTN Hintergrund Schwarz */
	--btn-bkg-color2hover:	rgba(255, 255, 255, 1);		/* BTN Hintergrund hover */
	--btn-bkg-color3:		var(--colorpicker6);		/* BTN Hintergrund Weiß */

	--footer-color:			var(--colorpicker4);
	--footer-color-hover:	var(--colorpicker1);	

	--menu-color:			var(--colorpicker5);

	--default-buttonCheck:	var(--colorpicker1);		
	--inactiv-buttonCheck:	var(--colorpicker4);		
}

/* Set up Roboto for modern browsers, all weights */
@font-face {
	font-family: font1;
	src: url('Fonts/Dosis/Dosis-VariableFont_wght.ttf') format('truetype');
}
@font-face {
	font-family: font2;
	src: url('Fonts/Dosis/Dosis-VariableFont_wght.ttf') format('truetype');
	font-weight:400;
}
@font-face {
	font-family: font3;
	src: url('Fonts/Dosis/Dosis-VariableFont_wght.ttf') format('truetype');
	font-weight:500;
}





/* Basic ------------------------------------------------------------ */
html						{ font-size: 10px; width:100%; height:100%; }
body						{ margin:0; padding:0; width:100%; height:100%; overflow:hidden;
							  display: flex; display: -ms-flexbox;        /* NEW, Spec - Firefox, Chrome, Opera */
							  justify-content: center; -ms-flex-pack: center; align-items: center; -ms-flex-align: center;
							  inline-axis:vertical;}

.mobile						{ display:none!important; }

svg							{ height:100%; }
svg path					{ fill: var(--default-color); }

span, input,
textarea, table,
a, select, ul				{ text-decoration: none; font-weight: normal; font-family: font1; }

select						{ border: 1px solid var(--default-color); padding-left: 0.5em;}

ul							{ list-style: none; }
	
:focus,
:active,
a							{ outline: 0; }

input						{ margin: 0; vertical-align: baseline; margin-right: 0.5em; border:2px solid #e5e5e5; font-size:1.6em;}
progress					{ accent-color: var(--default-color); }


a, button					{ cursor: pointer; }
table td					{ padding:0; margin:0; }
table						{ border-collapse: collapse; }

.button						{ width: auto; height: 4.5em; border-radius: 4.5em; display: flex;
							  justify-content: center; align-items: center; background:var(--btn-bkg-color); }
.button:hover				{ background:var(--btn-bkg-colorhover); }
.button a,
.button span				{ display: inline-block; padding: 0em 1em; }

.buttonCheck				{ background:var(--default-buttonCheck); width: 3.2em; height: 3.2em; border-radius: 100%; display: flex; justify-content: center; align-items: center; }
.buttonCheck svg polyline,
.kapselOK svg polyline		{ stroke: var(--default-colorW)!important; }
.okIcon .st0				{ fill: transparent; }

.button span				{ transition:all 0.4s ease; cursor:pointer; color:var(--btn-color); } 
.button.measure.search		{ display: flex; align-items: center; background-color:var(--btn-bkg-color); position: absolute; right: 1.8em;
							  border-radius: 0px 2.3em 2.3em 0px; color:var(--btn-color); height: 3.9em; }
.button.measure.search span	{  }
.button.measure	span		{ text-transform:capitalize;  }

.errorMeasure				{ position:absolute; display:none; }
.errTd						{ padding-bottom: 2em!important; }

.disablediv					{ display:none; opacity: 0.3; pointer-events: none; }

.hide						{ display:none !important;}

#ButtonCreator				{ z-index: 9; position: fixed; left: 0em; top: 50%; height: 3.4em; width: 3.4em; text-align: center; cursor: pointer;
							  border: 1px solid #0e4194; background-image: url(Media/Icons/create_icon.png); background-repeat: no-repeat; background-size: contain; }
#ButtonTestreferenzErstellen	{ z-index: 9; position: fixed; left: 0em; top: 55%; height: 3.4em; width: 3.4em; text-align: center; cursor: pointer;
								  border: 1px solid #0e4194; background-image: url(Media/Icons/test.svg);  background-color:white; background-repeat: no-repeat; background-size: contain; }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}

/* Firefox */
input[type=number] { -moz-appearance: textfield;}

/* Font --------------------------------------------------------- */
.bold						{  }
span, a, select				{ font-size: 1.6em; }
span a,
a span, .fancybox			{ font-size: 1em !important; }
span, a, input				{ color: var(--default-color); }

.menuitem span  			{ font-size: 1.8em; font-family: font3; }
.tabClass span				{ font-size: 1.6em; }

#mfStepper span,
.tabClass span				{ font-family: font3; }

.tabClass span				{ color:var(--inact-color);  transition: all 0.5s ease; }
.SectionHeader span			{ font-size: 2.4em; font-family: font3; }
.title						{ font-size: 2.4em; font-family: font3; margin-bottom:0.4em; }

#Zusammenfassung .row1 .nummerierung,
#Zusammenfassung .red  .row1 span	{ font-family: font3; }
.DynLayerHeader .caption			{ font-family: font3; }
.loginTitel span					{ font-family: font3; }

#navi ul li div	span		{ color:var(--menu-color); }
#navi .menuitemvis span		{ color: var(--default-color); }
span b						{ display: contents; }


/* Grundgerüst ------------------------------------------------------- */
.center						{ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
#mfDisplay					{ position: relative; top: 0em;  width: 100%; height: calc(100%); overflow:hidden;
							  background: rgb(240, 240, 238);
							  background: linear-gradient(0deg, rgba(240, 240, 238, 1) 0%, rgba(211, 210, 206, 1) 50%); }

#mfSection,
#mfOptions					{ position: absolute; top: 8.5em; width: 64em; height: calc(100% - 8.5em); right: 0; background: #FFF;
							  display: flex; transform: none; transition: transform 0.5s ease; }

#mfOptions					{ top: 22.1em; height: calc(100% - 24.6em);  }
#optionsLayer				{ height:100%; width:65em; display: flex;flex-direction: column; }
#optionsContent				{ margin-left: 3em; }

#mfMenu						{ position: absolute; top: 0; display: flex; align-items: center; width: calc(64em); height: 8.5em; right: 0; background:var(--default-colorW); } 
.DisplayImg					{ top:0; height:100%; }
#mfImprint					{ display:none;}
#mfTop						{ height: 6em; z-index: 1; position: absolute; }
.titleDiv					{ display:flex;  }
.titleDiv svg				{ height: 2em; }
.titleDiv svg .st1			{ fill: #FFF; }
.titleDiv svg .st0			{ fill: var(--default-color); }

.page4 .titleDiv			{ margin-top:1em; }

.showhideButton				{ display: flex; justify-content: center; align-items: center; padding: 0em 1em; margin-left: 1em; cursor:pointer; }
#showhideArrow				{ transform: rotate(90deg); transition: all 0.5s ease; }
#showhideArrow path			{ fill:var(--colorpicker1); }

.rotateButton #showhideArrow{ transform: rotate(-90deg); }

#infoIcon					{ display:none; margin-right: 1em; }

#mfLinks					{ position: absolute; bottom: 1em; left: 0em; z-index: 1; display: flex; align-items: center; z-index:10; }
#mfLinks ul					{ display:flex; }
#mfLinks span				{ cursor:pointer; text-transform: capitalize; color: var(--default-color); margin: 0 1em; transition:all 0.4s ease; font-family: font1; }
#mfLinks span:hover			{ color: var(--default-color); }
#mfLinks .trenner			{ width:2px; background-color:var(--default-color); height:1.8em; }


/* Select */
.SelectButton				{ display: flex; align-items: center; margin-left: 0em; margin-right: 1em; top: 1px; position: relative; padding: 0.8em 2em 0.8em 1em;
							  border-radius: 4.5em; margin-bottom: 1em; background: var(--btn-bkg-color); cursor:pointer; }
.SelectButton .buttonCheck	{ margin-right:1em; }
.SelectButton span			{ color: var(--inact-color); transition: all 0.5s ease; white-space: nowrap; }
.SelectButton .buttonCheck  { background: var(--inactiv-buttonCheck); transition: all 0.5s ease; }

.SelectButton.act span,
.SelectButton:hover span			{ color: var(--default-color);  }
.SelectButton.act .buttonCheck,
.SelectButton:hover .buttonCheck	{ background: var(--default-buttonCheck); }



/* Banner */
#mfBanner					{ display: flex; align-items: center; height: 100%; position: relative; }
#mfBannerContent			{ display: flex; align-items: center; }

#mfLogo						{ cursor:pointer; height:3.5em; margin-left: 2.5em; }
/*.mfLogo.customLogo			{ width: 15em !important; height: 15em !important; top: 2.5em; position: absolute; }
#logo_svg, #mfLogo img		{ height:100%; }*/

.mfLogo.customLogo {
  display: inline-block; /* Container passt sich der Bildgröße an */
  max-width: 100%; /* Optional: Verhindert, dass der Container breiter als der Viewport wird */
}

.mfLogo.customLogo img {
  max-width: 80em; /* Maximale Breite des Bildes (anpassen) */
  max-height: 15em; /* Maximale Höhe des Bildes (anpassen) */
  width: auto; /* Behält das Seitenverhältnis bei */
  height: auto; /* Behält das Seitenverhältnis bei */
  display: block; /* Entfernt unerwünschten Abstand unter dem Bild */
}

.mfSlogan					{ margin-left: 3em; }
.mfSlogan span				{ text-transform: uppercase; }


#logo_svg .st1				{ fill: var(--default-color); }

#mfMenuContent				{ display: flex; margin: 0 1em 0 1em; border-bottom: 1px solid #ededef; width: 100%; }

#mfDisplayWait				{ height: 100%; width: 100%; }
#mfDisplayWait				{ background-image: url(Media/GUI/wait_60.gif); height: 100%; top: 0px; left: 0px; position: absolute; 
							  background-position:95em center; background-repeat: no-repeat; z-index: 0;}
#mfDisplayWait_print		{ display:none; background-image: url("Media/GUI/wait_60.gif"); background-position: center center; background-repeat: no-repeat;
							  height: 100%; width: 100%; left: 0; position: absolute; bottom: 0; pointer-events: none;
							  cursor: default; z-index:99999999!important; background-color:rgba(221, 221, 221, 0.5);}

.MainTitles,
.SubTitles					{ padding-top: 0.5em; padding-bottom:0.5em; display: block; padding-right: 0.5em;}

.smallSpan					{ font-size:1em!important; display: block; margin-top: 1em;}



/* symbutton */
.symbutton					{ cursor:pointer; margin:0 1em 1em 0; box-sizing: unset; overflow:hidden; position:relative; transition: 0.5s ease; width: calc((100% / 4) - 1.3em); }
.shape						{ width:auto; }
.Rallayer .symbutton,
.Contentcolor .symbutton	{ width: calc((100% / 5) - 1.3em); }

.symbuttonContent			{ display: flex; justify-content: left; flex-wrap: wrap; overflow:auto; }
.symbutton .imgBorder		{ border: 1px solid var(--sym-border-color); transition: all 0.5s ease;  border-radius: 0.8em; }
.symbutton .buttonCheck		{ display:none; }
.symbutton.act .buttonCheck	{ display:flex; position:absolute; }


.symbutton img				{ padding: 0.5em; width:90%; transition: all 0.5s ease; }

.RALColorDiv				{ transition: all 0.5s ease; margin: 1em 0px; }

.imgBorder					{ display: flex; justify-content: center; align-items: center; }
.symbutton.color .imgBorder	{ width: 100%; display: flex; justify-content: center; height: 7em; align-items: center;}

.symbutton.act .imgBorder,
.symbutton:hover .imgBorder,
.symbutton:hover .symbuttonRalContent	{ border-color:var(--sym-border-color-act); }

.symbuttonRalContent					{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 3em; border: 1px solid var(--sym-border-color);
										  transition: all 0.5s ease; border-radius: 0.8em; }

#symbuttoninnercontent					{ position: relative; overflow: hidden; padding-bottom: 3em; display: flex; justify-content: center; }


.symbutton .Description 				{ display:flex; justify-content:center; align-items:center; width: 100%;
								      position: absolute; bottom: 0em; height: 3em; transition: all 0.5s ease; }
.symbutton .Description span			{ font-size:1.4em; color:var(--default-color); }

.symbutton.color:hover img,
.symbutton:hover .RALColorDiv			{ transform: scale(1.3); }



/* END symbutton */


.Contentoptions				{ justify-content: start; }

.closediv					{ text-align: right; margin-top: 3em;}
.closediv	a				{ margin-right: 2em;}

#mfInfo						{ position: absolute; top: 0.5em; z-index: 99; left: 125em;}

.overflow					{ overflow: auto; }

#UploaderDiv .button:hover	{ color: var(--hover-color); }

#uploadHide				{ right: 1em; top:1em; position: absolute;  z-index: 9; background-color:transparent; cursor:pointer; width:5em; height:5em; }
#uploadHide:hover		{ transition:all 0.4s ease;}
.showupload				{ right: 68em !important; top: 17em !important; }


/* Toolbar */
#mfToolbar							{ bottom: 0em; position: absolute; right: 66em; z-index: 5; height:7em; }
#tool								{ position: relative; right: 0em; z-index: 1; }
#mfToolbar .liContentDiv a:hover	{ transform: translate(calc(-100% + 5.8em), 0); }
#mfToolbar ul						{ display: flex; padding: 0; margin:0; }
#mfToolbar .menuitem				{ margin: 0; width: 5em; height: 5em; border-radius: 100%; background-color: var(--btn-color); display: flex; justify-content: center; align-items: center; margin-right: 2.5em; }
#mfToolbar .menuright				{ display:none; }
#mfToolbar ul li .liContentDiv		{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
#mfToolbar .FeatureHelp				{ display: flex;  justify-content: left; }
#mfToolbar .FeatureHelp span		{ display:none; }
#mfToolbar .iconDiv svg				{ height: 1.7em; }

#mfToolbar .btnWord .iconDiv svg	{ height: 2.5em; }
#mfToolbar .btnPDF .iconDiv svg		{ height: 2.2em; }

#mfToolbar .liContentDiv a			{ display: flex; transition: all 0.4s ease; position: relative; height: 4.6em; font-size: 1em; }
#mfToolbar .liContentDiv a:hover	{ transform: translate(calc(-100% + 5.8em), 0); }
#mfToolbar .iconDiv					{ display: flex; justify-content: center; }
#mfToolbar svg path					{ fill: var(--toolbar-icons); }

.Toolholder							{ display: flex; }
.menuitem.btnMore					{ height: 5em; width: 5em; }
.svg.more_Toolbar path				{ fill: var(--default-colorW); }

.FeatureBtn							{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}

/* moreToolbar */
#moreTools							{ position:absolute; left:50%; width:4em; height:4em; text-align:left; }
.menu-open							{ display:none; }
.moreToolbarDiv						{ position: relative; display:none; }
#moreTools .menuitem				{ position: absolute; transition-duration: 180ms; opacity:0; }
.menu-open-button					{ position: absolute; z-index:2; cursor:pointer; }

.menu-open:checked ~ #moreTools .menuitem		   { opacity:1; }

.menu-open:checked ~ #moreTools ul li:nth-child(1) { transition-duration: 190ms; transform: translate3d(0, calc(-5em - 2.5em), 0);   }
.menu-open:checked ~ #moreTools ul li:nth-child(2) { transition-duration: 290ms; transform: translate3d(0, calc(-10em - 5em), 0);    }
.menu-open:checked ~ #moreTools ul li:nth-child(3) { transition-duration: 390ms; transform: translate3d(0, calc(-15em - 7.5em), 0);  }
.menu-open:checked ~ #moreTools ul li:nth-child(4) { transition-duration: 490ms; transform: translate3d(0, calc(-20em - 10em), 0);   }
.menu-open:checked ~ #moreTools ul li:nth-child(5) { transition-duration: 590ms; transform: translate3d(0, calc(-25em - 12.5em), 0); }
.menu-open:checked ~ #moreTools ul li:nth-child(6) { transition-duration: 690ms; transform: translate3d(0, calc(-30em - 15em), 0);   }
.menu-open:checked ~ #moreTools ul li:nth-child(7) { transition-duration: 790ms; transform: translate3d(0, calc(-35em - 17.5em), 0); }
.menu-open:checked ~ #moreTools ul li:nth-child(8) { transition-duration: 890ms; transform: translate3d(0, calc(-40em - 20em), 0);   }
.menu-open:checked ~ #moreTools ul li:nth-child(9) { transition-duration: 990ms; transform: translate3d(0, calc(-45em - 22.5em), 0); }
.menu-open:checked ~ #moreTools ul li:nth-child(10) { transition-duration: 990ms; transform: translate3d(0, calc(-50em - 25em), 0); }
.menu-open:checked ~ #moreTools ul li:nth-child(11) { transition-duration: 990ms; transform: translate3d(0, calc(-55em - 27.5em), 0); }
.menu-open:checked ~ #moreTools ul li:nth-child(12) { transition-duration: 990ms; transform: translate3d(0, calc(-60em - 30em), 0); }
.menu-open:checked ~ #moreTools ul li:nth-child(13) { transition-duration: 990ms; transform: translate3d(0, calc(-65em - 32.5em), 0); }
.menu-open:checked ~ #moreTools ul li:nth-child(14) { transition-duration: 990ms; transform: translate3d(0, calc(-70em - 35em), 0); }
.menu-open:checked ~ #moreTools ul li:nth-child(15) { transition-duration: 990ms; transform: translate3d(0, calc(-75em - 37.5em), 0); }



/* DynLayer---------------------------------------------------------------------------*/
.DynLayer					{ background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center; display: none; position: absolute; width: 100%; height: 100%; }
.DynLayerContent			{ -webkit-box-shadow: 0px 0px 30px 25px rgba(0,0,0,0.25); box-shadow: 0px 0px 30px 25px rgba(0,0,0,0.25); background-color:#FFF; border-radius: 1.5em; }

.DynLayerHeader				{ background-color: #FFF; display: flex; justify-content: flex-end; height: 5em; align-items: center; border-radius: 1.5em; }
.DynLayerHeader .caption	{ margin-right: 1em; color: var(--default-color); text-transform:uppercase; font-size: 2.1em; }

.closeDynLayer				{ width: 3.2em; height: 3.2em; margin-right: 1em; cursor: pointer; background: var(--default-color); border-radius: 100%;
							  display: flex; justify-content: center; align-items: center; }
.close_popupSvg path		{ fill: var(--default-colorW); }
.svg.close_popupSvg			{ height: 40%; }

.hoverImg					{ background-size: contain; }
.hoverText					{ margin: 1em; }

.DynLayerInnerContent		{ margin:2em;}
div#DynLayer84div			{ z-index: 999; border: 1px solid; }

.hoverContainer				{ display: flex; flex-direction: column; align-items: center; background-color: #fff; border: 1px solid var(--default-color);}

#DynLayer13div .MainTitles	{ display:none; }
#DynLayer13div .popupTitle  { margin-bottom: 2em; }

.message					{ margin-bottom: 2em; }
.afinshButton				{ background-color: var(--default-color); color:#FFF; padding: 0.5em 2em; margin-top: 1em; display: flex; width: max-content; margin-bottom: 1em; }

.handleOptionsMainDiv		{ margin: 4em 10em; }
.handleOptionsDiv			{ text-align: center;  text-align: center; display: flex; flex-direction: column; align-items: center; }
.handleOptionsDiv .button	{ margin-top:2em; }

.loadMainDiv .buttonCheck,
.handleOptionsDiv .buttonCheck { margin-left: 1em; }

.UploadAmbiente				{ margin: 3em 10em; }

/* Login --------------------------------------------------------------*/
#loginTable					{display: flex; justify-content: center; text-align: center; margin: 0 10em; }
#loginDataDiv				{ margin-top: -2em; display: flex; justify-content: right; margin-right: 1em; }
#DynLayer32div				{ position: absolute; right: 0em; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
#loginTable	.Kapsel			{ width: auto; }
#loginTable .button			{ margin-top: 2em; width: 15em; }
.loginTitel					{ display: flex; justify-content: center; }
#loginTable	span			{ padding-right: 1em;}
#loginTable	td				{ padding-bottom: 1em; display: flex; justify-content: center; }
#LoginButton				{ position: relative; width: fit-content; margin: 1em 0; background-color: var(--btn-color); padding: 1em 1.5em; cursor:pointer; transition: all 0.4s ease; }
#LoginButton:hover			{ background-color: var(--hover-color); }

#LoginSubDiv				{ margin: 1em 0; }
#LoginSubText,
#LoginSubText2				{ min-width: 12em; display: inline-block; }
.btn_div					{ display: flex; justify-content: space-between; }

/* Speichern ---------- Laden */
.saveDiv					{ width:30em; margin: 5em 10em; text-align: center; }
.loadMainDiv				{ display: flex; justify-content: center; margin: 0 10em; flex-direction: column; text-align: center; }
.loadMainDiv .Kapsel		{ width: auto; margin: 2em 0; }
.loadMainDiv .button		{ margin: 0 auto; }
.ConfigartionSave			{ display: flex; flex-direction: column; align-items: center; }
.ConfigartionSave .Kapsel	{ width: 80%; margin-bottom: 1em; margin-right:0!important; }
span.SaveDataNameSuccess	{ margin-bottom: 1em; }

/*Anfrage*/
.TableMail td					{ padding-bottom:1em;}
.mailSpan.mailMessage			{ width: calc(91%); height: 5em; margin-bottom: 2em; resize: none; border-radius: 0.5em; border: 2px solid #d5d6d6; }
#DynLayer92div input			{ border-radius: 0.5em; border: 2px solid #d5d6d6; height: 1.5em; width: 85%; padding-left: 1em; }
#DynLayer92div td				{ padding-top: 1em; }
#DynLayer92div .DynLayerContent { max-width: 60em; }
#__Location, #__Zip				{ width:calc( ((85% - 2em) / 2) - 0px ) !important; }
#__Who, #__Privacy				{ width: 2em !important; }
.mailSpan.button				{ display: inline-block; padding: 0.5em 1.5em; background-color: var(--default-color); }
.mailSpan.button a				{ color:#FFF; }
#__Privacy + span				{ display: flex; margin-left: 2.5em; margin-top: -1.8em; max-width: 85%; }


/* Tabs------------------------------------------------------------------------------ */
.tabBaseClass				{ display: flex; margin-left: 3em; order:2; flex-wrap: wrap; }
.tabBaseClass.hide			{ display:none!important; }
.SectionHeader				{ margin-left: 3em; order: 1; margin-bottom: 2em; }
.SectionHeader.noTabs		{ margin-bottom: 0em; }
.tabContent					{ margin: 2em 0em 0 3em; height: calc(100% - 8em); order: 9; }
.tabContent.page2.tab2,
.tabContent.page4.tab6			{ height: calc(100% - 0em);}
.tabMargin					{ /*overflow: auto;height: calc(100% - 9em);*/}

.tabContent.page2.tab0,
.tabContent.page4			{ margin: 0 0 0 3em; }
.page2.tab0 .areaSelectDiv,  
.page4 .areaSelectDiv		{ margin-top:0; }

.tabContent.small			{ height:calc(100% - 17.5em); }
#mfSectionContent,
#HideContent				{ width:100%; height: calc(100%); display: flex; flex-direction: column; }
#HideContent				{ height: calc(100% - 8.5em); }
.page5.tab2 .Contentoptions,
.page5.tab4 .Contentoptions { justify-content: flex-start; }
.SectionMainDiv				{ width:100%; display: flex; flex-direction: column; height:100%; }
.tabClass					{ display:flex; align-items: center; margin-left:0em; margin-right:1em; top: 1px; position: relative; padding: 0.8em 2em 0.8em 1em; border-radius: 4.5em; margin-bottom: 1em; }
.tabClass .buttonCheck		{ margin-right:1em; background:var(--inactiv-buttonCheck); transition: all 0.5s ease; }
.tabClassActive .buttonCheck,
.tabClass:hover .buttonCheck{ background:var(--default-buttonCheck); transition: all 0.5s ease; }
.tabClass:first-child		{  }
.tabText					{  }
.tabClassActive	span,
.tabClass:hover	span		{ color:var(--default-color); }
.tabClass					{ cursor: pointer; background:var(--btn-bkg-color); }
.tabClassActive				{  }

/* Sonstiges ------------------------------------------------------- */
.treePartUl,
.treePropertyUl					{ margin: 1em 0 3em 0em; padding: 0; }
.treePartUl li,
.treePropertyUl li				{ margin-bottom: 1em; }
.treePartUl li:last-child,
.treePropertyUl li:last-child	{ margin-bottom: 0em; }
.treePartUl li ul,
.treePropertyUl li ul			{ padding-left: 2.9em; padding-top: 0.5em; }
.treeOptionsBox					{ display: flex; align-items: center; }

.treeOptionsMainBox				{ width: fit-content;}

.Modellbezeichnung,
.ModellbezeichnungUpload		{ position: absolute; background: var(--colorpicker1); display: flex; justify-content: center; align-items: center; right: 68em; top: 11.5em; z-index: 1; }
.Modellbezeichnung span,
.ModellbezeichnungUpload span	{ color:var(--colorpicker6); padding: 0.8em; }
.ModellbezeichnungUpload		{ left: 2em; top: 2em; right: auto; }

/* Filter ------------------------------------------------------*/
.FilterMainDiv				{ position: fixed; right: 2em; width: 64em; z-index: 1;top: 11em;}

.SectionMainDiv				{ overflow:hidden; position:relative; overflow-y: auto;}
.filterButton				{ border: 1px solid var(--btn-color); border-radius: 3em;display: flex; cursor: pointer; 
							  background-color: var(--btn-color); padding: 0.35em 0.5em 0.35em 1.2em; margin-left: 0; align-items: center; width: fit-content; margin-top: -.5em; right: 2em;position: absolute;}

.filterCleaner				{display: flex;justify-content: end;}

.filterButton span			{ color: #FFF; margin-right:1em; }
.filterContent				{ display: flex; flex-direction: column; position: absolute; top: 7.5em; background-color: transparent; border-top: none;
							  z-index:1; max-height: 0em; transition: max-height .5s ease-out; overflow:hidden;  margin-left:0em; width:calc(100% - 0em); }

.filterShadow				{ box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3); border-radius: 2em; padding: 1em; width:calc(100% - 7em);  margin-left:3em;
							  background-color: #FFF; margin-top: 1em; margin-bottom: 1em; }

.filterBox					{ display: flex; margin: 2em; }
.filterBox:last-child		{ margin-bottom:0; }
.filterBoxOptionen			{ display:flex; }
.filterContent.open			{ max-height: 100em; display:flex;  transition: max-height .5s ease-in; }



.filterTitel				{ text-transform: uppercase; min-width: 7em; display: inline-block; margin-right: 1em; }
.checkboxDiv				{ width: auto; position: relative; display: inline-flex; margin-left: 2em; }

.filterCleanerBtn.reset		{ margin-right:3em; }
.filterCleanerBtn			{ cursor:pointer; display: inline-block; padding: 0.5em; }
.filterCleanerBtn span		{ color:#000; }

.filterCheckbox				{ display: flex;  margin-right: 1em;}

.filterBoxOptionen			{width: calc(100% - 18em); display: grid;grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); gap: 0.5em 0.5em; align-items: center;}

label.filterLabel						{ display: flex; align-items: center;}
[class^=filterBoxOptik]					{ display: inline-block;width: 1.2em;height: 1.2em;padding: 0px; background-color:var(--btn-color); border-radius:100%; cursor: pointer;position: relative;}
[class^=filterBoxOptik][checked]:after  { content: "\2713"; left: 0.35em; position: absolute; margin-top: 0.05em; font-size:0.8em; color:var(--default-color);}

[class^=filterCheckBox]					{ display:none;}
[class^=filterBoxOptik] ~ span			{ margin-left:0.5em; }

.svg.FilterButtonSVG	      {width: 3.5em;height: 3.5em; background-color:var(--btn-bkg-color2);display: flex;align-items: center;justify-content: center; border-radius:2em;}
.svg.FilterButtonSVG svg	  {margin:0.6em;}
.svg.FilterButtonSVG svg path {fill:var(--btn-color)}

/* Menu ------------------------------------------------------- */
#navi						{ display:block!important; width: 100%; }
#navi ul					{ display:flex; align-items: center; margin: 0; padding: 0; justify-content: space-between; }
#navi ul li					{ justify-content: left; align-items: center; display: flex; }
#navi ul li div				{ height:100%; width:100%; display:flex; align-items:center; }



#navi ul li .FeatureBtn				{ display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; padding-left:calc( 2.1em / 1.6); padding-right:calc( 2.1em / 1.6);
									  margin-bottom: -1px; }
#navi .menuitem	.naviText			{ border-bottom: 1px solid transparent; padding-bottom: 0.5em; }
#navi .menuitemact .naviText		{ border-color: var(--default-color)!important; }


#navi ul li:nth-child(2) div a		{ padding-left: 0em;}
#navi ul li:nth-last-child(2) div a	{ padding-right: 0em;}

.menuright,
.menuleft					{ display:none !important;}
					
.menuright:last-child		{ display:none!important; }

#hamburger_menu,
.hamburger_menu_span		{ display:none; }


.menuitem					{  cursor:pointer;}
#navi ul li:nth-child(2)	{ margin-left: 0em;}
.enumeratePoint				{ margin-right:0.2em;}

.menuitemact span,
.menuitemact a,
.menuitem:hover span		{ color: var(--default-color); transition:all 0.4s ease;}


#navi ul li:nth-last-child(2)	{ margin-right:0; }

.icon						{ height:3.4em;}

.nav-toggle					{ display:none!important; }

.hamburgermenu,
.hamburger_menu_span		{ display:none; }

#mfPreis					{ display:none; }

span.naviText {
    text-transform: uppercase;
}


/* Language -------------------------------------------------------------- */
#lang						{ }
#__slctlang					{ border: none;background-color: transparent;-moz-appearance: none;-webkit-appearance: none;appearance: none;cursor: pointer;
							  outline: none; color: #444444;color: rgba(0,0,0,0);text-shadow: 0 0 0 #444444;font-size: 1.8em; width: 3.75em;height: 3.75em;text-align: center;}
.languageBtn				{ display:flex; justify-content: center; align-items: center; width: 100%; height: 100%; top: 0; left: 0; }

#mfLanguage					{ display: flex; justify-content: center; align-items: center; display:none; }
.langli						{  }
#mfLanguage span			{ cursor:default; font-size: 1.8em; margin: 0 0.5em; }

.svg.openlanguage_svg		{ height: 1em; transform: rotate(-90deg); transition:all 0.8s ease; }
.languageBox:hover .svg.openlanguage_svg			{ transform: rotate(-90deg) scaleX(-1); }
.svg.language_svg			{ width: 1.6em; height: 1.6em; }
.svg.language_svg path		{ fill: var(--default-color); }
.selectlanguageBox			{ position: absolute;  }
.langli						{ display:none; margin: 1em 1.6em; }
.langli:first-child			{ margin-top:-9.5em; }
.langli a					{ padding: 0 0.5em; font-size: 1.8em; }

#mfLanguage .langli + .langli { /*border-top: 0.0625rem solid #d5dde6;*/ }

#mfLanguage .langli:hover a	{ transition:all 0.4s ease; }
#language_svg				{ margin-right: 1em; }

.languageBox				{ position: relative; width: 100%; height: 100%; margin-left: 1em; }
.SelectlanguageBox			{ display:block; }



/* Display ---------------------------------------------------------------- */
#DisplayLBImg,
#DisplayBkgImg,
#HandleImg,
#DisplayImg,
#DisplayLBImg2,
#HandleImg2,
#DisplayImg2,
#ShapeImg,
#FillingImg,
#GlasImg,
#LeibungImg					{ position:absolute;}

.sharpenImg					{ image-rendering: pixelated;}

img#GlasImg					{ z-index: 1; }
img#FillingImg				{ z-index: 2; }

img#LeibungImg				{ z-index: 4; }

img#ShapeImg				{ z-index: 3; }
img#HandleImg				{ z-index: 4; }

#DisplayBkgImg				{ width:100%; height:calc(100%); filter: brightness(105%); }


/* Serien ----------------------------------------------------------- */
.seriesMainDiv				{ display: flex; margin-bottom:4.5em; }
.seriesMainDiv:last-child	{ margin-bottom:0em; }

.seriesSubDiv				{ margin-left: 2em; }

.seriesImage				{ width: 29.9em; height: 26.7em; background-size: contain; background-repeat: no-repeat; cursor:pointer; }
.seriesSubDiv				{ position: relative; width: calc(100% - 33em); }

.seriesSmallTilte span,
.seriesTilte span	{ color:var(--default-color); text-transform: uppercase; }
.seriesTilte span	{ font-size:2.2em; }
.seriesBtn			{ position: absolute; bottom: 0; background-color: var(--btn-bkg-color); width: 100%; display:flex; justify-content:center; align-items:center; height: 3em; transition: 0.3s; cursor:pointer; }
.seriesBtn:hover	{ background-color:var(--btn-bkg-colorhover); }
.seriesBtn span		{ color:var(--btn-color); }


/* -------------------------------- Modelauswahl -------------------------------- */
.ModelleSearch								{ display: flex; align-items: center; position:relative; width:calc(100% - 20em);}
.ModelleSearch.SeriePage					{ margin-bottom:2em; }
input#ModelleSearchInput					{ height: 2.5em; font-size: 1.6em; width:100%; margin:0; border:0; background-color:transparent;
											  padding-left: 1.6em; border: 1px solid #e0e0e1; border-radius: 2.3em; }
.button.measure.search						{ display: flex; align-items: center; background-color:var(--btn-color); position: absolute; right: 0.5em;
											  border-radius: 2.3em; color:var(--btn-color2); height: 3.9em; }
.svg.suche path								{ fill: var(--colorpicker4);}

.button.measure.search span	{  }

span.button_search_text						{ display: none;}

.svg.suche,
.svg.suche_aus								{ width:3.9em; height:3.9em; cursor:pointer;}


.svg.suche svg,
.svg.suche_aus svg							{ padding: 0.9em;  height: 2em;}

.svg.suche_aus svg	path,
.svg.suche_aus svg polygon					{ fill:#FFF;}
.svg.suche_aus svg polygon					{ fill:red;}

.Modelle									{ margin-top: 2em; overflow: auto;}


.ModelleError								{ height: 50em;  width: 100%; display: flex; align-items: center; justify-content: center;}

.symbutton.program .Description				{display:none;}
/* Bauform ------------------------------------------------------------------*/
.Bauformen										{ margin-top: 2em;}
.symbutton.shape svg							{ height: 15em; width: auto; }
.symbutton.shape svg path						{ fill:#d5d6d6; transition: all 0.5s ease; }
.symbutton.shape:hover svg path,
.symbutton.shape.act svg path					{ fill:var(--btn-color); }

.symbutton.shape svg #color-abgrenzung path		{ fill:#FFF; }
.symbutton.shape #color-st-links path,
.symbutton.shape #color-st-rechts path,
.symbutton.shape #color-oberlicht path			{ fill:var(--btn-bkg-color); }

.overflowAuto.bauformMargin						{ margin-top: 2em; }

form#measure								    { margin-top: 1em;}

.shapeMeasuretble td							{ padding-bottom:1em; padding-right:1em;}

.measuretable                                  { margin-top: 1em;}
.measuretable input							   { height: 2.3em; font-size: 1.6em; width: 10.6em; margin:0; border:0; background-color:#d5d6d6; padding-left: 1.6em;}
.measuretable td							   { padding-bottom:1em; padding-right:1em;}
.shapeMeasuretble							   { display: flex; justify-content: space-between; margin-right: 2em; }
.shapeMeasuretble .button.measure			   { display:none; }
.shapeMeasuretble .Kapsel .kapselOK			   { margin-right: 1em; margin-left: 2em; }


/* Türmaße -----------------------------------------------------------------*/
.tuermasse							{ flex-direction:column; margin-top:1em; }
.tuermasse .ueberschrift span		{ color: var(--default-color); }
.tuermasse .ueberschrift			{ margin-bottom:0.5em; }
.packageKapsel						{ display: flex; margin-bottom: 2em; }

.Kapsel,
.breiteEingabe						{ align-items: center; border: 1px solid var(--sym-border-color); display: flex; border-radius: 4.5em; height: 4.5em; position: relative; }
.Kapsel input,
.breiteEingabe input				{ border:none!important; border-radius: 0; background-color: transparent; }

.Kapsel .kapselTitel				{ width: auto; margin: 0 2em; border-right: 1px solid var(--sym-border-color); padding-right: 2em; }

.Kapsel input.measure				{ width: 3em; padding-right: 0em; text-align: left; }

.Kapsel .kapselOK					{ width: 3.2em; height: 3.2em; background:var(--default-buttonCheck); border-radius:100%; display: flex; justify-content: center; align-items: center; }
.kapselOK .st0						{ stroke: var(--default-colorW)!important; }
#okIcon								{ height: 65%; display: flex; justify-content: center; align-items: center; }



.kapselTitel						{ width:7em; }
.Kapsel:first-child					{ margin-right: 4em; }


/* Varianten */
.treeProperty.treeClass2			{ width: calc(100% - 4em); }



/* Farbe/Glas -----------------------------------------------------------------*/
.Rallayer									{ display: flex; flex-wrap: wrap; }

.areaSelectDiv								{ display: flex; align-items: center; margin-top:1em; }

.doorColorGroup	.buttonsSelectBox,
.doorareas .buttonsSelectBox				{ transition: all 0.5s ease; height: auto; max-height: 60em; }

.doorColorGroup.clap .buttonsSelectBox,
.doorareas.clap .buttonsSelectBox			{ max-height:0; overflow: hidden; transition: all 0.5s ease; }

/* Farben "Farbgruppe" offen lassen */
.doorColorGroup.clap .buttonsSelectBox		{ max-height:none!important; }
.showhideButton								{ display:none; }
.doorColorGroup								{ margin-top: 0 !important; }


.ContentColorDiv							{ margin-top:2em; overflow: auto; }
.Contentcolor .symbutton.glas				{ width: calc((100% / 4) - 1.3em); }
.ContentDekor								{ margin-top: 1em;}
.RALColorDiv,
.symbuttonContent.Contentcolor #symbuttoninnercontent img	{ width: 5em;  height: 5em; border-radius:5em; }

.tabGlas .symbuttonContent img {
    width: 90%!important;
    height: unset!important;
    border-radius: unset!important;
}


.symbutton.lock .Description span		{ width: 100%; max-width: 7.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.symbutton.color img				{ width:9.3em; height:4em;}

.SearchColorDiv						{ display: flex; align-items: center;}
.SearchColorDiv input				{ margin-left: 0.5em; height:2.3em; background-color:#d5d6d6; border:none; width:calc(26em / 1.6); margin-right: 0; padding-left:0.5em;}

.InputButton						{ text-align:center;}


.treeProperty.treeClass7			{ margin-top: 1em;}

.symbutton.glas.tempColors	.imgBorder		{ border-color:#ff9900;}

/* Select*/
.DoorAreaDiv .SelectButtonDiv	{ position: absolute; top: 0; right: 0; width: calc(30.8em); z-index: 0; background-color: #d5d6d6;}

.selectBox						{ width:62.8%; position:relative; }
.SelectArrow					{ height: 1.5em; width: 2em; position: absolute; right: 1em; top: 1.4em; transform: rotate(90deg); }
.SelectArrow svg path			{ fill: var(--default-color); }
#doorarea,
#doorColorGroup,
#doorglasarea					{ height: 2em; width:100%; border: 1px solid var(--sym-border-color); border-radius: 0.5em;
								  background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

#doorareaButton					{ width: 3.9em; height: 3.9em; background-color: #636363; cursor: pointer; z-index: 0; left: calc(100% - 3.9em); position: relative;}

.buttonsSelectBox				{ display: flex; align-items: baseline; flex-wrap: wrap; }

#searchcolorButton				{ width: 3.9em; height: 3.9em; background-color: #636363;cursor: pointer;}
#searchcolorButton svg,
#doorareaButton svg				{ padding: 0.9em; height: 2em; }
#doorareaButton svg				{ width: 2.1em; transform: rotate(90deg);}
#searchcolorButton svg path,
#doorareaButton svg path		{ fill:#FFF;}


/* Griffe --------------------------------------------------------------*/

#handlelengthSelect					{ position: absolute;  height: 2.5em; width:100%; 
									  background-color: transparent; border:none;-webkit-appearance: none; -moz-appearance: none; appearance: none;}

.ContentHandle .symbutton				{ border: 2px solid #e0e0e1; transition: all 0.5s ease; width: 14em; width: calc((100% / 4) - 2em); transition: all 0.5s ease; }
.ContentHandle .symbutton img			{ width:100%; }
.ContentHandle .symbutton .Description	{ margin-left: 1em; margin-bottom: 0.5em; margin-top: 0.5em; display: flex; flex-wrap: wrap; }
.ContentHandle .symbutton:hover,
.ContentHandle .symbutton.act			{ border: 2px solid var(--default-color); }

.ContentHandle						{ overflow:auto; margin-top: 2em; }

.handlelengthDiv .SelectButtonDiv	{ position: absolute; top: 0; left: 0; width: 100%; z-index: 0; background-color: #d5d6d6;}
.handlelengthDiv					{ position:relative; height: 4em;}
.handlelengthDiv span				{ line-height: 2.4em;}
.Dyn30MainTable						{ margin: 2em 1em 2em 0.7em;}

.Dyn30MainTableImg img				{ height: 15em; width: 12em; display:none; }				/* Grigfflänge hover Bild raus 13.10.22 für Björn*/
.Dyn30MainTableOpton				{ vertical-align: text-top; /*padding-left: 2em;*/}		/* Grigfflänge			  raus 13.10.22 für Björn*/
.Dyn30SubTableButton				{ text-align:right; padding-top: 2em;}

.Dyn30SubTableTitel,
.Dyn30SubTableOptions				{ padding-bottom:2em;}


.handleOptionsDiv table tr.trbordertop {
    display: block;
}

.handleOptionsDiv table tr.trbordertop:nth-child(1n+2) {
    padding-top: 2em;
}


/* Glas ----------------------------------------------------------------*/
.tabGlas {  margin-top: 2em; }


/* Zubehör --------------------------------------------------------------*/
.OPT_input {width:2em; text-align:center;}
.optTreeAddInputDiv		{ margin-left: 1em; }

/* Zusammenfassung -----------------------------------------------------*/
#Zusammenfassung						{ width: 100%; }
#Zusammenfassung table					{ font-size: 1em; }
#Zusammenfassung .abstand td			{ padding-bottom: 1em !important; }
#Zusammenfassung .einruecken td.row1	{ padding-left:2em; font-weight:100!important; }
#Zusammenfassung .einruecken2 td.row1	{ font-style: italic; padding-left: 4em; font-weight: 100!important; }
#Zusammenfassung td						{ text-align: left; vertical-align: top; }
#Zusammenfassung .row1					{ width: 40%; /*background-color: whitesmoke;*/ padding:0.3em; }
#Zusammenfassung .row1 .nummerierung	{ color: var(--default-color); width: 0px; display: none; }
#Zusammenfassung .row1 span				{ padding-left: 10%; }
#Zusammenfassung .red  .row1 span		{ color: var(--default-color);}
#Zusammenfassung .einruecken .row1 span {  }
#Zusammenfassung .row2					{ width: 60%; padding:0.3em; }
#Zusammenfassung .row2 span				{ font-weight: normal; padding-left: 1%; display: flex; }
#Zusammenfassung .row3					{ visibility:collapse; width: 0;padding:0px }
#Zusammenfassung .row3 span				{ visibility:collapse; font-style: italic; padding-left: 0px; }
#Zusammenfassung .row4					{ visibility:collapse; width: 0; padding:0px; }
/*-------------------*/
/* Dyn40 --------------------------------------------------------------*/
.DesignOptionsMainDiv { width: 20em; }
.DesignOptionsListDiv { margin-bottom: 2em;}
.DesignOptionsListDiv li { list-style: none; margin-bottom: 2em; }

/* Upload --------------------------------------------------------------*/
#UploaderDiv .button,
.upl_btnMain .button		{ border: none; position: relative; width: auto; overflow:hidden; background-color:var(--btn-bkg-color);
							  transition: all 0.4s ease; cursor: pointer; display: flex; justify-content: center; align-items: center; min-width: 15em; }

.upl_btnMain .button		{ display:flex; align-items: center; }
.divbutton .slideDescription{ position:absolute; }
.uploadTable				{ text-align: center; margin-top:2em; width: 95%; }

.UploadIcon path			{ fill: var(--default-color); }
.svg.UploadIcon				{ height: 13em; }
.upload_pf .UploadIcon		{ height: 4em; margin-left: 2em; margin-right: 2em; }

.divbutton .button:hover .slideDescription{ right:0; }

.uploadResetTxt2			{ font-size: 1.2em; margin-left: 1em; }
#UploaderDiv .slideDescription			{ bottom:0em; }
.file-upload:hover .slideDescription	{ right:0; }

#mfDisplayUpdate				{ position: absolute; display: block; top: 0; left: 0; width: 100%; }
.validation-summary-valid		{ display: none; }

.svg.resize_svg					{ background: var(--colorpicker1); border-radius: 100%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.svg.resize_svg polyline		{ stroke: #FFF; }
.svg.resize_svg svg				{ height:4em; }


#UploaderDiv,
.upl_btnMain					{ display: flex; justify-content: left; position: relative; flex-direction: column; }
.divbutton						{ display: flex; align-items: center; margin-bottom: 1.5em; }
.file-upload span,
#UploaderDiv .button a			{ color:var(--btn-color); }
.file-upload					{ display: flex; justify-content:center; align-items:center; overflow: hidden; text-align: center; vertical-align: middle; background: transparent;
								  cursor: pointer; width: auto; height: 4em; position:relative; transition: all 0.4s ease; cursor:pointer; min-width: 11em; }

.UploadTxt2					{ font-size: 1.2em; width:25em; margin-left: 1em; }
.file-upload span			{  }
.file-upload input			{ top: 0; left: 0; margin: 0; font-weight: bold; opacity: 0; filter: alpha(opacity=0); position:absolute; margin:0; padding:0; width: 0!important;
							  height: 0; cursor:pointer; }
.button.uploadRotate		{ position: absolute; left:0; }

.button.uploadReset span,
.button.uploadDelete span,
.button.uploadRotate span	{ color:var(--colorpicker3); }

.button.uploadReset:hover,
.button.uploadDelete:hover,
.button.uploadRotate:hover,
#UploaderDiv .button:hover		{ background-color:var(--btn-bkg-colorhover) !important; }

#uplopt_Side				{ margin-left: 1.5em;}
.hochladenText				{ display:none !important;}

#CuteWebUIDescription		{ margin-bottom: 2em;}

#uploaddiv				{ height: 71em; width:111em; position:absolute; background-color: var(--btn-bkg-color); z-index:2; border: 2px solid var(--border-color); }

#uploadposition			{ height: 65.4em;width:calc(100% / 2 - 2em);top:2em;left:90em;position:absolute;}

.DisplayImg canvas		{ background-size: contain; position: relative;}
div.cross				{ margin: 0; color: #DA020C;}
div.cross img			{ margin: -25px 25px 25px -25px; z-index:99; }
div.cross:hover			{ cursor:move; }

#upload_warp + label span		{ padding-left: 0px!important; }
#upload_warp + label span:before{ right: -20px !important; left: unset!important; }
#upload_warp:checked + label span:after { right: -16px!important; left: unset!important; }

#mfPopupUpload							{ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 99; width: 40em; height: 7em; background: #FFF; border:1px solid #014283; }
.popupText								{ margin: 1em; text-align:center; }
#mfPopupUpload span,
#mfPopupUpload a						{ font-size:1.4em; text-align: center; }
#mfPopupUpload .button					{ text-align: center; display: inline-block; width: 50%; }

#FileUpload1	{ width: 100%; height: 100%; display: flex; }
.uploaddiv		{ height: 70em; width: 110em; position: absolute; }
#uploaddiv		{ height: 70em; width: 110em; position: absolute; display: flex; justify-content: center; align-items: center; }
#uploaddiv2		{ display: flex; justify-content: center; align-items: center; width:100%; height:100%; }
/* END Uplaod */




/* mfStepper --------------------------------------------------------------*/
#mfStepper				{ width: 100%; position: absolute; bottom: 0em; height: 8.4em; z-index: 100; border-top:1px solid var(--sym-border-color);
						  background:var(--btn-bkg-color); display: flex; align-items: center;}
#mfNext					{ float: right; right:0; text-align:left; right: 3em; }
#mfPrev					{ float: left; left:0; text-align:right; left: 3em; }


#mfStepper div,
.DesignOptionsDiv .button		{ margin: 0; padding: 0; width: 15em; height: 5em; position: absolute; background-color: var(--footer-color); transition: all 0.4s ease; cursor: pointer;
								  display: flex; justify-content: center; align-items: center; border-radius: 3em; } 
#mfStepper div:hover,
.DesignOptionsDiv .button:hover	{ background-color: var(--footer-color-hover); }

#mfStepper span,
.DesignOptionsDiv .button span	{ color:var(--toolbar-icons); display:block; cursor: pointer; z-index: 999; position:relative; font-size: 2.3em; }

.DesignOptionsDiv .button		{ position: relative !important; }

.buttonHolder					{ width:100%; display:flex; justify-content: center; }

#hideSection,
.hideSection_span		{ display:none!important; }

#hideSection			{ display: block; width: 5em; height: 5em; margin:0; position: absolute; cursor: pointer; opacity: 0; z-index: 999; -webkit-touch-callout: none;
						  top: 50%; margin-left: 68em; font-size:100%!important;  }
#hideSection_svg		{ height: 1.5em; }	
	  

.hideSection_span		{ background-color: var(--btn-bkg-color); width: 3em; height: 3em; z-index: 4; position: absolute; top: 50%; left: 42.5em; transition: transform 0.5s ease; 
						  display: flex; justify-content: center; align-items: center; }
						  
					  
#hideSection:hover ~ .hideSection_span			{}
#hideSection:hover ~ .hideSection_span #hideSection_svg svg path{ fill: var(--default-color); transition: all 0.5s ease;}	
#hideSection:checked ~ #mfSection				{ display:block; position: absolute;  list-style-type: none; right:-2em;
												  -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); }

#hideSection:checked ~ .hideSection_span		{ transform: translate(-42.5em, 0) rotate(-180deg); transition: transform 0.5s ease;}
#hideSection:checked							{ transform: translate(-68.7em, 0); }


/* -------------------------------- radiobutton -------------------------------- */
[type="radio"]:checked,
[type="radio"]:not(:checked)			{ position: absolute; left: -9999px; }

[type="radio"]:checked + a,
[type="radio"]:checked + label span,
[type="radio"]:not(:checked) + a,
[type="radio"]:not(:checked) + label span		{ position: relative; padding-left: 28px; cursor: pointer; line-height: 16px; display: inline-block; }

[type="radio"]:checked + a:before,
[type="radio"]:checked + label span:before,
[type="radio"]:not(:checked) + a:before,
[type="radio"]:not(:checked) + label span:before { content: ''; position: absolute; left: 0; top: -2px; width: 16px; height: 16px; border: 2px solid #e0e0e1; border-radius: 100%; background: #FFF; }

[type="radio"]:checked + a:after,
[type="radio"]:checked + label span:after,
[type="radio"]:not(:checked) + a:after,
[type="radio"]:not(:checked) + label span:after	{ content: ''; width: 10px; height: 10px; background: var(--default-color); position: absolute; top: 3px; left: 5px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }

[type="radio"]:not(:checked) + a:after,
[type="radio"]:not(:checked) + label span:after	{ opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
[type="radio"]:checked + a:after,
[type="radio"]:checked + label span:after		{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
/* ----------------------------------------------------------------------------- */







/* Druck / Print ----------------------------------------------------------- */
@page					{ size: A4; margin: 5mm 20mm 0mm 25mm; }
@media print {

	.page-main,
	.print_pdfTitle		{ width: 100%; position: relative; }
	#Zusammenfassung tbody 		{ -webkit-column-break-inside: avoid; page-break-inside: avoid; page-break-inside: avoid; }

	body				{ font-size:100%!important; display: block !important; background-color: transparent !important; overflow: inherit !important; }

	html, body			{ width: 210mm; height: 297mm; }

	thead				{ display: table-header-group; } 
	tfoot				{ display: table-footer-group; }

	.page-header						{ top: 0; position:fixed; width:210mm; }
	.page-header-space					{ top: 0; position:relative; height: 200px; }

	.page-footer						{ bottom: 0; position:fixed; width: 100%; height: 180px; /*background:rgba(0,22,0,0.3)*/ }
	.page-footer-space					{ bottom: 0; position:relative; height: 180px; /*background:rgba(0,22,0,0.3)*/ }


	span				{ font-size:16px; }

	/* header */
	#prLogoMaxSize						{ height:100px; width: 5cm; position: absolute; right: 0; }
	#prLogo								{ background-position:right; }
	#prLogoDiv							{ display: flex; align-items: center; position: relative; height: 100px; }
	.AnschriftDiv,
	.HaendlerDiv						{ display: flex; flex-direction: column; }
	.WrapperHeader						{ display: flex; justify-content: space-between; margin-top: 70px; }
	.smalltext							{ font-size: 13px; }
	.absatz								{ margin-bottom:15px; }
	.AnschriftDiv						{ margin-left: 40px; }
	.HaendlerDiv						{ margin-right: 20px; }
	.HeaderDiv.DrawingHeader,
	.HeaderDiv.DrawingArtlist			{ display: flex; flex-direction: column; }

	.DrawingHeader .wrapperTitle,
	.DrawingArtlist .wrapperTitle		{ margin-bottom: 25px; margin-top: 30px; }			
	.DrawingHeader .HeaderBlock,
	.DrawingArtlist .HeaderBlock 		{ display:flex; justify-content: space-between; }
	.DrawingHeader .HaendlerDiv,
	.DrawingArtlist .HaendlerDiv 		{ margin-top: -50px; }
	.wrapperTable						{ width: 380px; }


	/* Deckblatt */
	.Titelbilder						{ height: 350px; display: flex; justify-content: space-around; margin-top: 200px; margin-bottom: 150px; }
	.BildInnen img	 					{ visibility: collapse; }
	.BildAussen,
	.Titelbilder img					{ height: 100%; }
	.wrapperTitle span					{ font-weight: bold; font-size: 23px; }
	.wrapperBig							{ font-weight: bold; font-size: 18px; }
	.gesamtkostenDiv					{ border: 2px solid #000; width: 380px; display: flex; justify-content: space-around; padding: 3px; }
	.gesamtkostenText					{ display: flex; flex-direction: column; }
	.wrapperkursiv						{ font-style: italic; font-size: 13px; }
	.wrapperTitle						{ margin-bottom: 25px; }
	.wrapperTable						{ margin-bottom: 40px; }
	.wrapperAbsatz td					{ padding-bottom: 10px; }
	.gesamtkostenPreis					{ display: flex; align-items: center; }
	.wrapperTable td					{ padding-right: 50px; }
	.abstand td							{ padding-bottom: 50px; }


	/* Visualisierung */
	.prDrawing							{ margin-top: 250px; text-align: center; }
	.imgDiv.aussen						{ position:relative; }
	.prDrawing img						{ height: 600px; }
	.prDrawing #prImageInnen			{ padding-top: 250px; }
	.prDrawing #prImageUpload			{ padding-top: 200px; }
	.printmasse							{ display: flex; justify-content: center; }
	.printmasse	#masse					{ position:relative!important; left:auto!important; }


	/* Artikelliste */
	#Zusammenfassung					{ width: 100%; top: 220px; position: relative; margin-bottom: 250px; -webkit-column-break-inside: auto; page-break-inside: auto; page-break-inside: auto; }
	table table							{ width:100%; margin-bottom:0px;  }
	.row1.bezeichnung1					{ width: 40%; padding-left: 3px;}
	.row1.bezeichnung1 span				{ padding-left: 10%; }
	.row2.bezeichnung1.noPriceRow span	{ padding-left: 1%; }
	.prPartTableHeader span				{ font-weight: bold; }

}
/* Druck / Print ENDE ----------------------------------------------------------- */



/*Beamer*/
#beamerimgShape,
#beamerimgFilling,
#beamerimgGlas,
#beamerimgHandle,
#MonitorCanvas {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: contain;
}
#beamerimgGlas{z-index:1;}
#beamerimgFilling{z-index:2;}
#beamerimgShape{z-index:3;}
#beamerimgHandle{z-index:4;}


/* mfZoom ----------------------------------------------- */
#mfZoom { width: 100%; height: 100%; z-index: 999; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); display: flex;
		  justify-content: center; align-items: center; }

.ZoomImgDiv {  height: 90%; position: relative;
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.mfZoomClickDiv	{ cursor:pointer; }
.closeZoom		{ background: transparent; width: 3em; height: 3em; position: absolute; top: -3em; right: -3em; border-radius: 50%; display: flex;
				  justify-content: center; align-items: center; cursor:pointer; border:2px solid var(--default-color);}
.closeZoom .svg { height: 60%; }
.ZoomImg		{ height: 100%; }

.DoorShadow {
    position: absolute; z-index: 0;
	background-image: url(Media/gui/door_shadow.png); background-repeat: no-repeat; background-size: contain; background-position: center; opacity: 0.7;
}
/* mfZoom END ----------------------------------------------- */

/* Ladeanzeige Nr.2 */
.loading-indicator {
  --size: 4em;
  --stroke-width: calc(var(--size) / 6);
  --accent-opacity: .25;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: 100%;
  height: 100%;
}

.loading-indicator::before,
.loading-indicator::after {
  content: '';
  position: absolute;
  inset: 0;
  border-width: var(--stroke-width);
  border-style: solid;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite loading-indicator-animation;
}

.loading-indicator::before {
  border-color: var(--default-color) var(--default-color) var(--default-color) transparent;
  opacity: var(--accent-opacity);
}

.loading-indicator::after {
  border-color: transparent transparent transparent var(--default-color);
}

@keyframes loading-indicator-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
/* Ladeanzeige Nr.2 Ende  */