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

/*@font-face {
	font-family: 'TheSans_B2_400'; font-style: normal; font-weight: 400; src: url('Fonts/TheSansBW2XtraLt.OTF') format('truetype');
}*/

/* 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; font-family:Verdana, Helvetica, sans-serif;       /* NEW, Spec - Firefox, Chrome, Opera */
							  justify-content: center; -ms-flex-pack: center; align-items: center; -ms-flex-align: center;
							  inline-axis:vertical;}

svg							{ height:100%; }
svg path					{ fill: #FFF; }

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

select						{ border: 2px solid var(--colorpicker1); padding-left: 0.5em;}

ul							{ list-style: none; }
ul.treepropertyUl			{ margin: 0; padding: 0; }
	
:focus,
:active,
a							{ outline: 0; }

input						{ margin: 0; vertical-align: baseline; margin-right: 0.5em; border:2px solid #e5e5e5; font-size:1.6em;}


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

.button						{ width: auto; height: auto; display: inline-block;}
.button a,
.button span				{ display: inline-block; padding: 0.1em 0.5em; }

.button span				{ background-color:var(--colorpicker1); padding:0.5em 1em; transition:all 0.4s ease; cursor:pointer; color:#FFF; } 
.button.measure.search		{ display: flex; align-items: center; background-color:#000; position: absolute; right: 1.7em; border-radius: 0px 5px 5px 0px; }
.button.measure.search span	{ color:#FFF }
.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; }


progress					{ accent-color: #000; }

#ButtonCreator {
    z-index: 9;
    position: fixed;
    right: 1em;
    top: 16.7em;
    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;
	display: none;
}

#tool .btnWarenkorb .iconDiv svg {
    height: 3em;
    margin-top: 0.5em;
}

.warenkorbBtn {display:none;}

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

#DynLayer60div {
    z-index: 50;
}

/* Font --------------------------------------------------------- */
span, a, select				{ font-size: 1.6em; }
svg text					{ font-size: 3em; }

span a,
a span, .fancybox			{ font-size: 1em !important; }
span, a, input, b			{ color: var(--colorpicker3); }

.menuitem span  			{ font-size: 1.6em; color:var(--colorpicker4);  }
.tabClass span				{  }
#navi ul li div	a			{  }


/* Grundgerüst ------------------------------------------------------- */
.center						{ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; overflow: hidden; }
#mfDisplay					{ position: relative; top: 18em;  width: 100%; height: calc(100% - 18em); overflow:hidden; }
#DisplayBackgroundImg		{  }

#mfSection,
#mfOptions					{ position: absolute; top: 23em; width: 68em; height: calc(100% - 23em); left: 3em; background-color: #f6f6f6; border:2px solid var(--colorpicker1); border-bottom:none;
							  display: flex; transform: none; transition: transform 0.5s ease; z-index: 10; }

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

#mfMenu						{ position: absolute; top: 12em; background:var(--colorpicker1); display: flex; align-items: center; width: calc(100% - 3em); height: 6em; margin-left: 3em; }
.DisplayImg					{ top:0; height:100%; }
#mfImprint					{ display:none;}
#mfTop						{ height: 12em; width:100%; z-index: 1; position: absolute; }
.titleDiv					{ display:flex; margin-bottom: 2em; flex-flow:column; }
.titleDiv svg				{ height: 2em; }
.titleDiv svg .st1			{ fill: #FFF; }
.titleDiv svg .st0			{ fill: #000; }
#infoIcon					{ display:none; margin-right: 1em; }

#mfLinks					{ position: absolute; bottom: 1em; right: 1em; z-index: 1; display: flex; align-items: center; z-index:1; }
#mfLinks span				{ cursor:pointer; text-transform: uppercase; color: var(--colorpicker1); margin: 0 1em; transition:all 0.4s ease; font-size: 1.6em; }
#mfLinks span:hover			{ color: #000; }
#mfLinks .trenner			{ width:1px; background-color:var(--colorpicker1); height:1.8em; }

#ViewDiv					{ position: absolute; top: 3.4em; overflow: hidden; right: 14em; }
#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; }
.switchDivDisplay span		{ font-size: 1.4em; }

#showMass		{  width:5em; height:5em;  background-repeat:no-repeat; background-size: contain; position:absolute; right:2em; top:2em; cursor:pointer; }
#showMass svg	{ width: 100%; height: 100%; }
#showMass.act svg path { stroke: var(--colorpicker1); }

/* Banner */
#mfBanner					{ display: flex; align-items: center; height: 100%; position: relative; }
#mfBannerContent			{ height: 100%; display: flex; align-content: center; flex-wrap: wrap; }
#mfLogo						{ cursor:pointer; height:100%; margin-left: 3em; background-position: left center; }
.mfLogo						{ background-image:url('Custom/groke/logo.png'); width: 15em; height:100%; background-repeat:no-repeat; background-size: contain; }
.mfLogo.customLogo			{ height: 80% !important; }

#logo_svg,
#mfLogo	img					{ height:100%; }
#logo_svg .st1				{ fill: #000; }



#mfMenuContent				{ display: flex; margin:0 3em 0 0em; height: 100%; display: flex; align-items: center; }


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

.symbuttonContent			{ display: flex; justify-content: left; flex-wrap: wrap; overflow:auto; gap: 3em 7em; }
.symbutton					{ cursor:pointer; box-sizing: unset; }


#symbuttoninnercontent		{ position: relative; overflow: hidden; }
.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: #003B81; }

#uploadHide				{ right: 1.5em; position: absolute;  z-index: 9; background-color:var(--colorpicker1); cursor:pointer; width:5em; height:5em; }
#uploadHide:hover		{ background: rgba(0,0,0,0.5); transition:all 0.4s ease;}
.showupload				{ right: 7.5em !important; top: 2em; }

/* Toolbar */
#mfToolbar					{ top: calc(100% / 2 - ((5* 4.8em)/2)); position: absolute; right: 0; max-width: 30em; z-index:10; }
#tool						{ position: relative; right: calc(-100% + 4.6em); z-index:1; }
#tool .liContentDiv a:hover { transform: translate(calc(-100% + 5.8em), 0); }
#tool ul					{ display: inherit; padding: 0; }
#tool .menuitem				{ margin:0; }
#tool .menuright			{ display:none; }
#tool ul li .liContentDiv	{ margin-bottom:2em; width:100%; }
#tool .FeatureHelp			{ display: flex; background-color: transparent; width: 100%; justify-content: left; align-items: center; margin-bottom: 0 !important;
							  font-size: 1.6em; margin: 0 0em 0em 3.6em; border-bottom: 2px solid var(--colorpicker1); padding-right: 1em; }
#tool .FeatureHelp span		{ margin-left: 0.5em; margin-right: 0.5em; text-transform:uppercase; color:var(--colorpicker3); white-space: pre; }
#tool .iconDiv				{ background-color: var(--colorpicker1); height: 4.6em; width: 4.6em; display: flex; justify-content: center; align-items: center;
							  margin-bottom: 0 !important; position: absolute; }

#tool .iconDiv svg			{ height: 2em; }
#tool .btnSave svg			{ height: 3.2em; }

#tool .liContentDiv a		{ display: flex; transition: all 0.4s ease; position: relative; height: 4.6em; font-size: 1em; }
#tool .liContentDiv a:hover { transform: translate(calc(-100% + 5.8em), 0); }
.btnPDF svg,
.btnNew svg	 				{ height:3em!important; }


/* DynLayer---------------------------------------------------------------------------*/
.DynLayer					{ background-color: rgba(0,0,0,0.2); 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; }

.DynLayerHeader				{ background-color: #FFF; display: flex; justify-content: space-between; margin-bottom: 1em; border-bottom: 1px solid #ededef; height:6em;
							  display:flex; align-items:center; }
.DynLayerHeader .caption	{ margin-left: 1em; color: #000; text-transform:uppercase; font-size: 2.1em; }

.closeDynLayer				{ width: 2em; height: 2em; margin-right: 1em; padding: 1em; cursor: pointer; }
.close_popupSvg path		{ fill: #000; }


.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(--colorpicker1);}

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

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

/* MoveDynlayer */
.closeMoveDynlayer			{ position: absolute; width: 2em; height: 2em; top: 1em; right: 1em; cursor: pointer; padding: 1em; }
#DynLayer91div input		{ border-radius: 0.5em; border: 2px solid var(--colorpicker1); height: 1.5em; width: 85%; padding-left: 1em; }

#DynLayer90div .DynLayerContent,
#DynLayer94div .DynLayerContent,
#DynLayer96div .DynLayerContent,
#DynLayer91div .DynLayerContent { width: 50em; }

#DynLayer91div .DynLayerContent,
#DynLayer92div .DynLayerContent,
#DynLayer90div .DynLayerContent,
#DynLayer96div .DynLayerContent,
#DynLayer94div .DynLayerContent { max-width: 60em; }

#DynLayer90div,
#DynLayer91div,
#DynLayer92div,
#DynLayer96div,
#DynLayer94div				{ background-color: transparent; justify-content: center; align-items: center; display: none; position: absolute; width: 50em; right: -60em; top: 18em; height:auto; }



/* Login --------------------------------------------------------------*/
#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					{ margin-top: 2em; }
#loginTable	span			{ padding-right: 1em;}
#loginTable	td				{ padding-bottom: 1em;}
#LoginButton				{ position: relative; width: fit-content; margin: 1em 0; background-color: #3e87ba; padding: 1em 1.5em; cursor:pointer; transition: all 0.4s ease; }
#LoginButton:hover			{ background-color: #0e4194; }

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

.loginHinweis				{ display:none;}

/*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 ---------- Laden */
input#RefID					{ margin-top: 1em; margin-bottom: 0.5em; height: 1.9em; border-radius: 0.5em; }
.saveDiv					{ margin-bottom: 1.5em;}
.printRadioDiv				{ display: flex; flex-direction: column; margin: 1em 0; }
.printRadioDiv label		{ margin-bottom: 1em; }
.ErrLoad span				{ color: #000;}
.saveDiv b					{ color: #000; }
.ConfigartionSave			{ margin-top: 2em; margin-bottom: 1em; }
.SaveDataNameButton			{ height: auto; position: relative; display: flex; margin-bottom: 2em; }

/*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 var(--colorpicker1); }
#DynLayer92div input			{ border-radius: 0.5em; border: 2px solid var(--colorpicker1); height: 1.5em; width: 85%; padding-left: 1em; }
#DynLayer92div td				{ padding-top: 1em; }
#__Location, #__Zip				{ width:calc( ((85% - 2em) / 2) - 1px ) !important; }
#__Who, #__Privacy				{ /*width: 2em !important;*/ }
.mailSpan.button				{ display: inline-block; padding: 0.5em 1.5em; background-color: #000; }
.mailSpan.button a				{ color:#FFF; }
#__Privacy + span				{ display: flex; margin-left: 2.5em; margin-top: -1.8em; max-width: 85%; }

.ModellbezeichnungUpload,
.Modellbezeichnung				{ position: absolute;top: 5em; left: 73em; background-color: var(--colorpicker1); padding: 1em 3em; z-index: 10;}
.ModellbezeichnungUpload		{  }
.ModellbezeichnungUpload span,
.Modellbezeichnung span			{ color:#FFFFFF; text-wrap: nowrap; }


.iconDiv svg #HG rect			{ fill:transparent; }
.iconDiv svg #Symbol .st1		{ fill:#FFF !important; }

.ToolbarLogin .svg				{ width:2em; }

/* Tabs------------------------------------------------------------------------------ */
.tabBaseClass				{ height:5.5em; display: flex; align-items: center; background-color: transparent;}
.tabContent					{ margin:2em 1em 0 3em; height:calc(100% - 13.5em); overflow:auto; }
.tabContent.small			{ height:calc(100% - 17.5em); }
#mfSectionContent,
#HideContent				{ width:100%; height: calc(100%); display: flex; flex-direction: column; }
.page_5 .tabClass span		{ padding-left: 1em; padding-right: 0em;}
.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: end; margin-left:1em; margin-right:1em; border-bottom: 2px solid transparent; transition: all 0.4s ease; }
.tabClass span				{ padding-bottom: 0.5em; }
.tabClass.tabClassActive,
.tabClass:hover				{ border-bottom: 2px solid var(--colorpicker2); }
.tabClass:first-child		{  }
.tabText					{ cursor: pointer; margin-bottom:0.5em; font-size: 2.1em; }

.tabClassActive	span		{ padding-left: 1em;  padding-right: 1em; }
.tabClassActive	span a		{ color:var(--colorpicker2); }
.tabClassInActv span		{ padding-left: 1em;  padding-right: 1em;}

/* 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; margin-bottom: 1em;}

.treeOptionsMainBox				{ width: fit-content;}

/* Refelction*/
.reflect						{ content: ""; position: absolute; bottom: -100%; left: 0;
								  right: 0;    top: auto; background: inherit; transform: scale(1,-1);
								  -webkit-mask-image: -webkit-linear-gradient(transparent 25%, #ccc 50%);
								  mask-image: linear-gradient(transparent 90%, #ccc 113%);}

#DisplayFillingImg::after		{ content: ""; position: absolute; height: 0.15em; width: calc(100% + 20em);
								  background-color: rgba(0,0,0, 0.1); z-index: 3; left: -10em; bottom: -0.5em;}

/* -------------------------------- popup -------------------------------- */
#mfPopup					{z-index: 9999; background-color: white; left: 60em; position: absolute; max-width: 55em;max-height: 20em; top: 42em; border: 1px solid var(--colorpicker1);}
#mfPopup div				{ margin:1em; text-align: center;}

#mfPopup .button				{ margin:0em; border: 1px solid var(--colorpicker1);}
.popupText						{ text-align:left !important;}
.popupText span					{ color:Red;}


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

#navi ul li div	a					{ 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); }
#navi ul li:nth-child(2) div a		{ }
#navi ul li:nth-last-child(2) div a	{ }

.menuleft,
.menuright,
.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;}

#navi .menuitemact,
#navi .menuitem:hover			{ background: var(--colorpicker4); transition:all 0.4s ease; }
#navi .menuitemact span,
#navi .menuitem:hover span		{ color: var(--colorpicker1); }

#navi .menuitemact:after	{ content:''; position:absolute; width: 0; height: 0; border-width: 1em 2em 0 2em; border-color: var(--colorpicker1) transparent transparent transparent; border-style: solid;
							  top: 7em; margin: 0 auto; left: 0; right: 0; }

.menuitem svg path {fill: var(--colorpicker4); }
/*#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; }

#mfPrice {
    background-color: #ffffff;
    height: 12em;
    position: absolute;
    right: 0;
    top: 0em;
    width: 26em;
    z-index: 5;
    display: table;
    text-align: right;
}

#mfPrice .PriceDiv {
	padding-right: 1em;
    background-color: var(--colorpicker1);
    display: flex;
    flex-direction: column;
    height: 12em;
    justify-content: center;
    position: relative;
}

#mfPrice div.PriceDiv.textRed	{ background-color: #FF0000; }
#mfPrice .summe {
    color: #FFF !important;
    font-size: 3.7em !important;
    white-space: nowrap;
    font-weight: bold;
}
.warenkorbTexte { display: flex;flex-direction: column; order:1;}
#mfPrice .TextSummeWarenkorb{display:none;}
#mfPrice .TextSummeWarenkorb,
#mfPrice .summeText,
#mfPrice .TextVersand {
    color: #FFF;
    font-size: 1.3em !important;
}

#mfPrice svg #HG rect {
    fill: var(--colorpicker1);
}
#price_svg .st1 { fill:#FFF;}

.changePriceArt				{ width:3.9em; height:4.7em; position:absolute; bottom:0; left:0; background-repeat:no-repeat; font-size: 1em; cursor:pointer; background-size: contain; }
.norm + .changePriceArt		{ filter: contrast(0.7) brightness(150%) }

#mfToolbarContent span.naviText { 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.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: fixed; top: 12em; right: 0em; height: 6em; display: flex; justify-content: center; align-items: center; width: 10em; z-index:11; }
.langli						{ height: 6em; text-align: center; line-height: 6.1em; width: 10em; }
#mfLanguage span			{ cursor:default; font-size: 1.4em; color: #fff; }

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

#mfLanguage .langli + .langli { border-top: 0.0625rem solid #d5dde6;}
.langli:last-child			  { border-bottom: 0.0625rem solid #d5dde6; }
#mfLanguage .langli:hover a	{ color:#000; transition:all 0.4s ease;}
#language_svg				{ margin-right: 1em; }

.languageBox				{ position: relative; width: 100%; height: 100%; }
#language_svg path			{ fill: #FFFFFF; }
.SelectlanguageBox			{ display:flex; }




/* Display ---------------------------------------------------------------- */

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

.sharpenImg					{ image-rendering: pixelated;}

img#GlasImg,
img#GlasImgReflect			{ z-index: 1; }

img#FillingImg,
img#FillingImgReflect		{ z-index: 3; }

img#LeibungImg,
#LeibungImgReflect			{ z-index: 4; }

img#ShapeImg,
img#ShapeImgReflect			{ 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%); }


/* 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:#000; text-transform: uppercase; }
.seriesTilte span	{ font-size:2.2em; }
.seriesBtn			{ position: absolute; bottom: 0; background-color: #4c4c4c; width: 100%; display:flex; justify-content:center; align-items:center; height: 3em; transition: 0.3s; cursor:pointer; }
.seriesBtn:hover	{ background-color:#000; }
.seriesBtn span		{ color:#fff; }


/* -------------------------------- Modelauswahl -------------------------------- */
.ModelleSearch								{ display: flex; align-items: center; position:relative; }
.ModelleSearch.SeriePage					{ margin-bottom:2em; }
input#ModelleSearchInput					{ height: 2.3em; font-size: 1.6em; width: calc(100% - 2.9em); margin:0; border:0; background-color:transparent; padding-left: 1.6em; border: 2px solid #e0e0e1; border-radius: 5px; }

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

.svg.suche_aus								{ background-color:#000;}

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

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

.Modelle									{  }
.program.symbutton							{ overflow:hidden; position:relative; transition: opacity 0.5s ease; border: 1px solid transparent; width: calc((100% / 4) - 6em);}
.symbutton.program img						{ width: 100%; }

.symbutton:hover .Description,
.symbutton.act .Description					{ background-color:var(--colorpicker1); bottom:0; transition: all 0.5s ease; }

.symbutton .Description span				{ color:var(--colorpicker1); }
.symbutton:hover .Description span,
.symbutton.act .Description	span			{ color:var(--colorpicker4);}


.symbutton  .Description					{ display:flex; justify-content:center; align-items:center; width: 100%; margin-top: 1em; transition: transform 0.5s ease; }
.symbutton  .Description span				{ color:var(--colorpicker1); }
.symbutton.act  .Description				{ transition: transform 0.5s ease;}
.symbutton.act  .Description span			{ color:#FFFFFF; }

.symbutton:hover .Description.program,
.symbutton.act .Description.program			{ background-color:#000; transition: transform 0.5s ease;}
.symbutton .Description span				{ font-size:1.4em; padding: 0.5em 0; }

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


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

.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:#d5d6d6; }

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

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

.shapeMeasuretble input.measure					{ height: 1.5em; font-size: 1.6em; width: 6em; margin: 0; padding-right: 1em; text-align:right; border: 2px solid var(--colorpicker1); }
.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:var(--colorpicker1); padding-left: 1.6em;}
.measuretable td							   { padding-bottom:1em; padding-right:1em;}
.shapeMeasuretble							   { display: flex; justify-content: space-between; margin-right: 2em; }

.treeproperty.treeClass9,
.treeproperty.treeClass10					   { margin-top: 3em;}

input#drehpunkt,
input#drehpunkt2flg							   { width: 4em; text-align: right; margin-left: 1em;}


.treeproperty.treeClass11					   { margin-top: 2em;}

/* Türmaße -----------------------------------------------------------------*/
.tuermasse							{ flex-direction:column; margin-top:1em; }
.tuermasse .ueberschrift span		{ color: var(--colorpicker3); }
.tuermasse .ueberschrift			{ margin-bottom:0.5em; }
.packageKapsel						{ display: flex; margin-bottom: 2em; }
.measureKapsel						{ display: flex; align-items: center; }
.kapselTitel						{ width:7em; }
.measureKapsel:first-child			{ margin-right: 4em; }


/* Varianten */
.symbutton.din						{ transition: all 0.5s ease; }
.symbutton.din img					{ width: 100%; }
.symbutton.din:hover,
.symbutton.din.act					{ }
.treeProperty.treeClass2			{ width: calc(100% - 4em); }


/* Türmasse ------------------------------------------------------------------ */
#prDrawing #masse{margin-left: -1cm;}


.lineal_V				{ background-color: #000; width:1px; position:absolute; }
.lineal_V.durchgangsmass{ background-color: var(--colorpicker1); width:2px!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: 50px; left: -10px; top: 0;    height: 1px;}
.lineal_V.gmass:after  { width: 50px; 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; }


/* Farbe/Glas -----------------------------------------------------------------*/
.Rallayer					{ display: flex; flex-wrap: wrap; }
.Contentcolor .symbutton	{ transition: all 0.5s ease; }
.Contentcolor .symbutton .Description			{  }

.areaSelectDiv				{ display: flex; align-items: center; margin-top:1em; }
.labelText					{ color: #000; width: 30%; text-transform:capitalize; }

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

.RALColors,
.symbuttonContent.Contentcolor .color,
.symbuttonContent.Contentcolor .glas,
.symbuttonContent.ContentOptions .handle,
.symbuttonContent.ContentOptions .lock		{ cursor:pointer; width: calc((100% / 4) - 1.5em); transition: all 0.4s ease; }

.RALColors:hover,
.RALColors.act,
.symbuttonContent.Contentcolor .color:hover,
.symbuttonContent.Contentcolor .color.act,
.symbuttonContent.Contentcolor .glas:hover,
.symbuttonContent.Contentcolor .glas.act,
.symbuttonContent.ContentOptions .handle:hover,
.symbuttonContent.ContentOptions .handle.act,
.symbuttonContent.ContentOptions .lock:hover,
.symbuttonContent.ContentOptions .lock.act		{  }

.symbutton.framed.dekor img					{ width: 100%; background-color: black;}
.ContentDekor								{ margin-top: 1em;}
.RALColorDiv,
.symbuttonContent.Contentcolor #symbuttoninnercontent img	{ width: calc(100% - 0.2em);  height: 12em; margin: 0.1em 0.1em 0.1em 0.1em; }


.symbuttonContent.Contentcolor .glas img					{ height:13em!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:14em;}

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

.InputButton						{ text-align:center;}

div#Hover__703 .hoverImg {
    min-width: 28em;
    min-height: 18.6em;
}

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

.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: #000; }
#doorarea,
#doorColorGroup,
#doorglasarea					{ height: 2em; width:100%; border: 2px solid var(--colorpicker1); 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;}

.glasSelectBox					{ display: flex; align-items: baseline; }

#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(--colorpicker2); background-color: var(--colorpicker2); transition: all 0.5s ease;}

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

.handlelengthDiv .SelectButtonDiv	{ position: absolute; top: 0; left: 0; width: 100%; z-index: 0; background-color: var(--colorpicker1);}
.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;}


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


li.marginB1.TreeLI6,
li.marginB1.TreeLI7 {
    margin-bottom: 1em;
}
.treeproperty.treeClass7 {
    margin-top: 4em;
}
/* Zubehör --------------------------------------------------------------*/
.OPT_input {width:2em; text-align:center;}
.optTreeAddInputDiv		{ margin-left: 1em; }

/* Zusammenfassung -----------------------------------------------------*/
#Zusammenfassung { width: 100%;}
#Zusammenfassung .abstand td {	padding-bottom: 1em !important;}
/*#Zusammenfassung .einruecken td {font-weight: lighter !important; font-style: italic; padding-left:10%}*/
#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 .einruecken td.row1 span{font-weight:lighter; }
#Zusammenfassung td {text-align: left;vertical-align: top;}
#Zusammenfassung .row1 {width: 35%;background-color: whitesmoke;padding:0 1em 0.5em 0px;}
#Zusammenfassung .row1 .nummerierung {font-weight: bold; color: #000;width: 0px;display: none;}
#Zusammenfassung .row1 span { }
#Zusammenfassung .red  .row1 span {font-weight: bold; color: var(--colorpicker3);}
#Zusammenfassung .einruecken .row1 span {color: var(--colorpicker3);}
#Zusammenfassung .row2 {width: 51%;padding:3px}
#Zusammenfassung .row2 span {font-weight: normal; padding-left: 1%; display: flex;}
#Zusammenfassung .row3 {width: 14%; text-align: right;}
#Zusammenfassung .row3 span {font-style: normal; padding-left: 0px;}
#Zusammenfassung .row4 {visibility:collapse; width: 0; padding:0px;}
	
/*-------------------*/



/* Upload --------------------------------------------------------------*/
#UploaderDiv .button,
.upl_btnMain .button		{ border: none; position: relative; height: 4em; width: auto; margin-top:1.5em;	overflow:hidden; background-color:var(--colorpicker2);
							  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(--colorpicker1); }
.svg.UploadIcon				{ height: 13em; }
.upload_pf .UploadIcon		{ height: 4em; }

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

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

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

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

.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;margin-top: 8em; left:0; display:none }

#FileUploadMain .button span { background:transparent; }

.button.uploadReset span,
.button.uploadDelete span,
.button.uploadRotate span	{ color:#FFF; }

.button.uploadReset:hover,
.button.uploadDelete:hover,
.button.uploadRotate:hover	{ background-color:var(--colorpicker1) !important; }

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

#CuteWebUIDescription		{ margin-bottom: 2em;}

#uploaddiv				{ height: 71em; width:111em; top:4em; position:absolute; background-color: white; z-index:2; border: 2px solid #fe8300; left:75em; }

#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; right: 6em; top: 2em }
#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				{ position:absolute; bottom:1em; width:calc(100% - 5.5em); height:3em; z-index: 1; z-index:100; margin: 0em 2.8em; }
#mfNext					{ float: right; right:0; text-align:left; }
#mfNext a				{ }

#mfPrev					{ float: left; left:0; text-align:right; }


#mfStepper ul			{ margin:0; padding:0; width:auto; height: 3em; position:absolute; background-color:transparent; transition: all 0.4s ease; cursor:pointer;
						  display:flex; justify-content: center;  align-items: center; border:2px solid var(--colorpicker1); }
#mfStepper ul:hover		{ background-color:var(--colorpicker1); }

#mfStepper a			{ color:var(--colorpicker1);  display:block; width: 100%; cursor: pointer; z-index: 999;  position:relative; padding: 0.3em 2em 0.4em 2em; text-transform: lowercase; }
#mfStepper ul:hover	a	{ color:var(--colorpicker4); }


#hideSection			{ display:none!important; 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		{ display:none!important; background-color: #636363; 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: #000; 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(--colorpicker1); 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); }
/* ----------------------------------------------------------------------------- */


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

.anfrage_kombodiv									{  }

/* customCheckbox */
.customCheckbox										{ font-family: arial; display: inline-block; position: relative; padding-left: 0em; margin-bottom: 0; padding-top:0; cursor: pointer; width:2.5em; height: 2.5em; }
.customCheckbox input								{ position: absolute; z-index: -1; opacity: 0; padding: 0!important; margin: 0!important; width: 1.5em!important; }
.control_indicator									{ position: absolute; top: 0; left: 0; height: 2em; width: 2em; background: #ffffff; border: 2px solid var(--colorpicker1); border-radius: 0px; }
.customCheckbox:hover input ~ .control_indicator,
.customCheckbox input:focus ~ .control_indicator	{ background: #dddddd; }

.customCheckbox input:checked ~ .control_indicator { background: #ffffff; }
.customCheckbox:hover input:not([disabled]):checked ~ .control_indicator,
.customCheckbox input:checked:focus ~ .control_indicator	{ background: #ffffff; }
.customCheckbox input:disabled ~ .control_indicator			{ background: #e6e6e6; opacity: 0.6; pointer-events: none; }
.control_indicator:after									{ box-sizing: unset; content: ''; position: absolute; display: none; }
.customCheckbox input:checked ~ .control_indicator:after	{ display: block; }
.control-checkbox .control_indicator:after					{ left: 0.6em; top: 0.2em; width: 0.6em; height: 1.1em; border: solid var(--colorpicker1); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.control-checkbox input:disabled ~ .control_indicator:after { border-color: #7b7b7b; }
/* Ende customCheckbox*/


/* Druck / Print ----------------------------------------------------------- */
@page					{ size: A4; margin: 5mm 10mm 0mm 15mm; }
@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: 50px; }
	.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%; }
	.row3.bezeichnung1 span				{ text-align: right;font-weight: bold;}
	.prPartTableHeader span				{ font-weight: bold; }

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

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


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

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



/* Ladeanzeige Nr.1 */
.loading-indicator			{ display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: relative; }
.loading-indicator:after	{ content: " "; display: block; width: 6.4em; height: 6.4em; margin: 0.8em; border-radius: 50%; border: 0.6em solid var(--default-color);
							  border-color: var(--default-color) transparent var(--default-color) transparent; animation: loading-indicator 1.2s linear infinite; }
@keyframes loading-indicator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Ladeanzeige Nr.1 Ende  */