/* basic styles ------------------------------------------------------------ */ html { font-family: Arial, MS Sans Serif; font-size: 10px; height: 100%; width: 100%; text-decoration: none; font-weight: normal; color: #000000; } #Insertion { height: 100%; width: 100%; } p { clear: both; margin: 0.5em 0; } body { margin: 0; padding: 0; height: 100%; overflow: hidden; } .select { width: 4.167em; height: 1.5em; font-size: 0.917em; border: 0.083em solid #666666; top: 0.083em; position: relative; } img { border:none; } .clear { clear: both; } .title { font-size: 1.417em; } .nselect { height: 1.667em; width: 6.667em; position: absolute; } .worldwrap { height: 2.083em; width: 100%; text-align: right; } .world, .sectn { margin: 0.333em 0 0.167em 0; } .imgCur { cursor:pointer; } td { vertical-align: baseline; text-align: left; } form, table { margin: 0; background-color: transparent; } .nowrap { white-space: nowrap; } .nofd { margin: 0.333em; margin-top: 0.833em; } .measure { width: 7.5em; height: 1em; } .btnTabText { } a, span, b, p, input { font-size:1.6em; text-decoration: none; font-weight: normal; color: #000000; } span b, b span, span span, span a, a span, p a, a p, p span, span p, p input { font-size:1em } .showsetup { font-size: 1.4em; } h2 { color: #FFF; font-size: 2.5em; } u { color: #FFF; } .svg { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .svg svg { height: 100%; } table td { padding:0; margin:0; vertical-align: top; } table { border-collapse: collapse; } input:disabled, input:disabled+a { color: #666666; } input#submit { background: #606c76; border: none; border-radius: 0.3em; padding: 0.5em 1.5em; color: #FFF; text-transform: capitalize; } input#sw2, input#sw, input#sh, input#swl, input#swr, input#flh, input#swe, .measuretbl input[type="text"] { border: 1px solid #d2d2d2; height: 2em!important; border-radius: 0.3em; text-align: right; padding-right: 0.5em; } .measuretbl { width: 100%; } .measuretbl, .measuretbl tr td { white-space: pre; padding-bottom: 2em; padding-right: 2em; } .measuretbl .xMass { margin-left:1em; } table.measuretbl td:first-child span { font-weight: bold; } #ButtonCreator { background: #a9a9a9; color: #fff; font-size: 2em; height: calc(100% - 0.5em); padding: 0.5em 0.5em 0 0.5em; } #ButtonCreator:hover{ background: #2198b7; cursor: pointer; } .control-Radio { margin-bottom: 1em; margin-right: 3em; } .mobileView #mfSidebar { right: 0em; } .mobileView #side li { height: 4.5em; width: 4.5em; } .mobileView #side li span { display:none; } /* Mainframe --------------------------------------------------------------- */ .center { margin-left: auto; margin-right: auto; height: 100%; } .mfCenter { margin: 0; width: 100%; height: 100%; } #mfTop { width: 100%; height: 17em; position: absolute; background-color: transparent; z-index: 999; } #mfTopStart { width: 100%; height: 10em; position: absolute; background-color: transparent; z-index: 999; } #mfToolbar { width: 100%; height: 4.5em; left: 0; bottom: 0; position: fixed; z-index: 999; background-color: #cccccc; } #mfHeaderToolbar { position: absolute; top: 0; right: 10em; height: 12.5em; z-index: 999; } #mfToolbarContent { height: 100%; display: flex; align-items: center; } #mfBanner { width: 100%; height: 12.5em; float: left; background-color: #FFFFFF;} #mfBannerContent a { font-size: 1em; } #mfBannerContent .message { margin-top: -1.6em; } .mfLogo { width: auto; height: 6em; } #mfLogo { top: 3.5em; left: 3em; float: right; position: absolute; width: 28.5em; height: 5.5em; background-repeat: no-repeat; cursor: pointer; cursor: hand; background-size: contain; } #mfMenu { width: 100%; height: 4.5em; left: 0; top: 12.5em; position: absolute; z-index: 999; background-color: #cccccc; } #mfMenuContent { position: absolute; height: 100%; width: 100%; } #mfMain { width: 100%; height: 100%; background-color: transparent; } a.fancybox { display: flex; height: 100%; } #mfDisplay { background-color: transparent; } #mfDisplay, #mfDisplayWait { top: 17em; position: absolute; width: calc(100% - 78em); height: calc(100% - 21.5em); right: 0em; overflow: hidden; display: flex; justify-content: center; align-items: center; } #mfDisplay .UploadDiv { position: relative; width: 70em; height: 70em; float: right; } .UploadDiv #DisplayImgDiv { height: calc(100%); } div#appFrameDsp { height: 100%; } #mfDisplayWait { background-image: url(Media/GUI/wait_60.gif); height: 100%; top: 0; left: 0; position: absolute; width: 100%; background-repeat: no-repeat; background-position:center center; background-repeat: no-repeat; } #mfSection { width: 75em; height: calc(100% - 17em); display: flex; flex-direction: column; left: 3em; position: relative; top: 17em; z-index: 999; } #mfSectionContent { order: 1; width: 100%; flex: 3; max-height: calc(100% - 4.5em); transition: all 0.5s; -webkit-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.2); box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.2); } #mfFilter.open + #mfSectionContent { max-height: calc(100% - 28em); } #mfFilter { order: 2; flex: 1; position: absolute; bottom: 0; width: 100%; } #mfFilter .FilterSliderText.open, #mfFilter.open .FilterSliderText.close { display:none; } #mfFilter.open .FilterSliderText.open, #mfFilter .FilterSliderText.close { display:flex; } #mfFilter.page2 .mfFilterSlider, #mfFilter.page6 .mfFilterSlider, #mfFilter.page7 .mfFilterSlider, #mfFilter.page8 .mfFilterSlider { display: none; } #mfSectionContent.scroll { overflow-y: auto; } #mfFilter > div { } #mfFilter > div > h1 { font-size: 1em; font-weight: bold; margin-left: 0.5em; } #mfFilter * p { width: fit-content; } #mfFilterColor, #mfFilterGlas { flex: 2!important; } #mfFilterColor .mfFilterSlider, #mfFilterGlas .mfFilterSlider { display:none; } #mfFilterColor div.symbutton.handle img, #mfFilterColor div.symbutton.intern img { width: 7em; height: 7em; } #mfFilterColor .symbutton.handle, #mfFilterColor .symbutton.intern { margin: 1.4em 1em -0.7em 3em; } #mfFilterColor .filterContent, #mfFilterGlas .filterContent{ display:flex; flex-direction:column; background: transparent; margin-top: 1em; } #mfFilterColor .color img, #mfFilterGlas .glas img { width:15.5em; } #mfFilterColor .color .SymTitle, #mfFilterGlas .glas .SymTitle { justify-content: center; } div#Prop104Fltr { display: none; } .filterContent { display:flex; flex-direction:row; height:0em; overflow:hidden; transition:all 0.5s; background:rgba(169, 169, 169, 0.9); } #mfFilter.open .filterContent { height:20em; padding-bottom: 8em; } #GroupFltr { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 22em; } #GroupFltr .labelcontrol { width: 30%; } #GroupFltr { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 22em; align-items: flex-start; align-content: flex-start;} #filter_svg { background: #2198b7; border-radius:100%; } #filter_svg svg { height:75%; } #filter_svg path { fill:#FFF; } .mfFilterSlider { width: calc(100% - 9em); background:rgba(169, 169, 169, 0.9); height: 4.5em; display: flex; justify-content: center; align-items: center; cursor:pointer; z-index: 1; position: absolute; bottom: 0; left: 4.5em; touch-action: none!important; } .FilterSliderText { color:#FFF; text-transform:uppercase; } .FilterSliderIcon { width:3.3em; height:3.3em; margin-right: 1em; } #Prop102Fltr, #Prop103Fltr { min-width: 13em!important; } #GroupFltr > p:nth-of-type(even) { } #Prop104Fltr > p:nth-of-type(even), #Prop100Fltr > p:nth-of-type(even), #Prop101Fltr > p:nth-of-type(even) { } .bigTitle { display: none; top: 17em; position: absolute; width: 100%; justify-content: center; align-items: center; height: 10em; } .bigTitle span { font-size:3em; } #mfGroupSlct { top: 19em; position: relative; min-width: 70em; display: flex; flex-flow: row; justify-content: center; height: calc(100% - 23.5em); overflow-y: auto; } #mfGroupSlct table { margin: auto auto auto auto; flex: 1; height: auto; } .mfGroupSlctLine { height: 12em; min-height: 12em; overflow: hidden; width: 38em; border: 1px solid #eaeaea; display: flex; justify-content: flex-start; align-items: center; margin: 0 2em 1.5em 2em; position: relative; overflow:hidden; touch-action: none!important; } .mfGroupSlctSample { width: 42.5em; height: 7.167em; overflow: hidden; } .mfGroupSlctLine:hover {} .ModellTyp { display: flex; flex-flow: column; } #mfTeaser a img { width: 100%; height: 100%; } #mfTeaser { display:none; background-image: url(Media/GUI/Staatliche-Foerderung_v06.jpg); background-repeat:no-repeat; background-size: contain; z-index: 999; width: 16.5em; height: 25em; bottom: 4.5em; right: 0em; position: fixed; } .mfSclsSlct { } .mfSclsSlctArrow { width: 1.5em; height:2.917em; background-repeat: no-repeat; background-size: cover; } .mfSclsSlct span { font-size: 2em; } .mfGroupSlctLine img { margin-top: 2em; } #mfGroupSlct * img, a .mfSclsSlct { float: left; } .typAnzeige { position: absolute; left: 80em; } .typAnzeige span { text-transform:uppercase; font-size:2em; } /* Sidebar */ .tollbarPos { display: flex; justify-content: center; height: calc(100% - 21.5em); width: 4.5em; right: 0em; position: inherit; align-items: center; top: 20em; position: absolute; margin-top: -15em; } #mfSidebar { position: absolute; right: -18em; z-index: 1; } #mfSidebar .text { display:none; } #side ul { display:flex; flex-direction:column; margin: 0; padding: 0; list-style: none; } #side li { height: 4.5em; width: 22.5em; margin-bottom:0.5em; transition: all 0.3s ease; position: relative; background: #FFF; cursor:pointer; } .menuitem { cursor:pointer; } #mfSidebar li.menuitem div { display: flex; align-items: center; justify-content: center; height: 100%; } li.menuitem div { display: flex; align-items: center; justify-content: flex-start; height: 100%; } .btnBeamer svg { height:80%; } #side .menuright, #side .menuleft { display:none; } .liContentDiv { width:100%; height:100%; display: flex; } .icon { height:2.5em;} #side .svg { width: 4.5em; height: 4.5em; position:absolute; top:0; left:0; background: rgba(68,68,68); } #side .menuitem a { display:flex; justify-content:flex-start; align-items:center; position:relative; height: 100%; width:100%; } #side span { color:#000; padding-left: 1em; padding-left: 3.5em; } #side .menuitem:hover { transform: translate(calc(-100% + 4.5em), 0); background:#2198b7; } #side .menuitem:hover .svg { background:#2198b7; } #side .menuitem:hover span { font-weight: bold; color:#FFF; } #side svg path { fill: #FFF; } /* 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: 4.5em; right: 3em; height: 4em; display: flex; justify-content: center; align-items: center; width: 10em; z-index:1000; } .langli { height: 6em; text-align: center; line-height: 6.1em; width: 10em; } #mfLanguage span { cursor:default; } .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: 0.0625rem solid #d5dde6;} #mfLanguage .langli:hover a { color:#025196; transition:all 0.4s ease;} #language_svg { margin-right: 1em; } .languageBox { position: relative; width: 100%; height: 100%; } #language_svg path { fill: #3a424a; } .SelectlanguageBox { display:flex; } .abschlussTable tr td { padding-bottom:0.5em; } .abschlussTable tr td:first-child { font-weight: bold; } #mfSlogan { top: 2.833em; left:0.833em; position: relative; color: #666666; font-size: 2em; font-weight: 300; font-family: Arial, MS Sans Serif; padding-left: 1.33em; } #mfStart, #mfStart a img { width: 100%; height: 47.583em; } #mfStart { background-image: url(Media/GUI/start.jpg); background-repeat:no-repeat; background-size: cover; z-index: 0; top: 7em; position: relative; } #mfStrFt { background-color: #666666; left: 0; bottom: 0.083em; position: absolute; width: 100%; height: 3.4em; } #mfStrFt a div { width: 80em; margin-left: auto; margin-right: auto; color: #FFFFFF; font-size: 2em; margin-top: 2.5em; text-align: right; font-family: Arial, MS Sans Serif; font-weight: 300; } #mfPrice { color: #ffffff; overflow: hidden; text-align: right; right: 4em; position: absolute; z-index: 99; height: 4.5em; display: flex; align-items: center; } #mfPrice span { font-weight:bold; font-size:2em; color:#FFF; } #mfZoom { display: none; } #mfFoot { display: none; } /* Display ----------------------------------------------------------------- */ #Display {} #DisplayImg { height: 100%; } #DisplayImgDiv { height: calc(100% - 2em); background-color: transparent; display: flex; justify-content: center; align-items: center; } #DisplayHelp { display: none; } #DisplayHelpAtn { display: none; } #DisplayView { bottom: 2em; right: 0em; position: absolute; width: 100%; display: flex; justify-content: center; } #DisplayRefID { top: 0.25em; left: 0.417em; position: absolute; color: #000000; display: none; } #DisplaySymbols { top: 4em; left: 2em; position: absolute; display: none; } #DisplaySymbols .symbutton { margin: 0em 2em 0em 0em; } #DisplayView a { font-size: 0.833em; color: #ffffff; } #DisplaySwitch { display: none; } #DisplayHlpx { display: none; } /* Print ------------------------------------------------------------------- */ .prPage { height: 81.667em; width: 62.5em; margin: 0.583em; } #prLogo { background-repeat: no-repeat; background-position: left; margin: 1em 0 0 1em; min-height: 6em; height: fit-content; } #prLogo img { height: 100%; max-height: 6em; } #prMain, #prMain * { color: black; } #prFoot {} .prItemTable { width: 100%; padding: 0; margin: 0; } .prItemTable td { padding-top: 0.167em; padding-bottom: 0.25em; } .prItemHeader td { font-weight: bold; } .prItemCount {} .prItemItems {} .prItemDescr { width: 50%; } .prItemPrice { text-align: right; } .prItemFooter td { border-top: 0.083em solid black; } /* Reference input control ------------------------------------------------- */ #mfRefIDSlct { margin-top: 0.167em; margin: 0 auto; } #mfRefIDSlct.RefIDSlct input { width: 13em; border: 0.083em solid #575757; background-color: transparent; color: #3a424a; font-size: 1.6em; height: 1.6em; } #mfRefIDSlct.RefIDSlct ul { margin: 0; padding: 0; display: flex; align-items: center; } #mfRefIDSlct.RefIDSlct ul ul { float: right; padding: 0; margin: 0 1.167em 0 0; } #mfRefIDSlct.RefIDSlct ul ul a { color: white; background-color: #575757; width: 1.9em; display: flex; height: 1.9em; } #search_svg { margin-left: -0.7em; } #search_svg path { fill: #FFF; } /* button emulation --------------------------------------------------------- */ .button ul { background-color: #666666; padding: 0.167em; margin-top: 0.167em; float: left; height: 1.25em; } .button ul a { color: white; text-transform:uppercase; background-color: transparent; font-weight: bold; } .button ul:hover { background-color: #666666; } /* Coverflip --------------------------------------------------------------- */ .ui-jcoverflip { position: relative; } .ui-jcoverflip--item { position: absolute; display: block; } /* Navigation -------------------------------------------------------------- */ .navigation { } .navigation span.text { } .navigation span.large { } .navigation ul { list-style-type: none; background-color: transparent; margin:0; padding:0; } .navigation li { padding: 0; list-style-type: none; background-color: transparent; float: left; } .navigation li.menuitem span, .navigation li.menuitemact span, .navigation li.menuitemvis span { padding: 0; margin: 0; color: #FFFFFF; text-transform: uppercase; float: right; } .navigation li.menuitemlst span { padding: 0.583em 0 0.583em 0; } .navigation li.menuitemvis span { color: #FFFFFF; } .navigation li.menuitem { height: 4.5em; display: flex; justify-content: center; align-items: center; padding: 0 2em; cursor:pointer; transition: background .3s } .navigation .menuitemact, .navigation li.menuitem:hover { background: #2198b7; } .navigation li.menuleft { display:none; } .navigation li.menuright { display:none; } .navigation ul ul { display: none; } .navigation ul li:hover ul { display: block; } .navigation ul ul li { float: none; } .navigation ul ul li:hover {} .navigation ul ul li:hover a {} .navigation img.icon {} .navigation img.dropicon {} /* Toolbox ---------------------------------------------------------------- */ #tool { position: absolute; right: 3em; height: 100%; top: 0; display: flex; justify-content: center; align-items: center; } #menuright, #menuleft { display:none; } #tool ul { padding: 0; list-style-type: none; background-color: transparent; float: left; display: flex; justify-content: center; align-items: center; margin: 0; } .btnEmail svg, .btnBeamer svg { width: 3.5em; } #tool li.btnSeparator { margin: 0 1.5em; } #tool img.icon { display: none; } #tool .menuright { width: 1px; height: 1.5em; background: #3a424a; margin: 0 1.5em; } #tool .menuright:last-child { display: none; } #navi { position: absolute; width: calc(100% - 6em); height: 100%; background:#a9a9a9; margin-left:3em; } #reff { display: none; } #comm { position: absolute; right: 10em; height: 100%; top: 0; display: flex; justify-content: center; align-items: center; } #comm .menuitem span a { display: flex; flex-direction: row; justify-content: center; align-items: center; } #comm ul { padding: 0; list-style-type: none; background-color: transparent; float: left; display: flex; justify-content: center; align-items: center; margin: 0; } #comm .menuitem .svg { width: 2.5em; height: 2.5em; margin-right: 0.5em; } /* Buttons ----------------------------------------------------------------- */ #mfStepper { background:rgba(169, 169, 169, 0.9); height:4.5em; width: 75em; bottom: 0; z-index: 0; display: flex; justify-content: space-between; position:absolute; } #mfStepper .btnNext, #mfStepper .btnPrev { width: 4.5em; height: 4.5em; margin: 0; padding: 0; order:1; position:relative; } #next_svg svg, #prev_svg svg { height: 4em; width: 4em; } #prev_svg svg { transform:rotate(180deg) } #next_svg, #prev_svg { position: absolute; top: 0; } #mfStepper .btnNext { order:2; } #next_svg, #prev_svg { z-index: 1!important; } #next_svg svg path, #prev_svg svg path { fill: #FFF; } #mfStepper .btnNext > div, #mfStepper .btnPrev > div { width: 100%; height: 100%; cursor:pointer; position: absolute; z-index: 2; } #mfStepper ul a div { } .btnNext { } .btnPrev { } .btnBold a { font-weight: bold; } .buttonsDiv { display: flex; width: 90%; justify-content: space-around; margin-top: 2em; } .buttonsDiv ul { margin:0; padding:0; } .btnYes, .btnNo, .btnOK, .btnSend { background: #2198b7; cursor:pointer; } .btnYes div, .btnNo div, .btnOK div, .btnSend div { display:flex; } .btnYes span, .btnNo span, .btnOK span, .btnSend a { color: #FFFFFF; padding:1em 3em; display:flex; } .btnFeedback { min-width: 7.5em; padding: 0.5em 0.5em 0.3em 0.5em; border-radius: 0.25em 0.25em 0 0; font-size: 1em; font-weight: bold; margin: -0.55em -0.2em 0 -2.05em; top: 12.2em; right: 0; position: fixed; height: 1.7em; transform: rotate(90deg); } .btnFeedback a { top: 0.1em; right: 0.1em; position: relative; padding: 0 0 0 0.35em; color: #ffffff; font-size: 1em; font-weight: bold; } /* Elemente aus TabDialog -------------------------------------------------- */ .slideClass { width: 100%; margin: 0 0 0.3em 0; } .slideHead { height: 2em; display: flex; align-items: center; padding-left: 2em; } .slideHead:first-child { margin-top: 2em!important; } .slideHead a { font-weight:bold; } .slideContent { display: none; overflow:auto; padding: 2em 2em 0 2em; margin-bottom: 0; width: calc(100% - 2em); -webkit-overflow-scrolling: touch; } .slideContentAuto .slideContent { display: flex; width: auto; height: auto; overflow: hidden; flex-wrap: wrap; } .slideHead.page1.tab0 + .slideContent { gap: 0em 4.4em; } .slideHead.page7.tab1 { display: none; } .slideHead.page7.tab1 + .slideContent { gap: 0em 1.5em; display: none; } .slideHead.page7.tab2 + .slideContent { gap: 0em 2.3em; display: flex; width: 93%%; flex-wrap: wrap;} .slideHead.page6.tab2 + .slideContent .hingesSelect { gap: 0em 2.3em; display: flex; width: 100%; flex-wrap: wrap;} .slideHead.page3 + .slideContent, .slideHead.page4.tab0 + .slideContent, .slideHead.page5.tab0 + .slideContent, .slideHead.page5.tab1 + .slideContent, .slideHead.page5.tab2 + .slideContent, .slideHead.page5.tab3 + .slideContent { gap: 1.5em; justify-content: flex-start; } .slideHead.page7.tab0 + .slideContent { flex-direction: column; } .slideHead.page2.tab0 + .slideContent { justify-content: flex-start; } .slideContentAuto .slideHead.page1 { display: none; } .slideContentAuto .slideHead.page3.tab0 { display: block; } .slideContentAuto .slideHead { margin: 3em 0 0 0; } .slideContentAuto .slideHead.tab0 { margin: 0; } .slideContentAuto { margin: 0; } .StandardCtrlDiv { display: flex; flex-direction: column; margin-bottom: 1em; width: 40em; } .StandardCtrlDiv p { margin:0; padding:0; } .StandardCtrlDiv:empty { padding-bottom: 0; margin: 0; } .StandardCtrlDiv h1 { color: #FFFFFF; border-top: 1px solid #FFF; padding: 0.6em 0em; border-bottom: 1px solid #FFF; text-align: center; width: 11em; } #SecureExx, #LockEx { width: 28em; } .filterContent .StandardCtrlDiv { display: flex; flex-direction: column; margin-left: 2.3em; width: unset; } .filterContent .StandardCtrlDiv p { margin:0; padding:0; } .filterContent .StandardCtrlDiv:empty { padding-bottom: 0; } .filterContent .StandardCtrlDiv h1 { color: #FFFFFF; border-top: 1px solid #FFF; padding: 0.6em 0em; border-bottom: 1px solid #FFF; text-align: center; width: 11em; } #modellsucheFilter #mfRefIDSlct { width: 100%; margin: 0; } #modellsucheFilter ul { position: relative; } #modellsucheFilter #mfRefIDSlct input { height: 2.2em; border: 1px solid #FFFFFF; color:#FFFFFF; padding-left: 0.5em; } #modellsucheFilter #mfRefIDSlct a { background-color: transparent; } #modellsucheFilter #search_svg { height: 1.8em; } #modellsucheFilter ul ul { background-image:none!important; padding: 0!important; margin: 0!important; position: absolute; right: 1em; } /* Section inhalte */ .hingesColorSelect { display: flex; justify-content: space-between; width: 97%; flex-wrap: wrap; margin-top: 2em; } /* Dynlayer -----------------------------------------------------------------*/ .DynLayer { z-index: 1000; } #DynLayer1div, #DynLayer2div, #DynLayer11div, #DynLayer90div, #DynLayer91div, #DynLayer8div, #DynLayer96div, #DynLayer99div { background:rgba(89,89,89,0.5); width:100%!important; height:100%!important; left:0!important; top:0!important; display:flex; justify-content:center; align-items:center; } #DynLayer1div .DynLayerContent, #DynLayer2div .DynLayerContent, #DynLayer11div .DynLayerContent, #DynLayer90div .DynLayerContent, #DynLayer91div .DynLayerContent, #DynLayer96div .DynLayerContent, #DynLayer99div .DynLayerContent, #DynLayer8div .DynLayerContent, #DynLayer100div { -webkit-box-shadow: 0px 0px 25px 15px rgba(0,0,0,0.3); box-shadow: 0px 0px 25px 15px rgba(0,0,0,0.3); } #DynLayer1div span, #DynLayer1div a, #DynLayer2div span, #DynLayer11div span, #DynLayer90div span, #DynLayer91div span, #DynLayer91div a, #DynLayer8div span, #DynLayer96div span, #DynLayer99div span { color: #FFF; } .DynLayerContent { background:#595959; padding: 3em; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 35%; } .DynLayerInnerContent { display:flex; justify-content:center; align-items:center; flex-direction: column; padding: 0 3em; } .DynLayerInnerContent * b { color: #ffffff; font-weight: bold; } #DynLayer91div .DynLayerInnerContent { padding: 0 } .caption { display: flex; align-items: end; } .caption span { font-size: 3em; } .DynLayerHeader a { top: -1.667em; right: 0.25em; position: relative; color: #FFFFFF; } .DynLayerHeader { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .DynLayerHeader .close { width: 3.2em; height: 3.2em; cursor:pointer; } #close_svg path { fill: #FFF; } #DynLayer100div .DynLayerContent { background-color:#FFF; max-width:100%; } #DynLayer100div .DynLayerInnerContent { padding: 0; } #DynLayer100div .DynLayerInnerContent * b { color: #000000; font-weight: bold; } #DynLayer100div table td { vertical-align: top; } #DynLayer100div table span { padding: 0 0 0 1em; display: flex; flex-direction: column; } #DynLayer96div table, .message { margin-top: 2em; } #DynLayer1div input[type="button"], #DynLayer2div input[type="button"] { border: none; color: #FFF; background: #2198b7; padding: 1em 2em; margin-top: 1em; cursor:pointer; } #DynLayer2div input[type="button"] { margin-left: 2em; width: auto!important; height: auto!important; } #DynLayer83div { left: 0!important; right: auto!important; top: 10.5em!important; position: absolute; height: calc(100% - 14.5em)!important; transition: width 0.5s ease; } #DynLayer83div * .btnFeedback { top: 3em; right: -5.5em; position: relative; float: right; margin: 0; } #DynLayer83div * .DynLayerHeader { display: none; } #DynLayer83div.hidden * .btnFeedback { } #DynLayer83div .DynLayerInnerContent { margin: 0 0 0 -0.3em; } #DynLayer83div .DynLayerInnerContent table { float: left; width: calc(100% - 2em); margin: 1em auto auto 1em; } #DynLayer83div.hidden .DynLayerInnerContent { margin: 0 0 0 -0.4em; } #DynLayer83div .DynLayerInnerContent table tr td { padding: 0.5em; } #DynLayer83div.hidden .DynLayerInnerContent table { display: none; } #DynLayer83div .DynLayerInnerContent table * #fmsg { font-size: 1em; width: 25em; height: 10em; } #DynLayer83div .DynLayerInnerContent table * #email { font-size: 1em; width: 25em; } #DynLayer83div.hidden { display:block; position: absolute; width: 0!important; } #DynLayer2div input[type="text"], #DynLayer91div input[type="text"], #DynLayer91div textarea, #DynLayer96div input { border: 1px solid #d2d2d2; height: 2em!important; text-align: right; padding-right: 0.5em; background-color:transparent; color:#FFF; width: 15em; } #DynLayer91div #srcity { width: 11.2em; } #DynLayer91div textarea { font-size: 1.6em; height: 5em!important; resize: none; } #DynLayer91div table td { padding: 0px 2em 1em 0em; margin: 0; } #DynLayer96div table td { padding: 0px 2em 2em 0em; margin: 0; } .ipplz { width: 2em!important; margin-right: 1em; } /* HoverStyles --------------------------------------------------------------*/ #tooltip { border:0.083em solid black; background-color:#FFFFFF; } /* SymButton ----------------------------------------------------------------*/ div.symbutton { margin: 0em 0em 2em 0em; cursor: pointer; cursor: hand; float: left; text-align: center; transition: all 0.5s; } div.symbutton.act .SymTitle, div.symbutton:hover .SymTitle { background:#2198b7; } div.symbutton img { } .SymTitle { height: 3em; color:#FFF; background:#cccccc; display:flex; justify-content:center; align-items:center; transition:all 0.5s; } div.autosize { width: auto; height: auto; } #DoorFrame { position:absolute; top: 0; left: 0; } div.cross { margin: 0; color: #DA020C; } div.cross:hover { cursor:move; } div.din div, div.variant div { display: none; } div#Fusion .btnTabText { margin-left: 3.75em; } div.framed { min-width: 5em; } div.framed img:hover { } div.framed.act img { } div.framed img { } div.framed div { } div.symbutton.shape { height: 11em; position:relative; margin-right: 2em; } div.symbutton.shape img { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height: 6em; max-width: 5.5em; } div.symbutton.shape .SymTitle { display:none; } div.symbutton.glas { } div.symbutton.glas img { width: 21.2em; height: 13.8em; border: 3px solid #fffFFF; outline: 1px solid #cccccc; } div.symbutton.glas .SymTitle { color: #3a424a; background: transparent; justify-content: flex-start; } div.symbutton.color { } div.symbutton.color img { width: 20.6em; height: 6.8em; border: 3px solid #fffFFF; outline: 1px solid #cccccc; } div.symbutton.color.act img, div.symbutton.color:hover img{ outline: 1px solid #2198b7; } div.symbutton.color .SymTitle { color: #3a424a; background: transparent; justify-content: flex-start; } div.symbutton.handle div:nth-of-type(1), div.symbutton.intern div:nth-of-type(1), div.symbutton.hinges div:nth-of-type(1) { outline: 1px solid #cccccc; min-width: 15em; max-width: 15em; background-color: #fff; } div.symbutton.handle:hover div:nth-of-type(1), div.symbutton.intern:hover div:nth-of-type(1), div.symbutton.hinges:hover div:nth-of-type(1), div.symbutton.hinges.act div:nth-of-type(1), div.symbutton.intern.act div:nth-of-type(1), div.symbutton.handle.act div:nth-of-type(1) { outline: 1px solid #2198b7; } div.symbutton.hinges { } div.symbutton.hinges .SymTitle { color: #3a424a; background: transparent; justify-content: flex-start; flex-wrap: wrap; width: 13.5em; text-align: left; outline: none; margin-top: 0.4em; } div.symbutton.handle { } div.symbutton.handle img, div.symbutton.intern img, div.symbutton.hinges img { width: auto; height: auto; border: 3px solid #fffFFF; max-width: 15em; max-height: 15em;} div.symbutton.handle .SymTitle, div.symbutton.intern .SymTitle { color: #3a424a; background: transparent; justify-content: flex-start; outline: none; margin-top: 0.4em; } div.symbutton.program { } div.symbutton.dekor { margin-right: 3em; } div.symbutton.program img, div.symbutton.dekor img { height: 23.5em; width: 13.7em; } div.symbutton.program.miniicon div { display: none; } div.symbutton.program.miniicon, div.symbutton.program.miniicon img { margin: 0.167em 0 0 0.417em; padding: 0; height: 6.667em; width: auto; } div.symbutton.program.miniicon img { width: 3.833em; } div.symbutton.ambience img { width: 15em; } /* Combobox -----------------------------------------------------------------*/ .combo { width: 13.78em; height: 1.667em; float: right; margin-right: 0.833em; margin-top: 0.833em; margin-bottom: 0; } .combo .label { width:5em; float: left; font-weight: bold; margin-top: 0.167em; margin-right: 0.417em; text-align: right; } .combo select { width: 8.333em; height: 1.667em; border: none; } .combo input { width: 6.667emx; height: 1.333em; border: 0.083em solid #919F9F; } .Feedback input { opacity: 0; width: 0; height: 0; } .FeedbackContainer { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .FeedbackContainer input { opacity: 0; cursor: pointer; height: 0; width: 0; } .FeedbackMark { height: 2em; width: 2em; background-image: url(Media/GUI/star.png); background-size: contain; float: left; margin-right: 0.3em; } .FeedbackContainer:hover input ~ .FeedbackMark, .FeedbackContainer input:checked ~ .FeedbackMark { background-image: url(Media/GUI/star_i.png); } /* Elemente aus TabDialog -------------------------------------------------- */ .tabBaseClass { width: 37.667em; height: 2.333em; top: 0; left: 0; position: relative; background-color:transparent; border-bottom: 0.083em solid #666666; } .tabClass { float: left; width: auto; margin-right:0.167em; padding: 0.5em; cursor: pointer; cursor: hand; } .tabClassActive a { color:#9E1510; } .tabClassActive { border-top: 0.083em solid #666666; border-left: 0.083em solid #666666; border-right: 0.083em solid #666666; height: 1.333em; } .tabClassInActv { border-top: 0.083em solid #666666; border-left: 0.083em solid #666666; border-right: 0.083em solid #666666; height: 1.25em; } .tabContent { border-left: 0.083em solid #666666; border-right: 0.083em solid #666666; border-bottom: 0.083em solid #666666; height: 39.333em; margin-top:0; overflow:auto; } /* CuteWebUIUpload ----------------------------------------------------------*/ #CuteWebUIUploaderDiv { margin-top: 2em; } #CuteWebUIDescription { } #CuteWebUIUploaderDiv button { background: #606c76; border: none; border-radius: 0.3em; padding: 0.5em 1.5em; color: #FFF; text-transform: capitalize; } #CuteWebUIUploaderDiv button { margin-bottom: 1em; min-width: 5em; width: 10em; } #Eye, #Eye input { } #Eye { } #Eye input { } /* general purpose debug container ----------------------------------------- */ #___debug { position:absolute; top:0.833em; left: 0.833em; width: 20.833em; height: 20.833em; overflow: auto; z-index:999; background-color: yellow; border: 0.083em solid black; } /* Beamer ---------------------------------------------------*/ .beamerLinks { text-align: left; } .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: 13em;height: 13em; background-size: contain;} /* mfFilter */ #mfFilter .labelcontrol { font-family: arial; display: block; position: relative; padding-left: 30px; margin-bottom: 5px; padding-top: 3px; cursor: pointer; } #mfFilter .labelcontrol input { position: absolute; z-index: -1; opacity: 0; } #mfFilter .control_indicator { position: absolute; top: 2px; left: 0; height: 16px; width: 16px; background: transparent; border: 1px solid #FFFFFF; border-radius: 0px; } #mfFilter .labelcontrol:hover input ~ .control_indicator, #mfFilter .labelcontrol input:focus ~ .control_indicator { background: transparent; } #mfFilter .labelcontrol a { color:#FFF; } #mfFilter.page3 #mfFilterColor { display:flex; flex-direction:column; margin-top: 0.3em; align-items:center; height: 23em; } #mfFilter.page3 .symbutton { margin: 0em 0em 1.5em 0em } #mfFilter.page4 .control_indicator { display:none; } #mfFilter.page4 .labelcontrol { padding-left: 0px; } /* Custon Ceckbox */ .labelcontrol input:checked ~ .control_indicator { background: transparent; } .labelcontrol:hover input:not([disabled]):checked ~ .control_indicator, .labelcontrol input:checked:focus ~ .control_indicator { background: #0e6647d; } .labelcontrol input:disabled ~ .control_indicator { background: #e6e6e6; opacity: 0.6; pointer-events: none; } .control_indicator:after { box-sizing: unset; content: ''; position: absolute; display: none; } .labelcontrol input:checked ~ .control_indicator:after { display: block; } .control-checkbox .control_indicator:after { left: 6px; top: 2px; width: 3px; height: 8px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .control-checkbox input:disabled ~ .control_indicator:after { border-color: #7b7b7b; } .control-checkbox .control_indicator::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 4.5rem; height: 4.5rem; margin-left: -1.3rem; margin-top: -1.3rem; background: #2aa1c0; border-radius: 3rem; opacity: 0.6; z-index: 99999; transform: scale(0); } label.labelcontrol.control-radio { margin-bottom: 1em; } label.labelcontrol.control-checkbox { margin-bottom: 0.5em; } /* --------------------------- 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.5em; /* --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: -2px; 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: 2px solid #2198b7; /* TODO: Gradient? */ user-select: none; cursor: pointer; } /* label:before defines our "thumb" */ .switch label:before { display: block; position: absolute; content: ""; background-color: #2198b7; 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)); } @keyframes s-ripple { 0% { transform: scale(0); } 20% { transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } @keyframes s-ripple-dup { 0% { transform: scale(0); } 30% { transform: scale(1); } 60% { transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } .control-checkbox input + .control_indicator::before { animation: s-ripple 250ms ease-out; } .control-checkbox input:checked + .control_indicator::before { animation-name: s-ripple-dup; } /* -------------------------------- radiobutton -------------------------------- */ [type="radio"]:checked, [type="radio"]:not(:checked) { position: absolute; left: -9999px; display:none; } [type="radio"]:checked + a, [type="radio"]:not(:checked) + a { position: relative; padding-left: 28px; cursor: pointer; line-height: 16px; display: inline-block; } [type="radio"]:checked + a:before, [type="radio"]:not(:checked) + a:before { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border: 1px solid #ddd; border-radius: 100%; background: #fff; } [type="radio"]:checked + a:after, [type="radio"]:not(:checked) + a:after { content: ''; width: 8px; height: 8px; background: #2198b7; position: absolute; top: 4px; left: 4px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } [type="radio"]:not(:checked) + a:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } [type="radio"]:checked + a:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /*SVG color (shape)*/ .symbutton.shape .svg { width: 100%; height: 8em; } .symbutton.shape svg { width: auto; } .symbutton.shape svg path { fill: #cccccc } .symbutton.shape svg #color-abgrenzung path { fill: #FFF; } .symbutton.shape.act svg path, .symbutton.shape:hover svg path { fill: #2198b7; } .symbutton.shape svg #color-st-links path, .symbutton.shape svg #color-st-rechts path, .symbutton.shape svg #color-oberlicht path { fill: #cccccc; } .symbutton.shape svg #color-fuellung path { fill: #a9a9a9; } /* Drag shape */ .ui-draggable-dragging.svg { width: 100%; height: 25em; } .ui-draggable-dragging.svg { width: auto; } .ui-draggable-dragging.svg path { fill: #cccccc } .ui-draggable-dragging.svg #color-abgrenzung path { fill: #FFF; } .symbutton.shape.act svg path, .symbutton.shape:hover svg path { fill: #2198b7; } .ui-draggable-dragging.svg #color-st-links path, .ui-draggable-dragging.svg #color-st-rechts path, .ui-draggable-dragging.svg #color-oberlicht path { fill: #cccccc; } .ui-draggable-dragging.svg #color-fuellung path { fill: #a9a9a9; } /* Kipp shapes */ #Shape___T2SOK #color-oberlicht path, #Shape___TSORK #color-oberlicht path, #Shape___TSOLK #color-oberlicht path, #Shape___TOK #color-oberlicht path, #Shape___2TOK #color-oberlicht path, #Shape___2T2SOK #color-oberlicht path, #Shape___2TSOLK #color-oberlicht path, #Shape___2TSORK #color-oberlicht path { fill: #a9a9a9; }