:root {
	--colorpicker1:		rgba(2, 81, 150, 1);		
	--colorpicker2:		rgba(0, 0, 0, 1);	
	--colorpicker3:		rgba(0, 0, 0, 1);	
	--colorpicker4:		rgba(255, 255, 255, 1);
}

@font-face {
    font-family: "font1";
    src: url("../../Fonts/TheSans_B2_400_.eot");
    src: url("../../Fonts/TheSans_B2_400_.eot?#iefix") format("embedded-opentype"),
    url("../../Fonts/TheSans_B2_400_.woff") format("woff"),
    url("../../Fonts/TheSans_B2_400_.svg#TheSans_B2_400_") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "font2";
    src: url("../../Fonts/TheSans_B2_800_.eot");
    src: url("../../Fonts/TheSans_B2_800_.eot?#iefix") format("embedded-opentype"),
    url("../../Fonts/TheSans_B2_800_.woff") format("woff"),
    url("../../Fonts/TheSans_B2_800_.svg#TheSans_B2_800_") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* 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;}

span, input,
textarea, table,
a, select, ul, svg text				{ font-family: "font1",Verdana,Helvetica,sans-serif; text-decoration: none; font-weight: normal; }

#mfMainContent						{ overflow:hidden; }
span								{cursor: default;}

ul									{ list-style: none }
#DynLayer10div ul					{ list-style: disc; padding: 2em; }
#DynLayer10div ul li				{ margin-left: 2em; }
#DynLayer10div ul li:first-child	{ list-style: none; margin-left: 0em; }
	
:focus,
:active,
a							{ outline: 0; }
input						{ margin: 0; vertical-align: baseline; margin-right: 0.5em; }
h1, h2, h3					{ font-weight: normal; }

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

.button						{ background-color: #E3E3E0; width: auto; height: auto; display: inline-block;}
.button span				{ cursor: pointer; }		
.button a					{ display: inline-block; padding: 0.5em 0.5em;}

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

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

.divsep						{ border-top: 1px solid #E3E3E0;  width: 90%; margin-left: 3.5em; margin-top: 1em; margin-bottom: 1em;}

.btnTabText					{ margin-left: 1.7em; margin-right: 1.7em; }
.FillingColorOptionsContent	{ display: flex; }
.popupTitel					{ color:#000; }
.popupText					{ position: relative; display: flex; flex-direction: column; }
.switchSideText				{ margin-top: 0.5em; display: flex; margin-bottom: 1em; }
.switchSideText a			{ font-weight:bold; margin-left:0.2em; }

.FillingColorOptions,
.FillingColorOptions div		{ margin:0em !Important;}
.FillingColorOptionsContent		{ padding-bottom: 1em;}
#StOutFillingR,
#StInFillingR,
#StOutFillingL,
#StInFillingL				{ display: flex; flex-direction: column; align-items: flex-start; }
#StOutFillingR > span,
#StInFillingR > span,
#StOutFillingL > span,
#StInFillingR > span,
#StInFillingL > span		{ margin-left: 1.2em; font-weight: bold; margin-top: 1em; }
.FillingColorOptionsTitel	{ margin-top: 1em; display: flex; margin-left: 1.2em; }

.closeDynLayer path			{ fill: #000; }

.graytext					{ color:var(--colorpicker1); opacity:0.5; }

.defaultCursor				{ cursor:default!Important;}

.opi img					{ opacity: 0.4;}

.marginB1					{ margin-bottom: 1em; } 
.marginB05					{ /*margin-bottom: 0.5em; margin-top: 0.2em;*/ }
.marginR2                   { margin-right:2em;}
.SelectionTreepart > ul		{ margin-top:1em; }

.standarctrldiv				{ margin-top:1em;}

.sharpenImg					{ image-rendering: pixelated;}

ul.leafID56					{ margin-top: 1em; }

.warenkorbButtonArea		{ width:100%; display: flex; justify-content: center; align-items: center; }
.warenkorbButtonArea .button{ padding:1.5em; }

st							{ font-size:0.6em;} /*st Tag für Text kleiner machen(Druck Netto)*/
.ToolbarBasket svg			{ background: forestgreen; }
.buttonColor				{ background: forestgreen; }
/* Font --------------------------------------------------------- */
span, a, select				{ font-size: 1.6em; }
svg text					{ font-size: 3em; }
span a,
a span, .fancybox			{ font-size: 1em !important; }

.h1							{ font-size: 2em;   }
.h2							{ font-size: 1.8em; }
.h3							{ font-size: 1.5em; }

#mfBannerContent a,
#tool .liContentDiv a		{ font-size:1em !important}

span, a						{ color: var(--colorpicker3); }			
.bold						{ font-weight:bold; }

.accTitel,
.showDetail,
.hideDetail					{ color:var(--colorpicker3)!important; }


/* Grundgerüst ------------------------------------------------------- */
.center						{ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
#mfToolbar					{ position: absolute; right: 0; z-index: 12;  }
.tollbarPos                 { display: flex;justify-content: center;height: calc(100% - 17em);width: 5em; right: 0em;position: inherit;align-items: center; top: 17em;}
#mfDisplay					{ position: relative; top: 17em;  width: 100%; height: calc(100% - 17em); background: #FFF; }

.Modellbezeichnung,
.ModellbezeichnungUpload		{ position: absolute; background: var(--colorpicker1); display: flex; justify-content: center; align-items: center; left: 71em; top: 19em; z-index: 1; }
.Modellbezeichnung span,
.ModellbezeichnungUpload span	{ color:var(--colorpicker4); padding: 0.8em; }
.ModellbezeichnungUpload		{ left: 0;top: 0; }


#mfSection,
#mfOptions					{ position: absolute; top: 17em; width: 68em; height: calc(100% - 20em); left: 0; background-color: rgba(255,255, 255, 1);
							  display: flex; transform: none; transition: transform 0.5s ease; }

#mfOptions					{ top: 22.1em; height: calc(100% - 24.6em); background-color: transparent; }
#optionsLayer				{ height:100%; width:100%; /*display: flex; flex-direction: column;*/ overflow: auto; }
#optionsContent				{ margin-left: 3em; width: 100%; }

#mfMenu						{ position: absolute; top: 12em; width: calc(100% - 10em); height: 5em; background-color:#f3f3f3; display: flex; align-items: center; z-index:10; }
.DisplayImg					{ left:0; top:0; height:100%; }
#DisplayImg, #HandleImg		{ cursor:pointer; }
#mfImprint					{ display:none;}
#mfTop						{ height: 12em; z-index: 1; background-color: #FFF; width: 100%; position: absolute; }

#mfBanner					{ margin-left: 4em; display: flex; align-items: center; height: 100%; }
.mfLogo.defaultlogo			{ background-image:url(Custom/Groke/logo.jpg); width: 7.6em; height:8.7em; background-repeat:no-repeat; background-size: contain; }
/*#mfLogo img					{ max-width: 50em; max-height: 9em; }*/
#mfLogo img {
	max-width: 40em; /* Maximale Breite des Bildes (anpassen) */
	max-height: 8.5em; /* 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 */
}


#appFrameDsp				{ height: 100%; width: 100%;}
#mfRefIDSlct				{ display: flex; margin-left: 4em; margin-top: 2em; flex-wrap: wrap;}
#mfRefIDSlct span			{ margin-right:1em;}


#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: 99;}
#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: 1em; padding-bottom:1em; display: block;padding-right: 0.5em;}
.MainTitles.secondTitles	{ padding-top: 2em; padding-bottom:0em; }
.MainTitles.expraMarginTop	{ padding-top: 2em; } 

.MainTitles.secondTitles2	{ padding-top: 1em; padding-bottom:0em;}

.symbuttonContent			{ display: flex; justify-content: left; flex-wrap: wrap; }


.symbutton					{ cursor:pointer;}

.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; }

#sendnewpwd					{ width:51em;}
#sendnewpwd	button			{ margin-left: calc(100% / 2);}

.btnEK						{ color:Red;}

#plusminus_svg				{ width: 1.5em; height: 1.5em; }
#plusminus_svg #Minus,
#plusminus_svg #Plus		{ stroke: var(--colorpicker1); }

.treepartsTitles.open #plusminus_svg #Plus,
.openBox #plusminus_svg #Plus,
.Slider.open #plusminus_svg #Plus	{ display:none; }

/* DynLayer---------------------------------------------------------------------------*/
.DynLayer					{ background-color:#fff; justify-content: center; align-items: center; display:none; position:absolute;}
.DynLayerHeader				{ background-color: var(--colorpicker1) !important; display: flex; justify-content: space-between; margin-bottom: 1em;}
.DynLayerHeader span,
.DynLayerHeader a			{ margin: 0.2em 0.5em 0.2em 0.5em; color:var(--colorpicker4);}

.DynLayerContent			{ background-color:#FFF; }
.closeDynLayer				{ width: 2em; height: 2em; margin-right: 1em; padding: 1em; cursor: pointer; }

div#DynLayer30div			{ position: absolute; border: solid 1px #d8d8d8;}

#DynLayer89div				{ top: 57.4em; height: 20.1em; left: 35em; width: 30em; background: rgba(150, 150, 150, 0.70 ); position: absolute;}
#DynLayer89divContent		{ display: flex; justify-content: center; height: 100%; align-items: center; }
#DynLayer89div	input       { width:60%; margin-left: 1em;}
#DynLayer89div .ErrLoad		{ margin-left: 2.7em; }

.DynLayerInnerContent		{ margin:1em;}

.handleOptionsMainDiv			{ display: flex;}
.handleOptionsImg img			{ max-width: 10em; max-height: 50em;}

.handleOptionsDiv				{ margin-left: 2em; margin-right: 1em; max-width: 50em;}
.handleOptionsDiv table			{ margin-top: 2em;}

span.handleNameSpan			    {display: block; width: 18em;}

.handleOptionsDiv .message		{ margin-bottom: 1em;}
.handleOptionsDiv .buttonRight  {display:flex; justify-content: flex-end;}
.handleOptionsDiv .button		{ margin-top: 1em;}
.handleOptionsDiv .button a		{}

#DynLayer90divHeader.DynLayerHeader	{ background-color: #FFF!important; display: flex; justify-content: space-between; margin-bottom: 1em; height:6em; display:flex; align-items:center; }
#DynLayer90divHeader.DynLayerHeader .caption	{ margin-left: 1.2em; color: #000; text-transform:uppercase; font-size: 3em; margin-top: 0.5em; }


.closeMoveDynlayer			{ position: absolute; width: 3em; height: 3em; top: 1em; right: 1em; cursor: pointer; padding: 1em; }

#DynLayer90div .DynLayerContent							{ width: 50em;  max-width: 60em; height: 96em;}
#DynLayer90div .DynLayerContent  .DynLayerInnerContent	{ margin:4em;}
#DynLayer90div .DynLayerInnerContent					{ overflow: auto; height: calc(100% - 31em); }

#DynLayer90div				{ background-color: transparent; justify-content: center; align-items: center; display: none; position: absolute; width: 50em; right: -60em; top: 17em; height:auto; }

span.refNumber				{ display: block; margin-top: 0.5em;  margin-bottom: 0.5em; font-weight: bold;  font-size: 4em; }
.refCopyButton,
.VorgangButton				{ background-color: var(--colorpicker1);  width: 25em; display: flex; justify-content: center; align-items: center; height: 3em; margin-bottom:2em; cursor:pointer;}
.SaveDataNameButton			{ width: fit-content; }
.refCopyButton	span,
.VorgangButton span		    { color:#fff; cursor:pointer; margin-left: 1em; margin-right: 1em;}

.VorgangButton			    { margin-top: 0.5em; }

.printRadioDiv,
.zipRadioDiv				{ margin-top: 1em; display: flex; flex-direction: column; margin-bottom: 1em; }


/* mfRequest  ------------------------------------------------------------------------ */
#mfRequest,
#mfSupport					{ height: calc(100% - 17em); width:40em; background-color:#FFF; position: absolute; top: 17em; right: -40em; z-index: 12;
							-webkit-box-shadow: -5px 0px 45px -17px rgba(0,0,0,0.75);
							-moz-box-shadow: -5px 0px 45px -17px rgba(0,0,0,0.75);
							box-shadow: -5px 0px 45px -17px rgba(0,0,0,0.75); overflow:auto; }
#mfSupport					{ width:55em; z-index: 101; }

.mailDiv					{ margin-left: 3em; width: calc(100% - 5em); margin-top: 2em; margin-bottom: 2em; }

.mailRed					{ color:Red;}
.mailGreen					{ color:green;}
.mailMessage				{ width: calc(100% - 1em); height: 8em; resize:none; margin-top: 1em; margin-bottom:1em; }
.anfrageTitle				{ text-transform: uppercase; font-size: 3em; margin-top: 1em; display: flex; margin-left: 1em; }
.inputmailDiv				{ margin-bottom: 0.5em; display: flex; align-items: center; }
.inputmailDiv input			{ width: 100%; height: 2em; }

.closeAnfrage				{ width: 3em; height: 3em; position: absolute; top: 3.3em; right: 3em; cursor: pointer; }
#mfRequest .closeDynLayer,
#DynLayer90div .closeDynLayer { width: 3em; height: 3em; position: absolute; top: 1em; right: 0em; cursor: pointer; }

#__Who						{ width: 1em; }
.__PrivacyDiv				{ display:flex; align-items: baseline; }
#email_subject				{ width: 100%; }
#__slctemail_subject		{ width: calc(100% - 0.5em); border: 1px solid #8f8f9d; height: 2em; background-color: #FFF; }

/* Support */
.supportDiv					{ margin-top: 2em; margin-left: 3em; }
.supportItem				{ display: flex; }
.supportQuest				{ margin-bottom: 1em; display: flex; }
.supportItem				{ margin-bottom: 3em; cursor: pointer; }
.supportItem span			{ cursor:pointer; }
.supportTitle				{ font-weight: bold; margin-bottom: .5em; }
.supportTextArea			{ display: flex; flex-direction: column; width:calc(100% - 9em); }
.supportImg					{ background: var(--colorpicker1); width: 7em; height: 7em; border-radius: 100%; margin-right: 2em; }
.supportImg .svg			{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.supportImg svg				{ width: 90%; height: 90%; }
.SupportTitleinput			{ display: flex; flex-direction: column; }
.inputtile					{ font-weight:bold; margin-bottom: 0.5em; }
#support_input_title		{ border: 2px solid #d9d9d9; height: 3em; margin-bottom: 2em; width: calc(100% - 3em); }
#supportText				{ margin-bottom: 2em; }
.quillArea					{ width: calc(100% - 3em); }
.ql-toolbar.ql-snow			{ border: 2px solid #d9d9d9!important; white-space: nowrap; }
/*.ql-editor.ql-blank			{ border-left: 2px solid #d9d9d9!important; border-right: 2px solid #d9d9d9!important; border-bottom: 2px solid #d9d9d9!important; }*/
.ql-container.ql-snow		{ border:2px solid #d9d9d9!important; border-top: none !important; }
.ql-editor,
#supportText 				{ height: 17em; }
.supportDiv #CuteWebUIDescription,
.supportDiv .UploadDescription{ display:none; }
.sendSupport				{ background-color: var(--colorpicker1);  height: 5em; width: calc(100% - 3em); display: flex; justify-content: center; align-items: center; cursor:pointer; }
.sendSupport span			{ color: var(--colorpicker4); }
#mfSupport .uploadButtonErsatz { background: transparent; color: var(--colorpicker3); width: calc(100% - 2.5em); border: 2px solid #d9d9d9; margin-bottom: 2em; }
#mfSupport .file-upload		{ margin-top: -2em; }
#mfSupport #progressbar		{ margin-bottom: 2em; }
.ql-snow .ql-picker.ql-header .ql-picker-item::before { font-size:0.5em!important; }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { font-size: 0.6em!important; }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { font-size: 0.7em!important; }
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { font-size: 0.8em!important; }
.ql-snow .ql-picker.ql-header { width: 130px!important; }




/* 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: var(--colorpicker1); 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(--colorpicker1);}
.closeZoom .svg { height: 60%; }
.closeZoom .svg svg{ margin:0 !important; }
.closeZoom path{ fill:#fff; }
.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(--colorpicker1) var(--colorpicker1) var(--colorpicker1) transparent;
  opacity: var(--accent-opacity);
}

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

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

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


/* Tabs------------------------------------------------------------------------------ */
.tabBaseClass				{ height:5em; display: flex; border-bottom: 0.2em dotted #E3E3E0; }
.tabContent					{ margin-left:3em; height:calc(100% - 5em); overflow:auto; }
#mfSectionContent			{ width:100%; height:100%; display: flex; flex-direction: column; }
#HideContent,
.SectionMainDiv				{ width:100%; height:100%; display: flex; flex-direction: column;}
.tabClass					{ display:flex; align-items: center; margin-left:3em; }
.tabClass span				{  }
.HinwesText1				{ font-weight: bold; margin: 0.5em 0; }
.HinwesText2				{ margin: 0em 1.5em 0em 0em; }

.tabClass  span a					{ border-bottom:1px solid transparent; padding-bottom: 0.2em; transition: all 0.5s; }
.tabClass:hover span a,
.tabClass.tabClassActive  span a	{ border-color:var(--colorpicker1); }
.tabClass.tabClassActive  span a	{ font-weight:bold; }


/* Sonstiges ------------------------------------------------------- */
#ButtonCreator, 
#ButtonTestreferenzErstellen,
#extDisplay, #ButtonCatalog { position: fixed; right: 11em; top: 12.7em; height: 3.5em; width: 3.5em; text-align: center; cursor:pointer;}

#ButtonCreator				{ right:13em; }
#ButtonCatalog				{ right:17em; }

#ButtonCatalog img,
#ButtonTestreferenzErstellen img,
#ButtonCreator img			{ height:100%; }

#ButtonCatalog				{ position: fixed; right: 15em; text-align: center; cursor: pointer;  }

#ButtonTestreferenzErstellen { position: fixed; right: 27em; text-align: center; cursor: pointer;  }

#extDisplay					{ top: 2.5em;background-color: green; display:none; }

#NoOption					{ display: block; padding: 8em; }
.CatalogSwitch				{ display:flex; margin-bottom:1em }
.slash						{ margin: 0 0.5em; }
.clickSpan					{ cursor: pointer; }
.modelswitchStr				{ margin-right:1em; }

.leafID4748 .SelectionTreepart	{ display: flex; }
.TreePartsdropdown				{ display: flex; margin-bottom: 1em; }

.leafID49 input,
.leafID50 input,
.leafID51 input,
.leafID52 input				{ width: 2em; }

.leafID49 .PartDescription,
.leafID50 .PartDescription,
.leafID51 .PartDescription,
.leafID52 .PartDescription	{ margin-left:1em; }

.leafID49 .marginB1,
.leafID50 .marginB1,
.leafID51 .marginB1,
.leafID52 .marginB1			{ margin-bottom: 0.3em; }

div#DynLayer96divContent    { max-width: 40em;}

/*Währung*/
.changePriceArt .svg,
.changePriceArt .svg svg{width:100%; height:100%;}
.changePriceArt.EUR svg .currency.EUR,
.changePriceArt.USD svg .currency.USD,
.changePriceArt.GBP svg .currency.GBP,
 .changePriceArt.CHF svg .currency.CHF,
.changePriceArt.INR svg .currency.INR,
.changePriceArt.JPY svg .currency.JPY {display:block!important;}
.currency text {fill:#fff;}
/* Speichern Name*/
.ConfigartionSave					{ margin-top: 2em; margin-bottom: 1em; }
input#SaveDataName					{ width: 18em !important; }
.button.btnYes.ConfigartionSaveOk	{ width: 5em; display: flex; align-items: center; justify-content: center; cursor:pointer; }
.SaveDataNameSuccess				{ top: 0.1em; position: relative; }

/*RC2*/
div#mfRC2 {
    position: absolute;
    width: 15em;
    left: 71em;
    top: 25em;
	z-index: 4;
}
/*div#mfRC2 .svg g#dinText,*/
div#mfRC2 .svg g#rcSubtext { display: none;}

div#showExcludeDetials {

    border-radius: 0.5em 0 0 0.5em;
    background-color:#878787;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
}
#showExcludeDetials:hover{background-color:var(--colorpicker1);}
#showExcludeDetials a {color:#fff;}
#RC2ButtonDiv { display: flex;  width: 20em;  align-items: center;  margin-top: 1em;}
#info_svg svg { height: 2em; margin-left: 0.5em;}

.pointer { cursor:pointer;}
div#rc2Excludes {
    width: 35em;
    background-color: #fff;
    top: -3em;
    position: relative;
}
div#rc2ExcludesTitel span {
    margin-left: 0.5em;
    margin-right: 0.5em;
}
div#rc2ExcludesTitel {
    background-color: var(--colorpicker1);
    display: flex;
    justify-content: space-between;
}
#rc2ExcludesTitel span {color:#FFF;}
div#rc2ExcludesInfo,
div#rc2ExclduesDetails {
    margin: 1em;
}
div#rc2ExcludesInfo span,
.fonsize12 {
    font-size: 1.2em;
}
table#rc2ExclduesDetailsTables {
    width: 100%;
}
table#rc2ExclduesDetailsTables td{
   padding-bottom:1em; padding-right: 1em;
}
table#rc2ExclduesDetailsTables span {
    font-size: 1.2em;
    font-weight: bold;
}

/* Menu ------------------------------------------------------- */
#mfMenuContent				{  }
#navi						{ display:block!important; }
#navi ul					{ display:flex; margin: 0; padding: 0; }
#navi ul li					{ justify-content: left; align-items: center; display: flex; }
#navi ul li div				{ height:100%; width:100%; }
#navi ul li div a			{ align-items: center; height: 100%; display: flex; padding:0 1.8em; }
.menuleft					{ display:none;}
.menuright					{ width:1px; height:5em; background-color:#d8d8d8; }
.menuright:last-child		{ display:none!important; }
#navi ul li span a			{ font-size:1.3em;}
.enumerate					{ margin-right:0.2em;}
.menuitem					{  }
	
.menuitemact				{ background-color:var(--colorpicker1);}
.menuitemact span,
.menuitemact a				{ color:var(--colorpicker4);}


/* Toolbar */
#mfToolbar					{ right: -15.5em; }
#mfToolbar .text			{ display:none; }

#tool ul					{ display:flex; flex-direction:column; margin: 0; padding: 0; }
#tool li					{ height: 4em; width: 22.5em; margin-bottom:2em; }
#tool .menuright			{ display:none; }
.liContentDiv				{ width:100%; height:100%; display: flex; }
.icon						{ height:2.5em;}

#tool li					{ background-color:#fff; transition: all 0.3s ease; }
#tool img					{ width: 7em; height: 4em; }
#tool .menuitem	a			{ display:flex; justify-content:flex-start; align-items:center; position:relative; height: 100%; width:100%; }
#tool span					{ color: var(--colorpicker3); font-style:italic; padding-left: 1em; font-size: 1.4em !important; cursor: pointer; }
#tool .menuitem:hover		{ transform: translate(calc(-100% + 7.5em), 0); }

.btnSupport svg				{ margin-top: 0.5em; background: var(--colorpicker1); }

#tool svg					{ width: 7em; height: 4em; }
#tool svg #HG rect			{ fill:var(--colorpicker1); }
#tool svg #Symbol path		{ fill:var(--colorpicker4); }

svg#visoOff, svg#visoOn     { fill: #fff; background-color: var(--colorpicker1);}
svg#basket					{background-color:green;}

.icon						{ height:3.4em;}
.nav-toggle					{ display:none!important; }

#hamburger_menu,
.hamburger_menu_span		{ display:none; }

.btnBeamer #sym-color path	{ fill:transparent; }
.btnBeamer #sym-color g path,
.btnBeamer #sym-color g polygon{ fill: var(--colorpicker4); }


#loginDataDiv				{ bottom: 3em; position: absolute; right: 2em; z-index: 1; }

#mfPreis					{ background-color: #ffffff; height: 12em; position: absolute; right: 0; top: 0em; width: 24em; z-index: 11; display:table; text-align:right; }
#mfPreis .PriceDiv 			{ vertical-align:middle; display:table-cell; padding-right:2.5em; }
#mfPreis.noPrice			{ border:none; }
#mfPreis .PriceDiv 			{ background-color: var(--colorpicker1); display:flex; flex-direction: column; height: 12em; justify-content: center; position: relative; }
#mfPreis .PriceDiv.textRed	{ background-color: #FF0000; }
#mfPreis .summe				{ color:var(--colorpicker4); font-size: 3.7em !important; white-space: nowrap; font-weight: bold; }
#mfPreis .summeText			{ color:var(--colorpicker4); font-size: 1.3em !important; }
.changePriceArt				{ background:red; width:3.9em; height:4.7em; position:absolute; bottom:0; left:0; background-repeat:no-repeat; font-size: 1em; cursor:pointer; background-size: contain; }
.changePriceArt				{ /*background-image: url(Media/Icons/new/changePreis2.png);*/ }
.norm + .changePriceArt	{ /*background-image: url(Media/Icons/new/changePreis1.png);*/ background: var(--colorpicker1); }
#mfPreis svg #HG rect		{ fill:var(--colorpicker1) }

.rabattDiv					{ position: absolute; bottom: 1.5em; width: auto; right: 30em; display: flex; }
.rabattButton				{ order: 2; margin-left: 1em; cursor:pointer; }
.rabattDiv path				{ fill: var(--colorpicker1); }
.rabattDiv span				{ color: var(--colorpicker1); white-space:nowrap; }
.rabattDiv .rabattHover		{ display:none; }
.rabattDiv .rabattHover.show{ display: flex; position: absolute; width: 26em; height: 4em; text-wrap: auto; text-align: left;
							  border: 1px solid var(--colorpicker1); padding: 1em 1em 2em 1em; left: -1em; top: 2em; background: #FFF; }

#ImpProc					{ position: absolute; display: flex; right: 0; z-index: 12; bottom:1em; }
#ImpProc a					{ font-weight: bold; }
#ImpProc div				{ margin-right:2em; }

/* 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.4em; 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					{ position: relative; height: 5em; display: flex; justify-content: center; align-items: center; width: 10em; z-index:11;
							  background-color:#f3f3f3; padding-left:3em; }

.langli						{ height: 6em; text-align: center; line-height: 6.1em; width: 10em; }
#mfLanguage span			{ cursor:default; font-size: 1.4em;}

.langli						{ display:none; background-color:#fff; border:0.0625em solid #d5dde6;border-bottom: none; cursor:pointer; }
.langli:first-child			{  }
.langli a					{ padding: 0 0.5em; }

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

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

.languageBox				{ position: relative; width: 100%; height: 100%; }
#language_svg path			{ fill: var(--colorpicker1); }
.SelectlanguageBox			{ display:flex; }

.ToolbarBox					{ position: fixed; top: 12em; right:3em; display: flex; }
.SuportArea					{ width: 7em; height: 7em; margin-top: 0em; cursor:pointer; margin-right: -2em; }
.SuportArea svg				{ width:100%; height:100%; }
.SuportArea svg path		{ fill: var(--colorpicker1); }

/* Display ---------------------------------------------------------------- */
#DisplayLBImg				{ display:none;}
#DisplayBkgImg,
#HandleImg,
#DisplayImg,
#DisplayLBImg2,
#HandleImg2,
#DisplayImg2				{ position:absolute;}

#DisplayBkgImg				{ width: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;
							}

#HandleImg,
#DisplayImg,
#HandleImg2,
#DisplayImg2				{ }

.ViewDivUpload{ display:none; }
#ViewDiv {
	position: absolute;
	top: 19.4em;
	overflow: hidden;
	right: 9em;
}

#ViewDiv .slideDescription {
    bottom: 0em;
    height: 4.1em;
    position: absolute;
}

#ViewDiv a {
    padding: 0 1.5em;
    position: relative;
    height: calc(4.1em / 1.8);
    font-size: 1.8em;
    display: block;
    display: flex;
    align-items: center;
}

#ViewButtonArea {
    position: absolute;
    display: flex;
}


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

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

img#LeibungImg				{ z-index: 4; }

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

img#GlasImg,
img#ShapeImg,
img#FillingImg,
img#HandleImg,
img#LeibungImg				{ }

#DisplayBkgImg				{ width:100%; height:calc(100%); filter: brightness(105%); visibility: hidden; }
input#pwd					{ padding-right: 3em; width: calc(100% - 6.8em); }
.showPWD					{ position: absolute; right: 5.5em; top: 0.5em; cursor:pointer; width: 2.5em; height: 2.5em; }
.ModellSearch				{ display:none; }

/* Series ---------------------------------------------------------------- */
.seriesMainDiv				{ display: flex; justify-content: left; flex-wrap: wrap; }
.seriesMainTitle			{ padding-left:3.5em; padding-top: 1em; display: block;}
.seriesSubDiv				{ margin-right: 1em; width: 30em; margin-top: 2em; cursor:pointer;}
.seriesImageDiv				{ height: 21em; width: auto; background-size: contain; background-repeat: no-repeat; }
.seriesTitleDiv				{ background-color:var(--colorpicker1); height:3em; display: flex; }
.seriesTitleDiv	span		{ color:var(--colorpicker4); display: flex; align-items: center; padding-left: 1em;}

.ErrLoad					{ margin-top: 1em; }
.ErrLoad span				{ color:Red;}

.ModelleType 				{ margin-top: 1em;}

/* Modell ---------------------------------------------------------------- */
.symbutton.program			{ margin-right: 1.5em; margin-bottom: 1.5em; border: 1px solid transparent}
.symbutton.program.newp #symbuttoninnercontent {position:relative;}
.symbutton.program.act,
.symbutton.program:hover	{ border: 1px solid var(--colorpicker1);}
.symbutton.program img		{ margin: 0.5em;}
.symbutton.program.newp #symbuttoninnercontent::after{content:"";background-image: url(Media/Sym/other/neu_stoerer.svg); position: absolute; top: 1em;
													right: 1em;  width: 3em; height: 3em; background-repeat: no-repeat; background-size: contain; }


.symbutton.profil,
.symbutton.variant			{ margin-right: 1em; margin-bottom: 1em; width:28em; border:1px solid transparent; display: flex;justify-content: center; flex-wrap: wrap; opacity:0.5;}
.symbutton.profil.act,
.symbutton.variant.act		{ border: 1px solid var(--colorpicker1); opacity:100;}
.symbutton.profil img,
.symbutton.variant img		{ margin-top: 0.5em; width:26em; margin-left: 0.5em; }
.Description.profil,
.Description.variant		{ margin-top: 1em; width: 26em; margin-left: 1em; }

.symbutton.profil:hover,
.symbutton.variant:hover	{ border: 1px solid var(--colorpicker1);opacity:100;}

.ModelleSearch				{ display:flex; border: 2px solid var(--colorpicker1); position: relative; height:4.2em; justify-content: space-between; margin: 1em 3em 3em 0; }
.ModelleSearch.refload		{ margin: 1em 3em 1em 0; }
.SearchBtn					{ height:4.2em; background-color:var(--colorpicker1); color:#FFF; display: flex; justify-content: center; align-items: center; padding: 0 2em; }
.SearchBtn span				{ color:var(--colorpicker4); font-size: 2.2em; }
#ModelleSearchInput,
#refInput					{ border: none; width: 100%; }


.CategoryTitle				{ border-left: 0.7em solid var(--colorpicker1); width: calc(100% - 3em); display: flex; position: relative; margin-bottom: 1em; cursor:pointer; margin-top: 0;
							  height: 5.5em; align-content: center; flex-wrap: wrap; background:#f3f3f3; }
.CategoryBox .CategoryTitle { justify-content: space-between; }

.CategoryTitle span			{ margin-left: 0.5em; }
.closeBox + .CategoryModelle{ display:none; }

.SliderTextDiv				{ margin: -1em 0em 2em 0em; }

.symbutton .title			{ display: none; }
.program .title				{ background-color: var(--colorpicker1); display:flex; justify-content: center; align-items: center; height: 3em; }
.program .title span		{ color:var(--colorpicker4); font-size: 2em; }

.SelectionTreepart label	{ position:relative; display:flex; width: fit-content; }
.labelBox					{ position: relative; width: fit-content; }
.treeClickerPopup			{ display: none; }
.treeClickerDescription		{ cursor: help; position: absolute; right: -3em; top: -.2em; }
.treeClickerDescription .svg path{ fill: var(--colorpicker1); }

/*.treeClickerDescription:hover .treeClickerPopup{ display:flex; background:#FFF; border:1px solid var(--colorpicker1);
												 padding: 1em; z-index: 100; flex-direction: column; margin-top: -2em; margin-left: 3em; }*/

.treeClickerDescriptionPic	{ height: 10em; }
.treeClickerDescriptionPic img { height: 100%; }

.treeClickerTitle span		{ font-weight: bold; }
.treeClickerTitle			{ margin-bottom: 1em; }
.treeClickerPopup .treeClickerDescription { margin-bottom: 1em; }

/* mfPartPopup */
#mfPartPopup				{ position: absolute; top: 33em; left: 71em; border: 1px solid var(--colorpicker1); z-index: 9; }
.PartPopupContent			{ display: flex; flex-direction: column; margin: 2em; max-height: calc(100% - 30em); max-width: 30em; }
.PartPopupZusatzInfo		{  }
.ScrollContent				{ overflow:auto; max-height: 46em;}
.PartPopupZusatzInfo		{ text-decoration: underline; }
span.PartPopupTitle			{ font-weight: bold; }
.PartPopupImg				{ width: 25em; height: 25em; overflow: hidden; margin: 2em 0; }
.PartPopupImg img			{ max-width: 100%; max-height: 100%; display: block; object-fit: contain; }
.PartPopupClose				{ background: var(--colorpicker1); width: fit-content; display: flex; justify-content: center; align-items: center; cursor:pointer; }
.PartPopupClose span		{ color:var(--colorpicker4); padding: .5em 1em; cursor:pointer; }
.ButtonArea					{ display: flex; justify-content: end; margin-top: 2em; }


/* Bauform ------------------------------------------------------------------*/
.symbutton.shape			{ /*width:20em; height:21.2em;*/}
.symbutton.shape.act img,
.symbutton.shape img:hover	{ opacity:100; border: 1px solid var(--colorpicker1);}
.symbutton.shape img		{ opacity:0.5; border: 1px solid transparent; margin-right: 1em; margin-bottom: 1em;}


.symbutton.din				{ margin-right: 1em; margin-bottom: 1em; width:30em; border:1px solid transparent; display: flex;justify-content: center; flex-wrap: wrap; opacity:0.5;}
.symbutton.din.act			{ border: 1px solid var(--colorpicker1); opacity:100;}
.symbutton.din img			{ margin-top: 0.5em; }
.Description.din			{ margin-top: 1em; }

.symbutton.din:hover		{ border: 1px solid var(--colorpicker1);opacity:100;}
/* Türmaße -----------------------------------------------------------------*/
.measuretable				{ display:block; }
.measuretable td			{ padding-right: 2em; padding-bottom: 1em; }
.measuretable input			{ width:5em; text-align: right; }
.measuretablePadding	    { padding-left:1.7em;}
.measuretablePadding2	    { padding-left:4em;}


/* Farbe/Glas -----------------------------------------------------------------*/
.symbutton.colorside,
.symbutton.glasside								{ margin-right: 5em; }

.symbutton.colorside img,
.symbutton.glasside img							{ border:1px solid var(--colorpicker1);}

.RALcolor,
.symbutton.Glas,
.symbutton.dekor								{ width: 7.5em; height: 7.5em; margin: 0 1.5em 1.5em 0; border: 1px solid transparent; }
	
.RALcolor										{ margin: 0.5em }

.symbutton.Glas,
.symbutton.dekor								{ width:13.5em; height: inherit;}

.raldiv											{ display: flex; flex-wrap: wrap; overflow: auto; margin-left: -0.5em;}
.symbutton.color.act,
.symbutton.color:hover,
.symbutton.dekor.act,
.symbutton.dekor:hover,
.symbutton.Glas.act,
.symbutton.Glas:hover							{ border:1px solid var(--colorpicker1);} 

.symbutton.RALcolor #symbuttoninnercontent		{ display: flex;justify-content: center;flex-wrap: wrap;}
.symbutton.RALcolor #symbuttoninnercontent img	{ width:100%; }

.symbutton.Glas #symbuttoninnercontent img		{ margin-top:0.5em; width:100%; }

.Description.color100,
.symbutton.glasside	.Description,
.symbutton.dekor	.Description				{ text-align: center; }

.Description.colorDekore,
.Description.colorExclusiv,
.Description.color,
.color .Description								{display:none;}

.colorInTxTDiv,
.colorInBTxTDiv									{ margin-left: 25.5em; position: absolute;}

.colorOutTxTDiv,
.colorOutBTxTDiv								{ margin-left: 7.5em; position: absolute;}

.colorInTxTDiv,				
.colorOutTxTDiv									{ margin-top: 13em; }

#querfuniert span:before	{ display:none;}
div#querfuniert				{ display: flex;align-items: baseline;margin-left: 2.6em;}

.marginBT1					{ margin:2em 0 1em 0;}
.marginB1					{ margin:0em 0 1em 0;}
.PartBox li.marginB1		{ list-style: none; }
.PartClassDescrEx			{ margin-bottom: .5em; }
.PartBox					{ margin-bottom: 2em; }
.acc2Div {
	margin-bottom: 1em;
    position: relative;
    height: 5em;
    display: flex;
    align-items: center;
}

.Slider {
    background-color: #f3f3f3;
	border-left:0.7em solid var(--colorpicker1);
    width: calc(100% - 3em); height: 5em;
    overflow: hidden;
}

.Slider .slideDescription {
    bottom: 0em;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.acc2Div .slideDescription {
    cursor: auto;
}

.acc3SubDiv {
    display: flex;
    align-items: center;
    position: absolute;
    right: 2em;
    cursor: pointer;
}

div#accOpenClose {
    height: 2em;
    width: 2em;
	position: absolute;
    left: 60.5em;
}
.accTitel {
    margin-left: 1em; cursor: pointer; color: #FFF;
    z-index: 2;
}
.acc3SubDiv span {color:#FFF;}
div#trend,
div#ral {
    margin-bottom: 2em;
}
div#ral {
    margin-top: 2em;
}

.acc2Div.open #accOpenClose {
    transform: rotate(180deg);
}
#accOpenClose {
    width: 2em;
    height: 2em;
    margin-left: 1em;
}
#accOpenClose #bg-sym-color circle {
    fill: transparent;
}
.open .showDetail, .accDetailDiv, .hideDetail {
    display: none;
}
.open .hideDetail {
    display: block;
}
.open + .accDetailDiv, .open + ul .accDetailDiv {
    display: block !important; margin-bottom: 2em;
}

.GlasaufbauImg {
    margin-right: 5em;
}
.GlasaufbauImg img {
    width: 35em;
}
.GlasaufbauMain		{ display: flex; margin-bottom: 2em; margin-right: 1em; flex-wrap:wrap;}

.GlasaufbauTxt span:first-child {
    font-weight: bold;
}
.GlasaufbauTxt span {
    white-space:nowrap;
}

div#GlasOptionSL2Innen,
div#GlasOptionSR2Innen,
div#GlasOptionO2Innen,
div#GlasOptionSL3,
div#GlasOptionSR3,
div#GlasOptionO3 {
    margin: 0px;
}
div#GlasOptionSL2Innen span:first-child,
div#GlasOptionSR2Innen span:first-child,
div#GlasOptionO2Innen span:first-child,
div#GlasOptionSL3 span:first-child,
div#GlasOptionSR3 span:first-child,
div#GlasOptionO3 span:first-child {
    display: none;
}

div#GlasOptionSL2Innen p,
div#GlasOptionSR2Innen p,
div#GlasOptionO2Innen p,
div#GlasOptionSL3 p,
div#GlasOptionSR3 p,
div#GlasOptionO3 p {
    margin-top: 0;
}

div#GlasOptionSL3 p,
div#GlasOptionSR3 p,
div#GlasOptionO3 p {
    margin-left: 5em;
}

div#GlasOptionSL2.standarctrldiv,
div#GlasOptionSR2.standarctrldiv,
div#GlasOptionO2.standarctrldiv {
    margin-top:0;
}

div#GlasOptionSL2Innen.standarctrldiv,
div#GlasOptionSR2Innen.standarctrldiv,
div#GlasOptionO2Innen.standarctrldiv {
    margin-bottom: 1em; 
}

div#appLikeFillingList {
    display: flex;
}
div#appLikeFillingList .btnTabText { margin-left:0; display: flex; align-items: center;}

/* Griffe --------------------------------------------------------------*/
.symbutton.handle,
.symbutton.handle2,
.symbutton.handle3,
.symbutton.innerhandle,
.symbutton.doorKnocker			{ margin-right: 5em; margin-bottom:1em; border: 1px solid transparent; }
.symbutton.innerhandle			{ margin-top: 2em; }

.symbutton.handle.act,
.symbutton.handle2.act,
.symbutton.handle3.act,
.symbutton.innerhandle.act,
.doorKnocker.act,
.symbutton.handle:hover,
.symbutton.handle2:hover,
.symbutton.handle3:hover,
.symbutton.innerhandle:hover,
.doorKnocker:hover				{ border:1px solid var(--colorpicker1); }


.handle .title,
.handle2 .title,
.handle3 .title,
.innerhandle .title				{ display:Flex; width: 126px; background-color:var(--colorpicker1); height:9em; }

.handle .title span,
.handle2 .title span,
.handle3 .title span,
.innerhandle .title span 		{ color:var(--colorpicker4); font-size: 1.3em; margin: 0.5em; word-wrap: anywhere; }
.handle .title span small,
.handle2 .title span small,
.handle3 .title span small,
.innerhandle .title span small	{ font-size: 0.8em; }


span.ledTitel					{ margin-right: 1em;}
.leddiv a						{ padding-left:21px !important; margin-right: 1em;}

.hoverContainer.HandleMOTab		{ width: 25em;}
.hoverContainer.HandleMOTab span{ font-size: 1.2em;}


.symbutton.handle.newp #symbuttoninnercontent,
.symbutton.innerhandle.newp #symbuttoninnercontent {position:relative;}
.symbutton.handle.newp #symbuttoninnercontent::after,
.symbutton.innerhandle.newp #symbuttoninnercontent::after{content:"";background-image: url(Media/Sym/other/neu_stoerer.svg); position: absolute; top: 1em;
													right: 1em;  width: 3em; height: 3em; background-repeat: no-repeat; background-size: contain; }
/* Zubehör --------------------------------------------------------------*/
.noMouse						{ cursor: default !important; pointer-events:none;}
.grundausstattung				{ margin-right:1em;}
.treeparts						{ margin-top:1em; overflow: visible;}
.treeparts	.MainTitles			{ padding-bottom:0em;}
.treepartsUl					{ padding-left: 0em;}

.optTreeAddInputDiv,
.optTreeAddListDiv				{ display: initial; margin-left: 2em;}
.TreeInput						{ width:2em; text-align:right;}

#broadeningDirection,
#flachaluminiumColor,
#aluminiumrohreColor,
#aluminiumwinkelColor			{ margin-left: 0em; width: 10em; }
.count_input					{ width:1em; margin-left: 0em; }
.lenght_input					{ width:1.5em; margin-right: 0.8em; margin-left:0; }
.addOptButton					{ margin-left: 0.8em; }

.OptionListTableDiv				{ margin-top:2em; }
.OptionListTableDiv table td	{ text-align: left; padding: 1em 0em 1em 1em; }
.OptionListTableDiv table th	{ background-color: #e9e9ed; text-align: left; padding: 0.3em 0em 0.3em 1em; }
.OptionListTableDiv table tr	{ border-bottom: 1px solid #e9e9ed; }
.OptionListTableDiv table		{ width: 100%; }
.OptionListTableDiv .addOptButton	{ float: right; }

.OptionListDiv,
.aluminiumrohre,
.aluminiumwinkel,
.flachaluminium					{ width: 95%; margin-bottom: 3em; }

.aluminiumrohre .SelectionDiv,
.aluminiumwinkel .SelectionDiv,
.flachaluminium .SelectionDiv	{ display:flex; justify-content: space-between; }

.flachaluminiumOptionListDiv .OptionListTableDiv table { width: 70%; }

.flachaluminium .row1,
.aluminiumrohre .row1,
.aluminiumwinkel .row1		{ width:18em; }

.flachaluminium .row2,
.aluminiumrohre .row2,
.aluminiumwinkel .row2		{ width:5em; }

.flachaluminium .row3,
.aluminiumrohre .row3,
.aluminiumwinkel .row3		{ width:21em; }

.flachaluminium .row4,
.aluminiumrohre .row4,
.aluminiumwinkel .row4		{ width:5em; }

.flachaluminium .row5,
.aluminiumrohre .row5,
.aluminiumwinkel .row5		{ width:5em; }

.flachaluminium .Mrow1,
.aluminiumrohre .Mrow1,
.aluminiumwinkel .Mrow1		{ width:15em;  text-align:left; padding-bottom: 1em;}

.flachaluminium .Mrow2,
.aluminiumrohre .Mrow2,
.aluminiumwinkel .Mrow2		{ width:10em; text-align:left; padding-bottom: 1em;}

.flachaluminium .Mrow3,
.aluminiumrohre .Mrow3,
.aluminiumwinkel .Mrow3		{ width:21em; text-align:left; padding-bottom: 1em;}

.flachaluminium .Mrow4,
.aluminiumrohre .Mrow4,
.aluminiumwinkel .Mrow4		{ width:10em; padding-bottom: 1em;}

.flachaluminium .Mrow5,
.aluminiumrohre .Mrow5,
.aluminiumwinkel .Mrow5		{ width:5em; padding-bottom: 1em;}

.standardList					{ list-style: inherit;}
.standardList li				{ margin-bottom:1em;}
.standardList div				{ cursor:pointer;}

/* Freie Position*/
.groke_input					{ width: 5em; text-align: right; background-color: #ffffff; border: 1px solid black; padding-right: 0.5em; padding-top: 0.3em; padding-bottom: 0.3em;}

.izubTable, .izubTable input	{ width: 100%;}
table.izubTable td				{ padding-top: 1em; padding-right: 2em;}
.td_preis						{ width: 20%;  white-space: nowrap;}
.td_menge						{ width: 10%;}
.td_bez input					{ text-align:left;}

.leafID53 .PartClassDescrEx,
.leafID54 .PartClassDescrEx			{ margin-bottom:1em;}


input#GZylinderEInput,
input#GZylinderBEInputText			{  width: 25em; text-align:left;}

/* Zusammenfassung -----------------------------------------------------*/
#summaryTable					{ width: 95%;  margin-top:10px; }
#summaryTable td				{ padding-bottom:0.5em; }

.standardACCMainDiv				{ display: flex; justify-content: left; flex-wrap: wrap; margin-top: 1em;}
.standardListTable				{ margin-right:1em;}
.standardListTable td			{ padding-right: 3em;  padding-bottom: 1em;}

.AnfrageDiv						{ display:flex; align-items: center; cursor: pointer; width: min-content; }
.AnfrageDiv svg					{ width: 7em; }
.AnfrageDiv svg #HG rect		{ fill:var(--colorpicker1); }

.AnfrageDiv	span				{ margin-left:1em; white-space:nowrap; }

table#CalculationTable			{ width: calc(100% - 10em); margin-top:1em;}

.descrCalcTable					{text-align:left; width: 60%;}

.priceCalcTable, 
.totalPriceCalcTable,
.totalDescrCalcTable			{text-align:right;}

th.descrCalcTable span,
th.priceCalcTable span  		{font-weight:bold}

td.descrCalcTable,
td.priceCalcTable,
td.totalPriceCalcTable,
td.totalDescrCalcTable			{padding-top:1em;}

.CalcTableUnderline				{border-bottom: 1pt solid black; }

.CalcTableUnderline	td  		{padding-top:1em;}

.FreePosCalcDiv					{margin-bottom: 2em;}
.CalcMainDiv					{height: 67em;overflow: auto; }
#__slctCustomAccessories		{ width: 16.7em; margin-right: 0.7em; }
#__opt_priceCustom				{ width: 8.2em; margin-right: 0.7em; }
#__opt_countCustom				{ width: 3.6em; }
.individuellesZub				{ margin-top: 1em; }
.CustomAccessories_text			{ margin-bottom:0.5em; display:block; }

/* Upload --------------------------------------------------------------*/
/*.uploaded						{ display:none!important; }
.uploadTable					{ margin-top:4em;}
.uploadTable td					{ text-align: center; padding-top: 1em;}
.upload_pf						{ width:12em;}
#CuteWebUIUploaderDiv button,
.upl_btnMain button				{ background-color: #E3E3E0; border: none; position: relative;  height: 3em; width: 11em; }

#CuteWebUIUploaderDiv			{ margin-top: 5em; width:30em; display: block !important; }
#CuteWebUIUploaderDiv button	{ margin-bottom: 1em; }

#CuteWebUIUploaderDiv,
.upl_btnMain					{ display: flex; justify-content: left; position: relative; }

.upl_btnMain button				{ margin-right:2em; margin-top: 2em;}

[id^=uplopt_brightness],
[id^=uplopt_sharpness],
[id^=uplopt_contrast]				{ display: flex; flex-wrap: wrap; justify-content: left;}

[id^=uplopt_brightness]	span,
[id^=uplopt_sharpness]	span,
[id^=uplopt_contrast]	span		{ width: 100%;} 

[id^=uplopt_brightness]	a,
[id^=uplopt_contrast]	a			{ position: absolute; margin-top: -2em;margin-left: -1em;} 

[id^=uplopt_brightness]	a:after,
[id^=uplopt_contrast]	a:after		{top: 26px !important;left: 28px !important;}
[id^=uplopt_brightness]	a:before,
[id^=uplopt_contrast]	a:before		{top: 22px !important;left: 24px !important;}

[id^=uplopt_brightness] .btnTabText,
[id^=uplopt_contrast]  .btnTabText	{ margin-bottom: 5em;margin-left: 0.9em;}

#uplopt_Side						{margin-left: 1.5em;}*/
#uploaddiv				{ height: 65em;width:90em;top:4.7em;position:absolute;background-color: white; z-index:2; border: 1px solid #d1d1d1; }
#uploaddiv2 #DisplayImg { left: auto !important; }
#uploadposition			{ height: 78.4em;width:calc(100% / 2 - 2em);top:4em;left:2em;position:absolute;}
#uploaddiv				{ top: 5em; right: 14em;position:absolute;background-color: white; z-index:2; border: 1px solid #d1d1d1; }
#DoorFrame				{ position: absolute; }

#CuteWebUIUploaderDiv button	{ outline:0; display: block; border: none; padding-top: 1em; background-color: transparent; padding-left: 0; height:2em; color:#e65014; font-size: 1.6em; padding: 0; font-weight:bold; 	}
.uploaddiv,
.UploadTxt2,
.hochladenText						{ display:none; }	
#uploadHide,
#uploadZoom				{ right: 0px; position: absolute;  z-index: 9; background-color:var(--colorpicker1); cursor:pointer; height: 5em; width: 5em; }
.showupload				{ left: 2em!important; top: 1em; }
#errUpload				{ color:red; }
.uploadButton			{ visibility:hidden; width: 0; }
.uploadButtons			{ display:flex; margin-top: 2em; }
.uploadButtons .divbutton{ margin-right:2em; cursor:pointer; }

.UploadDescription			{ display: flex; height: 13em; margin-right: 3em; justify-content: center; align-items: center; margin-bottom: 3em; }
.file-upload				{ margin-top: 5em; }
.UploadImg					{ background-position: center; background-repeat:no-repeat; background-size: contain; height: 100%;}
.UploadImg#UploadDescImg1	{ width:10.9em; background-image: url(Media/GUI/upload_01.png); }
.UploadImg#UploadDescImg2	{ width:6.3em; background-image: url(Media/GUI/upload_02.png); }
.UploadImg#UploadDescImg3	{ width:6.3em; background-image: url(Media/GUI/upload_03.png); }
.UploadImg.UploadArrow		{ width:5.8em; background-image: url(Media/GUI/upload_04.png); margin: 0 3em;}
#CuteWebUIDescription2		{ display: none; }
.uploadButtonErsatz			{ background-color: #E3E3E0; border: none; position: relative; height: 3em; width: 11em; display: flex; justify-content: center; align-items: center; cursor:pointer; }
.uploadButtons .button		{ padding: 1.5em; }
#uploadHide					{ display:none; }
[id^="uplopt_brightness"],
[id^="uplopt_sharpness"],
[id^="uplopt_contrast"]						{ display: flex; flex-wrap: wrap; justify-content: left; }
[id^="uplopt_brightness"] span,
[id^="uplopt_sharpness"] span,

[id^="uplopt_contrast"] span				{ width: 100%; }
[id^="uplopt_brightness"] .btnTabText,
[id^="uplopt_contrast"] .btnTabText,
[id^="uplopt_sharpness"] .btnTabText		{ margin-bottom: 3em; margin-left: 0em; }

/* Login --------------------------------------------------------------*/
#loginTable					{ margin-left: 1em; margin-right: 1em;}
#loginTable	span			{ padding-right: 1em;}
#loginTable	td				{ padding-bottom: 1em;}

.btn_div					{ display: flex; justify-content: space-between; }
.loginHinweis				{ display: flex; flex-direction: column; margin: 1em 1em 2em 1em; display:none; }
.loginHinweis rot			{ color:Red; margin-left:0.5em; font-weight:bold; }

.loginRedirect				{ display:flex; justify-content: center; flex-wrap: wrap;max-width: 48em;}
.loginRedirect	.button		{ margin-top:0.5em;}


/* mfStepper --------------------------------------------------------------*/
#mfStepper				{ position:absolute; bottom:-3em; right:0em; width: 100%; height:3em; z-index: 1; width:68em; z-index:100; }
#mfNext					{ float: right; right:0; text-align:left; padding-right: 2em!important; }
#mfNext a:after			{ content:">"; margin-left:0.5em; font-weight:bold; }
#mfNext a				{ font-weight:bold; }

#mfPrev					{ float: left; left:0; text-align:right; padding-left: 2em!important; }
#mfPrev a				{ font-weight:bold; }
#mfPrev a:before		{ content:"<"; margin-right:0.5em; }

#mfStepper ul			{ margin:0; padding:0; width:auto; height: 3em; position:absolute; }
#mfStepper a			{ line-height: 2em; display:block; width: 100%; cursor: pointer; z-index: 999; height:100%; position:relative; color:var(--colorpicker4); font-size: 1.6em; }

#hideSection			{ display: block; width: 4em; height: 3em; margin:0; position: absolute; cursor: pointer; opacity: 0; z-index: 999; -webkit-touch-callout: none;
						  bottom: 0em; margin-left: 31.7em; font-size:100%!important; }

.hideSection_span		{ bottom: 0.5em; width: 0px; height: 0px; border-style: solid; border-width: 0 1em 0.8em 1em; border-color: transparent transparent #ffffff transparent; z-index: 1;
						  position: absolute; margin-left: 20em; transition: transform 0.5s ease; }

#hideSection:checked ~ #mfSection				{ display:block; position: absolute; background: #ededed; list-style-type: none; right:-2em;
												  -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(0, -100%); }
#hideSection:checked ~ .hideSection_span		{ transform: rotate(180deg); border-color: transparent transparent var(--colorpicker1) transparent; }
#hideSection:checked ~ #mfSection #mfStepper	{ display:none; }

#hideSection:checked							{ bottom: inherit; top: 17em; }
#hideSection:checked ~ .hideSection_span		{ bottom: inherit; top: 11em; }

#mfStepper				{ background-color: var(--colorpicker1); }
.hideSection_span		{ z-index: 998; }
#mfStepper a			{ line-height: inherit; font-size: 2em; display: flex; justify-content: center; align-items: center; }


/* Print ------------------------------------------------------------------- */

@page					{ size: A4; margin: 5mm 20mm 0mm 25mm; }
@media print {
	body				{ font-size:100%!important; }
	html, body			{ width: 210mm; height: 297mm; }
	thead				{ display: table-header-group; } 
	tfoot				{ display: table-footer-group; }

	.page-main			{ width: 100%; }
	tbody tbody			{ -webkit-column-break-inside: avoid; page-break-inside: avoid; page-break-inside: avoid; }
	span				{ font-size:16px; }
}

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

	/*.page-footer, .page-footer-space	{ height: 10px;  bottom:0 }
	.page-footer						{ position:fixed; width:210mm; }
	.page-footer-space					{ position:relative; }*/


	/* header */
	#prLogoMaxSize						{ height:100px; }
	#prLogo								{ background-position:right; margin-right: 50px; }
	.AnschriftDiv,
	.HaendlerDiv						{ display: flex; flex-direction: column; }
	.WrapperHeader						{ display: flex; justify-content: space-between; margin-top: 30px; }
	.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: 0px; }			
	.DrawingHeader .HeaderBlock,
	.DrawingArtlist .HeaderBlock 		{ display:flex; justify-content: space-between; }
	.DrawingHeader .HaendlerDiv,
	.DrawingArtlist .HaendlerDiv 		{ margin-top: -20px; }

	/* Druck versteckte sachen PrintController ViewData("hideText") */
	.PrintHideText						{ display:none; }
	.PrintHideText span					{ color:#FFF; font-size:1px; }
	/* ------------------------------------------------------------ */

	/* Artikelliste */
	.prPartList			{  }
	.prPartTable td		{ vertical-align: top; padding-top: 5px; }
	.Einzelpreis		{ white-space: nowrap; }
	.firstrow			{ background-color: #f6f6f6; padding-right: 15px; padding-left: 15px; }
	.bezeichnung1 span	{ font-weight:bold; }

	.bezeichnung2		{  }
	.bezeichnung2 span	{ font-weight:bold; padding-left: 20px; }

	.bezeichnung3		{  }
	.bezeichnung3 span	{ font-style:italic; padding-left: 40px; }

	.konfiguration,
	.konfiguration2		{ padding-left: 15px; }


	.print_pdfArtl .prPartList,
	.print_pdfLastPage .prPartList				{ top: 220px; }

	.print_pdfCustomTexts .prCustomTextDiv      { top: -100px; }
	.print_pdfIsOrder .HeaderTable				{ top: 160px; }
	.print_pdfIsOrder .vorgang					{ top: 100px; margin-top: 0; margin-bottom: 50px; }

/*.print-main-body .vorgang:first-child{ top: 100px!important; }*/

	.page-header, .page-header-space				{  }

	.print_pdfCustomTexts .prCustomTextDiv,
	.print_pdfArtl .prPartList,
	.print_pdfLastPage .prPartList,
	.print_pdfIsOrder .vorgang					{ position: relative; }

	.HeaderTable .wrapperTitle						{ margin-top: 0px; }

	.print_pdfArtl .page-footer,
	.print_pdfLastPage .page-footer	,
	.print_pdfIsOrder .page-footer				{ height: 240px;  bottom:0; }

	.print_pdfArtl .page-footer-space,
	.print_pdfLastPage .page-footer-space,
	.print_pdfIsOrder .page-footer-space			{ height: 240px;  bottom:0; }

	.print_pdfArtl .page-footer,
	.print_pdfLastPage .page-footer,
	.print_pdfIsOrder .page-footer					{ position:fixed; width:210mm; }
	.print_pdfArtl .page-footer-space,
	.print_pdfLastPage .page-footer-space,
	.print_pdfIsOrder .page-footer-space			{ position:relative; }

	.prAlternativeAddress							{ top: 250px; position: relative; }
	.prAlternativeHinweis span						{ color: red; font-weight: bold; }
	.prAlternativeName span							{ font-weight: bold; }

	.prPartTableHeader								{ width: 100%; }
	.prPartTableHeader .firstrow					{ background-color: transparent; }
	.row1											{ width:185px; padding-left: 15px; padding-right: 15px; }
	.row2											{ width:500px; padding-left: 15px; }
	.row22											{ white-space:nowrap; padding-right: 15px; }
	.row2.noPriceRow								{ width: auto; }


	.hinweisDiv										{ position: relative; top: 300px; display: flex; flex-direction: column; }
	.hinweisDiv span								{ font-size: 13px; }
	.hinweis.pr_margin								{ margin-bottom: 20px; }
	.preisInfo,
	.hinweis.pr_marginTop							{ margin-top: 20px; }
	.Preiserow										{ display: none; }
	.Nettorow .firstrow,
	.mwstRow .firstrow,
	.GesamtkostenRow .firstrow						{ padding-left: 0; white-space: nowrap; }
	.MTZrow .firstrow								{ padding-left: 0; }

	.inklmwstRow .firstrow							{ padding-left: 0!important; }
	.inklmwstRow span								{ font-size: 13px; }
	.inklmwstRow .bezeichnung3 span					{ padding-left: 25px; }

	.zusatzkosten .firstrow							{ padding-left: 0!important; }
	.zusatzkosten .firstrow span					{ font-size: 13px; }
	.zusatzkosten .bezeichnung3 span				{ padding-left: 20px; }

	.MTZrow .firstrow span							{ font-weight:normal; }

	.Nettorow .firstrow span,
	.mwstRow .firstrow span,
	.GesamtkostenRow .firstrow span					{ font-size:23px; }
	.clearBlock .firstrow							{ background-color: #FFF; padding-bottom: 50px; }

	.sonstigepositionen td							{ padding-bottom: 20px; }

	.prPartList2									{ position: relative; top: 300px; display: flex; flex-direction: column; }



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


	/* Deckblatt */
	.Titelbilder						{ height: 350px; display: flex; justify-content: space-around; margin-top: 150px; margin-bottom: 180px; }
	.BildAussen, .BildInnen,
	.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; display:none; }
	.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; }



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


[type="radio"]:checked + .treeClicker,
[type="radio"]:not(:checked) + .treeClicker		{ position: relative; padding-left: 28px; cursor: pointer; line-height: 16px; display: inline-block; }
[type="radio"]:checked + .treeClicker:before,
[type="radio"]:not(:checked) + .treeClicker:before { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border: 1px solid #ddd; border-radius: 100%; background: #fff; }
[type="radio"]:checked + .treeClicker:after,
[type="radio"]:not(:checked) + .treeClicker:after	{ content: ''; width: 8px; height: 8px; background: var(--colorpicker1); position: absolute; top: 4px; left: 4px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
[type="radio"]:not(:checked) + .treeClicker:after	{ opacity: 0; -webkit-transform: scale(0); transform: scale(0); }
[type="radio"]:checked + .treeClicker:after		{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
/* ----------------------------------------------------------------------------- */
/* -------------------------------- popup -------------------------------- */
/*#mfPopup,
#DynLayer87div					{z-index: 9999; background-color: white; left:calc(100% / 2 - 26em); position: absolute; max-width: 55em; max-height: 20em; top: calc(100% / 2 - 10em); border: 1px solid var(--colorpicker1);}
#mfPopup div,
#DynLayer87div div				{ margin:1em; text-align: center;}
*/

#mfPopup, #DynLayer87div		 { z-index: 9999; background-color: rgba(0, 0, 0, 0.5); position: absolute; border: 1px solid var(--colorpicker1); width: 100%; height: 100%; top: 0;
								  display: flex; align-items: center; justify-content: center;}

#mfPopup div, #DynLayer87div div { text-align: center; max-width: 55em;}
#mfPopup .popBackground, 
#DynLayer87div div:first-child	 { background-color: white;}

.yesnoPopUp						{ margin: 0;}
.yesnoPopUp .yesnoButtons		{ display: flex; justify-content: space-around; margin-top: 1em !important;}
.popupText						{ margin: 2em; }

.sprossenPopUp					{ margin:0em 0em 2em 0em!important; }
.sprossenPopUp .DynLayerHeader	{ margin:0!important; }
.sprossenPopUp .popupText		{ padding: 0em 2em; } 
.Farbgestaltung					{ margin-right:1em; }
.felderColorAuswahl span		{ margin-right:1em; }

#mfPopup .button				{ margin-bottom:2em;}
.popupText						{ text-align:left !important;}
.popupText span					{ color:Red;}
#DynLayer91div .closeDynLayer path,
#DynLayer96div .closeDynLayer path,
#DynLayer72div .closeDynLayer path{ fill:#FFF; }
span.caption					{ display: flex; align-items: center; }

/* --------------------------- switch -------------------------------------------*/
.switchCustom					{ display:flex; align-items: center; }
.switchCustom .MainTitles		{ padding-top: 0em; padding-bottom: 0em; }
/* checkbox slider */
:root {
  --track_width : 5em;   /* --track_width should be twice the track_height */
  --track_height: 2em;
  --thumb_pad : 0.35em;      /* --thumb_pad defines the space between the thumb and the track */
  --color_on : #FFF;
  --color_off : #FFF;
}
.switchDiv,
.switchDivDisplay{ display:flex; align-items:center; }

/* Ideally, we should contain everything in an inline-block */
.switch {
  display: inline-block;
  position: relative;
  width:  var(--track_width);
  height: var(--track_height);
}
.switchBefore					{ margin-right:1em; }
.switchAfter					{ margin-left:1em; }
.switchText						{ margin-right:1.5em; }

.switchBefore.act,
.switchAfter.act				{ font-weight:bold }


/* The checkbox is NEVER displayed.
 * What is displayed is the label represeting it.
 */
.switch input[type="checkbox"]	{display: none;}

/* A label should be used inside the switch.
 * Because of label's for attribute,
 * we can still check our checkbox,
 * provided the checkbox has an id.
 */
/* Label defines our "track" */
.switch label {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /*background-color: #0cc;*/
  /* Often the track is rounded */
  border-radius: calc( var(--track_height) / 2 );
  /* A shadow adds depth */
  /*box-shadow: inset 2px 2px var(--thumb_pad) rgba(0,0,0,0.9);*/
  border: 1px solid #cdcdcd;
  /* TODO: Gradient? */
  user-select: none;
  cursor: pointer;
}

/* label:before defines our "thumb" */
.switch label:before {
  display: block;
  position: absolute;
  content: "";
  background-color: var(--colorpicker1);
  left:   var(--thumb_pad);
  top:    calc(var(--thumb_pad) - 0.1em);
  bottom: var(--thumb_pad);
  width:  calc(var(--track_height) - 2 * var(--thumb_pad));
  height: calc(var(--track_height) - 2 * var(--thumb_pad));
  border-radius: calc(var(--track_height)/2);
  /*box-shadow: 2px 2px var(--thumb_pad) rgba(0,0,0,0.9);*/
  /* TODO: Gradient? */
  transition: .4s;
}
#ViewDiv .switch label:before {top: 0.3em;}

.switch input[type="checkbox"]:checked + label {/*background-color: #66bb6a;*/}
.switch input[type="checkbox"]:checked + label:before {
  transform: translateX(calc(var(--track_width)/2));
}



.leafID23 input	{ display:none; }
.leafID24 input,
.leafID25 input	{ display:inherit; }
.leafID44		{ margin: 0; padding: 0.5em 0em 0px 2em; }
.leafID44 .SelectionTreepart label {
    display: flex;
    flex-wrap: wrap;
}

ul.leafID24 { padding-left: 0;}
ul.leafID25 { padding-left: 0;}
ul.leafID62 { margin-top: 1em;}

.treepartsTitles {
    border-left: .7em solid var(--colorpicker1);
    background: #f3f3f3;
    height: 5.5em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
	position: relative;
	cursor:pointer;
}

.marginB05 {
    margin-bottom: 0.5em;
}

.SelectionTreepart .marginB05 {
    margin-bottom: 0em;
}

.treepartsTitles.onlyTitle {
	border-color:transparent;
    background: transparent;
    height: 2em;
	pointer-events:none;
	border:none;
}

.treepartsTitles.onlyTitle .MainTitles {
    margin-left: 0em;
}
.treepartsTitles.onlyTitle + .treepartsUl{
	margin-left:0!important;
}

.treepartsTitles.onlyTitle .treepartsStatus{
	display:none;
}


.treepartsTitles .SubTitles{
	color: #999999;
	font-size: 1.3em;
	font-style: italic;
}

.treepartsTitles span {
    color: var(--colorpicker3);
}
.treepartsTitles + .treepartsUl,
.treepartsTitles + .OptionListDiv{
	max-height:0;
	overflow:hidden;
	transition: max-height .3s ease;
	margin:0;
}
.treepartsTitles.open + .OptionListDiv{
	display: table;
}

.treepartsTitles.open + .treepartsUl,
.treepartsTitles.open + .OptionListDiv{
	max-height:100%;
	margin-top: 1em;
    margin-left: 2em;
	overflow: visible;
}
.treeparts.zub2 .MainTitles {
	height:5.5em;
}

.treepartsTitles .MainTitles {
    padding: 0em;
	margin-left:1em;
    display: flex;
    align-items: center;
	cursor:pointer;
}
.treepartsTitles .SubTitles{
    padding: 0em;
	margin-left:1.3em;
	cursor:pointer;
}


.treepartsStatus {
    position: absolute;
    right: 2em;
	display: flex;
	align-self: anchor-center;
}
.tab62 {
    order: 2;
}


/* Ipad größe*/
@media screen and (min-width: 640px) and (max-width: 1024psx) {
	#ButtonCreator				{ background-color: Yellow; }
	#HandleImg,
	#DisplayImg,
	#DisplayLBImg2,
	#HandleImg2,
	#DisplayImg2				{ right: 10em;}

	#DynLayer89div				{ top: 33.7em; }
	#DynLayer89div input		{ margin-top: 5em; margin-left: 1.2em; width: 60%;}
}

/* Handy größe*/
@media screen and (max-width: 1024px) and (orientation: portrait)  
{
	#body							{ font-size: 80%!important; }
	#showMass						{ display:none; }
	.tollbarPos						{ top: 0; }
	.DynLayer						{ width:100%!important; }
	#ButtonCreator					{ background-color: Green; }
	span, a, select					{ font-size: 2em; }
	.tabBaseClass					{ height:7em; }

	.Modellbezeichnung,
	.ModellbezeichnungUpload,
	.ToolbarWord 					{ display:none; }

	#mfMainContent					{ margin-top: 12em; height: calc(100% - 12em); }
	#mfMenu 						{ float: left; position: fixed; top: 5em; right: 2em; width: 4em; height: 4em; background-color:transparent; z-index:9; }
	#ViewDiv						{ top: 0.5em; right: auto; left: 1em; font-size: 1em; }
	#ButtonCreator,
	#ButtonCatalog					{ display:none!important; }
	#mfPreis .PriceDiv				{ padding-right: 8em; padding-right: 2em; margin-right: 8em; }

	.SectionMainDiv .switchCustom .MainTitles		{ display:none; }
	.SectionMainDiv .switchDiv						{ flex-direction: column; align-items: baseline; }
	.measuretablePadding2,
	.measuretablePadding							{ padding-left: 0em; }

	#summaryTable					{ font-size:2em!important; }

	#mfToolbar						{ position:absolute; top: 0em; z-index: 9; height:calc(100% / 3); }
	#tool							{ height:100%; }
	#tool ul						{ flex-direction: column; margin: 0; padding: 0; height: 100%; flex-wrap: wrap; justify-content: center; height:100%; }

	#tool .menuitem					{ margin-bottom: 0.5em; margin-top: 0.5em; }
	#ButtonCreator					{ display:none; }
	.tabBaseClass					{ top:-10em; }
	
	.icon							{ height: 5.4em; }

	#mfSection						{ left: 0em; top: calc(100% / 3); width: 100%; height: calc(100% / 3 * 2); transform: none!important; }
	#mfOptions						{ top: 35.4em !important; height: calc(100% - 41em); width: calc(100%); }
	#mfDisplay						{ height: calc(100% / 3); position:relative; top:0; }
	#DisplayImgDiv					{ font-size: 46%!important; }
	#uploadposition					{  top: 0em!important; left: 38em!important; }

	#mfRequest						{ top: -12em; height: calc(100% + 12em); overflow: auto; }

	#HandleImg,
	#DisplayImg,
	#DisplayLBImg2,
	#HandleImg2,
	#DisplayImg2					{ right: 10em;}
	#uploaddiv2 #DisplayImg			{ right: auto }

	.tabContent						{ overflow:auto; height: calc(100% - 10em); }

	.menuright						{ display:none!important; }
	#mfLanguage						{ left: 13em; position: absolute; top: -12em; }

	#navi ul li div a						{ padding: 0.6em 1.8em; }
	#navi ul li div a,
	#navi ul li div span					{ color: #232323; transition: color 0.3s ease; }
	#navi ul li:hover span,					
	#navi ul li:hover a,
	.menuitemact a,
	.menuitemact span						{ color: var(--colorpicker1)!important; }
	#navi									{ position: relative; -webkit-user-select: none; user-select: none; }
	#navi .menuleft							{ display:none!important; }
	#hamburger_menu							{ display: block; width: 100%; height: 100%; margin:0; position: absolute; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; }
	.hamburger_menu_span					{ display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: var(--colorpicker1); border-radius: 3px; z-index: 1; transform-origin: 4px 0px;
											  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; }
	.hamburger_menu_span:first-child		{ transform-origin: 0% 0%; }
	.hamburger_menu_span:nth-last-child(2)	{ transform-origin: 0% 100%; }
	#hamburger_menu:checked ~ span			{ opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #232323; }
	#hamburger_menu:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
	#hamburger_menu:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); }
	#navi ul								{ display:none; position: absolute; background: #ededed; list-style-type: none; right:-2em;
											  -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); }
	#hamburger_menu:checked ~ ul			{ transform: none; z-index:2; display:block; }

	#mfStepper a			{ color: var(--colorpicker1);}
	#mfStepper				{ bottom: 0em; width:100%; background-color:transparent; }
	#ImpProc				{ margin-top: -3em; display:none; }
	#uploaddiv				{ top: 0em; right: auto; position: absolute; background-color: transparent; z-index: 2; border: 1px solid #d1d1d1; width: 100%; display: flex; justify-content: center; }
	.seriesSubDiv			{ margin-right: 1em; width: calc(100% / 2 - 2em); max-width: 31em; }

	/*Toolbar fixieren*/
	#mfToolbar				{ right: 0em!important; }
	#tool li				{ width: 7em!important; }
	#tool .menuitem:hover	{ transform: none!important; }
	#tool span				{ display:none!important; }
	.menuitemact			{ background-color: transparent!important; }

	#hideSection,
	.hideSection_span		{ display:none }

	#mfPreis a				{ height: 6em; }
	#mfPreis				{ height: 12em; width: 35em; top: -12em; }
	#mfPreis a				{ padding-right: 3.6em; }
	#loginDataDiv,
	.rabattDivm	
	#mfLanguage,
	.rabattDiv				{ display:none; }
	
	.bauflImgDIv img { width: 25em!important;}
	.bauflImgDIv table{width: min-content!important;}
	.bauflGrundDIv img { width: 13em!important;}

	.bauflImgDIv    {order:2}
	.bauflGrundDIv {order:3}

	#mfLanguage, #mfRC2 { display:none; }
	
}
	.seriesSubDiv.Loft,
	.seriesSubDiv.Loft_Metaku,
	.seriesSubDiv.Loft_Mydoor	{ order: 0; }



	.seriesSubDiv		{ order: 1; }

/* UPLOAD */
@media screen and (max-width: 1524px) {
	#uploadposition{ left: 71em; }
}



#showMass		{ width:5em; height:5em; position:absolute; right:2em; top:2em; cursor:pointer; }
#showMass svg	{ width: 100%; height: 100%; }
#showMass.act svg path { stroke: var(--colorpicker1); }
	
#prDrawing #masse{margin-left: -1cm;}

.sprossenFeld { display: flex; justify-content: center; align-items: center; position: absolute; /*background: rgba(250, 0, 100, 0.3);*/ }
.sprossenFeld span { font-size: 5em; color: var(--colorpicker1); }


.lineal_V				{ background-color: #000; width:1px; position:absolute; }
.lineal_V.durchgangsmass{ background-color: var(--colorpicker1); width:2px!important }

/*.lineal_H.tuerbreite{ bottom:3em!important; }
.lineal_H.NoS.STL{bottom:1em!important;}
.lineal_H.durchgangsmass{bottom:6em!important;}*/

.lineal_H				{ background-color: #000; height:1px; position:absolute; }
.lineal_H.durchgangsmass{ background-color: var(--colorpicker1); height:2px!important }


.boden_profil		{ background-color:var(--colorpicker1); position:absolute; display: flex; justify-content: center; } 
.boden_profil span	{ color:#FFF; } 

.lineal_H span					{ position: absolute; bottom: 0; width: 100%; font-size: 14px; display: flex; justify-content: center; top: 0em; font-family: arial; }
.lineal_H.durchgangsmass span	{ top: -1.5em; color: var(--colorpicker1); white-space: nowrap; font-weight: bold; }

.lineal_H:before	{ bottom: -5px; content: ""; left:  0px; position: absolute; background-color: #000; height: 11px; width: 1px; }
.lineal_H:after		{ bottom: -5px; content: ""; right: 0px; position: absolute; background-color: #000; height: 11px; width: 1px; }

.lineal_H.durchgangsmass:before,
.lineal_H.durchgangsmass:after		{ background-color: var(--colorpicker1); }

.lineal_H.gmass:before,	
.lineal_H.gmass:after				{ height:50px; }

.lineal_V.gmass:before { width: 55px; left: -10px; top: 0;    height: 1px;}
.lineal_V.gmass:after  { width: 55px; left: -10px; bottom: 0; height: 1px; }


.lineal_V span					{ position: absolute; bottom: 0; height: 100%; font-size: 14px; display: flex; align-items: center; transform: rotate(-90deg); left: -1.8em; font-family: arial; }
.lineal_V.durchgangsmass span	{ color: var(--colorpicker1); left: -1.3em; white-space: nowrap; font-weight: bold; }

.lineal_V:before				{ top:	  0em; content: ""; left: -5px; position: absolute; background-color: #000; height: 1px; width: 11px; }
.lineal_V.durchgangsmass:before	{ background-color: var(--colorpicker1); }

.lineal_V:after					{ bottom: 0em; content: ""; left: -5px; position: absolute; background-color: #000; height: 1px; width: 11px; }


.NoS:before,
.NoS:after{ display:none; }

.noPrice {background: none !Important; border: none;}


/* checkbox slider */
:root {
  --track_width : 5em;   /* --track_width should be twice the track_height */
  --track_height: 2em;
  --thumb_pad : 0.35em;      /* --thumb_pad defines the space between the thumb and the track */
  --color_on : #FFF;
  --color_off : #FFF;
}

.switchDiv,
.switchDivDisplay{ display:flex; align-items:center; }

/* Ideally, we should contain everything in an inline-block */
.switch {
  display: inline-block;
  position: relative;
  width:  var(--track_width);
  height: var(--track_height);
}
.switchBefore					{ margin-right:1em; }
.switchAfter					{ margin-left:1em; }
.switchText						{ margin-right:1.5em; }

/* The checkbox is NEVER displayed.
 * What is displayed is the label represeting it.
 */
.switch input[type="checkbox"]	{display: none;}

/* A label should be used inside the switch.
 * Because of label's for attribute,
 * we can still check our checkbox,
 * provided the checkbox has an id.
 */
/* Label defines our "track" */
.switch label {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /*background-color: #0cc;*/
  /* Often the track is rounded */
  border-radius: calc( var(--track_height) / 2 );
  /* A shadow adds depth */
  /*box-shadow: inset 2px 2px var(--thumb_pad) rgba(0,0,0,0.9);*/
  border: 1px solid #f6f6f6;
  /* TODO: Gradient? */
  user-select: none;
  cursor: pointer;
}

/* label:before defines our "thumb" */
.switch label:before {
  display: block;
  position: absolute;
  content: "";
  background-color: var(--colorpicker1);
  left:   var(--thumb_pad);
  top:    var(--thumb_pad);
  bottom: var(--thumb_pad);
  width:  calc(var(--track_height) - 2 * var(--thumb_pad));
  height: calc(var(--track_height) - 2 * var(--thumb_pad));
  border-radius: calc(var(--track_height)/2);
  /*box-shadow: 2px 2px var(--thumb_pad) rgba(0,0,0,0.9);*/
  /* TODO: Gradient? */
  transition: .4s;
}
#ViewDiv .switch label:before {top: 0.3em;}

.switch input[type="checkbox"]:checked + label {/*background-color: #66bb6a;*/}
.switch input[type="checkbox"]:checked + label:before {
  transform: translateX(calc(var(--track_width)/2));
}



/*Util Rules CSS */

.aufklapp              { border: 1px solid black; padding: 0.5em; background-color:#fff;}
#utilRulesDiv table td { padding-bottom:1em;padding-right:1em; vertical-align: baseline;}

#utilRulesDiv table { border: 1px solid black; margin-top: 1em;}
.ruleHideTable {display:none; border:1px solid black;}

/* Bauflügel */
.bauflImgDIv, .bauflGrundDIv  { margin-top:2em;}
.bauflImgDIv  {display: flex;}
.bauflImgDIv img { width: 31em;}
.bauflGrundDIv img { width: 13em;}
.bauMiniText    {font-size:1.2em;}
.bauText        {font-size:1.4em;}
.bauflImgDiv2{margin-left:2em;}
.bauLink {color:var(--colorpicker1);}
.bauflGrundDIv td {padding-right:1em;}
.bauflGrundDIv td div {}


/* utilTranslate */
.utilTranslate table	{ border: 1px solid #000; text-align: center; }
.utilTranslate table td,
.utilTranslate table th { padding: 0.5em 1em; margin: 0; border: 1px solid #000; }
.NoAPIkey				{ font-size: 3em; }
.strBtn					{ cursor:pointer; }


.treeparts.leafID46 li			{ display: flex; }
.OptionInfoDiv					{ order: 2; display: flex; justify-content: center; align-items: center; }
.OptionInfoDiv #info_svg path	{ fill: var(--colorpicker1); }

.prCustomTextDiv			{ display: flex; flex-direction: column; height:882px; position:relative; padding-top: 200px; }
.prCustomTextTitle			{ margin-bottom: 2em; }
.prCustomTextDescription a	{ color: blue; text-decoration: underline; }

/*Sprossen*/
#sprossenArea, #sprossenDemo				{ width: 10em; }
#sprossenArea								{ display:none; }
.sprossenType								{ width: 3em;  margin-right: 0.5em; margin-left: 1em;}
.vorlagenSelectDiv, .sprossenAreaSelectDiv	{ margin-top: 2em;}
.sprossenAreaSelectDiv.Profilauswahl		{ margin-bottom: 3em; }
.vorlagenSelectDiv span						{ margin-right:1em;}
.sprossenAreaSelectDiv span					{ margin-right:1.5em;}
.sprossenTypeUeberschrift					{ text-transform: capitalize; }
.sprossenAnz								{ margin-right: 0.5em; }
.sprossenMainDiv							{ margin-bottom: 2em;}
.sprossenDetails							{ margin-top: 1em; display:flex;}
#verteilungS,
#verteilungW								{ margin:0; }

#verteilungS span:first-child,
#verteilungW span:first-child				{ display: none; }

#verteilungS .btnTabText,
#verteilungW .btnTabText					{ margin-top: 0.5em; }

.verteilungDetailsDiv						{ margin-left: 4em; }
.verteilungDetailsDiv.ausVorlage			{ margin: 2em 0em; }
.sprosseEingabe								{ margin-left:2em; width: 5em; text-align: center;}
#verteilungS .btnTabText:first-child		{ margin-top:0; }
.sprosenHinweis span						{ font-size:1em; }
.sprossenButtonArea							{ display: flex; flex-direction: column; }
.sprossenButton								{ width:max-content; margin-bottom: 1em; }

.sprosenVorlagenSelect						{ display: flex; justify-content: space-between; }
.sprosenVorlage								{ width: 13em; cursor: pointer; }

.inhaltFelderTitle							{ margin-top: 2em; }
.inhaltFelderTable							{ width: 100%; display: flex; flex-wrap: wrap; padding-bottom: 2em; }
.Feldzelle									{ width: 50%; display: flex; margin: 0.5em 0; }
.Feldzelle span								{ width: 5em; display: flex; }
.Feldzelle select							{ width: calc(100% - 10em); }
.spEinruecken .row2 span					{ margin-left: 1em;}
.spEinruecken .row2						    { display: flex;}

.vorlageImg									{ width: 11.1em; height: 24.8em; }
.vorlageImg img								{ width: 100%; }



.svg.GlasSideSelect svg,
.svg.GlasSideSelect								{ height: 18em; }

.GlasSideSelect svg path						{ fill:#d5d6d6; transition: all 0.5s ease; }

.GlasSideSelecte.act svg path					{ fill:#0e4194 }

.GlasSideSelect svg .select:hover path,
.GlasSideSelect svg .select.act path,
.GlasSideSelect svg .select.act path			{ fill:var(--colorpicker1)!important; cursor:pointer; }


.GlasSideSelect svg #color-abgrenzung path		{ fill:#FFF; }
.GlasSideSelect #color-st-links path,
.GlasSideSelect #color-st-rechts path,
.GlasSideSelect #color-oberlicht path			{ fill:#e8f0f7; }

.sprosenHinweisDiv								{ display: flex; margin-top: 1em; }



/*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;}



.beamerLinks					{ text-align: left; margin: 2em; }
.beamer.background				{ background-image: url(Media/GUI/konfig.png); height: 100%; width:100%; top: 0px; left: 0px; position: absolute; background-repeat: no-repeat; opacity:0.2; }
.beamerTipp						{ margin-top:4em; }
.beamerDIV						{ z-index:99; position:absolute; }
.beamerLinks tr:last-child      { display: flex;align-items: center;margin-top: 2em;justify-content: space-between;}
.beamerLinks tr:last-child  td:nth-child(2) {padding:2em;}
.beamerQRCode                   { width: 15em;height: 15em; background-size: contain;}