discount-entry{display:grid;grid-template-columns:1fr 1fr;gap:10px;column-gap:30px;margin:0 auto;max-width:1300px;& p, h3 { margin: 0; } &> :first-child { grid-column: span 2; } .title { --bg_color: var(--BG_ACTIVE_BLUE_LIGHT); border-bottom: 3px solid var(--bg_color); & h3 { color: var(--COLOR_NEUTRAL_LIGHT); background-color: var(--bg_color); font-size: 18px; padding: 15px; } & p { margin: 5px 0 15px; } } .step { display: flex; gap: 20px; background-color: var(--BG_GREY_MIDDLE); padding: 10px; align-items: center; .step_number { background-color: var(--BG_ACTIVE_BLUE_LIGHT); color: #fff; padding: 4px 12px; border-radius: 100%; font-weight: bold; font-size: 16px; } } .step~p { padding: 10px 0; } .table_container { display: grid; gap: 2px; .table { display: grid; gap: 2px; .line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-items: center; background-color: var(--BG_GREY); padding: 5px 12px; text-align: center; cursor: pointer; &:hover { background-color: #f3f3f3; } & input { display: none; } [data-type=discount] { font-weight: bold; } &:has(:checked) { color: var(--COLOR_NEUTRAL_LIGHT); background-color: var(--BG_ACTIVE_BLUE); font-weight: 700; } } > :first-child { background-color: #f3f3f3; cursor: default; } & :is([data-type=per_order], [data-type=per_year]):not([data-user_discount] ~ [data-type=per_year])::before { content: "> "; } &> :nth-child(2) :is([data-type=per_order], [data-type=per_year]):not([data-user_discount] ~ [data-type=per_year])::before { content: "< "; } } } .box { background-color: var(--BG_GREY_LIGHT); padding: 15px; } .link_container { .rabatt, .skonto, .currency_choice, .currency_rate { display: flex; justify-content: space-between; align-items: center; } :is(.skonto, .currency_choice, .currency_rate)>div { --child_amount: 3; display: grid; grid-template-columns: repeat(var(--child_amount), 1fr); gap: 3px; min-height: 2.5rem; height: auto; width: 50%; & label { background-color: var(--BG_GREY); height: 100%; width: 100%; cursor: pointer; display: flex; justify-content: center; align-items: center; & input { display: none; } &:has(:checked) { background-color: var(--BG_ACTIVE_BLUE); color: var(--COLOR_NEUTRAL_LIGHT); } } } :is(.currency_choice, .currency_rate)>div { --child_amount: 2; } .text_lines { margin: 10px 0; &>* { margin: 0; padding: 0; } } .tool_links { display: flex; justify-content: space-around; align-items: center; margin-top: 50px; } .tool_link { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 200px; cursor: pointer; &:hover { opacity: 0.7; } & img:first-child { height: 40px; width: fit-content; } } } &:has(:invalid) { .tool_link { pointer-events: none; opacity: 0.7; button { box-shadow: none; border: 1px solid var(--COLOR_PRIMARY_MIDDLE); --background: var(--BG_DISABLED); color: var(--COLOR_PRIMARY_DARK); } } }}@media screen and (max-width:950px){discount-entry{display:flex;flex-direction:column}}@media screen and (max-width:650px){.tool_links{display:flex;flex-direction:column;gap:20px}}quick-plan{.currency_choice { display: none !important; } .tool_link[data-tool="quickshop"] { display: none; }}h1,h2,h3{margin:0}img{max-width:100%}.shop_title{padding:10px;margin-bottom:5px;min-height:51px;&, & :not(button) { background-color: var(--BG_ACTIVE_BLUE_LIGHT); color: var(--COLOR_NEUTRAL_LIGHT); font-size: 18px; font-weight: bold; }}div{h3.shop_title:has(+ sort-row) { transition: all 0.3s ease-in-out; position: sticky; top: 122px; z-index: 1; display: flex; align-items: center; +sort-row { transition: all 0.3s ease-in-out; position: sticky; top: 172px; z-index: 1; } } &:has(shopping-cart-preview > shop-article) { h3.shop_title:has(+ sort-row) { top: 172px; +sort-row { top: 222px; } } }}@keyframes rotate{to{rotate:360deg}}.loader::before{content:"";border:5px solid;border-color:var(--COLOR_ACCENT_LIGHT)transparent transparent transparent;border-radius:50px;width:50px;aspect-ratio:1/1;z-index:-1;position:absolute;translate:-50% -50%;inset:50%;animation:rotate 1s linear infinite;opacity:1}.btn_div{grid-column:span 2}label:has(span[data-article_amount]){display:flex}th,td,p{margin:0;padding:0}.draggable[draggable=true]{padding:1rem;border:1px solid #000;cursor:move}.draggable.dragging{opacity:.5}end-customer-calculation{table.table_endkundenpreis { border-spacing: 20px 0px; width: 100%; margin-bottom: 20px; input:not([type="text"]) { text-align: right; } tbody { background: var(--BG_GREY_LIGHT); .title { font-size: 18px; margin-top: 10px; color: white; font-weight: bold; width: 100%; text-align: left; background: var(--BG_ACTIVE_BLUE_LIGHT); margin-bottom: 5px; } } th, td { padding: 10px 40px; } th { background: var(--BG_ACTIVE_BLUE_LIGHT); color: var(--COLOR_PRIMARY_LIGHT); h1:first-child { text-align: left; } } th:nth-child(even):not(.tcenter) { padding: 10px 40px 30px 10px; width: 17%; text-align: right; } table-entry, table-entry-input, .table_flex { display: flex; justify-content: center; flex-direction: inherit; align-items: baseline; } td { border-top: 2px solid white; } tr { p.anmerkung { font-size: 11px; font-style: italic; } &.zwischenergebnis { background: var(--_green_light); p[data-value] { font-weight: bold; } } &.gesamtergebnis { background: var(--_green_dark); p[data-value] { font-weight: bold; } } &.vat { td>div { display: flex; justify-content: center; align-items: baseline; flex-direction: inherit; .hinweis_qc { line-height: 1rem; margin-left: 10px; } .flex { display: flex; align-items: center; } input { width: 45px; height: 25px; margin: 0; text-align: right; } div { display: flex; align-items: center; } } } } } &:has( input:required:invalid ) button:not(#move_fk) { pointer-events: none; opacity: 0.5; }}.full_width{width:100%;padding-right:20px}.table_symbol_right{float:right;padding:0 .5rem}h2{font-size:16px;color:var(--COLOR_ACCENT_LIGHT);border-bottom:2px solid var(--COLOR_ACCENT_LIGHT);font-weight:700;width:100%;line-height:30px}.leiste{background:var(--COLOR_PRIMARY_LIGHT);padding:10px}.drei_spalten{display:grid;grid-template-columns:33% 33% 33%;gap:3px;width:100%;align-items:center;.label { align-self: baseline; }}.zwei-spalten-breit{grid-column:span 2}additional-remarks{textarea { height: 100%; min-height: 110px; } .greybox input { text-align: left; }}textarea{font-size:.8rem;width:100%;padding:5px}input.width_small{width:25%}.dragging{opacity:.5}.zusatzfeld_remove{position:relative;display:flex;justify-content:center;align-items:center;button { position: absolute; right: -10px; }}.zusatzfeld_move{position:relative;i { position: absolute; left: 20px; top: 17px; }}quick-calc .zwei-spalten{align-items:center;p:first-child { text-align:right; }}speicherauslegungs-sheet{position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;background-color:var(--BG_OVERLAY);z-index:20;.row { background: var(--BG_WHITE); padding: 20px; display: flex; flex-direction: column; gap: 10px; max-height: 80%; overflow-y: scroll; } div:has(>.apply_and_close) { display: flex; justify-content: center; padding: 20px 0px; }}cart-shipping_costs:has([data-type=self_pickup] input:checked ) [data-type=choose_date]{opacity:.6;pointer-events:none}cart-shipping_costs:has([data-type=self_pickup] input:checked ) [data-type=delivery_type],[data-type=delivery_type] select:not([data-country=deutschland]){option[value="fix_10"], option[value="fix_12"], option[value="fix_standard"] { display: none; }}notify-manager{width:100%;display:flex;flex-direction:column-reverse;background:0 0;border:none;padding:0;margin:0;z-index:100000;&:has(notify-banner) { position:sticky; overflow-y:hidden; justify-content:end; position:fixed; bottom:0px; } &:has(notify-popup[data-state="showing"]) { height:100vh; justify-content:center; align-items:center; background:var(--BG_SHADOW); &::backdrop { backdrop-filter:blur(2px); } notify-banner { position:absolute; bottom:0; width:100%; } }}notify-popup{flex-direction:column;max-width:60%;div:has( button img) { button { width:100%; background:var(--BG_NEUTRAL); &:hover { background:var(--BG_NEUTRAL_HOVER); } } img { max-height:42px; width:auto; } } table { border-collapse:collapse; th,td { border:1px solid; padding:5px; text-align:left; font-size:13px; } td { font-weight:normal; } }}notify-popup[data-state=showing]+notify-popup{display:none}notify-banner{flex-direction:row}notify-banner,notify-popup{display:block;opacity:0;border-width:0;transition:all var(--fade_duration)allow-discrete;display:flex;align-items:center;justify-content:space-between;height:0;max-height:70%;gap:10px;&.img_only { cursor: pointer; } div:first-child { overflow-y: auto; overflow-x: hidden; } .content_wrapper { width: 100%; text-align: center; } &[data-state=showing], &[data-state=fade_in] { opacity: 1; border: 2px solid var(--border_color); &:not(.img_only) { padding: 20px 5%; } height: auto; isolation: isolate; } &[data-prio_type=warning] { font-weight: 700; background: var(--BG_WARNING); --border_color: var(--COLOR_ERROR_DARK); p { text-align: center; } } &[data-prio_type=confirm] { font-weight: 700; background: var(--BG_CONFIRM); --border_color: var(--COLOR_CONFIRM_DARK); p { text-align: center; } } &[data-prio_type=info], &[data-prio_type=confirm_order] { font-weight: normal; --border_color: var(--COLOR_PRIMARY_DARK); background: var(--BG_GREY_LIGHT); background-repeat: no-repeat; background-size: cover; p { text-align: left; } } &[data-prio_type=confirm_order] p { text-align: center; } h1[data-name="title-popup"] { text-align: center; } div:has(button) { display: flex; gap: 10px; } img { width: 100%; } ul { margin: 20px 0px; li { margin-left: 25px; text-align: left; } } table { margin: 20px 0px; }}@-moz-document url-prefix(){notify-manager:has(notify-bannew){height:100%;position:fixed}}product-list-renderer,[data-article_row_grid=modules],shop-article,label[data-article_row_grid]{width:100%;max-width:100%;box-sizing:border-box}shop-article{display:block;background-color:var(--_grey_light);&:hover { background-color:var(--BG_GREY); } .label:has(h5):hover { background:var(--BG_GREY); position:relative; +div,+div+div { background:var(--BG_GREY); } } &[data-included_inverter="true"] { position:relative; border:2px solid var(--COLOR_ERROR_DARK); opacity:0.8; } &[data-detail_loaded="false"]::before { content:""; border:5px solid; border-color:var(--COLOR_ACCENT_LIGHT) transparent transparent transparent; border-radius:50px; width:50px; aspect-ratio:1/1; z-index:1; position:absolute; translate:-50% -50%; inset:50%; animation:rotate 1s linear infinite; opacity:0; } & p,h5 { margin:0; } .demo { background-color:var(--_grey_middle); width:100%; text-align:center; padding:5px; &::before { content:"DEMO"; } } &>label { --max_height:45px; display:grid; gap:var(--gap); align-items:center; justify-items:center; height:var(--max_height); cursor:pointer; h5 { font-size:1em; font-weight:normal; } .label p { font-size:0.8em; } & input[name=toggle_details] { display:none; } &>img { padding:5px; max-height:var(--max_height); } .label { justify-self:start; overflow:hidden; max-width:100%; padding-right:20px; h5,p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } &:hover { max-width:unset; background:var(--BG_GREY); } } & [data-type=foil] { width:20px; aspect-ratio:1/1; background:#333333; border-style:solid; border-width:0 0 18px 18px; &[data-frame_color="black"] { background:#333333; } &[data-frame_color="white"] { background:#eeeeee; } &[data-frame_color="blue"] { background:var(--BG_ACTIVE_BLUE_LIGHT); } &[data-foil_color="white"] { border-color:transparent transparent white transparent; } &[data-foil_color="black"] { border-color:transparent transparent var(--black) transparent; } &[data-foil_color="black"] { border-color:transparent transparent var(--black) transparent; } &[data-foil_color="transparent"] { border-color:transparent transparent rgb(141,141,141) transparent; } } & [data-type=technic] { display:flex; justify-content:space-between; width:100%; font-size:12px; } & .cart { display:flex; gap:var(--gap); align-items:center; & input { width:100%; } &:has(input:invalid) button { pointer-events:none; } &:has(input[data-hidden="true"]) { width:100%; button { width:80%; } } } & .amount { display:grid; grid-template-columns:50px 1fr; align-items:center; gap:5px; } } &>section { display:none; padding:5px; gap:5px; opacity:0; transition:opacity 1s; --chart_height:130px; grid-template-columns:15% 59% 25%; & [data-container] { background-color:white; padding:5px 15px; } & [data-container=prod_img] { display:flex; align-items:center; flex-direction:column; padding-top:20px; justify-content:space-around; cursor:pointer; & img { max-height:var(--chart_height); &:hover { opacity:0.6; } } img:not(:first-child) { display:none; } i { align-self:flex-end; color:var(--COLOR_PRIMARY_DARK); } } & [data-container=stock] { display:grid; grid-template-rows:auto 1fr; [data-type=chart] { height:var(--chart_height); text-align:center; padding:10px 0px; } & .bb-tooltip .name>span { display:none; } & .bb-tooltip .value { font-weight:bold; } & [class="container_available"] { display:none; } .bb path,.bb line { stroke:#c4c4c4; } .bb-axis-y { .domain,.tick line { display:none; } } line.bb-ygrid { stroke:#ebebeb; stroke-dasharray:none; z-index:0; } } & [data-container=technical_data] { flex-grow:1; display:flex; flex-direction:column; &>[data-open=product_sheet] { display:flex; align-items:flex-start; gap:20px; } &>.data { display:grid; grid-template-columns:1fr 1fr; margin-bottom:auto; margin-bottom:20px; &:nth-child(2n+1)::after { content:":"; } } } & h3 { flex-grow:1; font-size:14px; font-weight:bold; line-height:1.5; color:var(--COLOR_PRIMARY_SUPER_DARK); border-bottom:2px solid var(--COLOR_ACCENT_LIGHT); } .container_available { display:flex; justify-content:center; } & [class^="available"] { width:fit-content; padding:8px 15px; margin-top:8px; font-size:13px; } & .available_3 { background-color:var(--BG_WARNING); } & .available_2 { background-color:var(--BG_REQUIRED); } & .available_1 { background-color:var(--BG_SUM); } } &:has(input[name=toggle_details]:checked) { &::before { opacity:1; } &>section { display:grid; opacity:1; } } &[data-detail_loaded=true]>section { opacity:1; } &[data-collapsed=always] { &::before { opacity:0!important; } &>label { cursor:default; } &>section { display:none!important; } } &[data-available_later="1"] .available_1 { display:block; } &[data-available_later="2"] .available_2 { display:block; } &[data-available_later="3"] .available_3 { display:block; } .info-shipping,.article-banner { background:var(--BG_WARNING); text-align:center; padding:5px; } [data-type="chart"] { position:relative; [data-type="current_value"]::after { content:" "; position:absolute; top:100%; left:50%; margin-left:-5px; border-width:5px; border-style:solid; border-color:var(--BG_ACTIVE_BLUE_LIGHT) transparent transparent transparent; } [data-type=bar_container] { width:100%; margin:0 auto; display:flex; div:has([data-type="bars"]) { width:100%; } } [data-type=y_axis] { display:flex; flex-direction:column; justify-content:space-between; margin-right:10px; text-align:right; font-size:11px; line-height:normal; div::after { content:""; border-bottom:1px solid var(--COLOR_PRIMARY_MIDDLE); width:92%; z-index:1; display:block; position:absolute; margin-top:-5px; margin-left:35px; } } [data-type=bars] { display:flex; align-items:end; height:100%; & .bar { background-color:var(--COLOR_PRIMARY_MIDDLE); text-align:right; color:white; font-weight:bold; width:calc(100%/181); outline:1px solid white; z-index:1; &:hover { background-color:var(--BG_ACTIVE_BLUE_LIGHT); } &:last-child { border-right:2px solid white; } } } [data-type=x_axis] { display:flex; justify-content:space-between; border-top:2px solid var(--COLOR_PRIMARY_MIDDLE); & div { text-align:left; width:calc(100%/15); font-size:11px; } } [data-type=current_value] { position:absolute; background-color:var(--BG_ACTIVE_BLUE_LIGHT); color:white; padding:5px; visibility:hidden; pointer-events:none; transform:translate(-50%,-100%); white-space:nowrap; font-size:0.7em; z-index:3; } } &[data-special_case="bargain_sales"] { background-color:var(--BG_WARNING); } &[data-special_case="special_offer"] { background-color:var(--BG_SUM); } &:has(overlay-element) { overlay-element p { opacity:100%; transition:all ease-in-out 0.2s; } &:hover { overlay-element p { opacity:0; } } .fa-trash { display:none; } }}[data-article_row_grid]{--gap:5px}[data-article_row_grid=modules]{grid-template-columns:83px auto 100px 60px 100px 100px 100px 100px 103px}[data-article_row_grid=inverter]{grid-template-columns:83px auto calc(160px + var(--gap,5))100px 100px 100px 100px 103px}[data-article_row_grid=inverter_accessories],[data-article_row_grid=battery_accessories],[data-article_row_grid=system_accessories],[data-article_row_grid=mounting_material],[data-article_row_grid=mounting_systems],[data-article_row_grid=mounting_systems],[data-article_row_grid=bargain_sales],[data-article_row_grid=special_offers],[data-article_row_grid=all]{grid-template-columns:83px auto 100px 100px 103px}[data-article_row_grid=bundles]{grid-template-columns:83px auto 100px 103px}[data-article_row_grid=mounting_systems]>label:has([value="stock.value.0"]){display:none}[data-article_row_grid=performance_optimizer]{grid-template-columns:83px auto 50px 100px 150px 100px 103px}[data-article_row_grid=battery]{grid-template-columns:83px auto 100px 100px 100px 100px 100px 103px}[data-article_row_grid=e_mobility]{grid-template-columns:83px auto 100px 100px 100px 100px 100px 100px}[data-article_row_grid=battery_packages]{grid-template-columns:83px auto 90px 90px 100px 100px 103px}product-sheet>.frame>shop-article{&:first-of-type { background-color:unset; &:hover { background-color:unset; } &>section { display:grid; grid-template-columns:1fr 3fr 2fr; } } [data-container=stock] { grid-template-rows:auto 1fr 50px; height:fit-content; } [data-open=product_sheet]>button { display:none; } [data-container=stock] .container_available { display:block; margin:0 auto; } [data-container=technical_data] .container_available { display:none; }}body:has(product-sheet){quick-shop, quick-calc, qp-footer { display: none }}body:has(shopping-cart):not(.without_extra_elements){quick-shop, .logoleiste, .sitemap { display: none } #content { min-height: 0; }}product-sheet{background-color:#fff;position:absolute;z-index:1000}product-sheet,speicherauslegungs-sheet{width:100%;height:100%;padding:20px 15%;&>.frame { border: 2px solid black; padding: 10px 30px; &>a { display: block; text-decoration: underline; } } & .heading { display: flex; justify-content: space-between; background-color: var(--BG_ACTIVE_BLUE_LIGHT); & h2 { color: #ffffff; font-size: 18px; font-weight: bold; margin: 0px; padding: 15px 20px; } } & .title { font-size: 16px; font-weight: bold; line-height: 30px; color: var(--_blue_light); border-bottom: 2px solid var(--_blue_light); } .article_list { display: grid; gap: 3px; shop-article:not(:has(.cart)) label { grid-template-columns: 83px auto 100px; } } & sort-row { --disabled_color: #ffffff; --primary_color: #ffffff; & :nth-child(1), & :nth-child(2) { visibility: hidden; } & * { pointer-events: none; cursor: default; } } [data-type="close"] { color: var(--COLOR_NEUTRAL_LIGHT); padding: 0px 20px; }}.lupe::after{position:absolute;right:0;bottom:5px;content:"\f002";font-size:18px;width:32px;height:32px;line-height:32px;color:#ccc;font-family:FontAwesome;background:#fff}full-size-img{width:100%;height:100vh;position:fixed;top:0;left:0;display:flex;align-items:flex-end;justify-content:center;background:#fff;z-index:1001;flex-direction:column;padding:5%;div:not(.flex):not(.arrow_img) { width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; justify-content:center; } img { max-height:70vh; } img:not([data-state="active"]) { display:none; } .arrow_img { --margin_vertical:0px; --margin_horizontal:0px; --_margin_v_factor:1; --_margin_h_factor:1; border-style:solid; border-width:0 3px 3px 0; border-color:var(--color_neutral_dark); padding:10px; width:10px; height:10px; cursor:pointer; translate:calc(var(--margin_horizontal)* var(--_margin_h_factor)) calc(var(--margin_vertical)* var(--_margin_v_factor)); &[data-direction="left"] { rotate:135deg; --_margin_h_factor:-1; } &[data-direction="right"] { rotate:-45deg; } } .flex { flex-direction:row; } h3 { width:auto; }}no-result{background-image:url(/static/img/hint_no_result.jpg);height:540px;width:100%;padding:25px;background-repeat:no-repeat;background-size:100% 100%; *{ margin: 10px 0; }}string-design-inputs,quick-draw-inputs,shop-filter{display:block;min-width:250px;max-width:450px;margin-bottom:2rem;overflow-y:auto;max-height:85vh;transition:all .3s ease-in-out;&.fixed { max-height: 95vh; position: sticky; top: 0; padding-top: 50px; } --min_product_group_width: 120px;p { margin: 0; line-break: auto; word-wrap: break-word; } .title { display: flex; justify-content: space-between; align-items: center; } .title button { height: fit-content; padding: 8px; display: none; } &:has(+ div shop-article[data-included_inverter="true"])::after { content: ""; pointer-events: none; background: red; height: 100%; width: 100%; } :has(filter-manufacturer input:checked, .unique_filter input:checked, input[name="product_group_search_all"]:valid, fieldset[data-type="product_group_search_current"] input:valid) .title button { display: block; } .title button.visible { display: block; } .title.dot_has_active_filter button { display: block; } fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 3px; border: 0; margin: 0; padding: 0; p, label p, input[type="search"], input[type="checkbox"]::before { font-size: 11px; } button { min-width: 60px; } label[data-option_path=is_special_offers] input, label[data-option_path=is_bargain_sale] input { height: 0; padding: 0; margin: 0; } } fieldset input { appearance: none; margin: 0; } fieldset input:not([name="manufacturer"]):not([type=date]):not([type=checkbox]:has(+img)) { &::before { content: attr(data-label); display: block; text-align: center; background-color: var(--COLOR_PRIMARY_MIDDLE); font-size: 13px; line-height: 19.5px; padding: 5px; cursor: pointer; } &:checked::before { background-color: var(--COLOR_ACTIVE_DARK); color: var(--COLOR_NEUTRAL_LIGHT); } &:not(:checked):hover::before { background-color: var(--COLOR_PRIMARY_LIGHT); } } [data-type="cross_product_group_search"], [data-type=""] { display: flex; gap: 20px; margin: 20px 0; input { width: 100%; padding: 5px; } } [data-type="cross_product_group_search"] button { min-width: 70px; } [data-type="text"], [data-type="product_group_search_current"], [data-type="product_group_available"], [data-type="min_max"], [data-type="number"], [data-type="quick-draw"], [data-type="bool"], [data-type="dropdown"] { display: grid; grid-template-columns: 33% auto; background-color: var(--COLOR_PRIMARY_LIGHT); margin-top: 15px; align-items: center; padding: 10px; & [data-type="input_container"] { display: flex; justify-content: space-between; --_gap: 5px; gap: var(--_gap); align-items: center; >* { padding: 5px; margin: 0; } >select, >input { width: clamp(35px, 100%, 180px); font-weight: bold; } >input { text-align: end; } .unit { width: 4em; } } [data-type="date_chooser"] { display: flex; justify-content: space-between; align-items: center; gap: 20px; &>label { padding: 10px 15px; background-color: var(--COLOR_PRIMARY_MIDDLE); font-size: 13px; margin-top: 3px; input { display: none; } } } input:invalid+button { pointer-events: none; box-shadow: none; border: 1px solid var(--COLOR_PRIMARY_MIDDLE); --background: var(--BG_DISABLED); color: var(--COLOR_PRIMARY_DARK); padding: 7px 10px; &+button { display: none; } } &:has(input[type=search]:placeholder-shown) [data-type="date_chooser"] { display: none; } } [data-type="min_max"], [data-type="number"], [data-type="quick-draw"], [data-type="bool"], [data-type="dropdown"] { margin-top: 2px; gap: 15px; } [data-type="quick-draw"] [data-type="input_container"], [data-type="bool"] [data-type="input_container"] { flex-wrap: wrap; >select, >input { flex-basis: calc(50% - var(--_gap)); flex-grow: 1; padding: 0; &[type="number"] { padding: revert; } &::before { background-color: var(--COLOR_PRIMARY_MIDDLE); } &:not([data-type="bool"]:checked):hover::before { background-color: var(--COLOR_PRIMARY_LIGHT); } } } [data-type="dropdown"] { grid-template-columns: 1fr; &>p { display: none; } [data-type="input_container"]>select { width: 100%; } } input[type="checkbox"][data-type="bool"] { display: block; } &:has(overlay-element) { overflow: hidden; * { pointer-events: none; } } [legend=undefined] { display: none; }}product-groups-select{label { cursor: pointer; background-color: var(--BG_NOT_ACTIVE); input { visibility: hidden; display: none; } img { padding: 10px; } p { text-align: center; background-color: var(--COLOR_ACCENT_DARK); color: white; margin: 0; padding: 6px 0; font-size: 13px; } &:has(input:checked) { background-color: var(--COLOR_ACCENT_DARK); img { filter: brightness(1.5); } } &:hover { background-color: var(--COLOR_PRIMARY_LIGHT); } }}filter-manufacturer,filter-manufacturer-battery-packages,[data-type=discounted_groups]:not([legend=Angebote]){label { cursor: pointer; background-color: var(--COLOR_PRIMARY_MIDDLE); border: 3px solid transparent; aspect-ratio: 16 / 9; input { visibility: hidden; display: none; } img { padding: 20px; max-height: 100%; } &:has(input:checked) { background-color: var(--COLOR_PRIMARY_LIGHT); border: 3px solid var(--COLOR_ACCENT_DARK); } &:hover { background-color: var(--COLOR_PRIMARY_LIGHT); } &:has(input:disabled) { pointer-events: none; background-color: var(--BG_DISABLED); opacity: 0.7; } }}[data-type=discounted_groups]{.input_container { label { background-color: var(--COLOR_PRIMARY_LIGHT); text-align: center; display: flex; flex-direction: column; justify-content: space-between; &:hover { background-color: var(--COLOR_NEUTRAL_LIGHT); } } img { padding: 10px; max-height: 100px; } p { color: var(--COLOR_NEUTRAL_LIGHT); background-color: var(--COLOR_ACCENT_DARK); padding: 5px; line-height: 1.5; font-size: 13px; } } label:has(input:checked) { background-color: var(--COLOR_NEUTRAL_LIGHT); border: 3px solid var(--COLOR_NEUTRAL_DARK); }}string-design-inputs,quick-draw-inputs,filter-group{legend { margin-bottom: 10px; font-size: 16px; color: var(--COLOR_ACCENT_LIGHT); border-bottom: 2px solid var(--COLOR_ACCENT_LIGHT); font-weight: bold; width: 100%; line-height: 30px; } &[data-layout="grid"]:not([data-type="discounted_groups"]) .input_container { display: grid; grid-template-columns: repeat(3, minmax(var(--min_product_group_width), 1fr)); gap: 3px; } &[data-layout="grid"][data-type="discounted_groups"] fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 3px; }}quick-shop-qc[product_group=null] shop-filter{max-width:60vw;width:60vw;--min_product_group_width:10px}product-groups-select[product_group=null] filter-group{&[data-layout="grid"] .input_container { display: grid; grid-template-columns: repeat(6, minmax(var(--min_product_group_width), 1fr)); gap: 3px; }}.loading{background:var(--BG_SHADOW);display:flex;align-items:center;justify-content:center;position:absolute;height:100%;z-index:1000;i { position: fixed; }}@media screen and (max-width:1600px){string-design-inputs,quick-draw-inputs,filter-group{&[data-layout="grid"] .input_container { grid-template-columns: 1fr 1fr; } & [data-type="bool"] [data-type="input_container"] { >select, >input { flex-basis: 100%; } }}quick-draw-inputs[data-type=quick-draw] [data-type=input_container]{>select, >input { flex-basis: 70%; }}filter-group{&[data-layout="grid"] .input_container { grid-template-columns: 1fr 1fr; }}filter-manufacturer,[data-type=discounted_groups]:not([legend=Angebote]){& label { img { padding: 10px; } }}}fieldset.mounting_systems{display:grid;grid-template-columns:33% 1fr;gap:3px;align-items:center;background-color:#f2f2f2;padding:4px;div { display: flex; align-items: center; label { flex-grow: 1; padding: 3px; text-align: center; cursor: pointer; } } p { font-size: 13px; }}.unique_filter:has([value=schraegdach]:checked){ [data-option=schraegdach] { display: flex; }}.unique_filter:has([value=flachdach]:checked){ [data-option=flachdach] { display: flex; }}.unique_filter fieldset[data-type=bool] [data-type=input_container]:has(input[type=checkbox]:nth-of-type(2)){display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:5px;align-items:stretch}.unique_filter fieldset[data-type=bool] input[type=checkbox]::before{display:flex!important;align-items:center;justify-content:center;height:100%;text-align:center;white-space:normal}.optiongroup_neu.optiongroup_neu.optiongroup_neu{display:none;flex-direction:column;gap:2px;margin:2px 0;>.option_neu { display: grid; grid-template-columns: 33% repeat(auto-fit, minmax(100px, 1fr)); gap: 3px; background: var(--light_grey); min-height: 33.5px; align-items: center; padding: 4px; >input { display: none; } }}shop-filter:has(+div tab-bar-full-width section:first-child[aria-current=true]):has(+div shopping-cart-preview#preview_tab_inverter_0 .no_articles),shop-filter:has(+div tab-bar-full-width section:last-child[aria-current=true]):has(+div shopping-cart-preview#preview_tab_inverter_1 .no_articles),shop-filter:has(+div tab-bar-full-width section:last-child[aria-current=true]):has(+div shopping-cart-preview#preview_tab_inverter_1 shop-article:not([data-included_inverter=true])),shop-filter:has(+div tab-bar-full-width section:first-child[aria-current=true]):has(+div shopping-cart-preview#preview_tab_inverter_0 shop-article:not([data-included_inverter=true])){overlay-element { display: none; } * { pointer-events: all !important; }}shop-filter{padding-right:15px;max-width:100%;width:100%}shop-filter:has(input[value=show_active]:checked) .unique_filter{fieldset[data-type="bool"]:has(input:not(:checked)), fieldset[data-type="min_max"]:not([data-active="true"]), fieldset[data-type="number"]:not([data-active="true"]) { display: none; }}shopping-cart-preview,shopping-cart{display:grid;gap:5px;& .no_articles { background-color: var(--BG_GREY_LIGHT); padding: 15px 25px; margin: 0; } & :is(cart-title, cart-title-selection) { display: grid; gap: 10px; grid-template-columns: 30px 1fr auto; align-items: center; &>* { margin: 0; } [data-type=article_amount]::before { content: "(" attr(data-amount) ")"; } } &:not(:has(shop-article)) cart-title-selection>button { pointer-events: none; box-shadow: none; border: 1px solid var(--COLOR_PRIMARY_MIDDLE); --background: var(--BG_DISABLED); color: var(--COLOR_PRIMARY_DARK); padding: 7px 10px; } input:read-only { background: transparent; border: none; pointer-events: none; box-shadow: none; }}shop-filter.fixed+div shopping-cart-preview{padding-top:50px}shop-filter.fixed+div:has(tab-bar-full-width) shopping-cart-preview{padding-top:53px}shopping-cart-preview{position:sticky;top:0;background-color:#fff;padding-bottom:1em;z-index:2;transition:all .3s ease-in-out;&.demo { [data-type=article_amount]::before { content: "(0)"; } & cart-title-selection>button { pointer-events: none; background-color: grey; } .panel { text-align: center; background-color: var(--BG_GREY); } & shop-article { display: none; } p:not(.main_text) { line-height: 2; } } &.without_extra_elements { & cart-title-selection { display: none; } }}quick-shop-qc shopping-cart-preview.without_extra_elements{& cart-title-selection [data-type=article_amount] { display: none; } & cart-title-selection>button { display: none; } & cart-title-selection { display: grid; }}shopping-cart{.shop_title { display: flex; align-items: center; } .without_extra_elements, .panel { display: flex; flex-direction: column; gap: 35px; background-color: white; padding: 15px 7px; overflow-y: auto; } &:not(.without_extra_elements) { display: flex; flex-direction: column; gap: 16px; padding: 19px 30px; inset: 0; background-color: var(--BG_GREY_LIGHT); } [data-type^=sum] { background-color: var(--BG_SUM); } & cart-selection { & cart-title-selection button { display: none; } & [data-group] { display: grid; gap: 3px; & h3 { color: var(--COLOR_ACCENT_LIGHT); border-bottom: 2px solid; margin: 15px 0 10px; padding-bottom: 5px; &+p { font-size: 13px; font-weight: bold; margin: 0 0 10px 0; display: none; } } & .flex { justify-content: flex-end; [data-type=sum_power] { display: none; } } &:is([data-group=modules], [data-group=inverter]) .flex { display: flex; justify-content: space-between; [data-type=sum_power] { display: block; } } &:is([data-group=bargain_sales]) h3+p { display: block; } } & .container_total_price { margin-top: 10px; border-top: 2px solid; text-align: right; & [data-type=sum_total] { width: fit-content; margin-left: auto; } & .info { font-size: 11px; font-style: italic; } } & [data-type^=sum] { margin: 0; padding: 10px; & span { font-weight: bold; } } & shop-article>label { cursor: default; } & shop-article[data-article_id]>label[data-article_row_grid]+section { display: none; } } & :is(cart-shipping_costs, cart-order) { display: flex; flex-direction: column; gap: 13px; &>div { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 5px; --checkbox_padding: 8px; & h4 { color: var(--COLOR_ACCENT_LIGHT); border-bottom: 2px solid var(--COLOR_ACCENT_LIGHT); margin: 0 0 10px 0; } & .inactive, &.inactive { opacity: 0.5; cursor: default; pointer-events: none; position: relative; &::before { z-index: 1; } } & label.highlight { --border: 0px; &:has([name]:checked) { background-color: var(--BG_ACTIVE_BLUE); color: white; } } &>[data-type] { display: grid; grid-template-rows: auto 1fr; .box { background-color: var(--BG_NOT_ACTIVE_GREY); padding: 10px 20px; } } & label:has(:is(input[type=checkbox], input[type=radio])) { --border: 3px; display: block; background-color: var(--BG_NOT_ACTIVE); cursor: pointer; padding: calc(var(--checkbox_padding) - var(--border)); text-align: center; border: var(--border) solid transparent; display: flex; justify-content: center; align-items: center; &:hover { background-color: var(--BG_NOT_ACTIVE_HOVER); } &:has(input:required:invalid) { background: var(--BG_REQUIRED); border: 2px solid var(--COLOR_ACCENT_REQUIRED); } &:not(.highlight):not(:has(:disabled)) { &:hover { background-color: var(--BG_NOT_ACTIVE_HOVER); } &:has(:checked) { border-color: var(--COLOR_ACCENT_DARK); background-color: var(--BG_CHECKED); } } &:has(:disabled) { cursor: default; pointer-events: none; opacity: 0.5; } & input { display: none; } } } } & cart-shipping_costs { &>div { & label { display: grid; grid-template-columns: 30% 1fr; gap: 10px; } &>[data-type=termin] { [data-type=choose_date] { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 10px; & [data-type='auto'] { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; &[data-active=true] { color: #ddd; } } & [data-type='manuell'] { display: flex; justify-content: center; align-items: center; gap: 10px; & input { width: 90px; float: right } &[data-active=true] { color: #ddd; } } & p { margin: 0; } & .date { font-size: medium; font-weight: bold; } &:has([value=manuell]:checked) [data-type=manuell] input { cursor: pointer; } } & [data-label=packaging_costs] { display: none; } [data-type=delivery_type]:not(:has(option[value=auto]:checked)) p { visibility: hidden; } [data-type=avis] { &:has(option[value=no]:checked) [data-type=avis_extra] { visibility: hidden; } & [data-type=avis_extra] label { text-align: right; } } [data-type=extra_infos] { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; border-top: 2px solid white; padding-top: 10px; } } &>[data-type=delivery_address] { & .box { display: flex; flex-direction: column; gap: 5px; } & .buttons { display: flex; justify-content: space-between; align-items: center; } .labels { display: grid; grid-template-columns: 30% 1fr 4ch 4ch; gap: 5px; & label { grid-template-columns: subgrid; grid-column: 1 / -1; gap: inherit; align-items: center; & :is(input, select) { grid-column: 2 / -1; } } .street_container { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; &> :nth-child(1) { grid-column: 1 / 3; } &> :nth-child(2) { grid-column: 3 / 5; text-align: right; } } } } &>[data-type=shipping_costs] { & .box { display: flex; flex-direction: column; & p { margin: 0; } &>div { display: grid; grid-template-columns: 70% 1fr; padding: 10px; font-size: 13px; } &.blocked>div { opacity: 0.5; } & [data-label=packaging_costs] { display: none; } } } &:has([data-type=self_pickup] input:checked) { & [data-type=choose_date] [data-type=auto]>span { visibility: hidden; } & [data-label=packaging_costs] { display: block; } & [data-label=delivery] { display: none; } } & [data-type=check_data_calc_shipping_costs] { max-width: 100%; width: 400px; margin: 0 auto; cursor: pointer; } } .fa-calendar-days { cursor: pointer; } } cart-order, cart-shipping_costs { *:has(>i.fa-sharp-duotone) { width: 100%; } :not(#shopping_cart_download_invoice) { i.fa-sharp-duotone { left: 50%; } } i.fa-sharp-duotone { position: absolute !important; font-size: 30px; text-align: center; } } & cart-order { min-height: 700px; & cart-title { grid-template-columns: 1fr auto; .icon { display: none; } } & textarea { width: 100%; height: 100%; } & p { margin: 0; } & [data-type=payment_method] .box { display: grid; gap: 5px; text-align: center; } & [data-type=send] { &>div.box { display: flex; flex-direction: column; gap: 10px; padding-top: 0; } [data-type=sum_container] { text-align: right; padding: 15px; [data-type=sum_total] { padding-left: 2ch; font-weight: bold; } } [data-type=buttons] { display: flex; justify-content: space-between; max-width: 80%; margin-left: 10%; } } &:has([name=payment_method]:invalid) [data-type=send_order], &:has([name=payment_method]:invalid) [data-type=send_anfrage], &:has(.invalid) [data-type=send_anfrage] { pointer-events: none; box-shadow: none; border: 1px solid var(--COLOR_PRIMARY_MIDDLE); --background: var(--BG_DISABLED); color: var(--COLOR_PRIMARY_DARK); padding: 7px 10px; } &:not(:has(.invalid)) [data-type=send_anfrage]+.tooltip { display: none; } &>.antwort { display: flex; flex-direction: column; align-items: center; text-align: center; & .flex { display: flex; gap: 10px; } } &:has(div:hover > button[data-type="send_anfrage"]) textarea.invalid { background: var(--BG_REQUIRED); border: 1px solid var(--COLOR_ACCENT_REQUIRED); } .no-order { height: 100%; width: 100%; position: absolute; display: flex; align-items: center; justify-content: center; background: var(--BG_SHADOW); margin-left: -20px; color: var(--COLOR_ERROR_DARK); font-weight: bold; font-size: large; z-index: 1; } [data-type=send]:has(.no-order) .box { position: relative; [data-type=sum_container], [data-type=buttons] { filter: blur(10px); } } } cart-shipping_costs:has([data-type="delivery_address"] *:invalid) button[data-type="check_data_calc_shipping_costs"], cart-shipping_costs:has(button[data-type="check_data_calc_shipping_costs"]:not(.inactive))+cart-order { opacity: 0.5; pointer-events: none; } .container_abschluss_btn { display: flex; justify-content: center; width: 100%; margin-top: 10px; float: left; gap: 20px; & button { width: 100%; max-width: 200px; } } &:has(.antwort) { cart-shipping_costs, cart-selection, cart-order cart-title, button[data-type="close"] { display: none; } } [data-article_row_grid="mounting_systems"] p[data-type=price_per_piece] { grid-column: 5; } [data-type="order_sum_total"] { font-weight: bold; }}#ui-datepicker-div::after{content:'Der frühestmögliche Liefertermin ist von der aktuellen Auslastung der Fracht- und Abwicklungskapazitäten abhängig.';font-family:roboto condensed,sans-serif;font-size:.8em;line-height:1.3em;text-align:center;padding:10px 15px;background:#ffefc6;margin:-3px 0 3px}sort-row{--primary_color:var(--_grey_middle);--disabled_color:var(--_grey_light);--checked_color:var(--_blue_dark);--active_fg_color:#ffffff;--hover_color:var(--BG_NOT_ACTIVE_HOVER);display:grid;gap:var(--gap);align-items:center;border:2px solid var(--_grey_light);border-left:none;border-right:none;margin:3px 0;background:var(--_white);padding:3px 0;align-items:stretch;& label { background-color: var(--primary_color); padding: 7px 0; font-size: 13px; text-align: center; display: flex; align-items: center; justify-content: center; &:has(span) { display: flex; align-items: center; } input[type="radio"]+span { padding: 0; } &:hover:not(:has(:checked)):not(:has(:disabled)) .icon_row { background-color: var(--hover_color); } &:has(:disabled) { background-color: var(--disabled_color); } &:has(:checked) { background-color: var(--checked_color); color: var(--active_fg_color); position: relative; &::after { content: ""; position: absolute; border: 4px solid; border-color: transparent transparent var(--active_fg_color) transparent; right: 4px; top: 2px; opacity: 0.5; } &:has([data-order_direction="-1"])::after { rotate: 180deg; bottom: 2px; top: unset; } } p.flex { width: max-content; } } &> :has([value^=title]) { display: flex; gap: var(--gap); & label { padding-left: 15px; padding-right: 15px; } & :first-child { flex-grow: 1; text-align: left; } } & [data-container=view_switcher] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; padding: 7px 12px; & label { --row_height: 5px; --row_gap: 3px; display: flex; flex-direction: column; gap: var(--row_gap); background-color: unset; padding: unset; &::after { border: none; } &:hover .icon_row { background-color: var(--hover_color); } & .icon_row { background-color: var(--primary_color); width: 30px; height: var(--row_height); &.big { height: calc(var(--row_height) * 2 + var(--row_gap)); } } &:has(:checked) .icon_row { background-color: var(--checked_color); } } } & label:not(:has(:disabled)) { cursor: pointer; } & label:has([value="stock.value.0"]:checked) { cursor: default; pointer-events: none; } & input { display: none; } &+.personal_sorting_container { position: relative; margin-top: 20px; border: 1px solid #ccc; padding: 10px 15px; background: var(--BG_GREY_LIGHT); display: flex; flex-direction: column; .close_button { position: absolute; top: 10px; right: 10px; cursor: pointer; } .personal_sorting_window { display: flex; flex-direction: column; gap: 10px; margin: 20px 0px; } .criterion { display: grid; grid-template-columns: 1fr 3fr; gap: 10px; } .slider-container { display: flex; align-items: center; gap: 25px; } #apply_filters { align-self: center; } }}@media screen and (max-width:1500px){sort-row{div:has(label:hover input[value="personal_sorting"])+label { color:transparent; } label { &:has(input[value="personal_sorting"]) { max-width:50px; overflow-x:hidden; white-space:nowrap; display:flex; justify-content:flex-start; &:hover { z-index:1; overflow-x:visible; +label { color:transparent; } } } }}}/*!* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*
* billboard.js, JavaScript chart library
* https://naver.github.io/billboard.js/
*
* @version 3.16.0*/.bb svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.bb path,.bb line{fill:none;stroke:#000}.bb text,.bb .bb-button{-webkit-user-select:none;-moz-user-select:none;user-select:none}.bb-legend-item-tile,.bb-xgrid-focus,.bb-ygrid-focus,.bb-ygrid{shape-rendering:crispEdges}.bb-chart-arcs .bb-needle{fill:#000}.bb-chart-arc .bb-gauge-value{fill:#000}.bb-chart-arc path{stroke:#fff}.bb-chart-arc rect{stroke:#fff;stroke-width:1}.bb-chart-arc text{fill:#fff;font-size:13px}.bb-chart-funnels path{stroke-width:0}.bb-chart-funnels+.bb-chart-texts text{font-size:13px;fill:#fff}.bb-axis{shape-rendering:crispEdges}.bb-axis .bb-axis-x-tooltip,.bb-axis .bb-axis-y-tooltip,.bb-axis .bb-axis-y2-tooltip{font-size:1em;fill:#fff;white-space:nowrap}.bb-grid{pointer-events:none}.bb-grid line{stroke:#aaa}.bb-grid text{fill:#aaa}.bb-xgrid,.bb-ygrid{stroke-dasharray:3 3}.bb-text.bb-empty{fill:gray;font-size:2em}.bb-line{stroke-width:1px}.bb-circle._expanded_{stroke-width:1px;stroke:#fff}.bb-selected-circle{fill:#fff;stroke-width:2px}.bb-bar{stroke-width:0}.bb-bar._expanded_{fill-opacity:.75}.bb-candlestick{stroke-width:1px}.bb-candlestick._expanded_{fill-opacity:.75}.bb-target.bb-focused,.bb-circles.bb-focused{opacity:1}.bb-target.bb-focused path.bb-line,.bb-target.bb-focused path.bb-step,.bb-circles.bb-focused path.bb-line,.bb-circles.bb-focused path.bb-step{stroke-width:2px}.bb-target.bb-defocused,.bb-circles.bb-defocused{opacity:.3!important}.bb-target.bb-defocused .text-overlapping,.bb-circles.bb-defocused .text-overlapping{opacity:.05!important}.bb-region{fill:#4682b4}.bb-region rect{fill-opacity:.1}.bb-zoom-brush{fill-opacity:.1}.bb-brush .extent{fill-opacity:.1}.bb-legend-item{font-size:12px;user-select:none}.bb-legend-item-hidden{opacity:.15}.bb-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.bb-title{font:14px sans-serif}.bb-chart-treemaps rect{stroke:#fff;stroke-width:1px}.bb-tooltip-container{z-index:10;user-select:none;transform:translateZ(0)}.bb-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;opacity:.9;box-shadow:7px 7px 12px -9px #777;white-space:nowrap}.bb-tooltip tr{border:1px solid #ccc}.bb-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#fff}.bb-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.bb-tooltip td>span,.bb-tooltip td>svg{display:inline-block;width:10px;height:10px;margin-right:6px}.bb-tooltip.value{text-align:right}.bb-area{stroke-width:0;opacity:.2}.bb-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}text.bb-chart-arcs-gauge-title{dominant-baseline:middle;font-size:2.7em}.bb-chart-arcs{}.bb-chart-arcs .bb-chart-arcs-background{fill:#e0e0e0;stroke:#fff}.bb-chart-arcs .bb-chart-arcs-gauge-unit{fill:#000;font-size:16px}.bb-chart-arcs .bb-chart-arcs-gauge-max{fill:#777}.bb-chart-arcs .bb-chart-arcs-gauge-min{fill:#777}.bb-chart-arcs .bb-levels circle{fill:none;stroke:#848282;stroke-width:.5px}.bb-chart-arcs .bb-levels text{fill:#848282}.bb-chart-radars .bb-levels polygon{fill:none;stroke:#848282;stroke-width:.5px}.bb-chart-radars .bb-levels text{fill:#848282}.bb-chart-radars .bb-axis line{stroke:#848282;stroke-width:.5px}.bb-chart-radars .bb-axis text{font-size:1.15em;cursor:default}.bb-chart-radars .bb-shapes polygon{fill-opacity:.2;stroke-width:1px}.bb-button{position:absolute;top:10px;right:10px}.bb-button .bb-zoom-reset{font-size:11px;border:solid 1px #ccc;background-color:#fff;padding:5px;border-radius:5px;cursor:pointer}/*!* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*
* billboard.js, JavaScript chart library
* https://naver.github.io/billboard.js/
*
* @version 3.16.0*/.bb-color-pattern{background-image:url(#00c73c;#fa7171;#2ad0ff;#7294ce;#e3e448;#cc7e6e;#fb6ccf;#c98dff;#4aea99;#bbbbbb;)}.bb svg{font-size:12px;font-family:sans-serif,Arial,nanumgothic,dotum;line-height:1}.bb path,.bb line{fill:none;stroke:#c4c4c4}.bb text,.bb .bb-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:#555;font-size:11px}.bb-legend-item-title,.bb-xgrid-focus,.bb-ygrid-focus,.bb-ygrid{shape-rendering:crispEdges}.bb-chart-arcs .bb-needle{fill:#000}.bb-chart-funnels path{stroke-width:0}.bb-chart-funnels+.bb-chart-texts text{fill:#fff}.bb-axis{shape-rendering:crispEdges}.bb-axis .bb-axis-x-tooltip,.bb-axis .bb-axis-y-tooltip,.bb-axis .bb-axis-y2-tooltip{font-size:.9em;fill:#fff;white-space:nowrap}.bb-axis-y text,.bb-axis-y2 text{fill:#737373}.bb-event-rects{fill-opacity:1!important}.bb-event-rects .bb-event-rect{fill:transparent}.bb-event-rects .bb-event-rect._active_{fill:rgba(39,201,3,5%)}.tick._active_ text{fill:#00c83c!important}.bb-grid{pointer-events:none}.bb-grid line{stroke:#f1f1f1}.bb-xgrid-focus line,.bb-ygrid-focus line{stroke:#ddd}.bb-text.bb-empty{fill:#767676}.bb-line{stroke-width:1px}.bb-circle._expanded_{fill:#fff!important;stroke-width:2px;stroke:red}rect.bb-circle._expanded_,use.bb-circle._expanded_{stroke-width:1px}.bb-selected-circle{fill:#fff;stroke-width:2px}.bb-bar{stroke-width:0}.bb-bar._expanded_{fill-opacity:.75}.bb-candlestick{stroke-width:1px}.bb-candlestick._expanded_{fill-opacity:.75}.bb-target.bb-focused,.bb-circles.bb-focused{opacity:1}.bb-target.bb-focused path.bb-line,.bb-target.bb-focused path.bb-step,.bb-circles.bb-focused path.bb-line,.bb-circles.bb-focused path.bb-step{stroke-width:2px}.bb-target.bb-defocused,.bb-circles.bb-defocused{opacity:.3!important}.bb-target.bb-defocused .text-overlapping,.bb-circles.bb-defocused .text-overlapping{opacity:.05!important}.bb-region{fill:#4682b4}.bb-region rect{fill-opacity:.1}.bb-region.selected rect{fill:#27c903}.bb-zoom-brush{fill-opacity:.1}.bb-brush .extent{fill-opacity:.1}.bb-legend-item{user-select:none}.bb-legend-item-hidden{opacity:.15}.bb-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.bb-title{font-size:14px}.bb-chart-treemaps rect{stroke:#fff;stroke-width:1px}.bb-tooltip-container{z-index:10;font-family:sans-serif,Arial,nanumgothic,dotum;user-select:none;transform:translateZ(0)}.bb-tooltip{border-collapse:separate;border-spacing:0;empty-cells:show;border:1px solid #999;background-color:#fff;text-align:left;font-size:11px;white-space:nowrap}.bb-tooltip th{font-size:12px;padding:4px 8px;text-align:left;border-bottom:solid 1px #eee}.bb-tooltip td{padding:4px 6px;background-color:#fff}.bb-tooltip td:first-child{padding-left:8px}.bb-tooltip td:last-child{padding-right:8px}.bb-tooltip td>span,.bb-tooltip td>svg{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:5px;vertical-align:middle}.bb-tooltip td.value{border-left:1px solid transparent}.bb-tooltip .bb-tooltip-title{display:inline-block;color:#aaa;line-height:20px}.bb-tooltip .bb-tooltip-detail table{border-collapse:collapse;border-spacing:0}.bb-tooltip .bb-tooltip-detail .bb-tooltip-name,.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{font-size:11px;line-height:13px;padding:4px 0 3px;color:#444;text-align:left;font-weight:400}.bb-tooltip .bb-tooltip-detail .bb-tooltip-value{padding-left:5px;font-weight:800;font-size:12px}.bb-area{stroke-width:0;opacity:.2}.bb-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}text.bb-chart-arcs-gauge-title{dominant-baseline:middle;font-size:2.7em}.bb-chart-arcs{}.bb-chart-arcs .bb-chart-arcs-background{fill:#e0e0e0;stroke:none}.bb-chart-arcs .bb-chart-arcs-gauge-unit{fill:#000;font-size:16px}.bb-chart-arcs .bb-chart-arcs-gauge-min,.bb-chart-arcs .bb-chart-arcs-gauge-max{fill:#777}.bb-chart-arcs .bb-chart-arcs-title{font-size:16px!important;fill:#000;font-weight:600}.bb-chart-arcs path.empty{fill:#eaeaea;stroke-width:0}.bb-chart-arcs .bb-levels circle{fill:none;stroke:#848282;stroke-width:.5px}.bb-chart-arcs .bb-levels text{fill:#848282}.bb-chart-arc .bb-gauge-value{fill:#000}.bb-chart-arc path{stroke:#fff}.bb-chart-arc rect{stroke:#fff;stroke-width:1}.bb-chart-arc text{fill:#fff;font-size:13px}.bb-chart-radars .bb-levels polygon{fill:none;stroke:#848282;stroke-width:.5px}.bb-chart-radars .bb-levels text{fill:#848282}.bb-chart-radars .bb-axis line{stroke:#848282;stroke-width:.5px}.bb-chart-radars .bb-axis text{font-size:1.15em;cursor:default}.bb-chart-radars .bb-shapes polygon{fill-opacity:.2;stroke-width:1px}.bb-button{position:absolute;top:10px;right:10px}.bb-button .bb-zoom-reset{border:solid 1px #ccc;background-color:#fff;padding:5px;border-radius:5px;cursor:pointer}tooltip-element{display:none}*:has(>tooltip-element ){position:relative}*:hover>tooltip-element{display:inline-block;position:absolute;top:100%;background:var(--COLOR_NEUTRAL_LIGHT);border:1px solid var(--COLOR_PRIMARY_MIDDLE);padding:5px;width:fit-content;font-size:.6rem}adress-list{position:relative;margin-top:-250px;background:var(--BG_GREY_LIGHT);max-height:380px;overflow-y:scroll;padding:5px 20px;input:read-only,select[readonly] { pointer-events:none; box-shadow:none; border:none; background:transparent; } select[readonly]::-ms-expand { display:none; }}adress-element{background:var(--background);h4 input[type="text"] { color: var(--COLOR_ACCENT_LIGHT); font-size: inherit; font-weight: inherit; width: 100%; } div { display: flex; &:has(button) { margin: 10px 0px; grid-template-columns: 1fr 1fr 1fr; display: grid; gap: 15px; } } &:has(input:invalid) button { pointer-events: none; box-shadow: none; border: 1px solid var(--COLOR_PRIMARY_MIDDLE); background: var(--BG_DISABLED); color: var(--COLOR_PRIMARY_DARK); }}tab-bar{display:flex;--gap:5px;font-size:.8rem;border-bottom:3px solid var(--COLOR_ACCENT_DARK);gap:var(--gap);width:max-content;label { font-size: 0.8rem; }}tab-bar>.tabs{display:flex;gap:var(--gap);align-items:flex-end;flex-wrap:wrap}single-tab:not([aria-current=true]){text-decoration:underline;&:hover::before { background-color:var(--COLOR_PRIMARY_DARK); } input[type="text"] { background:transparent; border:none; box-shadow:none; min-height:25px; text-decoration:none; padding:0; width:fit-content; } &[data-finished="false"]::before{ border:1px solid var(--_yellow_dark); background-color:var(--_yellow_middle); }}single-tab,tab-bar .new_tab_button{color:var(--COLOR_NEUTRAL_DARK);display:flex;align-items:center;justify-content:center;padding:10px 15px;border:none;position:relative;isolation:isolate;&::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:var(--BG_NOT_ACTIVE_GREY); z-index:-1; } &:hover { cursor:pointer; &::before { background:var(--COLOR_PRIMARY_DARK); } } &[aria-current="true"] { color:var(--COLOR_NEUTRAL_LIGHT); cursor:default; padding-right:25px; padding-left:25px; z-index:1; &:not(:last-child) { margin-right:-5px; } &:not(:first-child) { margin-left:-5px; } &::before { background-color:var(--BG_ACTIVE_BLUE); transform:scaleY(1.1) translateY(-5%); } }}tab-bar .new_tab_button{width:max-content;&[aria-disabled="true"] { opacity: 0.56; }}single-tab>button{background:0 0;border:none;position:absolute;color:inherit;font-size:.7rem;font-weight:700;cursor:pointer;display:none;top:-10px;right:-5px;&:hover { color:var(--COLOR_ERROR_DARK); }}single-tab[aria-current=true]>button{display:block}single-tab{transition:all .3s ease-in-out;.content_container { display: flex; flex-direction: column; } .icon_text_container { display: flex; align-items: center; img { max-width: 2em; margin-left: -0.3em; } } .icon_text_container:has(img) { display: flex !important; gap: 3px; align-items: center; } .input_container { display: grid; grid-template-columns: auto 1fr; gap: 5px; align-items: center; display: flex; gap: 2px; } .input_container input[type="text"] { max-width: 100px; min-width: 50px; }}.icon_text_container p{margin:0}tab-bar:has(+div shopping-cart-preview){position:sticky;top:58px;width:100%;z-index:10;top:40px;padding-top:15px;background-color:var(--BG_WHITE);&:has(.tabs single-tab:nth-child(5)) { flex-wrap:wrap; justify-content:flex-end; top:60px; +div:has(shopping-cart-preview) { top:200px; +product-list-renderer .shop_title { top:245px; +sort-row { top:295px; } } } .tabs { width:100%; } .new_tab_button { position:absolute; bottom:20px; right:0; } } +div:has(shopping-cart-preview) { top:130px; position:sticky; shopping-cart-preview { padding-top:0!important; } +product-list-renderer .shop_title { top:180px; +sort-row { top:230px; } } } .input_container input[type="text"] { min-width:10px; max-width:35px; &:nth-child(4) { max-width:25px; } }}.hide_tab{display:none}