/* ------------------------------------------- Name: Solarquotes.com.au Date: 2019/06/24 Author: http://psdhtml.me --------------------------------------------- */ *, :before, :after { margin: 0; padding: 0; box-sizing: border-box; outline-color: var(--azure); } html { overflow-y: scroll; min-height: 100%; margin: 0 0 1px; font-size: 100.01%; -webkit-tap-highlight-color: transparent; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; -ms-content-zooming: none; -ms-overflow-style: scrollbar; } body { min-height: 100%; background: var(--concrete); font-size: 62.5%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } @-ms-viewport { width: device-width; } @viewport { width: device-width; } /*! Theme --------- */ :root { --white: #ffffff; --swiss: #f9f8f7; --concrete: #f3f3f3; --athens: #eaeaf0; --mischka: #dddde6; --silver: #cccccc; --abbey: #58595E; --tundora: #4A4A4A; --shaft: #383838; --black: #000000; --rose: #FFF8F8; --pampas: #F3F1EE; --squeeze: #e8f0f7; --santas: #bbbccd; --yonder: #6a75b0; --sapphire: #293A8E; --rhino: #2b3c69; --azure: #12a6dc; --coral: #ff343f; --amber: #ffc000; --sun: #FBD708; --red: #E53523; --green: #22C447; } /*! Defaults --------- */ body, textarea, input, select, option, button { color: var(--black); font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.7142857143; } li, dt, dd, p, figure, th, td, caption, legend, pre { font-size: 1.4em; } li *, dt *, dd *, p *, figure *, th *, td *, legend * { font-size: 1em; } ul, ol, dl, p, figure, table, pre, h1, h2, h3, h4, h5, h6, legend { margin-bottom: 21px; } h1, h2, h3, h4, h5, h6, legend { color: var(--sapphire); font-size: 1.6em; font-weight: 500; line-height: 1.0888888889; } h1, .heading1 { font-size: 4em; font-weight: 700; } a { background: none; color: var(--azure); text-decoration: none; cursor: pointer; outline-width: 0; -webkit-text-decoration-skip: objects; } /*---*/ a span { cursor: pointer; } ul, ol, dd, blockquote { padding-left: 40px; } /*! Repeatable --------- */ /* cl:b */ .cols-b:after, .triple:after, .module-cta:after, .module-panel.quote:after, .double:after, .module-heading:after, #content:after, form p:after { content: ""; display: block; overflow: hidden; clear: both; } /* fill */ .list-progress li:before, .module-results > *:before, .module-cta figure:before, .ui-slider-a.disabled:before, .link-btn.switch:before, .accordion-a .header a:before, .ui-slider:before, .ui-slider .ui-slider-range:before, .module-panel:before, .list-box li:before, .module-info:after { content: ""; display: block; overflow: hidden; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; text-align: left; text-indent: -3000em; direction: ltr; } /* wide */ .list-results.scroll-to-fixed-fixed:before, .module-results:before, .module-heading:before, .module-info:before { content: ""; display: block; position: absolute; left: -1000em; right: -1000em; top: -1px; bottom: 0; z-index: -1; } /* icon */ .link-btn a i, button i, .header-toggle a.toggle:before, .checklist-direction li:before, .accordion-a .header:before, .accordion-a > div h1:before, .accordion-a > div h2:before, .accordion-a > div h3:before, .accordion-a > div h4:before, .accordion-a > div h5:before, .accordion-a > div h6:before, .ui-slider .ui-slider-handle:before, .ui-slider .ui-slider-handle:after, .form-calculator button:before, .list-box li:after { display: block; position: absolute; left: 0; top: 50%; width: 100%; margin: -10px 0 0; font-weight: 400; font-family: i; line-height: 20px; text-align: center; text-indent: 0; letter-spacing: normal; } /* z:9 */ .ui-slider-a.disabled:before, .accordion-a .header a:before { z-index: 8; } /* tr:y */ #footer p img, .module-cta .link-btn, label .small, .label .small, .header-toggle a.toggle { -webkit-transform: translateY(-50%); transform: translateY(-50%); } /* tr:n */ .popup-a.shown .box-inset, .ui-slider-a label .small, .ui-slider-a .label .small { -webkit-transform: none; transform: none; } /* show */ .popup-a.shown, .popup-a.shown .box-inset, .popup-a.shown .box-outer .close, .popup-shown #root:after { visibility: visible; opacity: 1; } /* cu:d */ .link-btn a.active, .checklist-direction input[type="radio"]:checked ~ label, .semantic-select ul li.active a, .semantic-select ul li a.active, [disabled], .disabled { cursor: default; } /* td:u */ [data-whatintent="mouse"] a:hover { text-decoration: underline; } /* td:n */ #root .accordion-a .header a, #root .link-btn a { text-decoration: none; } #root .link-btn.switch a { width: 131px; padding: 10px; } #root .accordion-a .header a { width: 131px; padding: 0px; } /*! Layout --------- */ #root { overflow: hidden; position: relative; width: 100%; padding: 0 0 80px; } #content { position: relative; z-index: 3; width: 1200px; margin: 0 auto; padding: 0 35px 59px; background: var(--swiss); } #footer { position: relative; z-index: 2; width: 1200px; margin: 0 auto; padding: 11px 0; background: var(--concrete); color: var(--sapphire); font-weight: 400; line-height: 1.4375; } #footer p { position: relative; max-width: 290px; margin: 0; padding: 0 154px 0 0; font-size: 1.6em; text-align: right; } #footer p img { display: block; position: absolute; right: 0; top: 50%; } /*! Columns --------- */ .cols-a { padding-right: 292px; } .cols-a > header:first-child, .cols-a > aside { width: 292px; min-width: 292px; margin-right: -292px; padding-left: 30px; } .cols-b { padding-right: 334px; } .cols-b > header:first-child + *, .cols-b > *:first-child { position: relative; z-index: 2; float: left; width: 100%; } .cols-b > header:first-child, .cols-b > aside { position: relative; z-index: 1; float: right; width: 283px; margin-right: -334px; } .double { display: block; position: relative; } .double > * { display: block; position: relative; clear: none; float: right; border: 0 solid rgba(0,0,0,0); } .double > *:first-child { float: left; } .double.a { margin-left: -48px; } .double.a > * { float: left; width: 50%; border-left-width: 48px; } .triple { display: block; position: relative; margin-left: -48px; } .triple > * { display: block; position: relative; clear: none; float: left; width: 33.3333333333%; border-left: 48px solid rgba(0,0,0,0); } /*! Modules --------- */ .accordion-a { margin-top: 50px; color: var(--tundora); } .accordion-a > div { position: relative; margin: 0 0 12px; } #root .accordion-a h1, #root .accordion-a h2, #root .accordion-a h3, #root .accordion-a h4, #root .accordion-a h5, #root .accordion-a h6 { position: relative; z-index: 3; margin-bottom: 19px; color: var(--black); font-weight: 400; font-size: 1.6em; } #root .accordion-a > div h1, #root .accordion-a > div h2, #root .accordion-a > div h3, #root .accordion-a > div h4, #root .accordion-a > div h5, #root .accordion-a > div h6 { display: block; overflow: hidden; height: 51px; margin: 0; padding: 0 21px; border-radius: 3px; border: 1px solid var(--sapphire); background: var(--swiss); color: var(--tundora); font-size: 1.4em; font-weight: 400; line-height: 49px; text-overflow: ellipsis; white-space: nowrap; } #root .accordion-a .header { padding-right: 51px; } .accordion-a .header a { display: block; color: var(--tundora); } .accordion-a.accordion-info { font-weight: 400; } .accordion-a.accordion-info .header:before { content: "\e903"; left: auto; right: 21px; width: auto; color: var(--sapphire); font-size: 19px; } .accordion-a:not(.accordion-info) .header:not(.toggle):before { background-image: url(/css/calc/icons/questionmark.svg); } .link-btn a .icon-share { background-image: url(/css/calc/icons/share.svg); height: 15px; width: 60px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; margin-top: -6px;} .accordion-a .header:before { content: ""; color: var(--sapphire); left: auto; right: 21px; background-size: contain; width: 20px; height: 20px; } #root .accordion-a .header.toggle { padding-left: 36px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-width: 0; background: var(--white); } #root .accordion-a .header.toggle:before { content: "\e902"; right: 24px; font-size: 13px; } .accordion-a > div div { display: none; position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 71px 36px 20px; box-shadow: 0 1px 57px rgba(0,0,0,.13); border-radius: 3px; border: 1px solid var(--sapphire); border-top-width: 0; background: var(--white); } #root .accordion-a p { font-size: 1.4em; } #root .accordion-a .link-btn, #root .form-calculator .accordion-a .link-btn { margin-top: 24px; } .btn { display: inline; box-sizing: border-box; outline-color: var(--orange); transform-origin: center center; cursor: pointer; outline-width: 0; margin-top: 20px; position: relative; width: auto; text-decoration: none; padding: 14px 28px; border-radius: 25px; border: 0; color: var(--white); font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; letter-spacing: 0.12em; background: var(--coal); text-decoration: none !important; } .module-cta { position: relative; margin: 62px 0; padding: 20px 645px 27px 65px; color: var(--white); } .module-cta { background: -moz-linear-gradient(left, var(--rhino) 0%, var(--azure) 100%); background: -webkit-linear-gradient(left, var(--rhino) 0%,var(--azure) 100%); background: linear-gradient(to right, var(--rhino) 0%,var(--azure) 100%); } .module-cta figure { position: absolute; right: 430px; top: 15px; z-index: 2; } .module-cta figure img { height: 225px !important; } .module-cta figure:before { left: 50%; top: auto; bottom: -50px; width: 195px; height: 71px; margin: 0 0 0 -97.5px; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTk1IiBoZWlnaHQ9IjcxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOTcuNSA1NGM0NC40NTkgMCA4MC41LTguMjgzIDgwLjUtMTguNVMxNDEuOTU5IDE3IDk3LjUgMTcgMTcgMjUuMjgzIDE3IDM1LjUgNTMuMDQxIDU0IDk3LjUgNTR6IiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii4xNSIgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZikiLz48ZGVmcz48ZmlsdGVyIGlkPSJmaWx0ZXIwX2YiIHg9Ii42OSIgeT0iLjY5IiB3aWR0aD0iMTkzLjYxOSIgaGVpZ2h0PSI2OS42MTkiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUJsZW5kIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjguMTU1IiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXIiLz48L2ZpbHRlcj48L2RlZnM+PC9zdmc+); background-size: 100% 100%; } .module-cta h1, .module-cta h2, .module-cta h3, .module-cta h4, .module-cta h5, .module-cta h6 { font-size: 3em; font-weight: 700; line-height: 1.1666666667; } .module-cta h1 span, .module-cta h2 span, .module-cta h3 span, .module-cta h4 span, .module-cta h5 span, .module-cta h6 span { display: block; padding: 25px 0; font-size: 0.5333333333em; font-weight: 400; line-height: 1.4375; } .module-cta .link-btn { position: absolute; right: 75px; top: 50%; width: 290px; margin-top: 0; } .module-cta .link-btn a, .module-cta .link-btn a.inline:before { border-color: var(--amber); background: var(--amber); } .module-cta .link-btn a.inline, .module-cta a { color: var(--amber); } .module-heading { position: relative; z-index: 9; margin: 62px 0; padding: 83px 10px 33px; color: var(--white); font-weight: 400; } .module-heading .module-heading-flex { display: flex; } .module-heading:before, .module-heading + .module-info:before, .module-heading + .module-results:before { z-index: -2; background: var(--sapphire); } .module-heading h1, .module-heading h2, .module-heading h3, .module-heading h4, .module-heading h5, .module-heading h6 { margin: 0 0 20px; color: var(--white); font-size: 4.5em; font-weight: 700; } .heading1 {font-weight: 700} .module-heading p { font-size: 1.6em; } .module-heading + .module-info, .module-heading + .module-results { margin-top: -62px; } .module-heading + .module-info:before { bottom: auto; height: 96px; } .module-heading .list-results { border-color: rgba(255,255,255,.3); } html.popup-shown { overflow: hidden; } .bcalc .module-heading .list-results { border-bottom: none; margin-right: 0; width: 100%; flex-grow: 6; } .bcalc .module-heading .list-results li:nth-child(2) { margin-right: 0px; } .bcalc .module-heading .inflation-container { border-bottom: none; flex-grow: 4; width: 100%; } .module-heading .list-results li, .module-heading .double > * { border-top-color: rgba(255,255,255,.3); } .module-heading .electricity-bill-solar-advanced { z-index: 1; display: flex; flex-direction: column; border-bottom: 0; border-left-color: rgba(0,0,0,0);} .module-heading input { border-color: rgba(255,255,255,.3); background: none; color: var(--white); } .module-heading .ui-slider-a label, .module-heading .ui-slider-a .label { margin-bottom: 35px; } .bcalc .module-heading .ui-slider-a label { margin-bottom: 17px; } .js .module-heading .ui-slider-a input, .module-heading .ui-slider-a label .small, .module-heading .ui-slider-a .label .small, .module-heading .ui-slider .ui-slider-handle .label, .module-info h1, .module-info h2, .module-info h3, .module-info h4, .module-info h5, .module-info h6, .module-info a, .module-heading a, .module-cta h1, .module-cta h2, .module-cta h3, .module-cta h4, .module-cta h5, .module-cta h6 { color: var(--white); } .module-heading .ui-slider-a label .small, .module-heading .ui-slider-a .label .small { padding-top: 40px; } .module-heading .ui-slider-a .ui-slider-handle { box-shadow: 0 0 14px rgba(194,194,194,.5); } .module-heading .double { margin-left: -142px; } .module-heading .double > * { border-left-width: 142px; } #root.bcalc.results .ui-slider + * { margin-top: 10px; } .bcalc .module-info { display: block; padding: 40px; } .bcalc .module-info header { margin: 0; padding: 0; } .bcalc .module-info p { font-weight: 400; margin-bottom: 0; } .module-info { position: relative; z-index: 3; margin: 62px 0; padding: 32px 35px 10px 275px; color: var(--white); line-height: 1.5; } .module-info:after { background: var(--azure); } .module-info header { min-width: 275px; max-width: 275px; margin: -6px 0 0 -275px; padding-left: 35px; padding-right: 40px; } .module-info header h1, .module-info header h2, .module-info header h3, .module-info header h4, .module-info header h5, .module-info header h6 { margin: 0 0 18px; font-size: 4em; font-weight: 700; line-height: 1.025; } .module-info header p { font-size: 1.6em; } .module-info .list-box li:before { opacity: .2; } .module-info + .cols-a > header:first-child, .module-info + .cols-a > aside { margin-top: -30px; } #root .module-info .link-btn a { color: var(--white); } #content .module-info { margin-left: -35px; margin-right: -35px; } .module-info .triple { margin-left: 0; } .module-info .triple > * { width: 31%; border-left-width: 0; } .module-info .triple > *:first-child, .module-info .triple > *:first-child + * { width: 34.5%; } .module-info .accordion-a { max-width: 308px; margin-bottom: 21px; } #root .module-info .accordion-a > div h1, #root .module-info .accordion-a > div h2, #root .module-info .accordion-a > div h3, #root .module-info .accordion-a > div h4, #root .module-info .accordion-a > div h5, #root .module-info .accordion-a > div h6, .module-info .accordion-a > div > div { border-color: var(--white); background: var(--white); } #root .module-info .accordion-a .header a { color: var(--tundora); } .module-info.a { display: block; margin-left: 0; margin-right: 0; padding: 60px 65px 63px; color: var(--shaft); font-weight: 400; line-height: 1.3125; } .module-info.a h1, .module-info.a h2, .module-info.a h3, .module-info.a h4, .module-info.a h5, .module-info.a h6 { color: var(--black); font-weight: 700; font-size: 1.6em; } .module-info.a p, .module-info.a li { font-size: 1.6em; } .module-info.a a { color: var(--azure); } .module-info.a:after { background: var(--squeeze); } #content .module-info.a { margin-left: 0; margin-right: 0; } #content .results-issue { display: block; text-align: center; height: 0; position: relative; top: -68px; width: 100%; } #content .results-issue a { font-size: 13px; background-color: var(--squeeze); color: var(--rhino); text-decoration: underline; padding: 4px 11px; border-radius: 5px; font-weight: 500; } .module-panel { position: relative; z-index: 2; margin: 0 0 32px; padding: 49px 20px 22px; } .module-panel:before { border-top: 4px solid var(--azure); background: var(--white); } .module-panel h1, .module-panel h2, .module-panel h3, .module-panel h4, .module-panel h5, .module-panel h6 { margin: 0 0 39px; color: var(--black); font-weight: 500; font-size: 1.6em; } #root .module-panel .module-panel { min-height: 130px; padding: 21px 32px .1px; font-weight: 300; } #root .module-panel .module-panel:before { border-radius: 5px; border: 1px solid var(--concrete); } .module-panel .module-panel h1, .module-panel .module-panel h2, .module-panel .module-panel h3, .module-panel .module-panel h4, .module-panel .module-panel h5, .module-panel .module-panel h6, .module-panel.quote h1, .module-panel.quote h2, .module-panel.quote h3, .module-panel.quote h4, .module-panel.quote h5, .module-panel.quote h6 { margin: 0 0 8px; color: var(--sapphire); font-weight: 500; } .module-panel .module-panel p, .module-panel.quote p { font-size: 1.4em; } #root .module-panel.quote { padding: 25px 32px 13px 118px; } .module-panel.quote picture { float: left; width: 80px; margin: 0 0 0 -100px; } .module-panel.quote img { border-radius: 100px; } #root .module-panel.quote picture + * { margin-top: 0; padding-top: 6px; border-top-width: 0; } #root .module-panel.quote:before { border-radius: 6px; border-width: 0; background: var(--pampas); } .module-panel.quote h1, .module-panel.quote h2, .module-panel.quote h3, .module-panel.quote h4, .module-panel.quote h5, .module-panel.quote h6 { margin-bottom: 12px; } .module-results { position: relative; z-index: 2; margin: 62px 0 0 -24px; font-weight: 400; } .module-results:before { bottom: auto; height: 38px; } .module-results > * { position: relative; z-index: 2; width: 50%; min-height: 445px; margin: 0 0 24px; padding: 50px 60px 29px; border-left: 24px solid rgba(0,0,0,0); border-top: 0 solid var(--concrete); border-bottom: 0 solid var(--concrete); } .module-results > *:before { box-shadow: 0 2px 14px rgba(192,192,192,0.0625); border-radius: 2px; background: var(--white); } .module-results > header { width: 100%; min-height: 0; } .module-results h1, .module-results h2, .module-results h3, .module-results h4, .module-results h5, .module-results h6 { margin: 0 0 33px; color: var(--black); font-size: 1.6em; font-weight: 700; } .module-results p { font-size: 1.6em; } .module-results .ui-slider-a { margin: 6px 0 44px; } .module-results .scheme-amount:first-child:last-child { margin-top: auto; margin-bottom: auto; padding-bottom: 21px; } .module-results .list-progress:last-child { margin-bottom: -38px; } .popup-a { display: none; overflow-y: auto; overflow-x: hidden; visibility: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 998; } .popup-a .divider { margin: 25px -20px; height: 2px; background-color: var(--concrete); } .popup-a .box-outer { position: absolute; left: 0; top: 0; right: 0; z-index: 2; min-height: 100%; padding: 20px; } .popup-a .box-outer > .close, #root:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; visibility: hidden; z-index: 997; background: rgba(0,0,0,.2); text-indent: -3000em; cursor: pointer; opacity: 0; } #root:after { position: fixed; } #root > .popup-a .box-outer > .close { background: none; } .popup-a .box-inner { position: relative; z-index: 998; width: 100%; max-width: 580px; margin: 0; } .popup-a .box-inset { visibility: hidden; padding: 48px 60px 33px; border-radius: 3px; background: var(--white); opacity: 0; } .popup-a h1, .popup-a h2, .popup-a h3, .popup-a h4, .popup-a h5, .popup-a h6 { color: var(--black); font-size: 1.6em; font-weight: 700; } .popup-a .link-btn { margin: 50px -18px 11px; } .popup-a.popup-calc { padding: 0; margin: 0; } .popup-a.popup-calc .box-inset a.close { position: absolute; top: 20px; right: 10px; transform: rotate(45deg); font-size: 30px; color: var(--mischka); text-decoration: none; } .popup-a.popup-calc .box-outer, .popup-a.popup-calc .box-inner, .popup-a.popup-calc .box-inset { min-height: 100%; } .popup-a.popup-calc .box-outer, .popup-a.popup-calc .box-inner { height: 100%; } .popup-a.popup-calc .box-outer {padding: 0; right: 0; position: relative; justify-content: end; } .popup-a.popup-calc .box-inner { padding: 0; max-width: 420px; } .popup-a.popup-calc .box-inset { padding: 25px 20px; } .popup-a.popup-calc .link-btn { margin: 50px 0px 11px; } .popup-a.popup-calc .link-btn a { margin-bottom: 0; } .popup-a .link-btn a { margin-bottom: 20px; } .popup-a::-webkit-scrollbar { width: 0; background: none; } .popup-a.shown { z-index: 999; } /* Styles shared between all preact dialogs used in the calculator */ /* Icons */ @font-face { font-family: 'icons-dialog'; src: url('/css/calc/dialogs/icons/icomoon.woff2') format('woff2'), url('icons/icomoon.woff') format('woff'), url('icons/icomoon.ttf') format('truetype'); } .popup-calc [class^="icon-"], .popup-calc [class*=" icon-"] { font-family: 'icons-dialog' !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-trash:before { content: "\e900"; } .icon-minus:before { content: "\e902"; } .icon-chevron-up:before { content: "\e903"; } .icon-chevron-down:before { content: "\e904"; } .icon-add:before { content: "\e905"; } .icon-search:before { content: "\e906"; font-family: 'icons-dialog'; } /* ------ */ .popup-calc h1 { font-size: 20px !important; font-weight: 500; color: var(--tundora); } .popup-calc h2 { font-size: 19px !important; font-weight: 400; color: var(--tundora); } .popup-calc .block-group-info { margin-bottom: 8px; } .popup-calc label { font-size: 14px; font-weight: 600; margin-bottom: 0px; text-wrap: wrap; text-transform: uppercase; color: var(--sapphire); } .popup-calc label span { font-size: 12px; font-weight: 400; text-transform: none; position: absolute; margin-top: 1px; margin-left: 5px; } .popup-calc span.info { color: var(--cadet); font-style: italic; } .popup-calc label.info { color: var(--cadet); text-transform: none; font-style: italic; font-weight: normal; } .popup-calc label.sub { margin-bottom: 5px; } .popup-calc label + span { margin-bottom: 0; font-size: 12px; font-weight: 400; color: var(--abbey); } .popup-calc input[type="text"], .popup-calc input[type="date"], .popup-calc input[type="number"] { height: 40px; padding: 4px 10px; } .popup-calc input[type="text"] { color: var(--rhino); } .popup-calc input[type="text"]:disabled { background-color: rgba(0,0,0,0.03); color: rgb(150,150,150); } .popup-calc .double { display: flex; align-items: center; justify-content: space-between; } .popup-calc .double.v-start { align-items: start; } .popup-calc .double > * { flex-grow: 1; } .popup-calc .double > span { font-size: 14px; font-weight: 500; color: var(--abbey); } .popup-calc .double > label { flex-grow: 0; flex-shrink: 1; margin: 0 0px 0 0; } .popup-calc .double > *:nth-child(1) { min-width: 120px; } .popup-calc .tags-collection { display: flex; flex-wrap: wrap; } .popup-calc .tags-collection .tag { background: var(--concrete); color: var(--tundura); font-weight: bold; text-transform: uppercase; border-radius: 100px; padding: 6px 12px; margin-right: 4px; margin-bottom: 4px; } /* Popup action buttons */ .popup-calc .action-buttons { display: flex; justify-content: end; } .popup-calc .action-buttons.center { justify-content: center; } .popup-calc .action-buttons.start { display: inline-block; margin-top: 5px; } .popup-calc .action-buttons.start button { margin-left: -19px; } .popup-calc .action-buttons + label { margin-top: 20px; } .popup-calc .action-buttons button, .popup-calc .action-buttons a { height: 30px; font-size: 14px; text-decoration: none; width: 156px; background: transparent; border: none; padding: 0; font-weight: 500; color: var(--blue); } .popup-calc .action-buttons.center a { text-align: center; } .popup-calc .action-buttons button:disabled { background-color: rgba(0,0,0,0.1) !important; border-color: rgba(0,0,0,0.1) !important; } .popup-calc .action-buttons button.button-add:disabled { background-color: transparent !important; color: var(--cadet); } .popup-calc .action-buttons button.remove { color: var(--punch); } /* Inputs with append text */ .popup-calc .input-label > input:first-child, .popup-calc .block-input-item > input:first-child { border-right: 1px solid var(--mishka) !important; border-radius: 0; } .popup-calc .block-input, .popup-calc .input-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .popup-calc .block-input { flex-wrap: wrap; } .popup-calc .block-input:last-child { margin-bottom: 0; } .popup-calc .block-input .block-input-item, .popup-calc .input-label { display: flex; align-items: center; border: 1px solid var(--mishka) !important; border-radius: 8px; overflow: hidden; } .popup-calc .block-input .block-input-item:first-child { margin-right: 3px; } .popup-calc .input-label { height: 36px; margin-top: 10px; } .popup-calc .input-label input { border: none; height: 34px; width: 100%; text-align: center; padding: 4px; } .popup-calc .input-label input:disabled { color: rgb(100, 100, 100); } .popup-calc .input-label span { margin: 0; font-size: 12px; } .popup-calc input.missing-required { border-width: 1px; border-radius: 8px; background: rgba(255,30,10,0.10) !important; } .popup-calc .block-input input { border: none; height: 34px; width: 65px; text-align: center; padding: 4px; } .popup-calc .block-input span { padding: 0 9px; font-size: 12px; } .popup-calc .block-input span:nth-child(2), .popup-calc .input-label span:nth-child(2) { font-weight: 500; text-align: center; font-size: 12px; height: 34px; background-color: rgb(249,250,251); color: var(--castle); line-height: 3.0; } .popup-calc .input-label span:nth-child(2) { font-size: 15px; line-height: 2.3; width: 100px; font-weight: normal; color: var(--tundora); } .popup-calc .block-rate-warning { display: block; width: 100%; flex-basis: 100%; color: #c00; font-size: 12px; margin-top: 4px; } .popup-calc .confirm-button { background-color: var(--rhino); border: none; border-radius: 100px; font-weight: 15px; } #root .popup-calc .sqDropdown { } #root .popup-calc .sqDropdown > input { border-radius: 8px; padding: 18px 30px 16px 14px; border-color: var(--mishka); color: var(--abbey); font-size: 15px; } #root .popup-calc .dropdown-container { position: relative ;} #root .popup-calc .dropdown-container select { height: 40px; font-size: 15px; } #root .popup-calc .sqDropdown:before, #root .popup-calc .dropdown-container:before { top: 0; bottom: 5px; margin: auto; width: 9px; height: 9px; border-width: 2px; content: ""; border: 2px solid var(--abbey); border-top: transparent; border-right: transparent; position: absolute; right: 20px; z-index: 9999; transform: rotate(-45deg); } #root .popup-calc .sqDropdown.opened::before { top: 0px; bottom: -5px; transform: rotate(-225deg); } #root .popup-calc select { border: 1px solid var(--mishka); border-radius: 8px; background-image: none; } /* End of shared dialog styles */ #selected-plan-details .box-inset { padding: 20px; } .ui-slider { display: block; position: relative; z-index: 2; width: calc(100% - 60px); height: 48px; margin: 0 30px 12px; } #root.bcalc .ui-slider { margin: 0 30px 30px; } .ui-slider:before, .ui-slider .ui-slider-range:before { left: -30px; top: 50%; bottom: auto; height: 7px; margin: -3.5px 0 0; border-radius: 4px; background: var(--concrete); } .ui-slider:before { right: -30px; } .ui-slider .ui-slider-range:before { background: var(--azure); } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 60px; height: 48px; margin: 0 0 0 -30px; box-shadow: 0 0 14px rgba(194,194,194,.5); border-radius: 3px; background: var(--white); -ms-touch-action: none; touch-action: none; outline: none; cursor: pointer; } .ui-slider .ui-slider-handle:before, .ui-slider .ui-slider-handle:after { left: auto; right: auto; width: auto; color: var(--sapphire); font-size: 10px; } .ui-slider .ui-slider-handle:before { content: "\e90b"; left: 8px; } .ui-slider .ui-slider-handle:after { content: "\e90c"; right: 8px; } .ui-slider .ui-slider-handle .label { display: block; position: absolute; left: 50%; top: 100%; width: 100px; margin: 0 0 0 -50px; padding: 12px 0 0; color: var(--santas); font-size: 10px; font-weight: 700; text-align: center; } .ui-slider .ui-slider-range { display: block; position: absolute; z-index: 1; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider + * { margin-top: 42px; } .ui-slider-a { position: relative; line-height: 1.4285714286; } #root .ui-slider-a { font-size: 1.4em; } #root .ui-slider-a label { font-size: 1.1428571429em; } #root.bcalc .ui-slider-a label { font-size: 14px; } .ui-slider-a input { float: none; } .js .ui-slider-a input { height: 40px; margin: 0 0 17px; padding: 0; border-width: 0; border-radius: 0; background: none; color: var(--black); font-size: 30px; font-weight: 700; } .js .ui-slider-a input + .ui-slider, .js .ui-slider-a label + input { margin-top: -8px; } .ui-slider-a label .small, .ui-slider-a .label .small { top: 100%; padding-top: 7px; text-align: right; } .ui-slider-a .small { font-size: 0.875em; } .ui-slider-a.small { } #root .ui-slider-a.small label { position: absolute; right: 0; top: -3px; left: auto; width: auto; color: var(--abbey); font-size: 14px; } .ui-slider-a.small input { height: 32px; font-size: 20px; } .ui-slider-a.disabled { } .ui-slider-a.disabled input { color: var(--rose); } .w65 { max-width: 150px; display: inline-block; float: left; cursor: pointer; } input.w65, .w65 input { padding: 0 12px; text-align: center; } .w105 { max-width: 105px; } .w180 { max-width: 180px; } .w190 { max-width: 190px; } .w230 { max-width: 230px; } .w280 { max-width: 280px; } /*! Headers --------- */ .header-toggle { position: relative; margin-bottom: 0; font-size: 1.6em; font-weight: 500; } #root .header-toggle { margin-bottom: 3px; } .header-toggle a.toggle { display: block; position: absolute; right: 0; top: 50%; padding: 0 24px 0 0; color: var(--santas); font-size: 0.875em; font-weight: 500; } .header-toggle a.toggle:before { content: "\e90a"; left: auto; right: 0; width: auto; font-size: 8px; } .header-toggle.toggle a.toggle:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .header-toggle + * { margin-top: 21px; } /*! Content --------- */ .s16 { font-weight: 400; } .medium, #root label.medium, #root .label.medium { font-weight: 500; } .strong, #root label.strong, #root .label.strong { font-weight: 700; } .em, q { font-style: italic; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-uppercase { text-transform: uppercase; } .s10, #root .s10, #root .accordion-a .s10 { font-size: 10px; } .s16, #root .s16, #root .accordion-a .s16 { font-size: 16px; } .overlay-a, .header-toggle.toggle a.toggle { color: var(--azure); } .overlay-b { color: var(--coal); } .overlay-c { color: var(--shaft); } .scheme-amount, #root .scheme-amount { color: var(--black); font-weight: 700; font-size: 9.25em; line-height: 1.1; text-align: center; } .scheme-amount span { display: block; margin: 0 0 11px; color: var(--sapphire); font-size: 0.2162162162em; } .scheme-amount sup, .scheme-amount sub { position: relative; top: -.9em; bottom: 0; margin: 0 7px 0 0; font-weight: 500; font-size: .45em; vertical-align: baseline; } .cumulative-chart-container .ten-year-savings-section { margin: auto; } .cumulative-chart-container .scheme-amount { display: flex; margin-top: 50px; } .cumulative-chart-container .scheme-amount span { margin: 0; align-self: center; margin-right: 50px; } .cumulative-chart-container .scheme-amount sup { top: 0; } .cumulative-chart-container .scheme-amount span, .cumulative-chart-container .scheme-amount sup, .cumulative-chart-container .scheme-amount value { color: var(--tundora); } .cumulative-chart-container .scheme-amount .ten-year-savings { font-size: 45px; } .ten-year-savings-section > span { text-align: right ; font-size: 11px; color: #BBB; font-weight: bold; margin-right: -25px; margin-top: -10px; } /*! Links --------- */ .link-btn { position: relative; z-index: 2; font-size: 1.4em; } .link-btn > span { display: block; width: 100%; margin: 0 0 15px; } .link-btn a, button, input[type="button"], input[type="reset"], input[type="submit"], .uploadifive-button { display: block; overflow: hidden; position: relative; width: 100%; margin: 0 0 10px 0; padding: 16.5px 50px; border-radius: 3px; border: 1px solid var(--azure); background: var(--azure); color: var(--white); font-weight: 700; font-size: 14px; line-height: 1.1; text-align: center; } .link-btn a i, button i { width: 63px; font-size: 17px; } .link-btn a i.icon-x, button i.icon-x { font-size: 13px; } .link-btn a i.icon-envelope, button i.icon-envelope { font-size: 15px; } .link-btn a i.icon-calculator, button i.icon-calculator { font-size: 19px; } .link-btn a.inv { border-color: var(--azure); background: none; color: var(--azure); } .link-btn a.inline { width: auto; min-width: 0; padding: 8px 0; border-radius: 0; border-width: 0; background: none; color: var(--azure); } .link-btn a.inline:before { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--azure); } .link-btn a.a, .link-btn a.a.inline:before { border-color: var(--sapphire); background: var(--sapphire); } .link-btn a.a.inv { border-color: var(--sapphire); background: none; color: var(--sapphire); } .link-btn a.a.inline { color: var(--sapphire); } .link-btn a.b, .link-btn a.b.inline:before { border-color: var(--coral); background: var(--coral); } .link-btn a.b.inv { border-color: var(--coral); background: none; color: var(--coral); } .link-btn a.b.inline { color: var(--coral); } .link-btn a.c, .link-btn a.c.inline:before { border-color: var(--amber); background: var(--amber); } .link-btn a.c.inv { border-color: var(--amber); background: none; color: var(--amber); } .link-btn a.c.inline { color: var(--amber); } .link-btn.switch { margin-right: 0; font-size: 1.6em; } .link-btn.switch:before {border-radius: 5px;border: 1px solid var(--coal);} .link-btn.switch a { margin: 0; padding-top: 10px; padding-bottom: 10px; border-color: var(--sapphire); color: var(--white); background: var(--sapphire); font-size: 1em; font-weight: 400; } .link-btn.switch a#simple:not(.active) { color: var(--sapphire); background: var(--white); border-right: 0; border-radius: 5px 0 0 5px;} .link-btn.switch a#advanced:not(.active) { color: var(--sapphire); background: var(--white); border-left: 0; border-radius: 0 5px 5px 0;} .link-btn.switch a.active {border-radius: 5px;} /*! Media --------- */ img, iframe, object, embed { max-width: 100% !important; border-style: none; } img { height: auto !important; image-rendering: optimizeQuality; -ms-interpolation-mode: bicubic; } img::selection { background: transparent; } img::-moz-selection { background: transparent; } /*! Lists --------- */ .list-box { list-style: none; margin: 0 0 13px -8px; padding: 0; line-height: 1.5; text-align: center; } .list-box li { position: relative; z-index: 2; /*min-height: 155px;*/ margin: 0 0 8px; padding: 27px 30px 3px; border-left: 8px solid rgba(0,0,0,0); font-size: 1em; } .bcalc .list-box li { padding: 27px 100px 3px; } .list-box li:before { border-radius: 6px; background: var(--white); } .list-box li:after { content: "\e900"; left: 0; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -20px; border-radius: 20px; background: var(--azure); font-size: 16px; line-height: 32px; } .list-box li:last-child:after { content: "\e906"; font-size: 11px; } .list-box li:first-child:after, .list-box li:first-child:last-child:after { display: none; } .list-box h1, .list-box h2, .list-box h3, .list-box h4, .list-box h5, .list-box h6 { margin: 0 0 12px; font-size: 1.6em; font-weight: 700; } .list-box p { width: 100%; max-width: 705px; margin-left: auto; margin-right: auto; font-size: 1.6em; } .list-box + .list-box { margin-top: -13px; } .list-info { list-style: none; padding: 0; } .list-info li { position: relative; padding-left: 170px; } .list-info li.double-line { height: 45px; } .list-info li > span:first-child { display: block; position: absolute; left: 0; top: 0; width: 150px; } .list-progress { list-style: none; margin: 4px 0 0 -48px; padding: 0; color: var(--black); font-weight: 400; line-height: 1.2; } .list-progress li { position: relative; z-index: 2; width: 50%; margin: 0 0 22px; border-left: 48px solid rgba(0,0,0,0); border-top: 0 solid var(--concrete); font-size: 1em;} .list-progress li:before { top: -30px; border-top: 1px solid var(--concrete); } .list-progress h1, .list-progress h2, .list-progress h3, .list-progress h4, .list-progress h5, .list-progress h6 { margin: 0 0 13px; color: var(--black); font-size: 1.6em; font-weight: 400; } .list-progress h3 { margin-right: 60px; } .list-progress figure { position: absolute; right: 0; top: 0; margin: 0; } .list-progress p { margin: 0 0 8px; font-size: 4em; font-weight: 700; } .list-progress sup, .list-progress sub { position: relative; top: -.75em; bottom: 0; margin: 0 8px 0 0; font-weight: 500; font-size: .5em; vertical-align: baseline; } .list-progress ul { list-style: none; margin: 0; padding: 0; color: var(--abbey); } .list-progress ul li { width: auto; margin: 0 0 27px; padding: 0; border-width: 0; } .list-progress .bar { position: absolute; left: 160px; top: 50%; right: 0; height: 7px; margin: -3.5px 0 0; background: var(--pampas); color: var(--black); font-size: 14px; font-weight: 500; text-align: right; } .list-progress .bar > * { display: block; position: absolute; left: 0; bottom: 0; padding: 0 0 4px; border-bottom: 7px solid var(--azure); text-align: right; } .list-progress ul li:nth-child(3n-2) .bar > * { border-color: var(--amber); } .list-progress ul li:nth-child(3n-1) .bar > * { border-color: var(--sapphire); } .list-progress.with-battery ul li:nth-child(3n-2) .bar > * { border-color: var(--sapphire); } .list-progress.with-battery ul li:nth-child(3n-1) .bar > * { border-color: var(--amber); } .list-results { width: 100%; position: relative; z-index: 2; list-style: none; margin: 53px -100px 30px 0; padding: 0; border-bottom: 1px solid rgba(0,0,0,.3); font-weight: 700; line-height: 1.2; } .list-results li { min-width: 0; flex-grow: 1; flex-basis: 0; margin: 0 0px 25px 0; border: 0 solid rgba(0,0,0,0); border-top: 0 solid rgba(0,0,0,.3); font-size: 4em; } .list-results li:nth-child(1) { flex-grow: 1.25; } .list-results li:nth-child(2) { flex-grow: 0.97; } .list-results li:nth-child(3) { flex-grow: 1.55; } #root.bcalc .list-results li:nth-child(1) { flex-grow: 1.15; } #root.bcalc .list-results li:nth-child(2) { flex-grow: 1.0; } #root.bcalc .list-results li:nth-child(3) { flex-grow: 2.0; } #root.bcalc .list-results li { display: inline-block; flex-basis: 50%; } #root.bcalc .list-results li:first-child sup, #root.bcalc .list-results li:first-child sub { top: -13px; } #root.bcalc .list-results li > div:nth-child(2) { margin-top: 40px; } #root.bcalc .list-results sup, #root.bcalc .list-results sub { top: -17px; } #root.bcalc:not(.results) .list-results li:not(:last-child) span { margin-bottom: 30px; } .list-results.has-battery li:nth-child(1), .list-results.has-battery li:nth-child(2) { flex-grow: 1; } .list-results.has-battery li ul { margin-right: 40px; } .list-results span { display: block; width: 100%; margin: 0 0 6px; font-weight: 400; font-size: 14px; } .list-results sup, .list-results sub { position: relative; top: .7em; bottom: 0; margin: 0 10px; font-size: .5em; line-height: 0; vertical-align: baseline; } .list-results li > sup, .list-results li > div > sup, .list-results li:first-child > sub { top: .95em; margin-left: 0; } .list-results ul { list-style: none; margin: 0 0 0 auto; padding: 2px 0 0 0px; text-align: right; } #root .list-results ul li { display: block; width: auto; min-width: 0; max-width: none; margin: 0 0 6px; padding: 0; border-width: 0; font-size: 14px; } .list-results ul span { display: inline; width: auto; margin: 0; } .list-results:last-child { margin-bottom: 0; border-bottom-width: 0; } .list-results + .spacer { margin: 53px 0 30px; } .list-results.scroll-to-fixed-fixed { margin: 0; border-bottom-color: rgba(0,0,0,0); } .list-results.scroll-to-fixed-fixed:before { top: -50px; bottom: 0; box-shadow: 0 -8px 34px rgba(0,0,0,.32); border-bottom: 1px solid var(--yonder); background: var(--sapphire); } .list-results.scroll-to-fixed-fixed li { display: block; position: relative; margin: 0; padding: 15px 0; font-size: 2em; } .list-results.scroll-to-fixed-fixed li:last-child { border-bottom-width: 0; } .list-results.scroll-to-fixed-fixed span { margin: 0 0 10px; font-size: 13px; } #root .list-results.scroll-to-fixed-fixed sub, #root .list-results.scroll-to-fixed-fixed sup { margin-right: 0; top: 0; bottom: 0; margin: 0; font-size: 1em; } .list-results.scroll-to-fixed-fixed ul { position: absolute; right: 0; bottom: 9px; margin: 0; } #root .list-results.scroll-to-fixed-fixed ul li { font-size: 13px; } .electricity-bill-solar-advanced { width: 100%; position: relative; z-index: 2; list-style: none; margin: 0 -100px 0 0; padding: 0; border-bottom: 1px solid rgba(0,0,0,.3); font-weight: 700; line-height: 1.2; } .electricity-bill-solar-advanced li { min-width: 0; flex-grow: 1; flex-basis: 0; margin: 0 0px 25px 0; border: 0 solid rgba(0,0,0,0); border-top: 0 solid rgba(0,0,0,.3); font-size: 4em; } .electricity-bill-solar-advanced li:nth-child(1) { flex-grow: 1.25; } .electricity-bill-solar-advanced li:nth-child(2) { flex-grow: 0.97; } .electricity-bill-solar-advanced li:nth-child(3) { flex-grow: 1.55; } .electricity-bill-solar-advanced span { display: block; width: 100%; margin: 0 0 6px; font-weight: 400; font-size: 14px; } .electricity-bill-solar-advanced sup, .electricity-bill-solar-advanced sub { position: relative; top: -0.6em; bottom: 0; margin: 0 10px; font-size: .5em; line-height: 0; vertical-align: baseline; } .electricity-bill-solar-advanced li > sup, .electricity-bill-solar-advanced li > div > sup, .electricity-bill-solar-advanced li:first-child > sub { top: -.5em; margin-left: 0; } .electricity-bill-solar-advanced ul { list-style: none; margin: 0 0 0 auto; padding: 2px 0 0 0px; text-align: right; } /*! Forms --------- */ fieldset, hr { min-width: 0; margin: 0; padding: 0; border-width: 0; } form p { position: relative; } legend { display: none; width: 100%; max-width: 100%; padding: 0; border: 0; white-space: normal; } input, select, textarea { position: relative; z-index: 1; margin: 0; padding: 0; box-shadow: none; border-radius: 0; font-size: 1em; line-height: normal; text-align: left; text-transform: none; outline-width: 0; } input, select, textarea { -moz-appearance: none; -webkit-appearance: none; appearance: none; } input, select, textarea, button, input[type="button"], input[type="reset"], input[type="submit"] { box-sizing: border-box; text-transform: none; outline-offset: -2px; } input { } input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-outer-spin-button, input::-webkit-inner-spin-button, input::-webkit-clear-button, input::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; visibility: hidden !important; height: auto; margin: 0; } input::-o-outer-spin-button, input::-o-inner-spin-button { appearance: none; margin: 0; } input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { height: auto; } input::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; height: auto; padding: 0; border: 0; background: none; line-height: 1; } input[type="checkbox"] { -moz-appearance: checkbox; -webkit-appearance: checkbox; appearance: checkbox; } input[type="radio"] { -moz-appearance: radio; -webkit-appearance: radio; appearance: radio; } input[type="color"] { padding: 0; cursor: pointer; } input[type="date"] { display: -webkit-inline-flex; } input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"]::-o-outer-spin-button, input[type="number"]::-o-inner-spin-button { -o-appearance: none; margin: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } select { line-height: 1; text-overflow: ''; text-indent: 0.01px; } select::-ms-expand { display: none; } button, input[type="button"], input[type="reset"], input[type="submit"] { display: block; overflow: visible; position: relative; z-index: 3; height: auto; margin: 0; box-shadow: none; text-transform: none; text-indent: 0; cursor: pointer; outline-width: 0; -webkit-appearance: button; appearance: button; -webkit-font-smoothing: inherit; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; outline: none; } button[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled] { border-color: var(--silver); background: var(--silver); cursor: default; } ::-webkit-input-placeholder { opacity: 1; color: var(--santas); } :-ms-input-placeholder { opacity: 1; color: var(--santas); } ::-ms-input-placeholder { opacity: 1; color: var(--santas); } ::placeholder { opacity: 1; color: var(--santas); } :focus::-webkit-input-placeholder { opacity: 0; } :focus:-ms-input-placeholder { opacity: 0; } :focus::-ms-input-placeholder { opacity: 0; } :focus::placeholder { opacity: 0; } input[type="text"], input[type="tel"] { color: var(--santas); } input[type="text"].user-changed, input[type="tel"].user-changed { color: initial; } .module-panel input[name="postcode"]::placeholder { color: unset; font-weight: 400; opacity: 0.8; } form { } label, .label { display: block; position: relative; left: 0; top: 0; z-index: 2; margin: 0 0 16px; font-weight: 400; line-height: 1.3125; } label.no-margin { margin: 0;} label .small, .label .small { display: block; position: absolute; right: 0; top: 50%; color: var(--abbey); font-size: 14px; font-weight: 400; } input, select, textarea, .semantic-select .input, .select2 { display: block; width: 100%; border: 1px solid var(--santas); border-radius: 3px; background: var(--white); color: var(--black); font-size: 16px; font-weight: 400; } input { height: 55px; padding: 0 19px; } input[type="date"] { line-height: 30px; } #root input[readonly], #root input.readonly { padding-left: 0; padding-right: 0; border-left-width: 0; border-right-width: 0; border-color: rgba(0,0,0,0); background: none; } #root input.readonly { cursor: default; pointer-events: none; } label + input[readonly] { margin-top: -14px; } select, .semantic-select .input, .select2 .select2-selection__arrow { height: 55px; padding: 0 55px 0 19px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNyA4LjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDM3IDguNiI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzI5M0E4RTt9PC9zdHlsZT48cGF0aCBkPSJNMTIuNi40Yy0uNi0uNi0xLjUtLjYtMi4xIDBsLTQgNC0zLjktNEMyLS4xIDEtLjEuNC40LS4xIDEtLjEgMiAuNCAyLjZsNi4xIDYuMSA2LjEtNi4xYy41LS42LjUtMS42IDAtMi4yeiIgY2xhc3M9InN0MCIvPjwvc3ZnPg==); background-repeat: no-repeat; background-position: 100% center; background-size: auto 8px; color: var(--santas); line-height: normal; } .semantic-select.active{z-index: 10;} .gecko select { padding-left: 15px; } select:focus, .semantic-select.active .input { color: var(--black); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNyA4LjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDM3IDguNiI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzI5M0E4RTt9PC9zdHlsZT48cGF0aCBkPSJNMTIuNiA4LjJjLS42LjYtMS41LjYtMi4xIDBsLTQtNC0zLjkgNGMtLjYuNi0xLjYuNi0yLjIgMC0uNi0uNi0uNi0xLjUgMC0yLjFMNi41IDBsNi4xIDYuMWMuNS41LjUgMS41IDAgMi4xeiIgY2xhc3M9InN0MCIvPjwvc3ZnPg==); } textarea { padding: 7px 7px 7px 19px; } input:focus, select:focus, textarea:focus, .semantic-select.active .input { border-color: var(--sapphire); } button, input[type="button"], input[type="reset"], input[type="submit"] { overflow: hidden; width: 100%; } .semantic-select { display: block; position: relative; } .semantic-select span { display: block; } .semantic-select .input { display: block; line-height: 53px; } .semantic-select .input .text, .semantic-select .input .text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word; } .semantic-select .ticker { position: absolute; right: 0; top: 0; bottom: 0; width: 50px; cursor: pointer; } .semantic-select ul { overflow-y: auto; overflow-x: hidden; position: absolute; left: -3000em; top: calc(100% + 3px); list-style: none; width: 100%; max-height: 405px; margin: 0; padding: 0; box-shadow: 0 0 14px rgba(194,194,194,.5); border-radius: 3px; border: 2px solid var(--sapphire); background: var(--white); } .semantic-select ul li { font-size: 16px; } .semantic-select ul li a { display: block; padding: 18px 19px; color: var(--black); line-height: 1.2; } [data-whatintent="mouse"] .semantic-select ul li a:hover, .semantic-select ul li.active a, .semantic-select ul li a.active { background: var(--athens); text-decoration: none;} .semantic-select ul::-webkit-scrollbar { width: 5px; } .semantic-select ul::-webkit-scrollbar-track { background: none; } .semantic-select ul::-webkit-scrollbar-thumb { border-radius: 5px; background: var(--mischka); } .semantic-select.active ul { left: 0; } .form-calculator .semantic-select-wrapper { max-width: 466px; } .select2.select2-container--default { width: 100% !important; max-height: 40px; } .select2.select2-container--default .select2-selection--single { border: none; } .select2.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 37px; } .select2 .select2-selection__arrow b { display: none; } .select2.select2-container--default .select2-selection--single .select2-selection__arrow { height: 37px; position: absolute; top: 0px; right: 0px; margin-right: -10px; } .select2 span:focus { outline: none; } input.select2-search__field { height: 30px; } .input-inline label { margin: 0; padding-right: 20px; white-space: nowrap; } .solarcalc .custom-battery-fields .double-flex { margin-bottom: 10px; } .bcalc #battery-reserve > p, .bcalc .custom-battery-fields > div > p { margin-bottom: 0; } .bcalc #battery-reserve, .bcalc .custom-battery-fields > div, .battery-reserve { margin-bottom: 10px; } #battery-reserve > p { margin-bottom: 0; } #battery-reserve > span, .custom-battery-fields > div > span { color: var(--abbey); } #battery-selection .semantic-select-wrapper { max-width: unset; } #battery-selection .double-flex { column-gap: 10px; } #battery-selection .double-flex > input { flex: 1 1 auto } #battery-selection .double-flex > label { flex: 1 0 auto } .battery-reserve-text, .custom-battery-fields-text { color: var(--abbey); font-size: 10px; line-height: 16px; display: block; } label[for='battery-charge-mode'] { margin-bottom: 0; } .checklist-direction { position: relative; left: -10.5px; list-style: none; max-width: 273px; margin: 28px auto 52px; padding: 0; } #root .checklist-direction { margin-top: 28px; } .checklist-direction li { position: relative; width: 33.333333333333%; margin: 0 0 14px; border-left: 21px solid rgba(0,0,0,0); font-size: 1.6em; } .checklist-direction li.prefix, .checklist-direction li.header { width: 100%; padding: 0 0 5px; } .checklist-direction li:nth-child(4), .checklist-direction li.header ~ li:nth-child(5) { margin-right: 40px; } .checklist-direction li:nth-child(4):before, .checklist-direction li.header ~ li:nth-child(5):before { content: "\e907"; left: 100%; top: 0; width: 100%; margin: 0; border-left: 21px solid rgba(0,0,0,0); color: var(--santas); font-size: 70px; line-height: 70px; opacity: .6; } .checklist-direction li.header ~ li:nth-child(4) { margin-right: 0; } .checklist-direction a, .checklist-direction label { display: block; overflow: hidden; position: relative; z-index: 2; width: auto; height: 70px; margin: 0; padding: 0; border-radius: 3px; border: 1px solid var(--sapphire); background: var(--white); color: var(--sapphire); font-weight: 400; font-size: 1em; line-height: 68px; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; } #root .checklist-direction label { padding: 0; } .checklist-direction input { visibility: hidden; position: absolute; left: 0; top: 0; opacity: 0; } .checklist-direction input:checked ~ label { background: var(--sapphire); color: var(--white); } .form-calculator { position: relative; margin: 53px 0 0; padding: 0 0 0 312px; font-weight: 400; } .form-calculator .module-panel { margin: 0 0 23px; padding: 28px 30px 19px; } .form-calculator.battery-calc .module-panel { margin: 0 0 63px; } .form-calculator .module-panel:before { border-width: 0; border-radius: 2px; } .form-calculator .module-panel .sqDropdown { margin-top: -20px; margin-left: auto; margin-right: auto; } .form-calculator .module-panel .borderless { border: none; } .form-calculator .module-panel > header:first-child + *, .form-calculator .module-panel > h1 + *, .form-calculator .module-panel > h2 + *, .form-calculator .module-panel > h3 + *, .form-calculator .module-panel > h4 + *, .form-calculator .module-panel > h5 + *, .form-calculator .module-panel > h6 + *, .form-calculator .double > * + *, .form-calculator .module-panel > * + .was-hidden, .form-calculator .module-panel > * + .accordion-a { margin-top: 0; padding-top: 0; border-top-width: 0; } .form-calculator .module-panel > * + .was-hidden { margin-top: 35px; } .form-calculator .module-panel > .was-hidden + * { margin-top: 0; } .form-calculator .module-panel > header { float: left; width: 272px; margin: -28px 0 0 -342px; padding: 49px 0 0; border-width: 0; line-height: 1.7142857143; } .form-calculator .module-panel > header:first-child { padding-top: 33px; } .form-calculator.battery-calc .module-panel > header:first-child { padding-top: 0px; } .form-calculator .module-panel > header h1, .form-calculator .module-panel > header h2, .form-calculator .module-panel > header h3, .form-calculator .module-panel > header h4, .form-calculator .module-panel > header h5, .form-calculator .module-panel > header h6 { margin: 0 0 11px; color: var(--sapphire); font-size: 1.6em; font-weight: 500; line-height: 1.0888888889; } .form-calculator .module-panel > header p { font-size: 1.4em; } .form-calculator .module-panel > .input-inline:first-child:last-child, .form-calculator .module-panel > header:first-child + .input-inline:last-child { margin-top: -13px; margin-bottom: -4px; } .form-calculator h1, .form-calculator h2, .form-calculator h3, .form-calculator h4, .form-calculator h5, .form-calculator h6 { margin: 0 0 21px; color: var(--black); font-size: 1.6em; font-weight: 700; line-height: 1.4; } .form-calculator .header-toggle { font-weight: 500; } #root .form-calculator h1 + h1, #root .form-calculator h1 + h2, #root .form-calculator h1 + h3, #root .form-calculator h1 + h4, #root .form-calculator h1 + h5, #root .form-calculator h1 + h6, #root .form-calculator h2 + h1, #root .form-calculator h2 + h2, #root .form-calculator h2 + h3, #root .form-calculator h2 + h4, #root .form-calculator h2 + h5, #root .form-calculator h2 + h6, #root .form-calculator h3 + h1, #root .form-calculator h3 + h2, #root .form-calculator h3 + h3, #root .form-calculator h3 + h4, #root .form-calculator h3 + h5, #root .form-calculator h3 + h6, #root .form-calculator h4 + h1, #root .form-calculator h4 + h2, #root .form-calculator h4 + h3, #root .form-calculator h4 + h4, #root .form-calculator h4 + h5, #root .form-calculator h4 + h6, #root .form-calculator h5 + h1, #root .form-calculator h5 + h2, #root .form-calculator h5 + h3, #root .form-calculator h5 + h4, #root .form-calculator h5 + h5, #root .form-calculator h5 + h6, #root .form-calculator h6 + h1, #root .form-calculator h6 + h2, #root .form-calculator h6 + h3, #root .form-calculator h6 + h4, #root .form-calculator h6 + h5, #root .form-calculator h6 + h6 { margin-top: -5px; } .form-calculator p { font-size: 1.6em; } .form-calculator label, .form-calculator .label { z-index: 2; padding-top: 3px; } .form-calculator .double-flex { display: flex; width: 100%; align-items: center; } .form-calculator .double-flex span { margin-bottom: 21px; } .form-calculator .double-flex > .semantic-select-wrapper, .form-calculator .double-flex > select { width: 100%; } .form-calculator .double-flex span, .form-calculator .double-flex label { margin-bottom: 0; margin-top: 0;} .form-calculator .double-flex .stretch div, .form-calculator .double-flex .stretch span { width: 100% } .form-calculator .double-flex.limit-wrapper .check { margin-left: 50px; } .form-calculator .custom-battery-fields .input-inline { column-gap: 10px; } .form-calculator .label-tooltip-wrapper { display: flex; align-items: center; flex-shrink: 0; } .form-calculator .label-tooltip-wrapper label { margin-top: 0; margin-bottom: 0; padding: 0; font-size: 16px; } .form-calculator .percent-sign, .form-calculator .kwh-sign { position: absolute; right: 15px; z-index: 1; color: var(--abbey) } .form-calculator .double label.hidden { visibility: hidden; position: relative; left: 0; opacity: 0; } .form-calculator .prefix { display: block; position: absolute; left: 0; top: 100%; padding: 15px 0 0 20px; color: var(--santas); font-weight: 400; font-size: 16px; line-height: 55px; } .form-calculator .suffix-unit { display: block; position: absolute; left: 0; top: 0; padding: 15px 0 0 60px; color: var(--santas); font-weight: 400; font-size: 16px; line-height: 24px; pointer-events: none; z-index: 40;} .form-calculator input { float: left; } .form-calculator input.prefixed { padding-left: 32px; padding-bottom: 3px; } .form-calculator input.suffixed { padding-bottom: 3px; } .form-calculator .suffix { display: block; float: left; padding: 16px 0 0 13px; line-height: 1.5; } .form-calculator .submit { margin: 0 0 23px; padding: 25px 30px; border-radius: 2px; background: var(--white); } .form-calculator .submit button > span { font-family: i; font-weight: 300; margin: 0px 0 0 15px; position: absolute; } .form-calculator button:before { content: "\e911"; width: 63px; font-size: 19px; } #root .form-calculator .link-btn { margin-top: 27px; padding-top: 0; border-top-width: 0; } #root .form-calculator > .module-box > .link-btn:last-child { margin-bottom: 0; } a.add-array.disabled {background: var(--silver);cursor: not-allowed; border-color: var(--silver)} a.remove-battery {color: var(--coral);float: right} /* SQ Dropdowns */ #root .sqDropdown * { transition: none; } #root .pseudo-dropdown > div { cursor: pointer; } #root .pseudo-dropdown > div.disabled { cursor: not-allowed; } #root .sqDropdown > input, #root .pseudo-dropdown > input, #root .pseudo-dropdown > div > input { border: 1px solid var(--santas); border-radius: 3px; padding: 27px 43px 26px 24px; cursor: pointer; display: block; height: 55px; } #root .pseudo-dropdown > a { padding: 0 24px; line-height: 3.4; font-size: 16px; text-decoration: none; } #root .pseudo-dropdown > a > input { color: var(--coal); } #root .pseudo-dropdown > a > input::-webkit-input-placeholder { color: var(--santas); } #root .module-panel .sqDropdown, #root .module-panel .pseudo-dropdown { margin-bottom: 30px; } #root .sqDropdown:before, #root .pseudo-dropdown:before { top: 20px; border: 2.5px solid var(--coal); border-top: transparent; border-right: transparent; width: 10px; height: 10px; } #root .sqDropdown.opened::before { top: 25px; } #root .sqDropdown .icon-search:before { top: 12px; } #root .sqDropdown .options .plan-types { font-size: 12px; color: var(--blue); font-style: italic; margin-left: -1px; } #root .sqDropdown .options .plan-provider { font-size: 12px; } #root .sqDropdown .options .plan-name { text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 95%; } #root .sqDropdown .options .plan-charges { font-size: 11px; color: var(--santas); line-height: 1.5; } #root .pseudo-dropdown { padding: 0; position: relative; height: 80px; margin: 0 !important; } #root .pseudo-dropdown::before { content: ""; position: absolute; right: 20px; z-index: 9999; transform: rotate(-45deg); pointer-events: none; } /* Energy Plan Advanced */ #energy-plan-discounts { display: none; } #energy-plan-discounts > p { line-height: 1.2; } #energy-plan-discounts > p > span { font-size: 12px; } #energy-plan-discounts.display { display: block; margin: 10px 0; } #energy-plan-discounts .discount-list .discount-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-radius: 3px; border: 1px solid var(--santas); } #energy-plan-discounts .discount-list .discount-item:not(:last-child) { margin-bottom: 10px; } #energy-plan-discounts .discount-list .discount-item > div { width: 80%; margin: 0px 15px; } #energy-plan-discounts .discount-list .discount-item > span { font-size: 16px; } #energy-plan-discounts .discount-list .discount-item p { font-size: 12px; margin-bottom: 4px; } #energy-plan-discounts .discount-list .discount-item label { font-size: 13px; font-weight: bold; margin-bottom: 4px; } #energy-plan-discounts .discount-list .discount-item span.checkbox { border: 1px solid var(--heather); background-size: 75%; background-repeat: no-repeat; background-position: 50% 60%; position: relative; width: 20px; height: 20px; border-radius: 2px; } #energy-plan-discounts .discount-list .discount-item.unconditional span.checkbox { background-color: var(--heather); } #energy-plan-discounts .discount-list .discount-item.checked span.checkbox:before, #energy-plan-discounts .discount-list .discount-item.unconditional span.checkbox:before { content: "\e918"; font-family: i; color: white; position: absolute; display: block; left: 0; right: 0; font-size: 8px; text-align: center; top: 3px; } #energy-plan-discounts .discount-list .discount-item.checked:not(.unconditional) span.checkbox { background-color: #01D075; border-color: #01D075; } #energy-plan-discounts .discount-list .discount-item:not(.unconditional):hover{ cursor: pointer; } #energy-plan-discounts .discount-list .discount-item:not(.unconditional):hover span.checkbox { cursor: pointer !important; border: 1px solid #01D075; box-shadow: 0px 0px 15px #01D075; } .create-plan { display: block; width: 100%; text-align: center; font-size: 14px; margin-top: 0 !important; margin-bottom: 10px; padding-top: 15px !important; } /* Checkbox */ .check { display: block; position: relative; } .check label { display: block; position: relative; padding-left: 37px; cursor: pointer; padding-top: 0; } .check label:before { content: ""; display: block; position: absolute; left: 0; top: -1px; z-index: 2; width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--cadet); background: var(--white); font-family: i; font-size: 8px; font-weight: 400; line-height: 21px; text-align: center; cursor: pointer; } .check input:checked ~ label:before { content: "\e918"; background: var(--rum); color: var(--white); } .check input[type="radio"] ~ label:before { top: 0; width: 20px; height: 20px; border-radius: 40px; line-height: 19px; } .check input { /*visibility: hidden;*/ position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; } .check span.label { color: var(--santas); font-size: 10px; font-weight: 700; top: -2px; } [data-whatintent="mouse"] .check label:hover:before, .check input:checked ~ label:before { box-shadow: 0px 0px 10px rgba(1,208,117,.78); border-color: var(--rum); } /*! Helpers --------- */ *, *:before, *:after { transition: visibility .4s cubic-bezier(.4,0,.2,1) 0s, color .4s cubic-bezier(.4,0,.2,1) 0s, background-color .4s cubic-bezier(.4,0,.2,1) 0s, border-color .4s cubic-bezier(.4,0,.2,1) 0s, opacity .4s cubic-bezier(.4,0,.2,1) 0s; -webkit-transition-delay: -.1s; } .popup-a .close { transition: all .4s ease-in-out 0s; } option, .accordion-a .header { transition: none; } .clear { clear: both; } .hidden, #root .desktop-hide, #root .tablet-only, #root .mobile-only, #top, .form-calculator .double:after, .input-inline:after, .checklist-direction span, .checklist-direction li.header ~ li:nth-child(4):before, .hide-me, .large-screen-hide { position: absolute !important; left: -3000em !important; top: 0; right: auto; bottom: auto; } [hidden], template, .popup-a .box-inset > .close, [data-whatintent="mouse"] .link-btn a.inline:hover:before, .list-progress ul li:before, .list-progress li:first-child:before, .list-progress li:first-child + li:before, #footer.mobile-only, .module-cta span figure { display: none; } article, aside, details, dialog, div, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, .popup-a.ready { display: block; } hr { display: block; overflow: hidden; width: 100%; height: 1px; margin: 15px 0; padding: 0; border: 0; border-top: 1px solid var(--silver); background: none; font-size: 0; } .module-heading:first-child, .module-info:first-child, .form-calculator:first-child, #root .checklist-direction:first-child, #root .form-calculator .link-btn:first-child, #root .accordion-a .link-btn:first-child, #root .form-calculator .accordion-a .link-btn:first-child, .popup-a .link-btn:first-child, .list-results:first-child, .module-cta:first-child, .accordion-a:first-child, .form-calculator .accordion-a, .module-results + *, .list-progress:first-child, .module-results .ui-slider-a:first-child, .module-results:first-child, .cols-b .accordion-a:first-child, .list-results:first-child, .module-results figure:first-child { margin-top: 0; } #root .m0, ul ul, ul ol, ol ol, ol ul, #content > .module-cta:last-child, #content > .module-info:last-child, #content > .module-heading:last-child { margin-bottom: 0; } #root .m10 { margin-bottom: 10px; } #root .m50 { margin-bottom: 50px; } /*! Miscellaneous --------- */ audio, canvas, iframe, img, svg, video { border-width: 0; vertical-align: middle; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]), video[autoplay]:not([muted]) { display: none; } svg:not(:root) { overflow: hidden; } ::selection { background: var(--azure); color: var(--white); text-shadow: none; } ::-moz-selection { background: var(--azure); color: var(--white); text-shadow: none; } /*! Outlines --------- */ [data-whatinput="keyboard"] a:focus, [data-whatinput="keyboard"] button:focus, [data-whatinput="keyboard"] input:focus, [data-whatinput="keyboard"] select:focus, [data-whatinput="keyboard"] textarea:focus { outline-width: 2px; outline-style: solid; } [data-whatintent="mouse"] input:focus, [data-whatintent="mouse"] select:focus, [data-whatintent="mouse"] textarea:focus { outline: none; } /*! Flexbox --------- */ /* flex */ #footer, .list-progress, .module-results > *, .module-results, .link-btn, .list-results li, .list-results, .popup-a .box-outer, .ui-slider-a, .cols-a, .link-btn.switch, .checklist-direction, .input-inline, .form-calculator .double, .list-box, .module-info { display: -moz-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /* f:wr */ .list-progress, .module-results, .list-results li, .list-results, .checklist-direction, .list-box { -webkit-flex-wrap: wrap; flex-wrap: wrap; } /* f:dr */ .link-btn.switch { -webkit-flex-direction: row; flex-direction: row; } /* f:dv */ .cols-a.inv { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } /* f:dc */ .module-results > *, .link-btn, .ui-slider-a { -webkit-flex-direction: column; flex-direction: column; } /* f:jc */ .popup-a .box-outer { -webkit-justify-content: center; justify-content: center; } /* f:je */ #footer { -webkit-justify-content: flex-end; justify-content: flex-end; } /* j:jb */ .cols-a, .checklist-direction, .input-inline, .form-calculator .double, .module-info { -webkit-justify-content: space-between; justify-content: space-between; } /* f:ac */ .link-btn, .popup-a .box-outer, .input-inline { -webkit-align-items: center; align-items: center; } /* f:b0 */ .link-btn.switch > *, .list-box li { -webkit-flex-basis: 0%; -ms-flex-basis: 0%; flex-basis: 0%; } /* f:g0 */ .cols-a > header:first-child, .cols-a > aside { -webkit-flex-grow: 0; -ms-flex-grow: 0; flex-grow: 0; } /* f:g3 */ .cols-a > *:first-child, .cols-a > header:first-child + *, .link-btn.switch > *, .form-calculator .double > *, .list-box li { -webkit-flex-grow: 3; -ms-flex-grow: 3; flex-grow: 3; } /*! Icons --------- */ @font-face { font-family: 'i'; src: url('icons/icomoon.woff2') format('woff2'), url('icons/icomoon.woff') format('woff'), url('icons/icomoon.ttf') format('truetype'); } [class^="icon-"], [class*=" icon-"] { font-family: 'i' !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-arrow-left:before { content: "\e913"; } .icon-arrow-right:before { content: "\e914"; } .icon-arrow-top:before { content: "\e915"; } .icon-calculator:before { content: "\e911"; } .icon-chevron-down:before { content: "\e912"; } .icon-chevron-left:before { content: "\e90f"; } .icon-chevron-right:before { content: "\e910"; } .icon-chevron-thin-down:before { content: "\e90e"; } .icon-chevron-thin-left:before { content: "\e90b"; } .icon-chevron-thin-right:before { content: "\e90c"; } .icon-chevron-thin-up:before { content: "\e90d"; } .icon-chevron-top:before { content: "\e90a"; } .icon-compass:before { content: "\e907"; } .icon-document:before { content: "\e908"; } .icon-envelope:before { content: "\e909"; } .icon-equal:before { content: "\e906"; } .icon-info:before { content: "\e903"; } .icon-minus:before { content: "\e904"; } .icon-minus-rounded:before { content: "\e905"; } .icon-plus:before { content: "\e900"; } .icon-plus-rounded:before { content: "\e901"; } .icon-warning::before { content: "\e91a "} .icon-x:before { content: "\e902"; } /*! Animations --------- */ .popup-a.shown .box-inset, .popup-a.unshown .box-inset { -webkit-animation-duration: .25s; animation-duration: .25s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .popup-a.shown .box-inset { -webkit-animation-name: anim-open; animation-name: anim-open; } .popup-a.unshown .box-inset { -webkit-animation-name: anim-close; animation-name: anim-close; } /** CUSTOM **/ .table-info tr td { font-size: 1.6em; } .table-info tr td:not(:first-child) { padding-left: 20px; } #result-body #email, #result-body #email-newsletter{ display: none; } .module-info.a .input.email{ width: 100%; } input.error{ border-color: red; } div.bar.is-credit { border: none; position: absolute; right: 10px; background: none !important; top: 15px; } .bar.is-credit > div:after { content: 'CREDIT'; margin-left: 5px; color: var(--abbey); } .bar.is-credit > div{ border: none; width: 0px !important; } #energy_plan_details { padding-top: 10px; } .calc-help-popup p { font-size: 16px; } .calc-help-popup .close-container {margin-top: 10px; margin-bottom: 20px; width: 100%; text-align: center;} .calc-help-popup .close-container a { font-size: 15px; color: red; } .calc-help-popup form input, .calc-help-popup form textarea { margin-bottom: 10px; } .calc-help-popup .recaptcha-terms { color: #404040; text-align: center; } .calc-help-popup .recaptcha-terms a { color: var(--tango); } .calc-help-popup label { font-size: 14px; color: var(--rhino); margin-top: 20px; } .calc-help-popup textarea { height: 80px; padding-top: 10px; } #root .calc-help-popup input[readonly] { border: 1px solid var(--santas) ; padding: 0 20px; background: rgba(0,0,0,0.04); cursor: unset; color: var(--rhino); } @-webkit-keyframes anim-open { 0% { visibility: hidden; opacity: 0; -webkit-transform: scale3d(1.1,1.1,1); transform: scale3d(1.1,1.1,1); } 100% { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @keyframes anim-open { 0% { visibility: hidden; opacity: 0; -webkit-transform: scale3d(1.1,1.1,1); transform: scale3d(1.1,1.1,1); } 100% { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes anim-close { 0% { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } 100% { visibility: hidden; opacity: 0; -webkit-transform: scale3d(.9,.9,1); transform: scale3d(.9,.9,1); } } @keyframes anim-close { 0% { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } 100% { visibility: hidden; opacity: 0; -webkit-transform: scale3d(.9,.9,1); transform: scale3d(.9,.9,1); } } @media(max-width: 767px){ ul.scroll-to-fixed-fixed { top: 90px !important; } .module-cta figure img { height: 130px !important; } .module-info.a .input.email{ position: relative; top: 0px; width: 100%; } } /* Responsive --------- */ @media only screen and (max-width: 78.125em) { /* 1250 */ #content, #footer { width: 970px; } #content { padding-bottom: 42px; } #content .results-issue { top: -48px; } .cols-a { padding-right: 0; } .cols-a > header:first-child, .cols-a > aside { margin-right: 0; } .cols-b { } #root .cols-b .double > * { float: none; width: auto; } .cols-b .accordion-a { margin-top: 35px; } .list-box { } .list-box p { max-width: 505px; } .list-info { } .list-info li { padding-left: 160px; } .module-cta { padding-left: 45px; padding-right: 330px; } .module-cta figure { right: 45px; width: 283px; text-align: center; } .module-cta h1, .module-cta h2, .module-cta h3, .module-cta h4, .module-cta h5, .module-cta h6 { margin: 0; } .module-cta .link-btn { position: relative; right: 0; top: 0; width: 100%; } .module-cta .link-btn a { width: auto; min-width: 240px; margin-right: 30px; } .module-cta .link-btn a.inline { min-width: 0; } .module-heading { padding-left: 0; padding-right: 0; } .module-heading .double { margin-left: -48px; } .module-heading .double > * { border-left-width: 48px; } .module-info { padding-right: 65px; } .module-info .triple { margin-left: -10px; } .module-info .triple > * { border-left-width: 10px; } .module-info.a, .module-results > * { padding: 40px 45px 23px; } .module-results { } .module-results > * { min-height: 355px; } .list-results { width: 100%; } .list-results li:nth-child(1) { flex-grow: 1.3; } .list-results li:nth-child(2) { flex-grow: 1.165; } .list-results li:nth-child(3) { flex-grow: 1.8; } .list-results.has-battery li ul { margin-top: 20px; } #root.bcalc:not(.results) .list-results li:not(:last-child) span { margin-bottom: 15px; } .bcalc .list-box li { padding-left: 30px; padding-right: 30px; } .module-cta .link-btn { -webkit-flex-direction: row; flex-direction: row; } .module-cta .link-btn { -webkit-transform: none; transform: none; } .cols-a > aside { display: none; } .large-screen-hide { position: relative !important; left: 0 !important; top: 0; } header.cols-a > aside { display: block; } #root .chart-wrapper.daily-usage { margin-left: -40px; margin-right: -40px; } } @media only screen and (max-width: 62.5em) { /* 1000 */ #content, #footer { width: 720px; } body { background: var(--swiss); } #root { padding-bottom: 0; } #content { padding-right: 0; padding-left: 0; padding-bottom: 0; } #content .module-info { margin-left: 0; margin-right: 0; } #root .chart-wrapper.daily-usage { margin-left: -60px; margin-right: -40px; } .list-box { } .list-box li { padding-left: 20px; padding-right: 20px; } .list-results { margin-left: -48px; margin-right: 0; } .list-results li:nth-child(1) { flex-grow: 1.3; } .list-results li:nth-child(2) { flex-grow: 1.1; } .list-results li:nth-child(3) { flex-grow: 1.8; } .list-results li { max-width: none; margin-right: 0; border-left-width: 48px;} .list-results.has-battery li ul { margin: 0; } .list-results ul { padding-left: 30px; } .bcalc .module-heading .list-results { width: 100%; row-gap: 30px; } .bcalc .module-heading .list-results li:nth-child(2) { margin-right: 0; } .bcalc .module-heading .inflation-container { width: 100%; } .moule-cta { } .module-cta .link-btn { width: auto; margin-right: -120px; } .module-info { padding-right: 20px; padding-left: 180px; } .module-info header { width: 180px; min-width: 180px; margin-left: -180px; padding-left: 20px; padding-right: 20px; } .module-info header h1, .module-info header h2, .module-info header h3, .module-info header h4, .module-info header h5, .module-info header h6 { font-size: 3.5em; } .module-results { } .module-results > * { min-height: 285px; } .module-results .ui-slider-a { margin-bottom: 34px; } .scheme-amount, #root .scheme-amount { font-size: 8em; } .ten-year-savings-section > span { text-align: center; } .form-calculator { } .form-calculator .module-panel { margin-bottom: 20px; padding: 26px 20px 13px; } .form-calculator .double { display: block; } #root .form-calculator .double > * { float: none; width: auto; } .form-calculator .submit { margin-bottom: 20px; padding: 20px; } .form-calculator .module-panel > .input-inline:first-child:last-child, .form-calculator .module-panel > header:first-child + .input-inline:last-child { margin-top: -11px; margin-bottom: 2px; } .form-calculator .double > p + p label.hidden ~ input, .form-calculator .double > p + p label.hidden ~ select, .form-calculator .double > p + p label.hidden ~ .semantic-select-wrapper { margin-top: -8px; } #root .desktop-hide, #root .tablet-only { position: relative; left: 0; top: 0; } #root .desktop-only, #root .tablet-hide, #root .form-calculator .double label.hidden { position: absolute; left: -3000em; top: -3000em; right: auto; bottom: auto; } .module-heading .module-heading-flex { display: block; } } @media only screen and (max-width: 47.5em) { /* 760 */ #content, #footer { width: auto; } #content, #footer { padding-left: 30px; padding-right: 30px; } #content .results-issue { top: -64px; } h1, .heading1 { font-size: 2.4em; } .accordion-a { } #root .accordion-a .header.toggle { padding-left: 21px; } .accordion-a > div div { padding: 50px 21px .1px; } .checklist-direction, #root .checklist-direction { margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } .checklist-direction li.prefix, .checklist-direction li.header { padding-bottom: 3px; } .cols-a, .cols-b { display: block; padding-left: 0; padding-right: 0; } #root .cols-a > *, #root .cols-b > * { float: none; width: auto; padding-left: 0; } #root .cols-b > * { margin-left: 0; margin-right: 0; } .cols-a.inv h1, .cols-a.inv h2, .cols-a.inv h3, .cols-a.inv h4, .cols-a.inv h5, .cols-a.inv h6 { text-align: center; } .cols-a + .cols-a { margin-top: 59px; } .bcalc .cols-a + .cols-a { margin-top: 19px; } .double { display: block; } #root .form-calculator .double > *, #root .double > * { float: none; width: auto; max-width: none; } .list-box { display: block; margin-bottom: 20px; } .list-box li { min-height: 0; padding-left: 30px; padding-right: 30px; } .list-box li:after { left: 50%; top: 0; margin: -20px 0 0 -16px; } .list-box + .list-box { margin-top: 0; } .list-info { } .list-info li { padding-left: 170px; } .list-progress li:before { border-top: 0; } .list-progress { display: block; margin: 5px 0 22px; } .list-progress li { width: auto; margin: 0 -30px; padding: 18px 30px .1px; border-left-width: 0; border-top-width: 1px; } .list-progress figure { right: 30px; top: 14px; } .list-progress li:first-child figure { top: -3px; } .list-results { display: block; margin-top: 33px; margin-left: 0; } .list-results li { width: auto; max-width: none; margin: 0 0 20px; padding: 26px 0 0; border-top-width: 1px; border-left-width: 0; } .list-results li:first-child, .module-heading .double > *:first-child, .list-progress li:first-child { margin-top: 0; padding-top: 0; border-top-width: 0; } .list-results + .spacer { margin-top: 33px; } .list-results ul { margin: 0 0 0 auto !important; text-align: right; } #root .m50 { margin-bottom: 42px; } .module-cta { margin: 29px -30px; padding: 14px 30px .1px; } .module-cta figure { display: none; position: relative; top: 0; top: 0; } .module-cta h1, .module-cta h2, .module-cta h3, .module-cta h4, .module-cta h5, .module-cta h6 { position: relative; margin: 0 0 43px; } .module-cta h1 span, .module-cta h2 span, .module-cta h3 span, .module-cta h4 span, .module-cta h5 span, .module-cta h6 span { max-width: 145px; padding: 25px 0 7px; } .module-cta h1 span:first-child, .module-cta h2 span:first-child, .module-cta h3 span:first-child, .module-cta h4 span:first-child, .module-cta h5 span:first-child, .module-cta h6 span:first-child { max-width: none; } .module-cta h1 figure, .module-cta h2 figure, .module-cta h3 figure, .module-cta h4 figure, .module-cta h5 figure, .module-cta h6 figure { display: block; position: absolute; right: 0; top: auto; bottom: -36px; width: 127px; } .module-cta h1 figure:before, .module-cta h2 figure:before, .module-cta h3 figure:before, .module-cta h4 figure:before, .module-cta h5 figure:before, .module-cta h6 figure:before { bottom: -31px; width: 120px; height: 44px; margin: 0 0 0 -60px; } .module-cta .link-btn { width: 100%; margin-right: 0; } .module-cta .link-btn a { width: 100%; min-width: 0; margin-right: 0; } .module-cta .link-btn a.inline { width: auto; } .module-cta > *:last-child { margin-bottom: 11px; } .module-heading { margin: 29px 0; padding: 23px 0 31px; line-height: 1.4375; } .bcalc:not(.results) .module-heading { text-align: center; } .module-heading h1, .module-heading h2, .module-heading h3, .module-heading h4, .module-heading h5, .module-heading h6 { margin: 0 0 19px; font-size: 3em; line-height: 0.9666666667; } .bcalc .module-heading h1 { line-height: 1.2; } #root.bcalc .list-results li { display: block; } #root.bcalc .list-results li:first-child sup, #root.bcalc .list-results li:first-child sub { top: 0; } #root.bcalc .list-results sup, #root.bcalc .list-results sub { top: 0px; } #root.bcalc .list-results.scroll-to-fixed-fixed sup { margin-right: 0; top: 0; bottom: 0; margin: 0; font-size: 1em; } #root.bcalc .module-heading .list-results { border-bottom: 1px solid rgba(255,255,255,.3);} #root.bcalc .list-results { margin-bottom: 15px; } #root.bcalc .list-results + .spacer { margin: 25px 0 15px; } #root.bcalc .flash-error { margin-top: 0; } #root.solarcalc .flash-error { margin-top: 0; } .module-heading .link-btn { margin-left: -15px; margin-right: -15px; } .module-heading .double { margin-left: 0; } .module-heading .double > * { margin-top: 37px; padding-top: 30px; border-left-width: 0; border-top-width: 1px; } .module-info { display: block; margin: 29px -30px; padding: 34px 15px 21px; text-align: center; } #content .module-info, #content .module-info.a { margin-left: -30px; margin-right: -30px; } .module-info header { min-width: 0; max-width: none; width: auto; margin: 0 0 27px; padding: 0; } .module-info header h1, .module-info header h2, .module-info header h3, .module-info header h4, .module-info header h5, .module-info header h6 { margin: 0 0 12px; font-size: 2.4em; } .module-info + .cols-a > header:first-child, .module-info + .cols-a > aside { margin-top: 0; } .module-heading + .module-info, .module-heading + .module-results, .module-info + .module-cta, .module-cta + .module-info { margin-top: -29px; } .module-info.a { padding: 57px 30px 19px; text-align: left; } .module-info.a h1, .module-info.a h2, .module-info.a h3, .module-info.a h4, .module-info.a h5, .module-info.a h6 { margin-bottom: 36px; } .module-info.a p { margin-bottom: 42px; } .module-info.a .accordion-a { max-width: none; margin: 12px 0 25px; } .module-info.a .link-btn { margin-bottom: 15px; } .module-info.a .double > * + * { margin-top: 63px; } .module-panel { margin-left: -20px; margin-right: -20px; padding-left: 15px; padding-right: 15px; } #root .module-panel .module-panel { padding-left: 15px; padding-right: 15px; } #root .module-panel .module-panel.quote { padding-left: 118px; } #root .module-panel.quote picture + * { padding-left: 0; padding-right: 0; } .module-results { display: block; margin-left: 0; } .module-results > *, .module-results > header { width: auto; min-height: 0; margin: 0 -30px; padding: 32px 30px 25px; border-left-width: 0; border-top-width: 1px; } #root .module-results > *:first-child { margin-top: 0; border-top-width: 0; } #root .module-results > *:last-child { border-bottom-width: 1px; } .module-results h1, .module-results h2, .module-results h3, .module-results h4, .module-results h5, .module-results h6 { margin-bottom: 13px; } .module-results figure { margin-top: 20px; } .module-results .scheme-amount:first-child { padding-top: 5px; } .module-results .scheme-amount:first-child:last-child, .module-results .scheme-amount:first-child:last-child { padding-bottom: 25px; } .module-results .list-progress:last-child { margin-bottom: -18px; } .module-results + * { margin-top: 0; } .popup-a { left: 0; right: 0; } .popup-a .box-outer { padding: 10px; } .popup-a .box-inner { width: 100%; } .popup-a .box-inset { padding: 31px 15px 6px; } .popup-a .link-btn { margin-left: 0; margin-right: 0; } .scheme-amount, #root .scheme-amount { font-size: 7em; } .scheme-amount span { margin-bottom: 14px; font-size: 0.2857142857em; } .scheme-amount sub, .scheme-amount sup { font-size: 0.4285714286em; } .ten-year-savings-section > span { text-align: center; margin-right: -15px; } .ui-slider-a { } .ui-slider-a label .small, .ui-slider-a .label .small { max-width: 95px; } .ui-slider + * { margin-top: 32px; } .input-inline { display: block; } .input-inline label { margin-bottom: 15px; } #root .input-inline input { max-width: none; } .form-calculator { margin-top: 40px; padding: 0; } .form-calculator .module-panel { margin: 0 -20px 16px; padding-left: 15px; padding-right: 15px; } .form-calculator .module-panel > .input-inline:first-child:last-child, .form-calculator .module-panel > header:first-child + .input-inline:last-child { margin-top: 0; margin-bottom: 21px; } .form-calculator .module-panel > .header-toggle { margin-right: 0; } .form-calculator .module-panel .module-panel { margin-left: 0; margin-right: 0; } .form-calculator .module-panel > * + *, .form-calculator .module-panel > * + .accordion-a > header:first-child { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; } .form-calculator .submit, .bcalc .module-panel.nem12 { margin: 0 -20px 16px; padding: 20px; position: relative; } .bcalc .module-panel.nem12 > div > a, .solarcalc .module-panel.nem12 > div > a { font-weight: bold; font-size: 15px; text-align: center; text-decoration: underline; width: 100%; display: inline-block; } .form-calculator .w190 { max-width: 136px; } .form-calculator .w190:last-child { max-width: none; } #footer.mobile-only { display: -moz-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .module-cta .link-btn { -webkit-flex-direction: column; flex-direction: column; } .form-calculator .module-panel > header { display: none; } .input-inline:after, .list-progress figure { display: block; } #root .tablet-hide, #root .mobile-only, .input-inline:after { position: relative; left: 0; top: 0; } #root.bcalc .mobile-only, #root.solarcalc .mobile-only { position: relative !important; left: 0 !important; top: 0; } #root .tablet-only, #root .mobile-hide, .module-heading + .module-info:before, .module-heading + .module-results:before { position: absolute; left: -3000em; top: -3000em; right: auto; bottom: auto; } div.mobile-expanded > div div {position: relative;padding-top: 0px;border-radius: 0px 0px 3px 3px;} #root .chart-wrapper.daily-usage { margin-left: -25px; margin-right: -25px; } /* Edit Energy Plan Popup */ #selected-plan-details .box-inset { padding: 20px 15px; } #battery-reserve > p { height: 130px; } #battery-reserve > p > span { bottom: 20px; } .battery-reserve input, .custom-battery-fields input { max-width: unset; } .form-calculator input { float: none; clear: both; } .form-calculator .double-flex { width: unset; } .form-calculator .double-flex.mobile-block { width: auto; display: block; } .form-calculator .double-flex span, .form-calculator .double-flex label { margin-bottom: 0; } .form-calculator .double-flex.mobile-block span, .form-calculator .double-flex.mobile-block label { margin-bottom: 16px; } .form-calculator .double-flex.limit-wrapper .check { margin-left: 30px; flex-grow: 1; } .form-calculator .label-tooltip-wrapper { margin-bottom: 15px; } .form-calculator .label-tooltip-wrapper label { margin-bottom: 0 !important;} .form-calculator .percent-sign { top: 55px; } .form-calculator .kwh-sign { top: 53px;} .form-calculator .suffix-unit { display: block; position: absolute; left: 0; top: 0; padding: 15px 0 0 75px; color: var(--santas); font-weight: 400; font-size: 16px; line-height: 24px; pointer-events: none; z-index: 40;} .solarcalc .custom-battery-fields .double-flex, .battery-reserve { margin-bottom: 5px; } } @media only screen and (max-width: 600px) { #root .chart-wrapper.daily-usage { margin-left: -35px; margin-right: -25px; height: 250px; } } @media only screen and (max-width: 360px) { .scheme-amount, #root .scheme-amount { font-size: 6em; } } /** CUSTOM **/ .module-heading h1 { margin-bottom: 0; } #root.bcalc.results .module-heading h1 { margin-bottom: 30px; } @media only screen and (min-width: 47.6em) { .module-heading h2 { font-size: 4em; font-weight: 500; } .select2.select2-container--default { width: 100% !important;} } @media only screen and (max-width: 320px) { .link-btn.switch.m50 { max-width: calc(100% - 32px); } } .simple-mode-open .advanced-module{ display: none; } .simple-mode-open .advanced-field{ display: none; } body:not(.simple-mode-open) .simple-module-only { display: none; } .chart-wrapper{ overflow-y: hidden; overflow-x: hidden; } .chart-wrapper.daily-usage { margin-left: -40px; margin-right: -20px; } .chart-wrapper.cumulative { margin-left: -20px; margin-right: -20px; } @media(max-width: 767px){ .chart-wrapper{ overflow-y: hidden; overflow-x: auto; } } #loader { position: fixed; z-index: 999; width: 100%; height: 100%; background-color: rgba(255,255,255,0.85); padding-top: calc(50vh - 50px); top: 0; text-align: center;} #root { filter: blur(3px); } .advanced-coming-soon { background: var(--sapphire); color: white; font-weight: 400; padding: 10px; border-radius: 3px; line-height: 1.3; position: absolute; z-index: 3; margin-right: 35px; display: none; } @media(max-width: 767px){ .advanced-coming-soon { width: calc(100% - 60px); margin-right: inherit; } } @media only screen and (max-width: 47.5em) { #self-consumption-slider-wrapper { border-top: none; margin-top: 0px; padding-top: 10px; } .selfc-tooltip { margin-top: -60px; } #read_book_1 { padding: 25px 0; } } #self-consumption { color: white!important; opacity: 1!important; } .google-visualization-tooltip div { padding:5px; font-size:11px; } #selfc-summer:after, #selfc-autumn:after, #selfc-winter:after, #selfc-spring:after { content: '%'; } #selfc-summer.reached-limit, #selfc-autumn.reached-limit, #selfc-winter.reached-limit, #selfc-spring.reached-limit, #self-consumption-slider-wrapper .btn-edit-inputs { text-decoration: underline; text-decoration-color: var(--azure); color: rgba(255,255,255,0.8); cursor: pointer; } .selfc-tooltip { position: absolute; opacity: 0; font-size: 1.5em!important; margin-top: -40px; line-height: 1.3!important; } input#self-consumption.has-battery { font-size: 100%; margin-left: 80px; margin-top: -7px; } #self-consumption-output { display: inline; width: 50px; font-size: 200%; font-weight: bold; position: absolute; margin-top: 48px; } @media only screen and (max-width: 62.5em) { /* 1000 */ .module-heading .ui-slider-a label .small { padding-top: 60px; } #self-consumption-slider-wrapper div.slider.ui-slider { margin-top: 15px; } #content > .module-cta:last-child { margin-bottom: 25px } .list-results li:nth-child(3) { flex-basis: 100%; } } ul.list-info li.div { height: 12px; } #btn-get-quotes a { background-color: #be1e2d; border-color: #be1e2d; } #email-newsletter, #sharelinkhelper { text-align: center; font-size: 110%; padding: 5px; color: #283a8e; } #email-newsletter > div { display: flex; } label[for=checkbox-newsletter] { display: block; margin: auto 10px; text-align: start; } div#battery-selection li[data-value='31'] { border-bottom: 2px solid var(--santas); } div#battery-selection li.heading { background-color: var(--athens); padding-left: 20px; padding-bottom: 5px; padding-top: 5px; color: var(--sapphire); } header.lh-postcode p { margin-bottom: 12px; } header.lh-postcode { margin-bottom: -30px!important; } .lh-postcode { font-size: 0.9em; } .lh-column.lh-column-battery { left: 15px; margin-top: 20px } .lh-column.lh-column-annual-cost { margin-top: 15px } .lh-column { position: absolute; left: -300px; width: 250px; font-size: 0.9em; } .lh-column p { font-size: 1.4em; line-height: 1.5; } .lh-column h2 { margin: 0 0 11px; color: var(--sapphire); font-size: 1.6em; font-weight: 500; } .battery-calc .lh-column.lh-column-battery { margin-top: 5px; } .battery-calc .lh-column h2, .battery-calc .lh-postcode h2 { font-size: 16px !important; } .battery-calc .lh-column h2, .battery-calc .lh-column p { margin-bottom: 13px !important; } .lh-postcode, .lh-column { font-weight: 300; font-size: 10px; } .lh-postcode h2, .lh-column h2 { margin-bottom: 20px!important; } .lh-column.lh-column-fit { padding-top: 190px; border-top: none; } #max-selfc-info { display: none; } .nem12 #file { font-size: 10px; } .uploadifive-queue-item { display: flex; } .uploadifive-queue-item .close { margin-right: 10px; } .uploadifive-button { background: var(--denim); } #uploadifive-uploadNem12 input { cursor: pointer; } /* index.ctp RH column */ aside .module-panel::before { border-top: none; } aside .module-panel { max-height: 330px; overflow-y: auto; background-color: white; border-top: 4px solid var(--azure); } .bcalc aside .module-panel { max-height: 378px; } aside .module-panel.expanded { max-height: none; } aside .module-panel:nth-of-type(4) { max-height: 900px; overflow-y: hidden; } aside .module-panel:nth-of-type(5) { max-height: 344px; } .flash-error { font-size: 2em; text-align: center; margin-bottom: 40px; margin-top: -40px; } .flash-error .message, .flash-error .html-flash { background:#be1d2d; } .flash-error .success-msg { background-color: green; } .flash-error a { text-decoration: underline; font-size: 0.8em; } .flash-error .html-flash { padding: 10px 0; line-height: 1.3; } .flash-error .warning-msg { padding: 30px 20px 20px; border-radius: 8px; border: 2px solid white; } .flash-custom-error.flash-battery-calc-one-year { text-align: center; } .flash-custom-error.flash-battery-calc-one-year .error-title-wrapper { display: flex; justify-content: center; align-items: center; margin-bottom: 21px; column-gap: 15px; } .flash-custom-error.flash-battery-calc-one-year .icon-warning { font-size: 30px; } .flash-custom-error.flash-battery-calc-one-year .error-title { color: white; margin-top: 0; margin-bottom: 0; font-size: 22px; font-weight: bold; } .flash-custom-error.flash-battery-calc-one-year p { font-size: 16px; color: white; } .flash-custom-error.flash-battery-calc-one-year .actions { display: flex; flex-direction: column; align-items: center; } .flash-custom-error.flash-battery-calc-one-year .actions .button { display: block; text-decoration: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; font-size: 14px; } .flash-custom-error.flash-battery-calc-one-year .actions .button.primary { background-color: var(--azure); color: white; margin-bottom: 20px; } .flash-custom-error.flash-battery-calc-one-year .actions .button.secondary { background-color: #7c7c7c; color: white; } @media only screen and (max-width: 760px) { .flash-error .warning-msg { margin-left: -10px; margin-right: -10px; padding: 25px 15px 15px; } .flash-custom-error.flash-battery-calc-one-year .actions .button.primary { margin-bottom: 15px; } } @media only screen and (min-width: 1000px) { h1, .heading1 { font-size: 20pt!important;} .bcalc h1, .heading1 { font-size: 30pt!important; } .bcalc .heading1 { font-size: 30pt !important; margin-bottom: 60px; font-weight: bold; } h2 { font-size: 18pt!important; } .custom-battery-fields > div > p { margin-bottom: 0;} } @media (min-width: 761px) and (max-width: 1000px) { .footer .footer-top { z-index: 3 } } /* --- custom field validation ---- */ input.with-error { border-color: red; } .form-calculator .module-panel .field-error-msg { display: none; border: none; position: absolute; margin-top: -10px; padding-top: 0; font-size: 14px; color: red; width: 100%; padding-left: 187px; } .form-calculator .module-panel.nem12 .field-error-msg { padding-left: 0; text-align: center; } #field-error-msg-annual-bill { padding-left: 0 } #field-error-msg-total-cost { padding-left: 0; position: relative; } @media (max-width: 1250px) { .form-calculator .module-panel .field-error-msg { padding-left: 250px; } #field-error-msg-annual-bill { padding-left: 0 } } @media (max-width: 1000px) { .form-calculator .module-panel .field-error-msg { padding-left: 130px; } #field-error-msg-annual-bill { padding-left: 0 } } @media (max-width: 760px) { #field-error-msg-annual-bill, .form-calculator .module-panel .field-error-msg { padding-left: 15px; position: relative; } } /* --- custom field validation (end) ---- */ /* --- Tooltips --- */ .calc-tooltip { width: 35px; height: 35px; flex: 0 0 35px; position: relative; margin-left: 15px; border-radius: 50%; /* background-color: var(--azure); */ } .calc-tooltip::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 35px; height: 35px; background-image: url(/css/calc/icons/questionmark.svg); background-size: cover; } .helper-icon { border-radius: 50%; color: white; text-decoration: none; font-size: 16px; line-height: 21px; width: 20px; height: 20px; flex-shrink: 0; font-weight: bold; background-color: var(--danube); text-align: center; margin-left: 10px; } a.helper-icon:hover { background-color: var(--tango); color: white; text-decoration:none; } .helper-icon.large { font-size: 32px; line-height: 35px; width: 35px; height: 35px; } .tooltip { display: flex; align-items: center; column-gap: 15px; background: white; padding: 20px 30px 20px 15px; border-radius: 6px; position: absolute; z-index: 100; font-size: 14px; box-shadow: 0px 2px 5px #0000004a; border: 1px solid var(--danube); cursor: pointer; line-height: 1.3; max-width: 500px; width: auto; } .tooltip::before { content: '×'; position: absolute; top: 5px; right: 10px; color: var(--coal); opacity: 0.7; font-size: 20px; } .triangle-outline { position: absolute; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--danube); top: -8px; left: calc(50% - 8px); } .triangle-outline::before { content: ""; position: absolute; top: 2px; left: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid white; } /* Mobile tooltip override */ @media (max-width: 768px) { .tooltip { max-width: unset; width: calc(100% - 40px); left: 0 !important; right: 0; margin: 0 20px; box-sizing: border-box; } .triangle-outline { left: var(--arrow-left); margin-left: -28px; } } .tooltip .helper-icon { margin-left: 0; }