/* ReDesign-CSS, limet Webdesign, Nov 2018 */ html, body, div, p, h1, h2, h3, span, a, table, td, form, input, textarea, select { margin: 0px; padding: 0px; font-family: 'Muli', sans-serif; font-size: 16px; line-height: 1.4em; font-weight: 300; color: #000; } #login input { font-family: 'Muli', sans-serif; font-size: 16px; line-height: 1.4em; font-weight: 300; } .clear { display: block; clear: both; } .rounded { -moz-border-radius: 10px; border-radius: 10px; -webkit-border-radius: 10px; } .shadow { -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); box-shadow: 0px 0px 10px rgba(0,0,0,0.4); } .align_left { display: inline-block; float: left; text-align: left; } .align_right { display: inline-block; float: right; text-align: right; } a { transition: all ease 0.3s; } body { background-image: url(); background: #f2f2f2 !important; overflow: hidden; } h4, strong, b { font-family: 'Muli', sans-serif; font-weight: 500; } #content > div > h2, #content > div > h3 { text-align: left; } /* Page-Wrapper */ #page_wrapper { min-height: 100%; } /* ------ Sidebar ------------ */ #header_container { position: absolute !important; width: 0vw; height: 100%; top: 0px; left: 0px; bottom: 0px; margin: 0px; background-color: #fff; overflow: hidden; z-index: 900; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } #sidebar_scrolling_wrapper { position: absolute; width: 100%; top: 0px; left: 0px; height: auto; right: 0px; bottom: 0px; overflow: hidden; overflow-y: auto; } #header { width: 100%; height: auto; margin: 25px 0px; background-image: url(); border: none; } #header img.logo { width: 240px; height: 121px; object-fit: contain; /* or 'cover', depending on your goal */ } @media only screen and (MAX-width: 1080px) { #header_container { transition: .25s ease-in-out; } #header_container.open { width: 380px; } } @media only screen and (MAX-width: 400px) { #header_container.open { width: 99%; } #nav ul.mod-menu li > ul.nav-child li .box.left220 /*.ausklapp_button + .*/ .accordionInnerContent ul.accSelection li div { padding-top: 10px !important; } } @media only screen and (min-width: 1081px) { #header_container { position: absolute !important; width: 290px; transition: .25s ease-in-out; } #header_container.minify { width: 38px; } #header_container #sidebar_scrolling_wrapper, #header_container #footer { transition: .25s ease-in-out; } #header_container.minify #sidebar_scrolling_wrapper, #header_container.minify #footer { opacity: 0; transition: .25s ease-in-out; } } @media only screen and (min-width: 1500px) { #header_container { position: absolute !important; width: 19vw; } } /* #photovoltaicTab{ background-color: #ffffff; } */ /* #li_tab1.active #photovoltaicTab { background-color: #a4a5ae; } */ ul li.nav-item:not(.item-203):not(.item-204) { border-bottom: 1px solid #eee!important; } /* Menü */ #nav { float: none; width: 100%; height: auto; background-color: transparent; background-image: url(); } #nav ul.mod-menu { display: block; width: 100%; height: auto; float: none; } /* 1te Ebene */ #nav ul.mod-menu ul { position: relative; display: block; width: 100%; height: auto; float: none; top: auto; background-color: #fff; } #nav ul.mod-menu li { display: block; clear: both; width: 100%; height: auto; background-image: url(); background-color: #fff; transition: all ease 0.3s; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; } #nav ul.mod-menu> ul.nav-child > li { border-bottom: 1px solid #eee!important; } #nav ul.mod-menu li:hover { background-image: url(); color: white!important;left:0px!important;} #nav ul.mod-menu > li.active { color: #fff; background-color: rgba(54,56,76,1); } #nav ul.mod-menu li a { width: 100% !important; padding: 15px 30px !important; box-sizing: border-box; color: #000; font-weight: 400; font-size: 1.1em; background-color: transparent; background-image: url(); } #nav ul.mod-menu > li > ul.mod-menu__sub > li.active { color: #fff!important; background-color: rgba(54, 56, 76, 1); } #nav ul.mod-menu li.item-175.show, #nav ul.mod-menu li.item-176.show, #nav ul.mod-menu li.item-186.show, #nav ul.mod-menu li.item-189.show, #nav ul.mod-menu li.item-203.show, #nav ul.mod-menu li.item-204.show { background-color: transparent; } #nav ul.mod-menu li.item-175 > a, #nav ul.mod-menu li.item-176 > a, #nav ul.mod-menu li.item-186 > a, #nav ul.mod-menu li.item-189 > a, #nav ul.mod-menu li.item-203 > a, #nav ul.mod-menu li.item-204 > a { /* "Hauptmenü" als Menüpunkt ausblenden */ display: none; } #nav ul.mod-menu li.item-175.show > a, #nav ul.mod-menu li.item-176.show > a, #nav ul.mod-menu li.item-186.show > a, #nav ul.mod-menu li.item-189.show > a { display: block; color: #000; } #nav ul.mod-menu li.item-175.show a:hover, #nav ul.mod-menu li.item-176.show a:hover, #nav ul.mod-menu li.item-186.show a:hover, #nav ul.mod-menu li.item-189.show a:hover { background-image: url(); background-color: rgba(54,56,76,0.15)!important; } #nav ul.mod-menu li.item-175 > a:before, #nav ul.mod-menu li.item-176 > a:before #nav ul.mod-menu li.item-186 > a:before #nav ul.mod-menu li.item-189 > a:before { content: '\f104'; font-family: 'FontAwesome'; font-size: 20px; margin-right: 10px; color: #5d5f73; } /* 2te Ebene */ /* 1) Submenu background color */ #nav ul.mod-menu li > ul.mod-menu__sub { background-color: #fff; } /* 2) Submenu items get a bottom border */ #nav ul.mod-menu li > ul.mod-menu__sub > li { border-bottom: 1px solid #eee !important; } /* 3) Optionally style the first child of any submenu */ #nav ul.mod-menu li > ul.mod-menu__sub > li:first-child { /* border-top: 1px solid #eee; */ } /* 4) Hover effect on the li itself */ #nav ul.mod-menu li > ul.mod-menu__sub > li:hover { background-image: url(); background-color: transparent; } /* 5) Default link background */ #nav ul.mod-menu li > ul.mod-menu__sub > li a { background-image: url(); } /* 6) Hover effect on the link */ #nav ul.mod-menu li > ul.mod-menu__sub > li:hover a { /* Additional hover styles go here if needed */ } /* 7) Hover effect for links on nav-item li elements */ #nav ul.mod-menu li > ul.mod-menu__sub > li.nav-item a:hover { color: #000 !important; background-image: url(); background-color: rgba(54,56,76,0.1) !important; } /* 8) Active submenu item styling */ #nav ul.mod-menu li > ul.mod-menu__sub > li.active { color: #fff; background-color: rgba(54,56,76,1) !important; } /* 9) Icon for item-136 links */ #nav ul.mod-menu li > ul.mod-menu__sub > li.item-136 > a:before { content: '\f08e'; font-family: 'FontAwesome'; font-size: 15px; vertical-align: middle; margin-right: 8px; color: #5d5f73; } /* 10) Active submenu link color */ #nav ul.mod-menu li > ul.mod-menu__sub > li.active > a { color: #fff; } #nav ul.mod-menu li > ul.mod-menu__sub > li.active > a:hover { color: #fff !important; } #nav > ul > li.nav-item.item-175.active.deeper.parent > ul > li.nav-item.item-136 > a:before { content: '\f08e'; font-family: 'FontAwesome'; font-size: 15px; vertical-align: middle; margin-right: 8px; color: #5d5f73; } #nav-container .mod-menu.mod-list.nav.menu.sf-menu > li > .mod-menu__sub > li > .mod-menu__sub { position: relative; display: none; left: 0px !important; margin-left: 0px; padding-bottom: 0px; background-color: #eeeef1; border-bottom: 1px solid #e4e4e8!important; } #nav-container .mod-menu.mod-list.nav.menu.sf-menu > li > .mod-menu__sub > li:hover > .mod-menu__sub { margin-left: 0px !important; padding-left: 0px !important; } #nav-container .mod-menu.mod-list.nav.menu.sf-menu > li > .mod-menu__sub > li.active > .mod-menu__sub { display: block; } #nav-container .mod-menu.mod-list.nav.menu.sf-menu > li > .mod-menu__sub > li > .mod-menu__sub > li { margin-left: 0px !important; background-color: transparent; } #nav-container .mod-menu.mod-list.nav.menu.sf-menu > li > .mod-menu__sub > li > .mod-menu__sub > li.active { color: #fff; background-color: #686a7a!important; } #nav-container .mod-menu.mod-list.nav.menu.sf-menu > li > .mod-menu__sub > li > .mod-menu__sub > li.active > a { color: #fff; background-color: #686a7a!important; } #nav-container .mod-menu.mod-list.nav.menu.sf-menu > li > .mod-menu__sub > li > .mod-menu__sub > li > a { width: 100% !important; padding: 12px 10px 12px 50px !important; font-size: 1.0em; margin-left: 0px !important; } #nav-container .mod-menu.mod-list.nav.menu.sf-menu > li > .mod-menu__sub > li > .mod-menu__sub > li.active > a:hover { color: #fff; } /* Elemente, die per jQuery in die Sidebar verschoben werden */ #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 { display: block; clear: both; width: 100%; border: none; margin: 0px; padding: 0px; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .sidebar_li { display: block; clear: both; width: 100%; color: #fff; margin: 0px; font-size: 1.01em; line-height: 1.0em; background-color: #686a7a; padding: 15px 5px 15px 30px; box-sizing: border-box; font-weight: 400; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 ul.tabs { display: block; clear: both; width: 100%; border: none; margin: 0px !important; left: 0px; padding: 0px; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 ul.tabs li { display: block; clear: both; width: 100%; border: none; margin: 0px; border-bottom: 1px solid #eee!important; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 ul.tabs li.active { background-color: #a4a5ae!important; color: #fff; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 ul.tabs li a { display: block; clear: both; color: #000; font-size: 17px; font-weight: 600; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 ul.tabs li.active a { color: #fff !important; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 ul.tabs li a i.fa { font-size: 18px; margin-right: 3px; color: #5d5f73; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 ul.tabs li.active a i.fa { color: #fff; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .tab_content { background-color: #f9f9f9; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 div.tab_container { border: none; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 div.tab_container div.compare_container { /*border: 2px solid green;*/ } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionButtonSelectionTop-NoAccordionToggle { display: block; clear: both; width: 100%; height: auto; padding: 9px 55px 9px 65px !important; box-sizing: border-box; background: url(); background-color: transparent; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button, #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button.top { display: block; clear: both; cursor: pointer; width: 100%; padding: 9px 55px 9px 70px !important; box-sizing: border-box; color: #000; font-weight: 400; font-size: 1.0em; border: none; margin: 0px; border-bottom: 1px solid #eee; background-image: url(); background-color: transparent; transition: all ease 0.3s; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button span { font-weight: inherit; color: inherit; font-size: inherit; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button i.fa { font-size: 18px; margin-right: 6px; color: #5d5f73; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .tab_content .ausklapp_button { border: none; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button:hover { /* keine BG-Color mehr - background-color: #d2d3d9 !important; */ } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button.on { /* keine BG-Color mehr - background-color: #b4b5bc !important; */ border-top: none; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button > span { } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button > span:after { position: absolute; right: 10px; content: '\f107'; font-family: 'FontAwesome'; font-size: 20px; margin-right: 10px; color: #5d5f73; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button.always_open > span:after { content: ''; } /* Accordion-Buttons, die eine Ebene tiefer liegen */ #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button { padding: 9px 55px 8px 80px !important; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button.on { /* keine BG-Color mehr - background-color: #c7c8ce !important; */ } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.ausklapp_button +*/ .accordionContent { /* keine BG-Color mehr - background-color: #ebebed; */ } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button + .accordionContent .accBtnStatic { padding: 5px 10px 3px 90px !important; font-weight: 500; box-sizing: border-box; background-image: url(); background-color: transparent; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.ausklapp_button +*/ .accordionContent .accordionInnerContent { padding-top: 4px !important; padding-bottom: 4px !important; box-sizing: border-box; background-image: url(); background-color: transparent;} #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionInnerContent { display: block; clear: both; width: 100%; border: none; margin: 0px; left: 0px; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionInnerContent:last-child { padding-bottom: 15px; } /* Vergleichsfelder für Kenngrößen mit Checkboxen */ #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionContent .accordionInnerContent ul.acc { width: 100%; margin: 0px !important; left: auto; padding: 0px !important; border: none; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionContent .accordionInnerContent ul.acc li { width: 100%; margin: 0px !important; padding: 0px !important; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionContent .accordionInnerContent ul.acc li a { padding: 8px 55px 8px 70px !important; font-size: 1.0em; border: none; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionInnerContent ul.accSelection { display: block; clear: both; width: 100%; border: none; margin: 0px; left: 0px; padding: 5px; box-sizing: border-box; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.ausklapp_button + .accordionContent*/ .accordionInnerContent ul.accSelection { background-image: url(); background-color: transparent; margin: 0px; padding: 0px; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.ausklapp_button + .accordionContent*/ .accordionInnerContent ul.accSelection li { box-sizing: border-box; background-image: url(); background-color: transparent; border: none !important; box-shadow: none; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.ausklapp_button + .*/ .accordionInnerContent ul.accSelection li div { padding-left: 85px !important; margin-right: 18px !important; box-sizing: border-box; background-color: transparent; } /* Footer für "alle Zähler" oder auch für Button "Vergleich erstellen" */ #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.accordionContent*/ .accordionInnerContent ul.accSelectionFooter { width: 100%; margin: 0px !important; left: auto; padding-left: 85px !important; padding-top: 3px; padding-bottom: 0px; margin-right: 18px !important; box-sizing: border-box; background-color: transparent; border: none; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.accordionContent*/ .accordionInnerContent ul.accSelectionFooter li { background-color: transparent !important; box-shadow: none; border-bottom: none !important; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.accordionContent*/ .accordionInnerContent ul.accSelectionFooter li div.sensor_select, #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.accordionContent*/ .accordionInnerContent ul.accSelectionFooter li div.sensor_deselect { margin-right: 18px; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.accordionContent*/ .accordionInnerContent ul.accSelectionFooter li div { text-transform: none !important; font-size: 16px; box-shadow: none !important; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.accordionContent*/ .accordionInnerContent ul.accSelectionFooter li .mit-js-ausgegeben { border: 1px solid red !important; margin-right: 18px; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionContent { display: block; clear: both; width: 100%; border: none; margin: 0px; left: 0px; padding: 0px; box-sizing: border-box; color: #000;} #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionContent .accBtnStatic { display: block; clear: both; width: 95%; border: none; margin: 0px; left: 0px; padding: 15px 30px !important; box-sizing: border-box; color: #000; margin-right: 22px; font-weight: bold !important;} /* Button: Vergleich erstellen */ #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .bottom { background-color: transparent; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .bottom:before { content: '\f1fe'; position: absolute; width: 30px; height: 30px; left: 125px; margin-top: 5px; font-family: 'FontAwesome'; font-size: 14px; color: #fff; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .bottom input.pd_button.btn_orange.button_full { width: 229px; margin-left: 85px; padding: 4px 15px 4px 22px; background: rgba(54,56,76,0.70); color: #fff; transition: all ease 0.3s; text-shadow: none; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .bottom input.pd_button.btn_orange.button_full:hover { background: rgba(54,56,76,0.90); } @media only screen and (min-width: 1081px) { #nav ul.mod-menu li > ul.nav-child li .box.left220 .bottom:before { visibility: hidden; } #nav ul.mod-menu li > ul.nav-child li .box.left220 .bottom input.pd_button.btn_orange.button_full { width: 158px; padding: 4px 5px 4px 5px; } } @media only screen and (min-width: 1500px) { #nav ul.mod-menu li > ul.nav-child li .box.left220 .bottom:before { visibility: visible; } #nav ul.mod-menu li > ul.nav-child li .box.left220 .bottom input.pd_button.btn_orange.button_full { width: 229px; padding: 4px 15px 4px 22px; } } @media only screen and (min-width: 1081px) { #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .bottom:before { visibility: hidden; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .bottom input.pd_button.btn_orange.button_full { width: 158px; padding: 4px 5px 4px 5px; } } @media only screen and (min-width: 1500px) { #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .bottom:before { visibility: visible; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .bottom input.pd_button.btn_orange.button_full { width: 229px; padding: 4px 15px 4px 22px; } } /* Optionen-Button */ #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionButtonSelectionTop-NoAccordionToggle.top_options { padding: 15px 30px !important; cursor: pointer; box-sizing: border-box; background-color: #fff; border-top: none; transition: all ease 0.3s; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionButtonSelectionTop-NoAccordionToggle.top_options:hover, #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionButtonSelectionTop-NoAccordionToggle.top_options.on { background-color: rgba(54,56,76,0.1) !important; border-top: none; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionButtonSelectionTop-NoAccordionToggle.top_options span.options { padding-left: 0px; padding-right: 0px; margin-right: 0px; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .accordionButtonSelectionTop-NoAccordionToggle.top_options span.options i.fa { margin-right: 2px; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button.top_options + .accordionContent { background-color: transparent !important; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button.top_options + .accordionContent .accordionInnerContent { background-color: transparent !important; margin: 0px; padding: 0px !important; } @media only screen and (MAX-width: 400px) { #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button, #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button.top { padding-left: 30px !important; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.ausklapp_button + .*/ .accordionInnerContent ul.accSelection li div { padding-left: 40px !important; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 /*.accordionContent*/ .accordionInnerContent ul.accSelectionFooter { padding-left: 40px !important; } #nav ul.mod-menu li > ul.mod-menu__sub li .box.left220 .ausklapp_button + .accordionContent .accBtnStatic { padding: 5px 10px 3px 40px !important; font-weight: 500; box-sizing: border-box; background-image: url(); background-color: transparent; } } /* Zurück-Button ausblenden*/ #nav ul.mod-menu li > ul.nav-child li .box.left220 ul.backnav { display: none; } /* ToolTip-Box */ #InfoBox { border: none; z-index: 9999 !important; background-color: #fff; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.6); box-shadow: 0px 0px 10px rgba(0,0,0,0.6); } #InfoBox #BoxInnen { border: none; background-color: #fff; } #InfoBox #BoxInnen #BoxInhalte { border: none; background-color: #fff; } #InfoBox #InfoBox #BoxInnen #BoxInhalte table { border: none; background-color: #fff; } #InfoBox #InfoBox #BoxInnen #BoxInhalte table tr { border: none; background-color: #fff; } #InfoBox #InfoBox #BoxInnen #BoxInhalte table tr th, #InfoBox #InfoBox #BoxInnen #BoxInhalte table tr td { border: none; background-color: #fff; } /* Mobile Menu */ #menu-toggle, #menu-toggle * { transition: .25s ease-in-out; box-sizing: border-box; } #menu-toggle { visibility: hidden; width: 52px; height: 50px; box-sizing: content-box; padding: 0px; margin: 0px auto; position: relative; cursor: pointer; -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.6); box-shadow: 0px 0px 10px rgba(0,0,0,0.6); } #menu-toggle span { display: block; background: #fff; border-radius: 2px; } #menu-toggle #hamburger { position: absolute; height: 100%; width: 100%; } #menu-toggle #hamburger span { width: 36px; height: 4px; position: relative; top: 0px; left: 0px; margin: 6px 0; } #menu-toggle #hamburger span:nth-child(1) { transition-delay: .5s; } #menu-toggle #hamburger span:nth-child(2) { transition-delay: .625s; } #menu-toggle #hamburger span:nth-child(3) { transition-delay: .75s; } #menu-toggle #cross { position: absolute; height: 36px; width: 36px; transform: rotate(45deg); } #menu-toggle #cross span:nth-child(1) { height: 0%; width: 4px; position: absolute; top: 0%; left: 15px; transition-delay: 0s; } #menu-toggle #cross span:nth-child(2) { width: 0%; height: 4px; position: absolute; left: 0%; top: 15px; transition-delay: .25s; } #menu-toggle.open #hamburger span { width: 0%; } #menu-toggle.open #hamburger span:nth-child(1) { transition-delay: 0s; } #menu-toggle.open #hamburger span:nth-child(2) { transition-delay: .125s; } #menu-toggle.open #hamburger span:nth-child(3) { transition-delay: .25s; } #menu-toggle.open #cross span:nth-child(1) { height: 100%; transition-delay: .625s; } #menu-toggle.open #cross span:nth-child(2) { width: 100%; transition-delay: .375s; } #menu-toggle:hover { background-color: #8e91a8; } #menu-toggle.open { background-color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu-toggle:hover #hamburger span { background: #fff; } #menu-toggle.open #cross span { background: rgba(54,56,76,1); } /* Desktop Menü - Toggler */ .desktop-menu-toggle { position: absolute; left: 273px; top: -10px; z-index: 990; background-color: #fff; width: 36px; height: 36px; padding: 0px 1px 0px 0px; border-radius: 40px 40px 0 0; transform-origin: bottom center; transform: rotate(270deg); border: 1px solid #eee; transition: .25s ease-in-out; box-sizing: border-box; cursor: pointer; -moz-box-shadow: 0px -1px 1px rgba(0,0,0,0.1); -webkit-box-shadow: 0px -1px 1px rgba(0,0,0,0.1); box-shadow: 0px -1px 1px rgba(0,0,0,0.1); } .desktop-menu-toggle i { color: #777; font-size: 28px; transition: .25s ease-in-out; } .desktop-menu-toggle .icon:before { content: '\f106'; font-family: 'FontAwesome'; color: #777; font-size: 28px; transition: .25s ease-in-out; } .desktop-menu-toggle:hover i, .desktop-menu-toggle:hover .icon:before { color: #000; margin-top: -2px; } .desktop-menu-toggle.minify { left: 21px; height: 33px; padding: 9px 0px 0px 0px; } .desktop-menu-toggle.minify i, .desktop-menu-toggle.minify .icon { transform: rotate(180deg); color: #36384c; } @media only screen and (max-width: 1080px) { #menu-toggle { visibility: visible; position: absolute; top: 0px; left: 0px; padding: 8px; box-sizing: border-box; z-index: 9999; background-color: rgba(54,56,76,1); } .desktop-menu-toggle { visibility: hidden; } } @media only screen and (min-width: 1200px) { .desktop-menu-toggle { left: 273px; } } @media only screen and (min-width: 1500px) { .desktop-menu-toggle { left: 17.95vw; top: 4px; } } @media only screen and (min-width: 1600px) { .desktop-menu-toggle { left: 18vw; } } @media only screen and (min-width: 1700px) { .desktop-menu-toggle { left: 18.1vw; } } @media only screen and (min-width: 1800px) { .desktop-menu-toggle { left: 18.2vw; } } @media only screen and (min-width: 1900px) { .desktop-menu-toggle { left: 18.3vw; } } /* Logo */ #header_container #nav-container { width: 100%; max-width: 100%; } #header_container #nav-container #logo { display: none; } /* Footer */ #footer { position: relative; display: block; clear: both; width: 100%; max-width: 100%; height: 140px; margin-top: 20px; background-color: #fff; background-image: url(); transition: all ease 0.3s; } #footer.getdown { position: absolute; bottom: 0px; margin-bottom: 0px; } #footer .content { width: 100%; padding: 5px 20px; box-sizing: border-box; background-color: #fff; } #footer .content hr { width: 100%; margin: 0px 0px 2px 0px; background-color: transparent; border: none; border-bottom: 1px solid rgba(94,96,113,0.2); } #footer .content .footer_menu { display: block; clear: both; float: none; margin-bottom: 18px; } #footer .content .copyright { display: block; clear: both; float: none; margin-bottom: 10px; font-size: 0.8rem; color: rgba(75,75,75,0.5); } #footer .content a { color: rgba(0,0,0,0.9); font-weight: 400; font-size: 0.95rem; } #footer .content a:hover { color: rgba(253,198,0,1); } #footer .content .sec_links a:first-child { margin-right: 15px; } /* ------ Content ------------ */ #wrapper { position: absolute; width: auto; height: 100%; top: 0px; bottom: 0px; right: 0px; left: 0; overflow: auto; } #content_header { min-height: 50px; padding: 15px; background-color: #36384c; color: #fff; } #content_header .left, #content_header .right { height: auto; min-height: 40px; margin-top: 10px; } #content_header .left { display: none; } #content_header .left h1 { color: rgba(255,255,255,1.0); font-size: 1.4em; font-weight: 500; margin-left: 0px;} #content_header .left h1 span { color: rgba(255,255,255,0.4); font-size: 0.8em; font-weight: 200; } #content_header .right .header_languages { display: inline-block; width: 120px; height: 30px; vertical-align: top; margin-top: 22px; margin-right: 20px; } #content_header .right .header_languages .mod-languages { } #content_header .right .header_languages .mod-languages li img { height: 14px; opacity: 0.4; } #content_header .right .header_languages .mod-languages li.lang-active img { opacity: 1.0; } #content_header .right .header_user-account { display: inline-block; width: auto; height: auto; min-height: 30px; } #content_header .right .header_user-account #login input { height: 34px; padding: 4px 8px; box-sizing: border-box; transition: all ease 0.3s; } #content_header .right .header_user-account #login input.txt { color: #fff; font-size: 16px; margin-left: 8px; border: none; background: rgba(255,255,255,0.1); -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; } #content_header .right .header_user-account #login input.txt:focus { background: rgba(255,255,255,0.3) !important; } #content_header .right .header_user-account #login input[type=submit] { border: none; height: 34px; padding: 4px 8px; text-shadow: none; color: #fff; background: rgba(27,28,38,0.5); margin: 0px 2px 0px 8px; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px;} #content_header .right .header_user-account #login input[type=submit]:hover { background: rgba(27,28,38,1); } #content_header .right .header_user-account #login input[type=button].forgot { padding: 0px 8px 2px 8px; margin-left: 18px; background: transparent; color: #fff; text-shadow: none; font-weight: 700; font-size: 21px; } #content_header .right .header_user-account #login input[type=button].forgot:hover { color: #f2c807; } #content_header .right .header_user-account #login a:last-child input[type=button].btn_grey { display: none; } #content_header .right .header_user-account #login a:last-child:after { display: inline-block; padding: 5px 12px; margin: 1px 0px 0px 5px; content: '\f2bd'; font-family: 'FontAwesome'; transition: all ease 0.3s; color: #fff; font-size: 24px; font-weight: 600; } #content_header .right .header_user-account #login a:last-child:hover:after { color: #f2c807; } #content_header .right .header_user-account #login span.color_light { font-size: 0px; display: inline-block; width: 25px; margin-left: 28px; overflow: hidden; } #content_header .right .header_user-account #login span.color_light::before { content: '\f2bd'; font-family: 'FontAwesome'; position: absolute; margin: -6px 0px 0px 0px; color: #fff; font-size: 21px; font-weight: 600; } #content_header .right .header_user-account #login span.color { display: inline-block; padding: 5px 0px; margin-left: 1px; margin-right: 15px; color: #fff; } #content_header .right .header_user-account #login input[type=submit].pd_button_tiny.btn_orange:first-child { float: right; } div.mod-languages a { padding: 0px!important; text-decoration: none; } #content_header .right #messageInfo { display: inline-block; padding-top: 20px; margin-right: 0px; } .blink { animation: blinker 1.0s cubic-bezier(.5, 0, 1, 1) infinite alternate; } @keyframes blinker { from { opacity: 1; } to { opacity: 0; } } #content_header .right #messageInfo i.fa, #content_header .right #messageInfo .icon { font-size: 30px; color: #ff0000; } #content_header .right #messageInfo img { width: 22px; height: auto; } #content_header .right #messageInfo .icon-for-circle { position: absolute; margin: 0px 0px 0px 12px; width: 18px; heigth: 18px; text-align: center; padding: 0px; font-size: 12px; font-weight: 600; color: #fff; background-color: #fdc300; -moz-border-radius: 10px; border-radius: 10px; -webkit-border-radius: 10px; } @media only screen and (MAX-width: 520px) { #content_header { padding-left: 70px; } #content_header .right .header_languages { margin-top: -5px; margin-right: 0px; } #content_header .right .header_user-account { margin-top: -5px; margin-right: 0px; } #content_header .right .header_user-account #login input.txt { display: block; width: 100%; margin: 3px 0px; } #content_header .right .header_user-account #login input[type=submit] { margin-top: 3px; margin-left: 0px; } } @media only screen and (min-width: 1081px) { #wrapper { left: 290px; } #wrapper.maxify { left: 36px; } #content_header { min-height: 80px; padding: 20px 20px 5px 20px; } #content_header .left, #content_header .right { height: 55px; margin-top: 15px; } #content_header .left { display: block; } #content_header .left h1 { display: block; font-size: 1.6em; margin-top: 8px; margin-left: 30px; } #content_header .right #messageInfo { padding-top: 15px; margin-right: 10px; } #content_header .right #messageInfo img { width: 30px; } #content_header .right #messageInfo .icon-for-circle { margin: 0px 0px 0px 20px; } #content_header .right .header_user-account #login input.txt { width: 200px; } } @media only screen and (min-width: 1500px) { #wrapper { left: 19.05%; transition: .25s ease-in-out; } #wrapper.maxify { left: 36px; } #content_header .left h1 { font-size: 1.8em; } } #content { margin-top: 0px; padding: 10px; background-color: transparent; box-sizing: border-box; } #content h2.headline1 { padding-left: 0px; color: #36384c; background-image: url(); border: none; background-color: transparent; } .blog-item { margin-bottom: 20px; background-color: #fff; border: none; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } @media only screen and (min-width: 1081px) { #content { padding: 40px 25px 40px 40px; } } @media only screen and (min-width: 1500px) { #content { padding: 50px 30px 50px 50px; } } /* News-Seite (Startseite im nicht eingeloggten Zustand) */ div.item-content { } div.item-content h2 { font-size: 1.8em; color: rgba(54,56,76,1); font-weight: 400; } div.item-content h2 span { font-size: inherit; } div.item-content ul { margin: 15px 0px; margin-left: 5px; padding: 0px; } div.item-content li { padding: 5px 0px; padding-left: 20px; list-style-type: none; } div.item-content ul li::before { position: absolute; margin-left: -20px; content: '\f105'; font-family: 'FontAwesome'; font-size: 20px; color: #5d5f73; } div.item-content p.readmore { display: block; margin-top: 20px; } div.item-content a.btn { display: inline-block; padding: 6px 15px; background-color: rgba(54,56,76,0.5); color: #fff; transition: .25s ease-in-out; } div.item-content a.btn:hover { background-color: rgba(54,56,76,1); } /* News-Detailseite */ #content > div.item-page ul { margin: 15px 0px; margin-left: 5px; padding: 0px; } #content > div.item-page ul li { padding: 5px 0px; padding-left: 20px; list-style-type: none; } #content > div.item-page ul li::before { position: absolute; margin-left: -20px; content: '\f105'; font-family: 'FontAwesome'; font-size: 20px; color: #5d5f73; } /* --------------- PowerDog - Powerdogsummary --------------- */ /* Gesamtübersicht */ #content div.box.boxfull { background-color: transparent; padding: 5px 0px 5px 0px; margin-bottom: 5px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #content .box.boxfull .device_info_left, #content .box.boxfull .device_info_right, #content .box.boxfull .device_info_middle { display: block; clear: both; width: 100%; height: auto; margin: 5px 0px; padding: 12px; box-sizing: border-box; background-color: #fff; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } #content .box.boxfull table { border: none; background-color: transparent; } #content .box.boxfull table tr { border: none; background: transparent; } #content .box.boxfull table tr th, #content .box.boxfull table tr td { padding: 5px 0px; border: none; background: transparent; } #content .box.boxfull h4 { font-size: 1.2em; color: rgba(94,96,113,0.5); font-weight: 200; } @media only screen and (min-width: 1081px) { #content .box.boxfull .device_info_middle { margin: 15px 0px; padding: 15px; } } /* Box - Momentanleistung gesamt */ #content .box.boxfull .device_info_left { padding: 0px; } #content .box.boxfull .device_info_left .content_padding { padding: 15px; min-height:180px; box-sizing: border-box; } #content .box.boxfull .device_info_left h4 { margin-top: 0px; } #content .box.boxfull .device_info_left h2 { display: block; clear: both; font-size: 2.4em; margin-top: 0px; font-weight: 500; text-align: right; color: rgba(94,96,113,1); } #content .box.boxfull .device_info_left .info { display: block; clear: both; margin: 5px 0px 0px 0px; font-size: 1.02em; text-align: right; color: rgba(94,96,113,1); } #content .box.boxfull .device_info_left #current_load_wrapper { width: 100%; height: 6px; padding: 0px; margin: 0px; background-color: #f2f2f2; } #content .box.boxfull .device_info_left #current_load_wrapper #current_load_bar_active { border: none; height: 6px; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; -moz-box-shadow: 1px 0px 2px rgba(0,0,0,0.3); -webkit-box-shadow: 1px 0px 2px rgba(0,0,0,0.3); box-shadow: 1px 0px 2px rgba(0,0,0,0.3); } /* Box - Produktionsdaten gesamt */ #content .box.boxfull .device_info_middle { padding: 0px; } #content .box.boxfull .device_info_middle h3 { margin: 15px 0px 5px 15px; font-size: 1.2em; color: rgba(94,96,113,0.5); font-weight: 200; } #content .box.boxfull .device_info_middle tr { } #content .box.boxfull .device_info_middle th { padding: 1px 10px 1px 15px; font-size: 0.95em; text-align: right; background-color: #f9f9f9; } #content .box.boxfull .device_info_middle td { padding: 1px 10px 1px 15px; font-size: 0.95em; text-align: right; } #content .box.boxfull .device_info_middle td:first-child { color: rgba(94,96,113,1); font-weight: 400; font-size: 0.95em; text-transform: none; } /* Box - Status */ #content .box.boxfull .device_info_right h3 { margin-top: 0px; font-size: 1.2em; color: rgba(94,96,113,0.5); font-weight: 200; } #content .box.boxfull .device_info_right th { width: 30%; vertical-align: top; } #content .box.boxfull .device_info_right td { color: #5e6071; text-align: right; } .error_state_0, .error_state_10, .error_state_20, .error_state_30 { width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center center; } .error_state_0, .error_state_10 { background-image: url('../images/error_state_10_neu.png'); } .error_state_20 { background-image: url('../images/error_state_20_neu.png'); } .error_state_30 { background-image: url('../images/error_state_30_neu.png'); } #content .box.boxfull .device_info_right .error_state_0, #content .box.boxfull .device_info_right .error_state_10, #content .box.boxfull .device_info_right .error_state_20, #content .box.boxfull .device_info_right .error_state_30 { width: 60px; height: 60px; } /* Box - Eigenverbrauch */ #content .box.boxfull .consumption { display: block; clear: both; width: 100%; height: auto; margin: 15px 0px 5px 0px; padding: 0px; box-sizing: border-box; background-color: #fff; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } #content .box.boxfull .consumption h3 { margin: 15px 0px 5px 15px; font-size: 1.2em; color: rgba(94,96,113,0.5); font-weight: 200; } #content .box.boxfull .consumption h2 { padding-right: 10px; } #content .box.boxfull .consumption h4 { font-size: 0.8em; margin-left: 2.5%; margin-top: 2.5%; margin-bottom: -2.5%; } #content .box.boxfull .consumption h5, #content .box.boxfull .consumption .counterval_left { font-size: 16px; padding-left: 10px; text-transform: none;} #content .box.boxfull .consumption h6, #content .box.boxfull .consumption .counterval_right { font-size: 16px; text-align: right; padding-right: 10px; text-transform: none;} #content .box.boxfull .consumption #h2_powerdog_consumption_1_kwh { padding: 8px 10px 0px 0px; } #content .box.boxfull .consumption .consumption_autarky_bar_active { width: 90%; height: 40px; padding: 0px; margin: 0px; background-color: #eee; margin-left: 5%; } #content .box.boxfull .consumption .consumption_autarky_bar_active .gradient_load_bar_consumption_autarkie { width: 100%; background-color: #eee; border: none; height: 40px; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; } #content .box.boxfull .consumption .consumption_autarky_bar_active .h2_powerdog_percentage { padding: 8px 10px; text-align: center; margin-top: -40px; } #content .box.boxfull .consumption .consumption_autarky_bar_active .h2_powerdog_percentage /* Zeile zu Alarme/Meldungen */ .accordionContentAlarms table th { line-height: 1.1em; color: #5e6071; font-weight: 300; vertical-align: bottom; } /* Zeilen zu PowerDogs */ #content .wrapper-rows { margin: 0px 2px; background-color: #fff; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } #content .wrapper-rows.transparent { background-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /* Kopfzeile zu Filter, oder andere Funktionen */ #content .wrapper-rows .table-actions { display: block; width: 100%; height: auto; min-height: 40px; padding: 15px 20px; box-sizing: border-box; margin: 0px 0px 10px 0px; color: #5e6071; border-bottom: 1px solid #eee; } #content .wrapper-rows .table-actions .align_right { display: inline-block; float: right; width: auto; height: auto; color: #5e6071; } #content .wrapper-rows .table-actions .align_right ul { display: inline-block; width: auto; height: auto; margin: 0px; list-style-type: none; } #content .wrapper-rows .table-actions .align_right ul li { display: inline-block; width: auto; height: auto; margin: 0px 0px 0px 15px; color: #5e6071; } .toggle-switch { display: inline-block; min-width: 280px; } .toggle-switch label { display: inline-block; float: none; vertical-align: middle; font-weight: 200; line-height: 1.0em; margin: 0px; padding: 1px 0px; color: rgba(94,96,113,0.8); } .toggle-switch label.leftvalue { min-width: 40px; text-align: right; color: rgba(94,96,113,0.5); } .toggle-switch label.rightvalue { min-width: 40px; text-align: left; color: rgba(94,96,113,0.5); } .toggle-switch label.active { color: rgba(94,96,113,1); font-weight: 700; letter-spacing: -0.04em; } .toggle-switch label.ui-toggle-switch { position: relative; display: inline-block; width: 48px; height: 20px; margin: 0px !important; padding: 0px; border: none !important; background-color: transparent !important; vertical-align: middle; line-height: 1.0em; } .toggle-switch label.ui-toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch label.ui-toggle-switch span.slider { position: absolute; cursor: pointer; width: auto !important; top: 0; left: 0; right: 0; bottom: 0; padding: 0px; vertical-align: middle; line-height: 1.0em; padding: 0px; margin: 0px 5px; background-image: url('../images/redesign/ui-toggle-slider@3x.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; -webkit-transition: .4s; transition: .4s; } .toggle-switch label.ui-toggle-switch span.slider:before { position: absolute; content: ""; background-color: #36384c; border: 1px solid rgba(0,0,0,0.85); height: 13px; width: 13px; left: 3px; top: 3px; -moz-border-radius: 99px; border-radius: 99px; -webkit-border-radius: 99px; -webkit-transition: .4s; transition: .4s; } .toggle-switch label.ui-toggle-switch span.slider::hover:before { background-color: #000; border: 1px solid rgba(0,0,0,1); } /*.ui-toggle-switch input:checked + .slider { background-color: #2196F3; }*/ /*.ui-toggle-switch input:focus + .slider { box-shadow: 0 0 1px #2196F3; }*/ .toggle-switch label.ui-toggle-switch input:checked + .slider:before { -webkit-transform: translateX(17px); -ms-transform: translateX(17px); transform: translateX(17px); } /* einzelne PowerDog-Zeilen */ #content .wrapper-rows a.summary-row { position: relative; display: block; clear: both; padding: 15px; box-sizing: border-box; } #content .wrapper-rows a.summary-row:hover { background-color: #f8f8f8; } #content .wrapper-rows table { border: none; border-collapse: collapse; background-color: transparent; } #content .wrapper-rows table tr { border: none; background: transparent; } #content .wrapper-rows table tbody tr { background: transparent; } #content .wrapper-rows table tbody tr:nth-child(2n+1) { background: #f8f8fd; } #content .wrapper-rows table tr.summary-row:hover { background: rgba(54,56,76,0.08); transition: .25s ease-in-out; } #content .wrapper-rows table tr th { padding: 12px 10px; line-height: 1.1em; color: #5e6071; font-weight: 300; vertical-align: bottom; border: none; background: transparent; } #content .wrapper-rows table tr th:first-child { padding-left: 20px; } #content .wrapper-rows table tr th.text-center { text-align: center; } #content .wrapper-rows table tr th:hover { background-color: transparent; } #content .wrapper-rows table tr td { padding: 5px; border: none; background: transparent; } #content .wrapper-rows table tr td.text-center { text-align: center; } #content .wrapper-rows table tr td:first-child { padding-left: 20px; } #content .wrapper-rows table tr td:last-child { padding-right: 0px; } #content .wrapper-rows table tr td:hover { background-color: transparent; } #content .wrapper-rows table tr td a { color: #000; line-height: 1.1em; } /* Status */ #content .wrapper-rows .symbol { width: 30px; height: 30px; } #content .wrapper-rows .symbol img { width: 30px; height: 30px; } /* Anlagenname */ #content .wrapper-rows h2.headline2 { font-weight: 700; color: #36384c; font-size: 1.05rem; line-height: 1.05em; margin: 0px; padding: 0px; } #content .wrapper-rows h3 { font-weight: 300; color: #36384c; font-size: 1.05rem; line-height: 1.05em; margin: 0px; padding: 0px; } /* Diagramm */ #content .wrapper-rows .device_info_right { width: 180px;} #content .wrapper-rows .diagram { height: 84px; border: none; } /* Live */ #content .wrapper-rows a.icon_live { cursor: pointer; width: 30px; height: 30px; padding: 10px; } #content .wrapper-rows a.icon_live:before { position: absolute; content: '\f26c'; display: inline-block; float: left; font-family: 'FontAwesome'; color: #5e6071; font-size: 22px; transition: .25s ease-in-out; } /* Kunde neu zuweisen */ #content .wrapper-rows a.icon_user-plus { display: block; margin-top: 4px; cursor: pointer; width: auto; height: 30px; font-size: 13px; font-weight: 500; padding: 2px 5px 2px 22px; color: #36384c; } #content .wrapper-rows a.icon_user-plus:hover { text-decoration: underline; } #content .wrapper-rows a.icon_user-plus:before { position: absolute; content: '\f234'; display: inline-block; float: left; margin-left: -22px; font-family: 'FontAwesome'; color: #36384c; font-size: 16px; transition: .25s ease-in-out; } /* Detail-Button */ #content .wrapper-rows a.icon_pfeil-rechts { float: right; cursor: pointer; width: 40px; height: 58px; margin-left: 5px; padding: 20px 17px 20px 13px; box-sizing: border-box; border-left: 1px solid rgba(54,56,76,0.15); transition: .25s ease-in-out; } #content .wrapper-rows a.icon_pfeil-rechts:hover { background-color: rgba(54,56,76,0.90); } #content .wrapper-rows a.icon_pfeil-rechts::before { position: absolute; content: '\f105'; display: inline-block; float: left; font-family: 'FontAwesome'; color: #5e6071; margin-left: 0px; font-size: 30px; transition: .25s ease-in-out; } #content .wrapper-rows a.icon_pfeil-rechts:hover::before { margin-left: 4px; color: #fff; } @media only screen and (min-width: 1310px) { #content .box.boxfull .device_info_left, #content .box.boxfull .device_info_right, #content .box.boxfull .device_info_middle { display: inline-block; clear: none; height: auto; margin: 0% 0.6%; } #content .box.boxfull .consumption { display: inline-block; clear: none; height: auto; } #content .box.boxfull .device_info_left, #content .box.boxfull .consumption.left { float: left; margin-left: 2px; } #content .box.boxfull .device_info_middle { float: left; margin-right: 0px; } #content .box.boxfull .device_info_right, #content .box.boxfull .consumption.right { float: right; margin-right: 2px; } #content .box.boxfull .device_info_left th { width: 30%; padding-top: 0px; } #content .box.boxfull .device_info_left td { padding-top: 0px; } } /* PowerDog-Summary als Installateur */ #installateurPowerdogList_wrapper { } #installateurPowerdogList_wrapper label { text-shadow: none; font-weight: 200; line-height: 1.0em; margin: 0px; padding: 1px 0px; color: rgba(94,96,113,1); } /* Anzahl Einträge */ #installateurPowerdogList_wrapper #installateurPowerdogList_length { margin: 5px 20px 10px 20px; } .dataTables_wrapper select { padding: 2px 5px; font-size: 1.0em; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; } /* Filter/Suche */ #installateurPowerdogList_wrapper #installateurPowerdogList_filter { margin: 5px 30px 10px 20px; } .dataTables_wrapper input[type="search"] { padding: 2px 5px; background-color: #eee; border: none; font-size: 1.0em; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; } /* 1 bis x Einträge */ #installateurPowerdogList_wrapper #installateurPowerdogList_info { margin: 5px 20px 10px 20px; font-size: 0.95rem; color: rgba(94,96,113,0.7); font-weight: 200; line-height: 1.0em; } /* zurück/nächste */ #installateurPowerdogList_wrapper #installateurPowerdogList_paginate { margin: 5px 10px 10px 20px; font-size: 1.0rem; color: rgba(94,96,113,1); font-weight: 200; line-height: 1.0em; } #installateurPowerdogList_paginate .paginate_button { padding: 10px; cursor: pointer; border: none; background: transparent; } #installateurPowerdogList_paginate .paginate_button:hover { background-color: rgba(94,96,113,0.1); } #installateurPowerdogList_paginate .paginate_button.current { background-color: rgba(94,96,113,0.95); color: #fff !important; } .wrapper-rows ul.backnav { margin-left: 17px; margin-bottom: 10px; } .wrapper-rows ul.backnav li { color: #5e6071; font-size: 1.0em; } .wrapper-rows ul.backnav li i { margin-right: 0px; vertical-align: middle; margin-bottom: -3px; } .wrapper-rows ul.backnav li i.icon_arrow-left::before { content: '\f104'; width: auto; height: auto; margin-right: 5px; display: inline; font-family: 'FontAwesome'; color: #5e6071; font-size: 1.4em; } .table_loading_overlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; padding: 50px;background-color: rgba(255,255,255,0.85); z-index: 999; } .table_loading_overlay .info { position: absolute; top: 50%; left: 50%; height: 90px; width: auto; height: auto; text-align: center; font-size: 1.45em; transform: translate(-50%, -50%); } .table_loading_overlay .info img { margin: 30px auto 0px auto; max-width: 360px; width: auto; height: auto; } #content #AlarmsContainerWrapper { position: relative; display: block; clear: both; width: auto; height: auto; margin: 15px 2px 10px 2px; padding: 0px; background-color: #fff; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } #content #accordionButtonAlarmsContainer { position: relative; display: block; clear: both; width: 100%; height: auto; min-height: 20px; padding: 7px 15px; background-color: transparent; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; } #content #accordionButtonAlarmsContainer:before { content: '\f003'; display: inline-block; float: left; font-family: 'FontAwesome'; color: #777; font-size: 20px; margin-right: 10px; transition: .25s ease-in-out; } #content #accordionButtonAlarmsContainer > div.titel { display: inline-block; float: left; font-weight: 300 !important; transition: .25s ease-in-out; } #content #accordionButtonAlarmsContainer span#slideOpener { display: inline-block; float: right; width: 150px; margin-right: 10px; background: transparent; } #content #accordionButtonAlarmsContainer span#slideOpener:after { content: '\f055'; display: inline; float: right; font-family: 'FontAwesome'; color: #777; font-size: 20px; margin-left: 10px; } #content #AlarmsContainerWrapper .accordionContent { position: relative; display: block; clear: both; width: 100%; height: auto; padding: 15px; box-sizing: border-box; } /* Alarm-Rows */ #content .wrapper-rows table#installateurPowerdogList td.alarms { text-align: center; } #content .wrapper-rows table#installateurPowerdogList td.alarms.active { background-color: rgba(54,56,76,0.9); } #content .wrapper-rows table#installateurPowerdogList td .toggle_alarms { display: inline-block; cursor: pointer; width: 22px; height: 22px; padding: 4px; transition: .25s ease-in-out; background-image: url('../images/redesign/icon-alert.png'); background-repeat: no-repeat; background-size: 19px auto; background-position: center center; -moz-border-radius: 99px; border-radius: 99px; -webkit-border-radius: 99px; } #content .wrapper-rows table#installateurPowerdogList td .toggle_alarms:hover { background-image: url('../images/redesign/icon-alert_w.png'); background-color: rgba(54,56,76,0.9); } #content .wrapper-rows table#installateurPowerdogList td.alarms.active .toggle_alarms { background-image: url('../images/redesign/icon-alert_w.png'); background-color: rgba(54,56,76,0); } /* wegen Alarm-Zwischenzeile, auf jede 2te Zeile */ #content .wrapper-rows table#installateurPowerdogList tbody tr { background-color: #fff; } #content .wrapper-rows table#installateurPowerdogList tbody tr:nth-child(2n+1) { background: #f8f8fd; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms { position: relative; clear: both; width: 100%; height: 0px; padding: 0px; background-color: #4a4c5e; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms > td { height: 0px; padding: 0px;} #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap { color: #fff; padding: 20px; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .align_left { display: inline-block; float: left; width: 50%; height: auto; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .align_right { display: inline-block; float: right; width: 50%; height: auto; text-align: right; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap h3 { color: #fff; font-size: 1.2em; font-weight: 500; text-transform: uppercase; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .badge { display: inline-block; text-align: center; text-transform: none; min-width: 74px; height: auto; color: #fff; padding: 3px 8px; background-color: #aaa; -moz-border-radius: 20px; border-radius: 20px; -webkit-border-radius: 20px; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .align_right .badge { cursor: pointer; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .badge.error { background-color: #c63653; border: 1px solid #c63653; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .badge.error.inactive { background-color: transparent; color: #c63653; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .badge.warning { background-color: #e36307; border: 1px solid #e36307; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .badge.warning.inactive { background-color: transparent; color: #e36307; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .badge.status { background-color: #5e7dac; border: 1px solid #5e7dac; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .badge.status.inactive { background-color: transparent; color: #5e7dac; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .badge-button { display: inline-block; text-align: center; cursor: pointer; text-transform: none; min-width: 74px; height: auto; color: #fff; font-weight: 400; padding: 5px 10px !important; background-color: #383a4e; border: 1px solid #383a4e; -moz-border-radius: 20px; border-radius: 20px; -webkit-border-radius: 20px; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .badge-button.accept_all { margin-left: 30px; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .badge-button.accept_all:hover { background-color: #fff; color: #383a4e; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .align_right form { display: inline-block; vertical-align: middle; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap .align_right form button { font-size: 16px; font-weight: 300; font-family: 'Muli', sans-serif; transition: .25s ease-in-out; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms { clear: both; width: 100%; margin: 10px 0px 0px 0px; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms tr { background-color: #5c5e6f; transition: .25s ease-in-out; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms tr:hover { background-color: rgba(255,255,255,0.2); } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms tr:nth-child(2n) { background-color: #525466; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms tr:hover:nth-child(2n) { background-color: rgba(255,255,255,0.2); } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms th { max-height: 25px; padding-left: 10px; padding-top: 3px; color: #fff; vertical-align: center; background-color: #383a4e; text-transform: none; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms th:first-child { padding-left: 25px; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms td { padding-left: 10px; color: #fff; font-weight: 300; text-transform: none; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms td:first-child { padding-left: 25px; font-weight: 300; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu { display: none; position: absolute; width: 280px; height: auto; min-height: 90px; left: 0px; top: 0px; padding: 1px 1px 5px 1px; background-color: rgba(255,255,255,0.98); box-shadow: 2px 2px 10px rgba(0,0,0,0.3); z-index: 800; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul { display: block; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul li { display: block; clear: both; width: 100%; height: auto; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul li strong { display: block; width: 100%; padding: 11px 12px 5px 12px; box-sizing: border-box; font-size: 0.9rem; font-weight: 400; color: #222; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul li a { display: block; width: 100%; padding: 8px 8px 8px 40px; box-sizing: border-box; font-size: 0.9rem; font-weight: 400; color: rgba(0,0,0,0.9); transition: .25s ease-in-out; cursor: pointer;} /*#content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul li a::before { content: '\f105'; font-family: 'FontAwesome'; display: inline-block; float: left; color: #5e6071; margin-right: 6px; font-size: 1.0rem; transition: .25s ease-in-out; } */ #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul li a:hover { color: #fff; background-color: #383a4e; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul li a:hover::before { color: #fff; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul li.active a { font-weight: 500; color: rgba(0,0,0,1); } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul li.active a:hover { color: #fff; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul li.active a::before { content: '\f00c'; font-family: 'FontAwesome'; font-size: 18px; color: #383a4e; position: absolute; margin-left: -24px; } #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .content_wrap table.alarms .context-menu ul li.active a:hover::before { color: #fff; } @media only screen and (MAX-width: 749px) { #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .align_left, #content .wrapper-rows table#installateurPowerdogList tbody tr.powerdog_alarms .align_right { display: block; clear: both; width: 100%; text-align: left; } } /* ----------------------PowerDog - LiveView ---------------------- */ #powerdog_liveview { display: block; clear: both; background-color: #fff; width: 100%; box-sizing: border-box; width: 100%; padding: 0px; margin: 5px 3px 15px 1px; overflow: auto; background-image: url('../images/redesign/pd-lv_title-bg.png'); background-position: top left; background-size: auto 41%; background-repeat: no-repeat;} #powerdog_liveview .pd-lv_title { height: auto; min-height: 28px; padding: 10px 14px; text-align: left; cursor: pointer; background-image: url('../images/redesign/pd-lv_title-bg.png'); background-position: center left; background-size: auto 50px; background-repeat: no-repeat; } #powerdog_liveview .pd-lv_title i { display: inline-block; margin-right: 40px; font-size: 22px; color: #fff; text-shadow: none; transition: .25s ease-in-out; } #powerdog_liveview.open .pd-lv_title i { transform: rotate(180deg); } #powerdog_liveview .pd-lv_title h2 { display: inline-block; margin: 0px; font-size: 17px; font-weight: 400; text-shadow: none; color: rgba(27,28,38,1); } #powerdog_liveview.open .pd-lv_title h2 { display: none; } #powerdog_liveview .pd-lv_content { height: 58vw; } #powerdog_liveview #liveview_wrapper { position: absolute; width: 88%; left: 5%; height: 55vw; background-image: url('../images/redesign/pd-lv_bg.png'); background-position: center center; background-size: 70% auto; background-repeat: no-repeat; } #powerdog_liveview #liveview_wrapper .title { display: none; } #powerdog_liveview #liveview_wrapper .title h2 { font-size: 34px; line-height: 19px; font-weight: 600; color: rgba(255,255,255,0.9); text-shadow: none; text-transform: uppercase; } #powerdog_liveview #liveview_wrapper .title h2 span { margin-left: 0px; display: block; clear: both; font-size: 20px; font-weight: 600; color: rgba(255,255,255,0.3) !important; } #powerdog_liveview #liveview_wrapper .infobar { position: absolute; width: 50px; height: auto; margin-left: 70%; margin-top: 10%; font-size: 11px; line-height: 10px; font-weight: 500; text-align: center; padding: 4px 3px 2px 3px; color: #000; transform: translate(-50%,-50%); background: #ffd831; background: -moz-linear-gradient(left, #ffd831 0%, #fbc52e 100%); background: -webkit-linear-gradient(left, #ffd831 0%,#fbc52e 100%); background: linear-gradient(to right, #ffd831 0%,#fbc52e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd831', endColorstr='#fbc52e',GradientType=1 ); -moz-border-radius: 99px; border-radius: 99px; -webkit-border-radius: 99px; } #powerdog_liveview #liveview_wrapper .infobar span { display: none; line-height: inherit; color: #000; font-size: 9px; padding-top: 2px; } #powerdog_liveview #liveview_wrapper #sun { position: absolute; width: 18%; height: 28%; top: 14%; left: 49%; transform: translate(-50%,-50%); z-index: 700; background-image: url('../images/redesign/pd-lv_sun.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } #powerdog_liveview #liveview_wrapper #clouds-l { position: absolute; width: 16%; height: 25%; top: 31%; left: 33%; transform: translate(-50%,-50%); z-index: 500; background-image: url('../images/redesign/pd-lv_clouds-l.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } #powerdog_liveview #liveview_wrapper #clouds-r { position: absolute; width: 17%; height: 24%; top: 9%; left: 75%; transform: translate(-50%,-50%); z-index: 500; background-image: url('../images/redesign/pd-lv_clouds-r.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } #powerdog_liveview #liveview_wrapper #powergrid { position: absolute; width: 37%; height: 39%; top: 45%; left: 18%; transform: translate(-50%,-50%); z-index: 650; background-image: url('../images/redesign/pd-lv_powergrid.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } #powerdog_liveview #liveview_wrapper #house { position: absolute; width: 37%; height: 45%; top: 74%; left: 46%; transform: translate(-50%,-50%); z-index: 650; background-image: url('../images/redesign/pd-lv_house.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } #powerdog_liveview #liveview_wrapper #house .infobar.temperature { margin-left: 95%; margin-top: 19%; color: #fff; background: none; padding-left: 22px; background-color: #36384c; background-image: url('../images/redesign/pd-lv_house-temp.png'); background-repeat: no-repeat; background-position: 8px 5px; background-size: 15px auto; } #powerdog_liveview #liveview_wrapper #house .infobar.consumption { margin-left: 68%; margin-top: 4%; } #powerdog_liveview #liveview_wrapper #battery { position: absolute; width: 21%; height: 32%; top: 81%; left: 81%; z-index: 850; transform: translate(-50%,-50%); background-image: url('../images/redesign/pd-lv_battery.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } #powerdog_liveview #liveview_wrapper #battery.load_0 { background-image: url('../images/redesign/pd-lv_battery0.png'); } #powerdog_liveview #liveview_wrapper #battery.load_1 { background-image: url('../images/redesign/pd-lv_battery1.png'); } #powerdog_liveview #liveview_wrapper #battery.load_2 { background-image: url('../images/redesign/pd-lv_battery2.png'); } #powerdog_liveview #liveview_wrapper #battery.load_3 { background-image: url('../images/redesign/pd-lv_battery3.png'); } #powerdog_liveview #liveview_wrapper #battery.load_4 { background-image: url('../images/redesign/pd-lv_battery4.png'); } #powerdog_liveview #liveview_wrapper #battery.load_5 { background-image: url('../images/redesign/pd-lv_battery5.png'); } #powerdog_liveview #liveview_wrapper #battery.load_6 { background-image: url('../images/redesign/pd-lv_battery6.png'); } #powerdog_liveview #liveview_wrapper #battery .infobar { margin-left: 100%; margin-top: 32%; color: #fff; background: none; background-color: #36384c; } #powerdog_liveview #liveview_wrapper #boiler { position: absolute; width: 13%; height: 22%; top: 55%; left: 89%; z-index: 830; transform: translate(-50%,-50%); background-image: url('../images/redesign/pd-lv_boiler.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } #powerdog_liveview #liveview_wrapper #boiler.load_1 { background-image: url('../images/redesign/pd-lv_boiler1.png'); } #powerdog_liveview #liveview_wrapper #boiler.load_2 { background-image: url('../images/redesign/pd-lv_boiler2.png'); } #powerdog_liveview #liveview_wrapper #boiler.load_3 { background-image: url('../images/redesign/pd-lv_boiler3.png'); } #powerdog_liveview #liveview_wrapper #boiler.load_4 { background-image: url('../images/redesign/pd-lv_boiler4.png'); } #powerdog_liveview #liveview_wrapper #boiler.load_5 { background-image: url('../images/redesign/pd-lv_boiler5.png'); } #powerdog_liveview #liveview_wrapper #boiler.load_6 { background-image: url('../images/redesign/pd-lv_boiler6.png'); } #powerdog_liveview #liveview_wrapper #boiler .infobar { margin-left: 110%; margin-top: 56%; } #powerdog_liveview #liveview_wrapper #boiler .infobar_degree { position: absolute; width: 50px; height: auto; margin-left: 115%; margin-top: 22%; font-size: 12px; line-height: 10px; font-weight: 500; text-align: center; padding: 4px 3px 2px 3px; color: #000; transform: translate(-50%,-50%); color: #fff; background: none; background-color: #36384c; -moz-border-radius: 99px; border-radius: 99px; -webkit-border-radius: 99px; } #powerdog_liveview #liveview_wrapper #car { position: absolute; width: 18%; height: 30%; top: 41%; left: 85%; z-index: 820; transform: translate(-50%,-50%); background-image: url('../images/redesign/pd-lv_car.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } #powerdog_liveview #liveview_wrapper #heatpump { position: absolute; width: 16%; height: 28%; top: 24%; left: 78%; z-index: 810; transform: translate(-50%,-50%); background-image: url('../images/redesign/pd-lv_heatpump.png'); background-repeat: no-repeat; background-size: contain; background-position: center center; } #powerdog_liveview #liveview_wrapper #heatpump .infobar { margin-left: 118%; margin-top: 18%; } #powerdog_liveview #liveview_wrapper .line { position: absolute; width: 30%; height: 30%; z-index: 610; transform: translate(-50%,-50%); } #powerdog_liveview #liveview_wrapper .line .infobar { position: absolute; min-width: 38px; width: 40%; max-width: 90px; height: auto; margin-left: 53%; margin-top: 50%; z-index: 620; transform: translate(-50%,-50%); } #powerdog_liveview #liveview_wrapper .line .animation { position: absolute; width: 100%; height: 100%; margin-left: 1%; margin-top: 17%; z-index: 600; transform: rotate(-36deg); } #powerdog_liveview #liveview_wrapper .line .animation > div.dots4 { margin-left: -40%; } #powerdog_liveview #liveview_wrapper .line .animation > div.dots4:nth-child(2) { margin-left: -20%; } #powerdog_liveview #liveview_wrapper .line .animation > div.dots4:nth-child(3) { margin-left: 0%; } #powerdog_liveview #liveview_wrapper .line .animation > div.dots4:nth-child(4) { margin-left: 20%; } #powerdog_liveview #liveview_wrapper .line .animation > div.dots4:nth-child(5) { margin-left: 40%; } #powerdog_liveview #liveview_wrapper #sun2powergrid { width: 26%; height: 30%; top: 28%; left: 34%; z-index: 600; } #powerdog_liveview #liveview_wrapper #powergrid2house { width: 20%; height: 18%; top: 55%; left: 30%; z-index: 600; } #powerdog_liveview #liveview_wrapper #powergrid2house .animation { transform: rotate(-149deg); } #powerdog_liveview #liveview_wrapper #powergrid2house .infobar { margin-left: 58%; margin-top: 65%; } #powerdog_liveview #liveview_wrapper #house2battery { width: 30%; height: 18%; top: 82%; left: 63%; z-index: 600; } #powerdog_liveview #liveview_wrapper #house2battery .animation { transform: rotate(180deg); } #powerdog_liveview #liveview_wrapper #house2battery .infobar { margin-top: 42%; } #powerdog_liveview #liveview_wrapper #sun2house { width: 30%; height: 50%; top: 35%; left: 50%; z-index: 600; } #powerdog_liveview #liveview_wrapper #sun2house .animation { transform: rotate(-90deg); } #powerdog_liveview #liveview_wrapper #sun2house .infobar { margin-top: 66%; margin-left: 44%; } #powerdog_liveview #liveview_wrapper #sun2battery { width: 40%; height: 66%; top: 36%; left: 68%; z-index: 600; } #powerdog_liveview #liveview_wrapper #sun2battery .animation { transform: rotate(-120deg); } #powerdog_liveview #liveview_wrapper #sun2battery .infobar { margin-top: 68%; margin-left: 43%; } #powerdog_liveview .pd-lv_content #liveview_datatable { display: none !important; } @media only screen and (min-width: 640px) { #powerdog_liveview #liveview_wrapper .title { display: block; position: absolute; left: 0px; top: 0px; width: 25%; min-height: 100px; height: 13%; padding: 0px 90px 90px 30px; text-align: left; } #powerdog_liveview #liveview_wrapper .infobar { width: 60px; margin-left: 90%; margin-top: 15%; font-size: 15px; line-height: 13px; padding: 6px 10px; } #powerdog_liveview #liveview_wrapper .infobar span { display: block; font-size: 14px; padding-top: 4px; } #powerdog_liveview #liveview_wrapper #boiler .infobar_degree { width: 50px; margin-left: 109%; margin-top: 14%; font-size: 15px; line-height: 13px; padding: 6px 8px; } #powerdog_liveview #liveview_wrapper #powergrid2house .infobar { margin-left: 60%; margin-top: 55%; } #powerdog_liveview #liveview_wrapper #house .infobar.consumption { min-width: 80px; } } @media only screen and (min-width: 1090px) and (max-width: 1279px) { #powerdog_liveview #liveview_wrapper #powergrid2house .infobar { margin-left: 65%; margin-top: 65%; } } @media only screen and (min-width: 1280px) { #powerdog_liveview .pd-lv_content { height: 37vw; } #powerdog_liveview .pd-lv_content #liveview_wrapper { width: 68%; height: 36vw; left: 4%; } #powerdog_liveview #liveview_wrapper #powergrid2house .infobar { margin-left: 60%; margin-top: 55%; } #powerdog_liveview .pd-lv_content #liveview_datatable { display: block !important; position: absolute; width: 22%; left: 74%; height: auto; padding: 0px; } #powerdog_liveview .pd-lv_content #liveview_datatable table { width: 100%; height: auto; margin: 0px 0px 0px 0px; border: none; background-color: transparent; } #powerdog_liveview .pd-lv_content #liveview_datatable table tr { background-color: transparent; border: none; background-image: url(); border-bottom: 1px solid rgba(94,96,113,0.1); } #powerdog_liveview .pd-lv_content #liveview_datatable table tr td { background-color: transparent; border: none; padding: 4px 0px; } #powerdog_liveview .pd-lv_content #liveview_datatable table tr td div { text-transform: none; font-size: 13px; } #powerdog_liveview .pd-lv_content #liveview_datatable table tr td:nth-child(1) div { color: rgba(94,96,113,0.75); } #powerdog_liveview .pd-lv_content #liveview_datatable table tr td:nth-child(2) div { font-weight: 600; } } @media only screen and (min-width: 1500px) { #powerdog_liveview #liveview_wrapper .title { padding: 0px 110px 110px 40px; } #powerdog_liveview #liveview_wrapper .title h2 { font-size: 46px; line-height: 24px; } #powerdog_liveview #liveview_wrapper .title h2 span { font-size: 24px; } #powerdog_liveview #liveview_wrapper .infobar { width: 100px; font-size: 20px; padding: 8px 12px; } #powerdog_liveview #liveview_wrapper #boiler .infobar_degree { width: 65px; font-size: 18px; padding: 8px 9px; } #powerdog_liveview #liveview_wrapper #house .infobar, #powerdog_liveview #liveview_wrapper #battery .infobar { width: 60px; font-size: 18px; padding: 8px 10px; } #powerdog_liveview #liveview_wrapper #house .infobar { padding-left: 20px; padding-right: 8px; } #powerdog_liveview .pd-lv_content #liveview_datatable table { margin: 20px 0px 0px 0px; } #powerdog_liveview .pd-lv_content #liveview_datatable table tr td { padding: 6px 0px; } #powerdog_liveview .pd-lv_content #liveview_datatable table tr td div { font-size: 15px; } } /* --------------- PowerDog - Powerdog-Details --------------- */ #content div.box { background-color: #fff; border: none; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } #content div.box.margin220 { padding-top: 0px; padding-bottom: 0px; } /* Anlagen-Wechsler */ #content_header.powerdog-detail-page { position: fixed; right: 16px; background-color: #36384c; z-index: 890; transition: 0.25s all; } #content_header.powerdog-detail-page.sticky { min-height: auto; padding: 2px 20px; box-shadow: 0px 2px 2px rgba(0,0,0,0.3); } #content_header.powerdog-detail-page.sticky > .right, #content_header.powerdog-detail-page.sticky > .left, #content_header.powerdog-detail-page.sticky > .device-switch { margin-top: 0px; } #content_header.powerdog-detail-page.sticky .header_user-account, #content_header.powerdog-detail-page.sticky .header_languages { display: none; } #content.powerdog-detail-page { margin-top: 150px; } @media only screen and (max-width: 1080px) { #content_header.powerdog-detail-page { left: 0px; right: 0px; } #content_header.powerdog-detail-page.sticky { padding: 2px 20px 2px 60px; height: 48px; } } @media only screen and (min-width: 800px) and (max-width: 1080px) { #content.powerdog-detail-page { margin-top: 80px; } } @media only screen and (min-width: 1081px) { #content_header.powerdog-detail-page { left: 290px; } #content.powerdog-detail-page { margin-top: 90px; } } @media only screen and (min-width: 1500px) { #content_header.powerdog-detail-page { left: 19vw; } } .device-switch { display: inline-block; width: auto; height: auto; min-height: 40px; padding: 5px; margin: 0px 0px 0px 0px; border: none; } .device-switch.sticky { position: fixed; background-color: #36384c; box-shadow: 3px 3px 3px rgba(0,0,0,0.3); z-index: 900; } .device-switch .nav-prev, .device-switch .nav-next { display: inline-block; width: 30px; margin: 0px; padding: 10px 5px; text-align: center; vertical-align: middle; cursor: pointer; } .device-switch .nav-prev::before { content: '\f104';font-family: 'FontAwesome'; display: inline-block; color: #80818f; font-size: 30px; transition: .25s ease-in-out; } .device-switch .nav-next::before { content: '\f105';font-family: 'FontAwesome'; display: inline-block; color: #80818f; font-size: 30px; transition: .25s ease-in-out; } .device-switch .nav-prev:hover::before, .device-switch .nav-next:hover::before { color: #fff; } .device-switch .device-select { display: inline-block; width: auto; margin: 0px; padding: 0px 0px; box-sizing: border-box; text-align: center; vertical-align: middle; } .device-switch .device-select .icon { width: auto; height: 38px; margin-right: 5px; vertical-align: middle; margin-top: -3px; } .device-switch .device-select .headline1 { display: inline-block; font-family: 'Muli'; font-size: 20px; font-weight: 400 !important; padding: 6px 0px; margin-right: 8px; } .device-switch .device-select form { display: inline-block; vertical-align: middle; margin-top: -4px; } .device-switch .device-select select { display: inline-block; width: 240px; margin: 0px; height: auto; height: 42px; font-family: 'Muli'; font-size: 18px; font-weight: 400 !important; padding: 6px 12px; border: 1px solid #d1d2d6; } .device-switch .device-select select option { font-size: inherit; font-weight: inherit; } @media only screen and (max-width: 490px) { .device-switch .device-select { width: 240px; } .device-switch .device-select .icon { display: none; } .device-switch .device-select select { min-width: 100%; font-size: 13px; padding: 4px; } } @media only screen and (max-width: 995px) { .device-switch .device-select .icon { display: none; } .device-switch .device-select .headline1 { display: none; } } @media only screen and (min-width: 995px) { .device-switch { margin: 18px 0px 0px 15px; } .device-switch .device-select select { width: 300px; } } @media only screen and (min-width: 1400px) { .device-switch { margin: 18px 0px 0px 15px; } } @media only screen and (min-width: 1600px) { .device-switch .device-select select { width: 400px; font-size: 19px; } .device-switch { margin: 18px 0px 0px 15px; } } /* Diagramm-Header */ #period_type_status { border: none; /*border-bottom: 1px solid #d1d2d6;*/ padding: 0px; margin-top: 15px; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; } #chart_controll_top { border: none; /*border-top: 1px solid #d1d2d6;*/ } #chart_controll_top .select_period_type { position: absolute; display: inline-block; width: 180px; min-height: 38px; border: 1px solid #d1d2d6; z-index: 90; } #chart_controll_top .select_period_type .wrapper { } #chart_controll_top .select_period_type .title { display: block; width: 100%; height: 100%; padding: 7px 10px 7px 18px; font-size: 1.04em; font-weight: 400; cursor: pointer; box-sizing: border-box; } #chart_controll_top .select_period_type .title::after { content: '\f107'; font-family: 'FontAwesome'; float: right; color: #5e6071; font-size: 22px; width: 22px; height: 30px; text-align: center; visibility: visible; } #chart_controll_top .select_period_type.open .title::after { } #chart_controll_top .select_period_type .options { display: none; width: auto; height: auto; background-color: #fff; } #chart_controll_top .select_period_type .options > div { display: block; width: 100%; padding: 8px 20px; font-size: 1.04em; font-weight: 400; cursor: pointer; box-sizing: border-box; margin: 0px; } #chart_controll_top .select_period_type .options > div:hover { background-color: #eee; } #chart_controll_top .select_period_type:hover { -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3); box-shadow: 0px 0px 2px rgba(0,0,0,0.3); } #chart_controll_top .select_period_type.open { -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3); box-shadow: 0px 0px 2px rgba(0,0,0,0.3); } fieldset.radios { display: none; } #chart_controll_top #data_normed_status { width: auto; } #chart_controll_top #data_normed_status { width: auto; margin-top: 4px; } @media only screen and (MAX-width: 360px) { #chart_controll_top .align_left, #chart_controll_top .align_right { display: block; clear: both; float: none; width: 100%; height: auto; min-height: 50px; margin-bottom: 8px; text-align: left; } } @media only screen and (MAX-width: 1080px) { #chart_controll_top .align_left, #chart_controll_top .align_right { display: inline-block; clear: none; float: auto; width: 49%; height: auto; min-height: 50px; margin-bottom: 0px; text-align: left; } #chart_controll_top .align_right { text-align: left; } #chart_controll_top .select_period_type { width: 110px; } } #data_details_status { width: auto; } #label_data_details { background-color: transparent; border: none; padding: 6px 8px; margin-left: 8px; margin-top: -2px; color: #5e6071; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; transition: .25s ease-in-out; } #label_data_details:hover { background-color: rgba(54,56,76,0.90); color: #fff; } #label_data_details.data_details_select { background-color: rgba(54,56,76,0.80); color: #fff; } #label_data_details .symbol { width: 26px; height: 26px; float: left; margin-right: 2px; background-color: transparent; background-image: url(''); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } #label_data_details .symbol::before { content: '\f002'; display: inline-block; float: left; width: 24px; height: 24px; font-family: 'FontAwesome'; color: #5e6071; margin-top: 2px; margin-left: 0px; margin-right: 0px; font-size: 23px; transition: .25s ease-in-out; } #label_data_details:hover .symbol::before, #label_data_details.data_details_select .symbol::before { color: #fff; } #label_data_details span { padding: 2px 5px; color: inherit; display: inline-block; float: none; width: auto; } /* Diagramm-Footer */ #chart_controll { border: none; /*border-top: 1px solid #d1d2d6;*/ padding: 0px; margin-bottom: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; } #chart_controll .analysis_navbar { margin: 0px; } #chart_controll .button-back.analysis_navbar button { width: 48px; height: 48px; padding: 6px 12px; box-sizing: border-box; text-align: center; background-color: transparent; } #chart_controll .button-back.analysis_navbar button:hover { background-color: rgba(54,56,76,0.90); } #chart_controll .button-back.analysis_navbar button::before { content: '\f104'; font-family: 'FontAwesome'; display: inline-block; float: left; color: #5e6071; margin-left: 4px; font-size: 30px; transition: .25s ease-in-out; } #chart_controll .button-back.analysis_navbar button:hover::before { margin-left: 0px; color: #fff; } #chart_controll .button-today.analysis_navbar button { width: 48px; height: 48px; padding: 10px 12px; box-sizing: border-box; text-align: center; background-color: transparent; } #chart_controll .button-today.analysis_navbar button:hover { background-color: rgba(54,56,76,0.90); } #chart_controll .button-today.analysis_navbar button::before { content: '\f015'; font-family: 'FontAwesome'; display: inline-block; float: left; color: #5e6071; font-size: 23px; transition: .25s ease-in-out; } #chart_controll .button-today.analysis_navbar button:hover::before { color: #fff; } #chart_controll .button-next.analysis_navbar button { width: 48px; height: 48px; padding: 6px 12px; box-sizing: border-box; text-align: center; background-color: transparent; } #chart_controll .button-next.analysis_navbar button:hover { background-color: rgba(54,56,76,0.90); } #chart_controll .button-next.analysis_navbar button::before { content: '\f105'; font-family: 'FontAwesome'; display: inline-block; float: left; color: #5e6071; margin-left: 4px; font-size: 30px; transition: .25s ease-in-out; } #chart_controll .button-next.analysis_navbar button:hover::before { margin-left: 8px; color: #fff; } #chart_controll .date_selector.analysis_navbar { width: 48px; height: 48px; padding: 14px 12px; box-sizing: border-box; text-align: center; background-color: transparent; } #chart_controll .date_selector.analysis_navbar:hover { background-color: rgba(54,56,76,0.90); } #chart_controll .date_selector img.ui-datepicker-trigger { position: absolute; margin: -10px 0px 0px -32px; opacity: 0; } #chart_controll .date_selector.analysis_navbar::before { content: '\f073'; font-family: 'FontAwesome'; display: inline-block; float: left; color: #5e6071; font-size: 23px; transition: .25s ease-in-out; } #chart_controll .date_selector.analysis_navbar:hover::before { color: #fff; } #chart_controll .right.data_list_view { padding: 0px; margin: 0px; text-align: center; background-color: transparent; } #chart_controll .right.data_list_view > div { margin: 0px; padding: 0px; } #label_data_list_view, #label_data_chart_view { width: auto; height: 48px; padding: 6px 12px; margin: 0px; box-sizing: border-box; text-align: center; background-color: transparent; border: none; margin: 0px; background-color: transparent; color: #5e6071; -moz-border-radius: 0px; border-radius: 0px; -webkit-border-radius: 0px; transition: .25s ease-in-out; } #chart_controll .data_details_deselect { background-color: rgba(54,56,76,0.10); } #chart_controll .data_details_select { background-color: rgba(54,56,76,0.80); color: #fff; } #label_data_chart_view .symbol, #label_data_list_view .symbol { background-image: url(); background-color: transparent; border: none; padding: 6px 0px; } #label_data_chart_view .symbol::before { content: '\f1fe'; font-family: 'FontAwesome'; display: inline-block; float: left; color: #5e6071; font-size: 22px; transition: .25s ease-in-out; } #label_data_list_view .symbol::before { content: '\f022'; font-family: 'FontAwesome'; display: inline-block; float: left; color: #5e6071; font-size: 26px; transition: .25s ease-in-out; } #chart_controll label span { width: auto; color: inherit; } #chart_controll .data_details_select .symbol::before { color: #fff; } #chart_controll .data_refresh { width: 48px; height: 48px; padding: 14px 12px; cursor: pointer; box-sizing: border-box; text-align: center; background-color: transparent; } #chart_controll .data_refresh:hover { background-color: rgba(54,56,76,0.90); } #chart_controll .data_refresh img.ui-datepicker-trigger { position: absolute; margin: -10px 0px 0px -32px; opacity: 0; } #chart_controll .data_refresh::before { content: '\f021'; font-family: 'FontAwesome'; display: inline-block; float: left; color: #5e6071; font-size: 23px; transition: .25s ease-in-out; } #chart_controll .data_refresh:hover::before { color: #fff; } /* Boxen unter Diagramm-Bereich */ #content .box_row { display: block; clear: both; width: 100%; margin: 0px 0px 10px 0px; padding: 0px; box-sizing: border-box; font-size: 0px; } #content .box_row .box { display: block; clear: both; width: 100%; margin: 18px 0px 18px 0px; padding: 0px; box-sizing: border-box; } #content .box_row .box .box_grid_title { display: block; clear: both; width: 100%; padding: 16px 15px 13px 15px; box-sizing: border-box; min-height: 28px; font-weight: 500; color: #fff; font-size: 1.1em; line-height: 1.0em; background-color: #5f6275; } #content .box_row .box .box_grid_title i { margin-right: 8px; color: #fff; font-size: 1.2em; } #content .box_row .box .box_grid_title span { margin-left: 3px; color: #fff; font-weight: 300; } #content .box_row .box .box_grid_content { display: block; clear: both; width: 100%; padding: 15px 15px 5px 15px; } #content .box_row .box .box_grid_content.zero-sidepadding { padding: 15px 0px; } #content .box_row .box .box_grid_content table { border: none; background-color: transparent; } #content .box_row .box .box_grid_content table tr { border: none; background: transparent; } #content .box_row .box .box_grid_content table tr th, #content .box_row .box .box_grid_content table tr td { border: none; background: transparent; } #content .box_row .box .box_grid_content h4 { font-size: 1.2em; color: rgba(94,96,113,0.5); font-weight: 200; } #content .box_row .box_col3-1 .box_grid_content h4 { font-size: 1.2em; color: rgba(94,96,113,0.5); font-weight: 200; } #content .box_row .box .box_grid_content table tr { } #content .box_row .box .box_grid_content table tr th { padding: 1px 10px 1px 15px; font-size: 0.95em; line-height: 1em; text-align: left; font-weight: 600; background-color: #f5f5f5; } #content .box_row .box .box_grid_content table tr td { padding: 1px 10px 1px 15px; font-size: 0.95em; line-height: 1em; text-align: left; } #content .box_row .box .box_grid_content table tr td:first-child { color: rgba(94,96,113,1); font-weight: 400; font-size: 0.95em; text-transform: none; } #content .box_row .box .box_grid_content table tr th div { font-weight: 600; line-height: 1em; } #content .box_row .box_col3-2 { display: block; clear: both; width: 100%; margin: 18px 0px 18px 0px; padding: 0px; box-sizing: border-box; } @media only screen and (min-width: 1081px) { #content .box_row .box_col3-1 { display: inline-block; width: 32.4%; margin: 0.7% 0.7%; min-height: 240px; vertical-align: top; } #content .box_row .box_col3-1 { display: inline-block; width: 32.4%; margin: 0.7% 0.7%; min-height: 240px; vertical-align: top; } #content .box_row .box_col3-2 { display: inline-block; width: 66.1%; margin: 0.7% 0.7%; min-height: 240px; vertical-align: top; } #content .box_row .box_col3-1:first-child { margin-left: 0; } #content .box_row .box_col3-1:nth-child(3), #content .box_row .box_col3-2:nth-child(2) { margin-right: 0; } #content .box_row .box_col4-1:first-child { margin-left: 0; } #content .box_row .box_col4-1:nth-child(4) { margin-right: 0; } } /* Folgeseite: Control-Panel -> Mitteilungen UND GLOBAL Styling der UI-Dialog-Elemente */ table.message_table button { cursor: pointer; } .ui-widget { /*max-width: 95% !important; max-height: 95% !important; overflow: auto; */ } .ui-widget-overlay { background-image: url('') !important; background-color: #000 !important; opacity: 0.8 !important; z-index: 990 !important; } .ui-corner-all { -moz-border-radius: 0px !important; border-radius: 0px !important; -webkit-border-radius: 0px !important; } .ui-state-default .ui-icon { background: none !important; } button.ui-state-default.ui-dialog-titlebar-close { width: 34px; height: 34px; border: none !important; background: transparent !important; } button.ui-state-default.ui-dialog-titlebar-close .ui-icon { left: auto !important; top: auto !important; margin-left: auto; margin-top: auto; position: relative; width: 40px !important; height: 40px !important; text-indent: 0px !important; } button.ui-state-default.ui-dialog-titlebar-close .ui-icon::before { content: '\f00d'; width: 40px !important; height: 40px !important; font-family: 'FontAwesome'; display: inline-block; float: left; color: rgba(54, 56, 76, 1); font-size: 32px; transition: .25s ease-in-out; } button.ui-state-default.ui-dialog-titlebar-close:hover .ui-icon::before { color: rgba(54, 56, 76, 0.7); } .ui-dialog .ui-dialog-titlebar { margin-bottom: 30px; } .ui-dialog .ui-dialog-titlebar .ui-dialog-title { text-align: left; font-size: 2rem; font-weight: 300; color: rgba(54, 56, 76, 0.9); } .ui-dialog .ui-dialog-buttonset .ui-button { border: none !important; color: #fff !important; background: rgba(54, 56, 76, 1) !important; transition: .25s ease-in-out; } .ui-dialog .ui-dialog-buttonset .ui-button .ui-button-text { border: none !important; color: #fff !important; } .ui-dialog .ui-dialog-buttonset .ui-button:hover { background: rgba(54, 56, 76, 0.8) !important; } .ui-widget .ui-dialog-content ul { margin: 30px 0px 30px 15px; padding: 0px; } .ui-widget .ui-dialog-content ul li { margin: 5px 0px; padding: 0px; } /*Responsiv-Optimierungen für UI-Dialoge*/ @media only screen and (MAX-width: 1081px) { .ui-widget { /*max-width: 95% !important; max-height: 95% !important; overflow: auto; */ } .ui-widget .ui-dialog-titlebar { border: 1px solid red; padding: 0px !important; margin-bottom: 0px; } .ui-widget .ui-dialog-content { max-height: 70vh !important; } } /* Folgeseite: Meine Anlagen -> Optionen -> Geräte-Config -> PW-Protection-Overlay */ .ui-dialog #password_protection_1 h3 { text-align: left; font-size: 2rem; font-weight: 300; color: rgba(54, 56, 76, 0.9); margin-bottom: 40px; } .ui-dialog #password_protection_1 table { border: none; background-color: transparent; margin-bottom: 20px; } .ui-dialog #password_protection_1 table tr { border: none; background-color: transparent; background-image: url(); } .ui-dialog #password_protection_1 table td, .ui-dialog #password_protection_1 table th { border: none; background-color: transparent; } .ui-dialog #password_protection_1 #password_protection_1_password { display: inline-block; float: none; max-width: 290px; } .ui-dialog #password_protection_1 #password_protection_1_btn { display: inline-block; float: none; min-width: 80px; } /* Folgeseite: Monitoring-Config */ .monitoring-config { padding: 10px 0px; } #sort_loader { display: none; position: absolute; left: 50%; top: 180px; width: 50%; height: auto; padding: 15px 40px; text-align: center; transform: translate(-50%,-50%); background-color: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.08); z-index: 900; -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px rgba(0,0,0,0.1);} #sort_loader.success { color: #3fae16; background-color: rgba(217,243,208,0.9); } ul.ui-sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; } ul.monitoring-screens { width: 100%; margin: 20px 25px; } ul.monitoring-screens.new { width: 100%; margin: 10px 15px; } ul.monitoring-screens li.screen { float: left; width: 280px; max-width: 90%; height: 200px; overflow: hidden; cursor: move; margin: 10px 20px 10px 0; list-style-type: none; box-sizing: border-box; padding: 0px; transition: box-shadow ease 0.3s; border: 1px solid rgba(0,0,0,0.08); background-color: #fff; -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px rgba(0,0,0,0.1); } ul.monitoring-screens li.screen:hover { border: 1px solid rgba(0,0,0,0.2); -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3); box-shadow: 0px 0px 10px rgba(0,0,0,0.3); } ul.monitoring-screens li.screen.inactive { border: 1px solid rgba(0,0,0,0.02); background-color: #f8f8f8; -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1); box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1); } ul.monitoring-screens.presentation li.screen { width: 400px; height: 260px; margin: 10px 30px 10px 10px; border: 8px solid #36384c; background-color: rgb(54,56,76); cursor: default; transition: all 0.2s ease-out; -moz-box-shadow: 0px 20px 20px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 20px 20px rgba(0,0,0,0.4); box-shadow: 0px 20px 20px rgba(0,0,0,0.4); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; } ul.monitoring-screens.presentation li.screen:hover { transform: scale(1.05); -moz-box-shadow: 0px 20px 40px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 20px 40px rgba(0,0,0,0.3); box-shadow: 0px 20px 40px rgba(0,0,0,0.3); } ul.monitoring-screens li.screen.new { cursor: pointer; } ul.monitoring-screens.presentation li.screen.new { background-color: #fff; } ul.monitoring-screens.presentation li.screen.new .teaser { display: block; } ul.monitoring-screens.presentation li.screen.new .create-new { display: none; } ul.monitoring-screens.presentation li.screen.new .create-new input[type=text] { font-size: 26px; line-height: 1.1; margin-top: 10px; color: rgba(54,56,76,1); font-weight: 500; text-align: center; padding-bottom: 8px; border-bottom: 1px solid rgba(54,56,76,0.7); } ul.monitoring-screens.presentation li.screen.new .create-new input[type=submit] { font-size: 17px; margin-top: 15px; background-color: rgba(54,56,76,1); font-weight: 400; text-align: center; padding: 8px 15px; color: #fff; cursor: pointer; } ul.monitoring-screens.presentation li.screen.new .create-new input[type=submit]:hover { background-color: rgba(54,56,76,0.9); } ul.monitoring-screens li.screen::marker, ul.monitoring-screens li.screen::before { display: none; } ul.monitoring-screens li.screen .row { display: block; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; } ul.monitoring-screens.presentation li.screen .row.body { height: 195px; padding: 20px 30px; box-sizing: border-box; text-align: center; background-color: #fff; } ul.monitoring-screens.presentation li.screen .row.foot { height: 80px; background-color: #686b80;} ul.monitoring-screens li.screen .row .icon { display: inline-block; float: left; width: 41%; height: 118px; padding: 10px; text-align: center; box-sizing: border-box; } ul.monitoring-screens li.screen.inactive .row .icon { opacity: 0.4; } ul.monitoring-screens li.screen.inactive .row .icon.toggle { opacity: 1; } ul.monitoring-screens li.screen .row .icon img { width: 100%; height: auto; margin: 0px auto; } ul.monitoring-screens li.screen .row .title { display: inline-block; width: 59%; padding: 35px 5px 10px 5px; box-sizing: border-box; color: #36384c; } ul.monitoring-screens li.screen.inactive .row .title { color: #99a; } ul.monitoring-screens li.screen .row .title h3 { font-size: 1.35rem; line-height: 1.0; color: inherit; font-weight: 500; word-break:break-all; } ul.monitoring-screens.new li.screen .row .type { font-size: 1.35rem; line-height: 1.05; color: inherit; font-weight: 500; word-break:break-all; } ul.monitoring-screens li.screen .row .type { font-size: 0.75rem; color: #aaa; font-weight: 300; } ul.monitoring-screens.slides li.screen .row.head { height: 125px; padding: 0px 15px; box-sizing: border-box; overflow: hidden; } ul.monitoring-screens.slides li.screen .row.head .title { display: block; clear: both; width: 100%; height: 65px; padding: 20px 20px 0px 0px; box-sizing: border-box; } ul.monitoring-screens.slides li.screen .row.head .title h3 { line-height: 0.9em; } ul.monitoring-screens.slides li.screen .row.head .icon { display: inline-block; float: none; width: 50%; padding: 0px 20px 10px 0px; box-sizing: border-box; } ul.monitoring-screens.slides li.screen .row.head .desc { display: inline-block; float: left; width: 48%; height: auto; padding: 0px 15px 0px 0px; box-sizing: border-box; } ul.monitoring-screens.slides li.screen .row.source { padding: 8px 15px; height: 18px; overflow: hidden; background-color: #eee; color: #777; font-size: 0.8rem; } ul.monitoring-screens.slides li.screen .row.icons { padding: 0px 0px; background-color: rgba(54,56,76,0.9); } ul.monitoring-screens.presentation li.screen .row.foot { padding: 0px 0px 0px 0px; box-sizing: border-box; background-color: #686b80; } ul.monitoring-screens li.screen .row.icons .icon { width: 51px; height: auto; padding: 10px 8px; margin: 0px 2px; cursor: pointer; box-sizing: border-box; color: rgba(255,255,255,0.85); text-align: center; } ul.monitoring-screens li.screen .row.icons .icon:hover { color: rgba(255,255,255,1); background-color: rgba(54,56,76,1); } ul.monitoring-screens li.screen .row.icons .icon i.fa { display: inline-block; color: inherit; font-size: 20px; } ul.monitoring-screens li.screen .row.icons .icon:last-child { float: right; } ul.monitoring-screens.presentation li.screen .row.icons .icon { width: 170px; padding: 14px 10px; margin: 0px 0px;} ul.monitoring-screens.slides.new li.screen .row.head { height: 190px; padding: 15px; } ul.monitoring-screens.slides.new li.screen .row.head .title { height: 75px; padding: 10px 0px 0px 0px; text-align: center; } ul.monitoring-screens.slides.new li.screen .row.head .icon { width: 100%; margin: 0px auto; text-align: center; } ul.monitoring-screens.slides.new li.screen .row.head .icon img { width: 60%; margin: 0px auto; text-align: center; } ul.monitoring-screens li.screen.new { cursor: default; text-align: center; } ul.monitoring-screens li.screen.new .icon { display: block; width: 100%; height: 100%; padding: 45px 30px; box-sizing: border-box; cursor: pointer; } ul.monitoring-screens.presentation li.screen.new .icon { padding: 75px 30px; } ul.monitoring-screens li.screen.new .icon .fa { margin-top: 10px; font-size: 40px; color: rgba(94,225,46,0.5); transition: all .35s ease-in-out; } ul.monitoring-screens li.screen.new .icon:hover .fa { color: rgba(94,225,46,0.9); } ul.monitoring-screens li.screen .title h2 { font-size: 32px; line-height: 1.1; margin-top: 10px; color: rgba(54,56,76,0.9); font-weight: 400; } ul.monitoring-screens li.screen.new .icon .title h3 { font-size: 22px; line-height: 1.1; margin-top: 10px; color: rgba(54,56,76,0.6); transition: all .35s ease-in-out; } ul.monitoring-screens li.screen.new .icon:hover .title h3 { color: rgba(54,56,76,1); } ul.monitoring-screens.presentation li.screen .title { width: auto; padding: 0px; margin: 10px auto 15px auto; } ul.monitoring-screens.presentation li.screen .title h2 { margin-top: 5px; } ul.monitoring-screens.presentation li.screen .url { width: 100%; padding: 6px 32px 6px 8px; box-sizing: border-box; margin: 15px 0px 15px 0px; cursor: copy; background-color: rgba(54,56,76,0.04); border: 1px solid rgba(54,56,76,0.16); transition: all .35s ease-in-out;} ul.monitoring-screens.presentation li.screen .url:hover { background-color: rgba(54,56,76,0.2); color: rgba(54,56,76,0.9); border: 1px solid rgba(54,56,76,0.7); } ul.monitoring-screens.presentation li.screen .url input { width: 100%; cursor: copy; color: rgba(54,56,76,0.6); font-size: 13px; background-color: transparent; border: none; transition: all .35s ease-in-out;} ul.monitoring-screens.presentation li.screen .url input:hover { color: rgba(54,56,76,0.9); } ul.monitoring-screens.presentation li.screen .url input + i.fa { position: absolute; float: right; cursor: copy; width: 32px; height: 28px; padding: 4px 0px; margin-top: -5px; font-size: 20px; color: rgba(54,56,76,0.9); z-index: 10; } /* Formulare für Monitoring-Config */ form.monitoring-slide input.txt { box-sizing: border-box; height: 36px; } form.monitoring-slide input[type=color] { display: inline-block; max-width: 90px; background-color: transparent; border: none; padding: 0px; -moz-border-radius: 99px; border-radius: 99px; -webkit-border-radius: 99px; } .checkbox-label-combo { } .checkbox-label-combo input[type=checkbox] { display: inline-block; float: none; width: auto; margin-right: 4px; margin-top: 3px; } .checkbox-label-combo label { display: inline-block; float: none; width: auto; } .radio-label-combo { } .radio-label-combo input[type=radio] { display: inline-block; float: none; width: auto; margin-right: 4px; margin-top: 3px; } .radio-label-combo label { display: inline-block; float: none; width: auto; } .label-text-combo { } .label-text-combo label { display: block; float: none; clear: both; height: auto; margin-bottom: 10px; } .label-text-combo input[type=text] { display: block; float: none; } .form-divider { margin-top: 20px !important; padding-top: 18px !important; border-top: 1px solid rgba(54,56,76,0.1) !important; } .form-divider.first { padding-top: 0px !important; border-top: none !important; } .form-divider > label { font-weight: 500; font-size: 1.3rem; color: rgba(54,56,76,0.99); padding-bottom: 10px !important; margin-bottom: 10px !important; } .grid-12-12.colors .grid-4-12.for-theme { min-height: 95px; } .grid-12-12.slide_title { padding-left: 34px; background-image: url('/templates/portal2013/images/nav_btn_down.png'); background-repeat: no-repeat; background-position: 10px 4px; } /*.grid-12-12.slide_title::before { content: '>'; position: absolute; left: 30px; color: #222; width: 30px; height: 30px; font-size: 24px; }*/ .grid-12-12.slide_title.active { background-image: url('/templates/portal2013/images/nav_btn_up.png'); } .grid-12-12.slide_content { display: none; } .grid-12-12.slide_content.active { display: block; } .margin-top { margin-top: 20px !important; } .color-select-and-toggle { min-height: 140px; } form.monitoring-slide .btn_dark.btn_right { padding: 12px 20px; min-width: 200px; font-size: 1.1rem; cursor: pointer; transition: all .35s ease-in-out; } .img_selecter_wrapper { position: relative; width: 100%; height: 180px; overflow: hidden; } .img_selecter_wrapper .img_del { position: absolute; right: 0px; width: 42px; height: 42px; margin: 5px; box-sizing: border-box; padding: 7px 5px; background-color: transparent; text-align: center; transition: all ease 0.3s; -moz-border-radius: 99px; border-radius: 99px; -webkit-border-radius: 99px; } .img_selecter_wrapper:hover .img_del { background: rgba(0,0,0,0.65) } .img_selecter_wrapper .img_del a { color: #fff; cursor: pointer; text-align: center; } .img_selecter_wrapper .img_del a img { width: auto; height: auto; max-width: 24px; } /* Monitoring-Show TV-Voransicht */ .fancybox-is-open.fancy-tv .fancybox-bg { opacity: 0.7; } .fancy-tv .fancybox-content { box-sizing: border-box; border: 12px solid #111; background-color: #fff; -moz-box-shadow: 0px 15px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 15px 20px rgba(0,0,0,0.7); box-shadow: 0px 15px 20px rgba(0,0,0,0.6); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; } .monitoring_show { width: 100%; height: 100%; background-color: #fff; background-size: cover; background-position: center center; } .monitoring_show #wrapper #content { padding: 0px !important; background-color: transparent !important; } .monitoring_show #wrapper #content #screen_title { position: absolute; left: 0; top: 0; width: 39vw; height: 22vw; padding: 2vw 5vw 1vw 2vw; box-sizing: border-box; background-image: url('../images/redesign/pd-lv_title-bg.png'); background-position: top left; background-size: contain; background-repeat: no-repeat; z-index: 900; } .monitoring_show #wrapper #content #screen_title h2#headline { font-family: 'Muli', sans-serif; font-size: 2.7vw; line-height: 2.65vw; margin: 0; padding: 0 10vw 0 0; font-weight: 600 !important; color: rgba(255,255,255,0.9); text-shadow: none; text-transform: uppercase; } .monitoring_show #wrapper #content #screen_title span { font-family: 'Muli', sans-serif; font-size: 1.2vw; margin-left: 0px; margin-bottom: 0.1vw; display: block; clear: both; font-weight: 400; color: rgba(255,255,255,0.3) !important; text-transform: uppercase; } .monitoring_show #wrapper #content #digitalValue { width: 25vw; height: 100%; padding: 0; left: 0; padding-left: 2vw; padding-top: 24vw; box-sizing: border-box; overflow: hidden; background-color: transparent !important; } .monitoring_show #wrapper #content #digitalValue table { width: 100%; height: auto; margin: 0; border: none; background-color: transparent; } .monitoring_show #wrapper #content #digitalValue table tr { background-color: transparent; border: none; background-image: url(); border-bottom: 1px solid rgba(94,96,113,0.1); } .monitoring_show #wrapper #content #digitalValue table tr th, .monitoring_show #wrapper #content #digitalValue table tr td { width: auto; background-color: transparent; border: none; padding: 0.5vw 0.5vw 0.5vw 0; font-size: 1.2vw; text-transform: none; } .monitoring_show #wrapper #content #digitalValue .dark table tr td:nth-child(1) { color: rgb(90, 83, 83); font-weight: 400; } .monitoring_show #wrapper #content #digitalValue .light table tr td:nth-child(1) { color: rgb(168, 168, 168); font-weight: 400; } .monitoring_show #wrapper #content #digitalValue .dark table tr td:nth-child(2) { color: rgb(0, 0, 0); } .monitoring_show #wrapper #content #digitalValue .light table tr td:nth-child(2) { color: rgb(255, 255, 255); } .monitoring_show #wrapper #content #digitalValue table tr td:nth-child(2) { font-weight: 600; font-size: 1.4vw; text-align: right; padding-right: 1.8vw; } .monitoring_show #wrapper #content #digitalValue table tr td:nth-child(2) > div { text-align: right; } .monitoring_show #wrapper #content #digitalValue { width: 25vw; height: 100%; padding: 0; left: 0; padding-left: 2vw; padding-top: 24vw; box-sizing: border-box; overflow: hidden; background-color: transparent !important; } .monitoring_show #wrapper #content #digitalValue table { width: 100%; height: auto; margin: 0; border: none; background-color: transparent; } .monitoring_show #wrapper #content #digitalValue table tr { background-color: transparent; border: none; background-image: url(); border-bottom: 1px solid rgba(94,96,113,0.1); } .monitoring_show #wrapper #content #digitalValue table tr th, .monitoring_show #wrapper #content #digitalValue table tr td { width: auto; background-color: transparent; border: none; padding: 0.5vw 0.5vw 0.5vw 0; font-size: 1.2vw; text-transform: none; } .monitoring_show #wrapper #content #digitalValue .dark table tr td:nth-child(1) { color: rgb(90, 83, 83); font-weight: 400; } .monitoring_show #wrapper #content #digitalValue .light table tr td:nth-child(1) { color: rgb(168, 168, 168); font-weight: 400; } .monitoring_show #wrapper #content #digitalValue .dark table tr td:nth-child(2) { color: rgb(0, 0, 0); } .monitoring_show #wrapper #content #digitalValue .light table tr td:nth-child(2) { color: rgb(255, 255, 255); } .monitoring_show #wrapper #content #digitalValue table tr td:nth-child(2) { font-weight: 600; font-size: 1.4vw; text-align: right; padding-right: 1.8vw; } .monitoring_show #wrapper #content #digitalValue table tr td:nth-child(2) > div { text-align: right; } .monitoring_show #wrapper #content #digitalValue .monitoring_logo { position: absolute; width: 19vw; height: 9vw; bottom: 5vw; left: 3vw; } .monitoring_show #wrapper #content #digitalValue .monitoring_logo .powerdogLogo { width: auto; max-width: 100%; height: auto; max-height: 100%; left: auto; } .monitoring_show #wrapper #content #diagramView { width: 75vw; height: 100%; padding: 0; padding: 7vw 2vw 0vw 3vw; box-sizing: border-box; overflow: hidden; background-color: transparent !important; } .monitoring_show #wrapper #content #diagramView #wrapper-rows { } .monitoring_show #wrapper #content #diagramView #wrapper-rows.bg_transparent { background-color: transparent !important; box-shadow: none !important; } .monitoring_show #wrapper #content #diagramView #wrapper-rows.fontsize-small { padding: 0vw 1vw; } .monitoring_show #wrapper #content #diagramView #wrapper-rows.fontsize-medium { padding: 1vw 3vw; } .monitoring_show #wrapper #content #diagramView #wrapper-rows.fontsize-large { padding: 5vw 6vw; } .monitoring_show #wrapper #content #diagramView table.tbl_digitalvalues { width: 100%; height: auto; margin: 0; border: none; background-color: transparent; } .monitoring_show #wrapper #content #diagramView table.tbl_digitalvalues tr { background-color: transparent; border: none; background-image: url(); } .monitoring_show #wrapper #content #diagramView table.tbl_digitalvalues tr th, .monitoring_show #wrapper #content #diagramView table.tbl_digitalvalues tr td { width: auto; background-color: transparent; border: none; text-transform: none; } .monitoring_show #wrapper #content #diagramView table.tbl_digitalvalues tr th { font-weight: 400; } .monitoring_show #wrapper #content #diagramView table.tbl_digitalvalues tr td { font-weight: 600; text-align: right; } .monitoring_show #wrapper #content #diagramView #wrapper-rows.fontsize-small table.tbl_digitalvalues tr th { padding: 0.5vw 0.3vw 0.5vw 0; font-size: 1.6vw; padding-right: 0.0vw; } .monitoring_show #wrapper #content #diagramView #wrapper-rows.fontsize-small table.tbl_digitalvalues tr td { padding: 0.5vw 0.3vw 0.5vw 0; font-size: 1.9vw; padding-right: 0.2vw; } .monitoring_show #wrapper #content #diagramView #wrapper-rows.fontsize-medium table.tbl_digitalvalues tr th { padding: 1.5vw 0.9vw 1.5vw 0; font-size: 1.6vw; padding-right: 1.0vw; } .monitoring_show #wrapper #content #diagramView #wrapper-rows.fontsize-medium table.tbl_digitalvalues tr td { padding: 1.5vw 0.9vw 1.5vw 0; font-size: 1.9vw; padding-right: 1.2vw; } .monitoring_show #wrapper #content #diagramView #wrapper-rows.fontsize-large table.tbl_digitalvalues tr th { padding: 1.5vw 0.9vw 1.5vw 0; font-size: 1.9vw; padding-right: 1.8vw; } .monitoring_show #wrapper #content #diagramView #wrapper-rows.fontsize-large table.tbl_digitalvalues tr td { padding: 1.5vw 0.9vw 1.5vw 0; font-size: 2.5vw; padding-right: 2.8vw; } .monitoring_show #wrapper #content #diagramView table.tbl_digitalvalues tr td > div { text-align: right; } /* Theme: Dark */ .monitoring_show.dark { background-color: #111; } .monitoring_show.dark #wrapper { background-color: rgba(0,0,0,0.6); } .monitoring_show.dark #wrapper #content #digitalValue { background-color: rgba(255,255,255,0.9) !important; } .monitoring_show.dark #wrapper #content #diagramView table.tbl_digitalvalues tr { border-bottom: 1px solid rgba(255,255,255,0.2); } .monitoring_show.dark #wrapper #content #diagramView table.tbl_digitalvalues tr th, .monitoring_show.dark #wrapper #content #diagramView table.tbl_digitalvalues tr td { color: #fff !important; } /* Theme: Light */ .monitoring_show.light { background-color: #eee; } .monitoring_show.light #wrapper { background-color: rgba(255,255,255,0.7); } .monitoring_show.light #wrapper #content #digitalValue { background-color: rgba(0,0,0,0.8) !important; } .monitoring_show.light #wrapper #content #diagramView table.tbl_digitalvalues tr { border-bottom: 1px solid rgba(0,0,0,0.2); } .monitoring_show.light #wrapper #content #diagramView table.tbl_digitalvalues tr th, .monitoring_show.light #wrapper #content #diagramView table.tbl_digitalvalues tr td { color: #000 !important; } /* Theme: Custom */ .monitoring_show.custom { } .monitoring_show.custom #wrapper { } .monitoring_show.custom #wrapper #content #digitalValue { } .monitoring_show.custom #wrapper #content #diagramView table.tbl_digitalvalues tr { border-bottom: 1px solid rgba(0,0,0,0.4); } .monitoring_show.custom #wrapper #content #diagramView table.tbl_digitalvalues tr th, .monitoring_show.custom #wrapper #content #diagramView table.tbl_digitalvalues tr td { color: #000 !important; } .sub-menu-wrapper { display: block; clear: both; width: 100%; height: auto; margin: 10px 0px; } .sub-menu-wrapper ul.sub-menu { display: flex; /* changed from block/inline-block to flex */ clear: both; list-style-type: none; width: 100%; height: auto; margin: 20px 0 10px 0; padding: 0; font-size: 0; /* removes the inline spacing from inline-block */ -moz-box-shadow: 0 0 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.2); box-shadow: 0 0 2px rgba(0,0,0,0.2); } .sub-menu-wrapper ul.sub-menu li { flex: 1; /* each li takes equal share */ text-align: center; /* optional: center content */ margin: 0; padding: 0; /* you can remove display:inline-block here because flex items are block-level by default */ } .sub-menu-wrapper .sub-menu li:first-child { margin-left: 0; } .sub-menu-wrapper .sub-menu li:last-child { margin-right: 0; } .sub-menu-wrapper .sub-menu li a { display: inline-block; box-sizing: border-box; width: 100%; min-height: 36px; padding: 20px; text-align: center; border-left: 1px solid #eee; background-color: #fff; color: rgba(27,28,38,0.5); } .sub-menu-wrapper .sub-menu li:first-child a { border-left: none; } .sub-menu-wrapper .sub-menu li.active a { background-color: #fff; } .sub-menu-wrapper .sub-menu li a .icon { display: block; margin: 10px 0px; height: 40px; opacity: 0.5; } .sub-menu-wrapper .sub-menu li a .icon img { max-width: 100%; max-height: 100%; } .sub-menu-wrapper .sub-menu li a .title { display: block; margin: 10px 0px; font-size: 1.1rem; color: #999; } .sub-menu-wrapper .sub-menu li.active a { background-color: #fff; color: rgba(27,28,38,0.5); } .sub-menu-wrapper .sub-menu li.active a .icon { opacity: 1; } .sub-menu-wrapper .sub-menu li.active a .title { font-weight: bold; color: #36384c; } /* hide elements by class, f.e. in app view */ .uk-hidden { display: none !important; } #app_view_functions { display: flex; flex-wrap: wrap; gap: 20px; clear: both; width: 100%; height: auto; margin: 15px 0px; font-size: 0px; } #app_view_functions > div { flex: 1 1 calc(50% - 10px); /* 2-column layout with spacing */ clear: both; width: 100%; height: auto; max-width: calc(50% - 10px); padding: 10px; box-sizing: border-box; text-align: center; background-color: rgba(255,255,255,0.5); -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } #app_view_functions > div.active { background-color: #fff; } #app_view_functions > div a { cursor: default; } #app_view_functions > div.active a { cursor: pointer; } #app_view_functions > div a .title { display: block; margin: 0px 0px 10px 0px; font-size: 1.1rem; color: #999; } #app_view_functions > div a .icon { display: block; margin: 5px 0px 10px 0px; height: 60px; opacity: 0.5; } #app_view_functions > div a .icon img { max-width: 100%; max-height: 100%; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.3s; } #app_view_functions > div a .info { display: block; clear: both; margin: 10px 0px 0px 0px; font-size: 0.8rem; line-height: 1.1; color: rgba(27,28,38,0.8); } #app_view_functions > div a .value { display: block; clear: both; margin: 10px 0px 0px 0px; font-size: 1.8rem; font-weight: 600; line-height: 1.1; color: #999; } #app_view_functions > div a .value2 { display: block; clear: both; margin: 10px 0px 0px 0px; font-size: 1.0rem; font-weight: 600; line-height: 1.1; color: #999; } #app_view_functions > div a .value small { font-size: 1.1rem; font-weight: inherit; color: inherit; } #app_view_functions > div a .value2 small { font-size: 0.6rem; font-weight: inherit; color: inherit; } #app_view_functions > div a .info .alert { display: block; clear: both; margin: 5px auto; padding: 4px 6px; text-align: left; box-sizing: border-box; font-size: inherit; background-color: rgba(27,28,38,0.06); -moz-border-radius: 30px; border-radius: 30px; -webkit-border-radius: 30px; } #app_view_functions > div a .info .alert.info { padding-left: 28px; background-image: url('../images/redesign/icon-info-active.svg'); background-size: 20px auto; background-position: 1.5% 50%; background-repeat: no-repeat; } #app_view_functions > div a .info .alert img { display: inline-block; vertical-align: middle; height: 1.0rem; width: auto; margin-right: 0.3rem; } #app_view_functions > div.active a .title { color: rgba(27,28,38,1); font-weight: 500; } #app_view_functions > div.active a .icon { opacity: 1; } #app_view_functions > div.active a .icon img { -webkit-filter: grayscale(0%); filter: grayscale(0%); } #app_view_functions > div.active a .value { color: rgba(27,28,38,1); } #app_view_functions > div.active a .value2 { color: rgba(27,28,38,1); } #app_view_functions > div.active a .info .alert { background-color: transparent; border: 1px solid rgba(27,28,38,0.1); } #app_view_functions > div.active a .info .alert .status { display: inline-block; font-size: 13px; } #app_view_functions > div.active a .info .alert .subStatus { display: block; font-size: 13px; } .TXT_GREEN {color: rgb(96,134,32);} @media only screen and (min-width: 600px) { #app_view_functions > div a .info .alert.info { padding-left: 30px; background-position: 1% 50%; } } .fancy-modal { display: none; width: 100%; max-width: 600px; height: 100%; padding: 15px !important; cursor: default !important; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .fancy-modal .fancybox-close-small { top: 15px; } .fancy-modal .content-header { display: block; position: relative; height: 70px; border-bottom: 1px solid #eee; padding: 10px; } .fancy-modal .content-header h2 { font-size: 30px; } .fancy-modal .content-scroll { display: block; position: relative; height: 100%; max-height: calc(100vh - 200px); overflow: auto; padding: 10px 10px 0 10px; } .fancy-modal .content-footer { display: block; position: relative; height: 60px; border-top: 1px solid #eee; padding: 5px; } .fancy-modal .content-footer .button-cancel, .fancy-modal .content-footer .button-confirm { position: relative; display: inline-block; width: 60px; height: 60px; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url('../images/redesign/icon_cancel.png'); } .fancy-modal .content-footer .button-confirm { background-image: url('../images/redesign/icon_check.png'); } .animated-modal { max-width: 550px; border-radius: 4px; overflow: hidden; transform: translateY(-50px); transition: all .7s; } .animated-modal h2, .animated-modal p { transform: translateY(-50px); opacity: 0; transition-property: transform, opacity; transition-duration: .4s; } /* Final state */ .fancybox-slide--current .animated-modal, .fancybox-slide--current .animated-modal h2, .fancybox-slide--current .animated-modal p { transform: translateY(0); opacity: 1; } /* Reveal content with different delays */ .fancybox-slide--current .animated-modal h2 { transition-delay: .1s; } .fancybox-slide--current .animated-modal p { transition-delay: .3s; } .zwangEpexMode input{ font-size: 10px; min-width: 110px; } /* Stylischer radio-switcher für Radiobutton-Auswahl mit Zusatinfos und -Aufmachung */ .radio-switcher { display: block; clear: both; width: 100%; height: auto; margin: 10px 0px; } .radio-switcher > div { display: block; clear: both; width: 100%; height: auto; min-height: auto; margin: 10px 0px; font-size: 0px; transition: all ease 0.3s; background-color: #fefefe; border: 2px solid rgba(95, 98, 117, 0.05); -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; } .radio-switcher > div:hover { border: 2px solid rgba(0,0,0,0.5); } .radio-switcher > div.active { background-color: #fff; border: 2px solid rgb(95, 98, 117); } .radio-switcher > div label { display: block; width: 100%; box-sizing: border-box; padding: 15px 12px 20px 12px; cursor: pointer; margin: 0px; } .radio-switcher > div .input { display: inline-block; width: 8%; padding-top: 17px; height: auto; align-items: center; vertical-align: top; text-align: center; } .radio-switcher > div .desc { display: inline-block; width: 74%; height: auto; align-items: center; vertical-align: top; text-align: left; padding: 13px 5px 5px 8px; } .radio-switcher > div .desc h2 { color: #aaa; font-size: 18px; line-height: 19px; font-weight: 500; } .radio-switcher > div .desc h2 strong { font-weight: 700; } .radio-switcher > div.active .desc h2 { color: rgb(95, 98, 117); } .radio-switcher > div .pic { display: inline-block; width: 16%; height: auto; text-align: right; } .radio-switcher > div .pic img { width: 100%; height: auto; max-width: 120px; margin: 0px auto; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.3s; } .radio-switcher > div.active .pic img { -webkit-filter: grayscale(0%); filter: grayscale(0%); } .radio-switcher > div .child-content { display: block; clear: both; margin: 15px 0px 0px 0px; padding: 5px 20px; } .radio-switcher > div .child-content input[type=checkbox], .radio-switcher > div .child-content input[type=radio] { display: inline-block; width: auto; margin-right: 7px; } .radio-switcher > div .child-content input + label { display: inline-block; float: none; width: auto; color: rgb(95, 98, 117); font-size: 16px; line-height: 18px; font-weight: 500; } .radio-switcher > div .child-content table { border: none; background: transparent; } .radio-switcher > div .child-content table tr { border: none; background: transparent; } .radio-switcher > div .child-content table td { width: auto; padding: 5px 0px; text-transform: none; border: none; color: #888; font-size: 13px; font-weight: 500; background: transparent; } .radio-switcher > div .child-content table td input { width: auto; max-width: 110px; padding: 5px; margin-right: 5px; text-align: center; color: #000; border: 1px solid rgba(95, 98, 117, 0.2); } /* Weitere Redesign-Optimierungen ab Januar 2025 (z.B. für Übersichtsseite Portalgebühren) */ #content h2.headline1 { padding-top: 6px; padding-bottom: 15px; } table.lime-table tr.inactive td { color: rgba(54,56,76,0.3); } #content .wrapper-rows table.lime-table tr td { padding: 6px 5px; } #content .wrapper-rows table.lime-table tr td:first-child { padding-left: 20px; font-weight: 300; text-transform: none; } @media only screen and (min-width: 1080px) { #content .wrapper-rows table.lime-table tr td { padding: 10px 5px; } #content .wrapper-rows table.lime-table tr td:first-child { padding-left: 20px; } } /* responsive Optimierungen der Tabellendarstellung für mobile Endgeräte */ @media only screen and (max-width: 1080px) { .page_lime-design .filter-wrapper { margin-bottom: 10px; } .page_lime-design .filter-wrapper #filter-downloads { padding: 14px 20px 14px 48px; background-size: 28px auto; background-position: 12px 13px; } .page_groupconfig.page_lime-design .wrapper-rows .lime-grid .btn_success { padding-top: 16px; padding-bottom: 16px; background-position: 13px 20px; } .lime-padding-horizontal-remove-on-mobile { padding-left: 0 !important; padding-right: 0 !important; } .lime-text-left-on-mobile { text-align: left !important; } .lime-text-small-on-mobile{ font-size: 0.8rem; } #content .wrapper-rows { background-color: transparent; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } #content .wrapper-rows table.lime-table thead { display: none; } #content .wrapper-rows table.lime-table tr { margin-top: 10px; margin-bottom: 10px; } #content .wrapper-rows table.lime-table tr td { line-height: 1.0; font-weight: 500; } #content .wrapper-rows table.lime-table tr td:first-child, #content .wrapper-rows table.lime-table tr td:nth-child(2) { font-weight: 500; font-size: 17px; height: auto; min-height: 50px; border-bottom: 1px solid rgba(209, 210, 214, .5); } #content .wrapper-rows table.lime-table, #content .wrapper-rows table.lime-table tbody { background-color: transparent; } #content .wrapper-rows table.lime-table tbody tr { display: grid; grid-template-columns: repeat(2, 50%); background-color: #fff; position: relative; padding-left: 12px; padding-right: 34px; -moz-box-shadow: 0 0 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.2); box-shadow: 0 0 2px rgba(0,0,0,0.2); } #content .wrapper-rows table.lime-table tbody tr td { padding: 12px 4px 12px 6px; position: relative; } #content .wrapper-rows table.lime-table tbody tr td img { width: 14px; height: 14px; } #content .wrapper-rows table.lime-table tbody tr td:nth-child(n+2) { grid-template-columns: repeat(2, 1fr); } #content .wrapper-rows table.lime-table tbody tr td:first-child, #content .wrapper-rows table.lime-table tbody tr td:nth-child(3), #content .wrapper-rows table.lime-table tbody tr td:nth-child(5){ padding-left: 0; } #content .page_groupconfig .wrapper-rows table.lime-table tbody tr td:last-child { position: absolute; right: 0; width: 26px; padding: 4px; top: 5%; height: 85%; vertical-align: middle; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(209, 210, 214, .5); } #content .wrapper-rows table.lime-table tr td[data-title]::before { content: attr(data-title); display: block; font-weight: 100; font-size: 13px; margin-bottom: 6px; color: rgba(94,96,113,0.8); } #content .wrapper-rows table.lime-table tr td[data-title]:nth-child(5)::before, #content .wrapper-rows table.lime-table tr td[data-title]:nth-child(6)::before { font-size: 12px; } .page_groupconfig-edit.page_lime-design .wrapper-rows .form.lime-form fieldset { background-color: #fff; border: none; margin-left: 0; margin-right: 0; padding: 10px; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 3px rgba(0,0,0,0.2); } #content .page_groupconfig-edit.page_lime-design .wrapper-rows table.lime-table tbody tr { padding-right: 12px; } } .bn.icon_edit { display: inline-block; width: 30px; height: 26px; transition: all ease 0.2s; background-image: url('../images/icon_edit.svg'); background-size: auto 80%; background-position: center center; background-repeat: no-repeat; } .bn.icon_edit:hover { background-size: auto 95%; } .visually-hidden{ display:none; } div.mod-languages ul li.lang-active { background-color: rgba(240, 240, 240, 0); } .box, #page, .leading, .blog, .blog-item { padding: 15px 15px 15px 15px; overflow: hidden; border: 1px solid #d8dade; } .consumption-row { display: flex; /* activate Flexbox */ flex-wrap: wrap; /* let items wrap if the screen is too narrow */ gap: 2%; /* evenly spaced gap between consumption boxes */ justify-content: space-between; } #datepicker > div > table > thead > tr > th > span { color: white!important; } #content > div.clearfix > div > table > tbody > tr > td > a { color: white; } @media (max-width: 500px) { .header_languages { display: none!important; } } @media only screen and (max-width: 400px) { .nav-prev, .nav-next { display: none!important; } } .lime-grid { display: block; font-size: 0; } .lime-grid > div { display: inline-block; width: 50%; margin: 0; padding: 0; box-sizing: border-box; vertical-align: top; } .lime-grid > .lime-width-1-6 { width: 50%; } .lime-grid > .lime-width-5-6 { width: 50%; } .lime-grid > .lime-width-1-5 { width: 50%; } .lime-grid > .lime-width-4-5 { width: 50%; } .lime-grid > .lime-width-1-2 { width: 100%; } .lime-grid > .lime-width-expand { width: 50%; } .lime-grid > .lime-width-auto { width: 50%; } @media only screen and (min-width: 1080px) { .lime-grid > .lime-width-1-6 { width: 17%; } .lime-grid > .lime-width-5-6 { width: 83%; } .lime-grid > .lime-width-1-5 { width: 20%; } .lime-grid > .lime-width-4-5 { width: 80%; } .lime-grid > .lime-width-1-2 { width: 50%; } .lime-grid > .lime-width-expand { width: 62%; } .lime-grid > .lime-width-auto { width: 38%; } } .page_groupconfig.page_lime-design .wrapper-rows .lime-grid > .lime-width-expand { width: 100%; } .page_groupconfig.page_lime-design .wrapper-rows .lime-grid > .lime-width-auto { width: 100%; } @media only screen and (min-width: 1400px) { .page_groupconfig.page_lime-design .wrapper-rows .lime-grid > .lime-width-expand { width: 70%; } .page_groupconfig.page_lime-design .wrapper-rows .lime-grid > .lime-width-auto { width: 30%; } } @media only screen and (min-width: 1800px) { .page_groupconfig.page_lime-design .wrapper-rows .lime-grid > .lime-width-expand { width: 78%; } .page_groupconfig.page_lime-design .wrapper-rows .lime-grid > .lime-width-auto { width: 22%; } } .text-center { text-align: center; } .text-right { text-align: right; } .lime-padding-small { padding: 10px; } .lime-padding-medium { padding: 15px; } .lime-hide-on-mobile { font-size: inherit; color: inherit; font-weight: inherit; } @media only screen and (max-width: 1080px) { .lime-hide-on-mobile { display: none; } } .lime-badge-color { display: inline-block; text-align: center; font-size: 0.9rem; padding: 4px 4px; text-shadow: 0 0 5px rgba(0,0,0,0.6); width: auto; min-width: 32px; min-height: 22px; box-sizing: border-box; line-height: 1.1; border-radius: 8px; text-align: center; background-color: #888888; color: #fff; } @media only screen and (min-width: 1080px) { .lime-badge-color { min-width: 60px; } } @media only screen and (min-width: 1800px) { .lime-badge-color { min-width: 90px; } } .btn_success { display: inline-block; text-align: center; padding: 12px 15px; background-color: #608F20; color: #fff; transition: all ease-out 0.3s; } .btn_success:hover { background-color: #70B118; } .btn_icon_plus { padding-left: 36px; background-image: url('../images/icon_plus-white.svg'); background-size: auto 14px; background-position: 13px 15px; background-repeat: no-repeat;} .bn.icon_edit { display: inline-block; width: 30px; height: 26px; transition: all ease-out 0.1s; background-image: url('../images/icon_edit.svg'); background-size: auto 80%; background-position: center center; background-repeat: no-repeat; } .bn.icon_edit:hover { background-size: auto 95%; } .bn.icon_delete { display: inline-block; width: 30px; height: 26px; transition: all ease-out 0.1s; background-image: url('../images/icon_delete.svg'); background-size: auto 80%; background-position: center center; background-repeat: no-repeat; } .bn.icon_delete:hover { background-size: auto 95%; } .page_lime-design .filter-wrapper { position: relative; } .page_lime-design .filter-wrapper #filter-downloads + .close { position: absolute; right: 14px; top: 33px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6; transition: .25s ease-in-out; background-image: url('../images/icon_close.svg'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .page_lime-design .filter-wrapper #filter-downloads + .close:hover { opacity: 1; } @media only screen and (min-width: 1080px) { .page_lime-design .filter-wrapper #filter-downloads + .close { right: 29px; top: 29px; width: 18px; height: 18px; } } input[type=checkbox].lime-checkbox { position: relative; width: 18px; height: 18px; cursor: pointer; border: 1px solid #36384C; border-radius: 3px; transition: all .1s ease; -webkit-appearance: none; /* für Webkit-basierte Browser */ -moz-appearance: none; /* für Firefox */ appearance: none; } input[type=checkbox].lime-checkbox:hover { background-color: rgba(54, 56, 76, 0.25); } input[type=checkbox].lime-checkbox:checked { background-color: #36384C; } input[type=checkbox].lime-checkbox:checked:hover { background-color: rgba(54, 56, 76, 0.8); } input[type=checkbox].lime-checkbox:checked::after { content: ""; position: absolute; top: 1px; left: 5px; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0;transform: rotate(45deg); } @media only screen and (min-width: 1080px) { input[type=checkbox].lime-checkbox { width: 22px; height: 22px; } input[type=checkbox].lime-checkbox:checked::after { top: 2px; left: 6px; width: 5px; height: 10px; } } form.lime-form { padding-top: 10px; } form.lime-form input.txt { box-sizing: border-box; height: 40px; font-family: 'Muli', sans-serif; font-size: 1.1rem; font-weight: 400; background-color: transparent; border: 1px solid rgb(209, 210, 214); transition: 0.2s ease all; } form.lime-form input.txt:focus { background-color: rgba(54, 56, 76, 0.05); border: 1px solid rgba(54, 56, 76, 0.5); } form.lime-form .btn_dark.btn_right { padding: 12px 20px; min-width: 160px; font-size: 1.1rem; font-weight: 400; text-transform: uppercase; cursor: pointer; background-color: rgba(54, 56, 76, 1); transition: all .35s ease-in-out; } form.lime-form .btn_dark.btn_right:hover { background-color: rgba(54, 56, 76, 0.8); } .group-filter-wrapper { display: block; clear: both; margin-top: -12px; margin-bottom: 18px; padding: 0 8px; } .group-filter-wrapper label.title { width: 100%; font-weight: bold; } @media only screen and (min-width: 1080px) { .group-filter-wrapper label.title { width: auto; } } /* lime Accordion */ .lime-accordion-title { display: block; clear: both; width: 100%; height: 32px; padding: 0; margin: 0; } .lime-accordion-title .btn_dark { padding: 10px 18px; min-width: 100px; font-size: 1.1rem; font-family: 'Muli', sans-serif; font-weight: 400; text-transform: none; cursor: pointer; background-color: rgba(54, 56, 76, 1); transition: all .35s ease-in-out; } .lime-accordion-title .btn_dark:hover { background-color: rgba(54, 56, 76, 0.8); } .lime-accordion-title .btn_dark img { margin-left: 3px; margin-bottom: -1px; width: auto; height: 15px; } .lime-accordion-title .btn.close { display: none; } /* manage show and hide for active state */ .lime-accordion-title.active .btn.show { display: none; } .lime-accordion-title.active .btn.close { display: inline; } .lime-accordion-content { display: block; clear: both; width: auto; padding: 15px 12px 15px 12px; box-sizing: border-box; margin: 0 10px 15px 8px; background-color: #fff; border: 1px solid #eee; box-shadow: 0 0 3px rgba(0,0,0,0.15); } .lime-accordion-title + .lime-accordion-content { display: none; } @media only screen and (min-width: 1080px) { .lime-accordion-content { padding: 25px 12px 20px 12px; margin: 0 15px 15px 8px; } } /* ----------------------------------------------------------------- Rollen-Karten (Kunde / Installateur) angeglichen an limet ReDesign‐Styles (Grundfarben, Radius, Schatten) -----------------------------------------------------------------*/ /* Wrapper – gleicht dem Grid in #app_view_functions */ .role-card-wrapper { display: flex; flex-wrap: wrap; gap: 22px; /* gleiche Spacing-Größe wie .gap in #app_view_functions */ justify-content: center; margin: 20px 0; font-size: 0; /* entfernt Inline-Spacing */ } /* Basiskarte */ .role-card { display: flex; flex-direction: column; width: 320px; /* skaliert responsiv per Flex */ background: #fff; /* wie alle Boxen/#wrapper */ border: 1px solid #d8dade; /* identischer Rahmen wie .box etc. */ border-radius: 10px; /* = .rounded Standard */ box-shadow: 0 0 2px rgba(0,0,0,.20); /* limet Shadow-Level */ color: #36384c; /* Primärtextfarbe */ text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } .role-card:hover { transform: translateY(-3px); box-shadow: 0 0 10px rgba(0,0,0,.30); } /* Kopfbereich – dunkler Brand-Verlauf, geschwungene Ecke */ .role-card-head { position: relative; padding: 20px 15px 50px; background: linear-gradient(145deg, #5f6275 0%, #36384c 100%); border-radius: 10px 10px 0 60px; /* kompatibel mit bestehender Formsprache */ overflow: hidden; } .role-card-icon { width: 80px; height: 80px; filter: brightness(0) invert(1); /* SVG weiß einfärben */ } /* Badge oben rechts – Corporate-Akzentgelb (#ffd831) */ .role-badge { position: absolute; top: 12px; right: 16px; font-size: .72rem; font-weight: 600; padding: 2px 10px; background: #fdc300; color: white; border-radius: 99px; } /* Body */ .role-card-body { flex: 1 1 auto; padding: 22px 15px 26px; text-align: center; } .role-card-body h3 { margin: 0px 0 14px!important; font-size: 1.5rem!important; font-weight: 700; } .role-card-body p { margin: 0 0 18px; font-size: .92rem; line-height: 1.35; color: rgba(54,56,76,.75); } /* Meta-Zeile */ .role-meta { display: flex; justify-content: space-around; gap: 6px; font-size: .82rem; border-top: 1px solid #eee; padding-top: 14px; color: #5e6071; } .role-meta div { flex: 1 1 0; } .role-meta strong { font-size: 1.1rem; } /* --------------------------------------------------------------- Responsive – Karte auf mobilen Geräten 100 % Breite ---------------------------------------------------------------*/ @media only screen and (max-width: 500px) { .role-card { width: 100%; } } /* ---------------------------------------------------- Footer + CTA-Button für role-card ----------------------------------------------------*/ .role-register { display: block; width: 100%; padding: 14px 0 14px; /* gleiche Höhe wie andere limet-Buttons */ text-align: center; font-size: 1rem; font-weight: 500; /*text-transform: uppercase;*/ background: #36384c; /* Corporate Hauptfarbe */ color: #fff; border-top: 1px solid #d8dade; /* dünne Linie wie in Tabellen */ border-radius: 0 0 10px 10px; /* gleicht .rounded */ transition: background .25s ease; } .role-register::after { /* Pfeil → FontAwesome */ content: "\f105"; /* » fa-arrow-right */ font-family: "FontAwesome"; margin-left: 8px; transition: margin .25s ease; } .role-register:hover { background: rgba(54,56,76,.85); } .role-register:hover::after { margin-left: 12px; /* kleiner Slide-Effekt */ } /* ---------------------------------------------------- Feature-Liste in role-card-body ----------------------------------------------------*/ .role-features { margin: 12px 0 18px; padding: 0; list-style: none; /* bullets raus */ font-size: .875rem; /* etwas kleiner */ line-height: 1.4; } .role-features li { position: relative; padding-left: 20px; /* Platz für Haken */ margin-bottom: 6px; } .role-features li::before { /* grüner Haken */ content: "\f00c"; /* FontAwesome check */ font-family: "FontAwesome"; position: absolute; left: 0; top: 0; color: #79c043; /* limet-Grün */ font-size: .8rem; } /* ------------------------------------------------------------------ UNIVERSAL JOOMLA-ALERT OVERRIDES Passt Bootstrap-Alerts (.alert-*) und Webkomponente an das bestehende Formee-Design an ------------------------------------------------------------------- */ /* -------------------------------------------------------------- Modernes Flex-Layout + Icons via ::before -------------------------------------------------------------- */ /* Hier ALLE Alert-Container-Klassen in einer Liste zusammenfassen */ joomla-alert, .alert, [class^="form-msg-"] { /* deckt .form-msg-success/info/… ab */ position: relative; display: flex; align-items: flex-start; align-items: center; gap: .75rem; padding: 12px 16px; margin: 0 0 1rem; color: #2b2b2b; border: 1px solid #aaa; border-radius: 4px; --alert-icon: none; /* Platzhalter – gleich pro Typ befüllt */ } /* Icon links – gilt ebenfalls für alle Container */ joomla-alert::before, .alert::before, [class^="form-msg-"]::before { content: ''; flex: 0 0 30px; width: 27px; height: 24px; background: var(--alert-icon) center/contain no-repeat; margin-top: 0px; } joomla-alert .joomla-alert--close, .alert > .close, [class^="form-msg-"] .close-btn { /* dein eigener Button */ position: absolute; top: 10px; right: 10px; padding: 0; background: transparent; border: none; font-size: 20px; line-height: 1; font-weight: bold; color: #555; opacity: .5; cursor: pointer; transition: opacity .2s; } joomla-alert .joomla-alert--close:hover, .alert > .close:hover, [class^="form-msg-"] .close-btn:hover { opacity: 1; } /* SUCCESS */ joomla-alert[type="success"], .alert-success, .form-msg-success { --alert-icon: url('/components/com_powerdog/assets/icon_yes.svg'); background-color: #e5f8ce; border-color: #d0f1a6; } /* INFO */ joomla-alert[type="info"], .alert-info, .form-msg-info { --alert-icon: url('../images/redesign/icon-info-active.svg'); background-color: #d5d9e6; border-color: #a4a6ba; } /* WARNING */ joomla-alert[type="warning"], .alert-warning, .form-msg-warning { --alert-icon: url('../images/form-ic-warning.png'); background-color: #fff6bf; border-color: #fceb77; } /* ERROR / DANGER */ joomla-alert[type="danger"], joomla-alert[type="error"], .alert-danger, .alert-error, .form-msg-error { --alert-icon: url('/components/com_powerdog/assets/icon_no.svg'); background-color: #fad0d0; border-color: #f6abab; } joomla-alert .alert-heading, .alert-heading, [class^="form-msg-"] .alert-heading { font-weight: 600; margin: 0 0 .25rem; } joomla-alert .alert-message, [class^="form-msg-"] h3 { font-weight: 500!important; font-size: 1.2rem!important; } /* -------------------------------------------------------------- Änderungen für Joomla-Alert-Komponente LIMET -------------------------------------------------------------- */ #content .page_header_powerdogalerts { position: relative; overflow: visible; margin-bottom: 12px !important; } #content .page_header_powerdogalerts .header { } #content .page_header_powerdogalerts .header #alarm_page_errorstate { width: 48px; } #content .page_header_powerdogalerts .header #alarm_page_title { font-family: inherit; font-size: inherit; color: inherit; padding-right: 5px; } #content .page_header_powerdogalerts .header .headline1 { display: inline-block; } #content .page_header_powerdogalerts .header #alarm_message_title { position: relative; display: inline; margin-bottom: -3px; } #content .page_header_powerdogalerts .header #alarm_message_title::after { display: none; } #content .page_header_powerdogalerts .header #alarm_message_title h2 { display: inline; } #content .page_header_powerdogalerts .header #alarm_message_title h2 span { font-family: inherit; font-size: 18px; color: rgba(54, 56, 76, 0.75); margin-left: 3px; } #content .page_header_powerdogalerts .wrapper-rows { } #content .page_header_powerdogalerts .btn.btn_dark { min-height: 0; padding: 12px 20px; min-width: 160px; font-size: 1.1rem; font-weight: 400; text-transform: none; cursor: pointer; background-color: rgba(54, 56, 76, 1); transition: all .35s ease-in-out; } #content .page_header_powerdogalerts .btn.btn_dark:hover { background-color: rgba(54, 56, 76, 0.8); } #content .page_header_powerdogalerts .btn.btn_dark.history-back { min-width: 0; background-color: rgba(54, 56, 76, 0.35); padding: 8px 8px; margin-left: 0; margin-right: 0; } #content .page_header_powerdogalerts .btn.btn_dark.history-back:hover { background-color: rgba(54, 56, 76, 0.25); } #content .page_header_powerdogalerts .btn.btn_dark.history-back img { margin-bottom: -8px; } #content .page_header_powerdogalerts .btn.btn_dark.datepicker-toggle { min-width: 0; } #content .page_header_powerdogalerts .btn.btn_dark.datepicker-toggle img { margin-left: 4px; margin-bottom: -2px; } #content .page_header_powerdogalerts #datepicker { position: absolute; z-index: 999; margin-top: 48px; box-shadow: 2px 2px 20px rgba(0,0,0,0.35); } #content .page_header_powerdogalerts .date-buttons-wrapper { display: inline-flex; justify-content: flex-start;} #content .page_header_powerdogalerts .date-buttons-wrapper > .btn { display: inline-block; } #content .page_header_powerdogalerts .alarm-buttons-wrapper { display: inline-flex; justify-content: flex-end; } #content .page_header_powerdogalerts .alarm-buttons-wrapper > .btn.btn_dark { min-width: 0; } #content .page_header_powerdogalerts .alarm-buttons-wrapper > .btn.btn_dark:first-child { } #content .page_header_powerdogalerts .alarm-buttons-wrapper > .confirm_alarms { margin-right: 0 !important; } #content .page_header_powerdogalerts .btn.btn_dark.submit_confirm_alarms { margin-left: 10px; margin-right: 0 !important; } @media only screen and (max-width: 1081px) { #content .page_header_powerdogalerts .header #alarm_page_errorstate { width: 36px; } #content .page_header_powerdogalerts .header #alarm_page_title { font-size: 21px; padding-right: 2px; } #content .page_header_powerdogalerts .header .headline1 { font-size: 21px; padding-right: 4px; } #content .page_header_powerdogalerts .header #alarm_message_title h2 span { font-size: 16px; margin-left: 0; } #content .page_header_powerdogalerts .alarm-buttons-wrapper { margin-top: 10px; justify-content: flex-start; } #content .page_header_powerdogalerts .alarm-buttons-wrapper > .btn.btn_dark:first-child { margin-left: 0; } } #content .page_content_powerdogalerts { } #content .page_content_powerdogalerts .left220.over-alarm-list { display: block; float: none; width: auto; padding: 0; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper { padding: 0 0 0 0;} #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header { background-color: transparent; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th { border: none !important; background: transparent !important; padding: 12px 10px; line-height: 1.1em; color: #5e6071 !important; font-weight: 300; vertical-align: middle; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th.filter-label { padding-left: 20px; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th.filter-label > img { margin-bottom: -4px; margin-right: 5px; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th strong { font-weight: 600; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th select, #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th input[name=filter] { background-color: #fff; border: 1px solid rgba(54, 56, 76, 0.3) !important; color: #5e6071 !important; padding: 5px 6px; font-weight: 300; font-size: 15px !important; } @media only screen and (max-width: 1081px) { #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th { display: inline-block; width: 36% !important; font-size: 13px; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th:nth-child(1) { width: 18px !important; padding-left: 10px; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th:nth-child(1) img { margin-top: 7px; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th:nth-child(2) { padding-left: 5px; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th:nth-child(3) { width: 160px !important; padding-left: 0; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th:nth-child(4) { width: 218px !important; padding-left: 42px; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th:nth-child(5) { width: 60px !important; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header tr th select { max-width: 100%; } } #content .page_content_powerdogalerts table#table_alarms.lime-table { margin-top: -2px; } #content .page_content_powerdogalerts table#table_alarms.lime-table thead tr { border: none !important; background: transparent !important; } #content .page_content_powerdogalerts table#table_alarms.lime-table thead tr th { border: none !important; background: transparent !important; padding: 12px 10px; line-height: 1.1em; color: #36384C !important; font-weight: 600; vertical-align: bottom; } #content .page_content_powerdogalerts table#table_alarms.lime-table thead tr th:first-child { padding-left: 20px; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr { border: none !important; background: transparent !important; color: #36384C; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr td { color: #36384C; padding-left: 10px; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr td:first-child { padding-left: 20px; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr:nth-child(2n+1) { background: rgba(54,56,76,0.05) !important; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr:hover { background: rgba(54,56,76,0.08) !important; transition: .25s ease-in-out; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr:hover { background-color: transparent; } #content .page_content_powerdogalerts table#table_alarms.lime-table .badge { -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; } #content .page_content_powerdogalerts table#table_alarms.lime-table tr td { padding: 6px 5px; } #content .page_content_powerdogalerts table#table_alarms.lime-table tr td:first-child { padding-left: 20px; font-weight: 300; text-transform: none; } @media only screen and (max-width: 1081px) { #content div.box.page_content_powerdogalerts_list-wrapper { background-color: transparent; box-shadow: none; border: none; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper table#table_alertlist_header { border-radius: 0; background-color: white; margin: 10px 2px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); } #content .page_content_powerdogalerts table#table_alarms.lime-table { background-color: transparent; box-shadow: none; border: none; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody { background-color: transparent; box-shadow: none; border: none; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr { margin: 10px 2px; background-color: #fff !important; padding-top: 4px; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr.tr_badge.error { border-left: 4px solid #c63653 !important; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr.tr_badge.status { border-left: 4px solid #5e7dac !important; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr.tr_badge.warning, #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr.tr_badge.warnung { border-left: 4px solid #FFA843 !important; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr:nth-child(2n+1) { background-color: #fff !important; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr td:first-child { padding-left: 10px; } #content .page_content_powerdogalerts table#table_alarms.lime-table tbody tr td:nth-child(4) { /* Header-Zelle gleich mitbehandeln */ width: 85% !important; margin-top: 8px; height: auto; grid-column: 1 / -1; /* von 1 bis letzte Spalte = ganze Breite */ order: 999; /* jede hohe Zahl reicht */ grid-row: 999; border-top: 1px solid rgba(209, 210, 214, .5); padding-bottom: 10px; padding-right: 10px; } } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper #alarm_table_page_nav { border: none; background: transparent; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper #alarm_table_page_nav .btn_dark { display: inline-block; padding: 10px 8px; min-height: 10px; font-size: 15px; font-weight: 400; color: rgba(54,56,76,1); background: transparent; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper #alarm_table_page_nav .btn_dark:hover { background-color: rgba(54,56,76,1); color: #fff; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper #alarm_table_page_nav .btn_dark img { display: inline; vertical-align: middle; margin-top: -4px; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper #alarm_table_page_nav .pagelink_first { float: left; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper #alarm_table_page_nav .pagelink { } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper #alarm_table_page_nav .pagelink_last { float: right; } #content .page_content_powerdogalerts .page_content_powerdogalerts_list-wrapper #alarm_table_page_nav .pagelink_last img { rotate: 180deg; } #content .page_content_powerdogalerts #event_conf_headline { padding-left: 20px; margin-top: 20px; margin-bottom: 0; text-align: left; text-decoration: none; color: background: rgba(54,56,76,1); } #content .page_content_powerdogalerts table#table_event_conf { } #content .page_content_powerdogalerts table#table_event_conf.lime-table tbody tr { border: none !important; background: rgba(54,56,76,0.05) !important; color: #36384C; } #content .page_content_powerdogalerts table#table_event_conf.lime-table tbody tr th { background: transparent !important; color: #36384C !important; font-weight: 600; } #content .page_content_powerdogalerts table#table_event_conf.lime-table tbody tr td { color: #36384C; padding-left: 10px; font-size: 16px; } #content .page_content_powerdogalerts table#table_event_conf.lime-table tbody tr td:first-child { padding-left: 20px; } #content .page_content_powerdogalerts table#table_event_conf.lime-table tbody tr:nth-child(2n+1) { background: transparent !important; } #content .page_content_powerdogalerts table#table_event_conf.lime-table tbody tr:hover { background: rgba(54,56,76,0.08) !important; transition: .25s ease-in-out; }