:root{--_blue_light:#36699d;--_blue_dark:#07203f;--_green_light:#e0f8dd;--_green_dark:#ccf3c8;--_red_light:#ffe5e5;--_red_dark:#900;--_black:#333;--_shadow_black:#0000001c;--_overlay_black:#00000096;--_white:#fff;--_yellow_light:#fff8e3;--_yellow_middle:#ffe38e;--_yellow_dark:#e4ad00;--yellow:#ffc905;--_yellow_shadow:#e4ad00;--_grey_super_light:#fdfdfd;--_grey_middle_light:#f9f9f9;--_grey_light:#f2f2f2;--_grey:#e9e9e9;--_grey_middle:#ddd;--_grey_dark:#dad7d7;--_grey_middle_dark:#b1b1b1;--_grey_super_dark:#6a6666;--COLOR_ACTIVE_DARK:var(--_blue_dark);--COLOR_PRIMARY_LIGHT:var(--_grey_light);--COLOR_PRIMARY_MIDDLE:var(--_grey_middle);--COLOR_PRIMARY_DARK:var(--_grey_dark);--COLOR_PRIMARY_SUPER_DARK:var(--_grey_super_dark);--COLOR_NEUTRAL_LIGHT:var(--_white);--COLOR_NEUTRAL_DARK:var(--_black);--COLOR_ACCENT_BLACK:var(--_shadow_black);--COLOR_ACCENT_LIGHT:var(--_blue_light);--COLOR_ACCENT_DARK:var(--_blue_dark);--COLOR_ERROR_DARK:var(--_red_dark);--COLOR_CONFIRM_DARK:var(--_green_dark);--COLOR_ACCENT_REQUIRED:var(--_yellow_dark);--BG_WHITE:var(--_white);--BG_NOT_ACTIVE_GREY:var(--_grey_light);--BG_ACTIVE_BLUE:var(--_blue_dark);--BG_ACTIVE_BLUE_LIGHT:var(--_blue_light);--BG_ACTIVE_INVERT:linear-gradient(var(--_yellow_dark), var(--_yellow_middle));--BG_ACTIVE:linear-gradient(var(--_yellow_middle), var(--_yellow_dark));--BG_ACTIVE_INVERT_HOVER:linear-gradient(var(--_yellow_middle), var(--_yellow_light));--BG_ACTIVE_HOVER:linear-gradient(var(--_yellow_light), var(--_yellow_middle));--BG_NEUTRAL:linear-gradient(var(--_grey_light), var(--_grey_middle_dark));--BG_NEUTRAL_HOVER:linear-gradient(var(--_grey_super_light), var(--_grey_dark));--BG_DISABLED:var(--_grey_light);--BG_SHADOW:var(--_shadow_black);--BG_OVERLAY:var(--_overlay_black);--BG_REQUIRED_SHADOW:var(--_yellow_shadow);--BG_REQUIRED:var(--_yellow_middle);--BG_GREY:var(--_grey_middle);--BG_GREY_MIDDLE:var(--_grey);--BG_GREY_LIGHT:var(--_grey_light);--BG_GREY_MIDDLE_LIGHT:var(var(--_grey_middle_light));--BG_NOT_ACTIVE:var(--_grey_middle);--BG_NOT_ACTIVE_HOVER:var(--_grey_middle_light);--BG_CHECKED:var(--_grey_middle_light);--BG_WARNING:var(--_red_light);--BG_CONFIRM:var(--_green_light);--BG_SUM:var(--_green_light);--BG_FINAL_SUM:var(--_green_dark);--BG_YELLOW_NORMAL:var(--yellow)}*,*::before,*::after{box-sizing:border-box}html:focus-within{scroll-behavior:smooth}html,body{width:100%}body{font-family:Arial,Helvetica,sans-serif;text-rendering:optimizeSpeed;margin:0;padding:0;display:flex;flex-direction:column;hyphens:auto}:where(ol,ul)[role=list]{list-style-type:none}section{content-visibility:auto}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.hidden,:not(i)[aria-hidden=true],*[data-hidden=true]{display:none!important}*[data-visually_hidden=true]{visibility:hidden}.visually_hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}[class*=flex_],[class*=flex-]{display:flex}.flex_center{align-items:center;justify-content:center}.flex{display:flex;align-items:center;&.end { justify-content: end; } &.gap { gap: 10px; } &.center { justify-content: center; } &.align-end { align-items: flex-end; }}.flex_column{flex-direction:column}[class*=-spalten],[class*=_spalten]{display:grid;&.align-start { align-items: start; } &.big-gap { gap: 25px; }}.zwei-spalten{grid-template-columns:1fr 1fr}.vier-spalten{grid-template-columns:1fr 1fr 1fr 1fr}@media screen and (max-width:1000px){.zwei-spalten{grid-template-columns:1fr}.vier-spalten{grid-template-columns:1fr;justify-items:stretch}}.tcenter{text-align:center}.arrow{--margin_vertical:0px;--margin_horizontal:0px;--_margin_v_factor:1;--_margin_h_factor:1;font-size:3rem;padding:20px;color:var(--COLOR_NEUTRAL_DARK);cursor:pointer;&:hover:not([aria-disabled="true"]) { i { font-weight:bold; } } &[aria-disabled="true"] { opacity:0.6; pointer-events:none; }}p,label{font-size:13px;line-height:1.5}a{font-size:.8rem;color:var(--COLOR_ACCENT_DARK);img:not(.no-border) { border-bottom:1px solid var(--COLOR_ACCENT_DARK); } &:hover { text-decoration:none; img { border:none; opacity:0.6; } }}h1,h3,h3{font-weight:700}input[type=password],input[type=email],input[type=text],input[type=number],input[type=search],input[type=date],input[type=tel],input[type=file],input[type=email],select,textarea{font-family:Arial,Helvetica,sans-serif;font-size:.8rem;color:#000;padding:5px;min-height:30px;--border_color:var(--COLOR_PRIMARY_DARK);--background:var(--_white);--shadow:var(--_shadow_black);border:1px solid var(--border_color);box-shadow:inset 2px 2px 1px var(--shadow);background-color:var(--background);width:100%;&:not([type="search"]):required:invalid:not([data-name="article-count"]),&[type="search"]:focus:invalid,&[data-name="article-count"]:focus:invalid { --border_color:var(--_yellow_dark); --background:var(--_yellow_middle); --shadow:var(--BG_REQUIRED_SHADOW); } &:focus { outline:none; } &:required:invalid+button { pointer-events:none; box-shadow:none; border:1px solid var(--COLOR_PRIMARY_MIDDLE); --background:var(--BG_DISABLED); color:var(--COLOR_PRIMARY_DARK); }}input[type=range]{border-radius:0;border:1px solid var(--COLOR_PRIMARY_MIDDLE);height:10px}select{text-align:left}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:0;background:var(--COLOR_PRIMARY_SUPER_DARK);border:1px solid var(--COLOR_NEUTRAL_LIGHT);cursor:pointer;z-index:5;position:relative}label:has(input[type=checkbox]:not([name=toggle_details])){span { padding: 10px; cursor: pointer; --background: var(--BG_NOT_ACTIVE); background: var(--background); }}label:has(input[type=radio]:not([name*=__article_sorting]):not([name=article_sorting])){span { background: var(--background); padding: 10px; border: none; cursor: pointer; } input:not(:disabled):not(:checked)+span:not(:disabled) { --background: var(--BG_NOT_ACTIVE); } &:hover { span { --background: var(--BG_NOT_ACTIVE_HOVER); } } &:has(input:checked) { span { --background: var(--BG_ACTIVE_BLUE); color: var(--COLOR_PRIMARY_LIGHT); } }}button,.button_like{--background:var(--BG_NEUTRAL);font-weight:700;background:var(--background);border:none;font-size:.8rem;border-radius:5px;padding:8px 11px;cursor:pointer;text-decoration:none;color:var(--COLOR_NEUTRAL_DARK);text-align:center;&:hover { --background:var(--BG_NEUTRAL_HOVER); } &[data-type="continue"],&[data-type="save"],&[data-type="load"],&[data-type="add"],&[data-type="check_data_calc_shipping_costs"],&.highlight { --background:var(--BG_ACTIVE); &:hover { --background:var(--BG_ACTIVE_HOVER); } } &.close,&[data-type="close"]:has(i),&[data-type="delete"] { --background:transparent; &:hover { --background:transparent; color:var(--COLOR_ERROR_DARK) } } &:has(i) { i { font-size:19px; } padding:5px; } &[aria-disabled="true"],&:disabled,&.inactive { 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; } &[data-type="pdf"] { background-repeat:no-repeat,repeat; background-position:8px 8px,0 0; padding-left:56px; background-image:url("/static/img/pdf_noshadow.png"),var(--BG_ACTIVE); } &[data-state="loading"] { pointer-events:none; border:1px solid var(--COLOR_PRIMARY_MIDDLE); --background:var(--BG_DISABLED); color:transparent; background-image:none; position:relative; &[data-type="pdf"] { &::before { padding:0px 40px; } } &::before { left:50%; top:30%; position:absolute; text-align:right; font-family:"Font Awesome 6 Sharp Duotone"; content:"\f3f4"; color:black; animation:spin 1s ease-in-out 0s infinite; } }}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}form:has(*:required:invalid) button[type=submit]{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}label,button{transition:all .1s ease-in}:has(>.tooltip){.tooltip { display: none; transition: visibility 0s, opacity 0.1s linear; } &:hover .tooltip { display: block; position: absolute; padding: 10px; background: var(--BG_GREY_LIGHT); border: 1px solid var(--COLOR_PRIMARY_DARK); color: var(--COLOR_NEUTRAL_DARK); animation: fadein 0.3s ease-in-out; isolation: isolate; z-index: 11; text-align: left; max-width: 350px; width: max-content; &:has(img) { max-width: none; } &[data-position_y="bottom"] { top: 40px; } &[data-position_y="top"] { bottom: 40px; } &[data-position_x="left"] { right: 0 } h1 { background: transparent; font-size: 14px; font-weight: bold; color: inherit; padding: 0; } p { font-size: 11px; text-align: left; font-weight: normal; } table, th, td { border: 1px solid black; border-collapse: collapse; padding: 10px; } th { background: var(--BG_GREY); } span { background: transparent; padding: unset; } }}@keyframes fadein{from{opacity:0}to{opacity:1}}.border-top{border-top:3px solid var(--COLOR_ACCENT_DARK);padding-top:20px;margin-top:20px}.width-max{width:100%}.margin-20{margin:20px 0}.tooltipp img{max-width:none}h2:has(.helpicon){position:relative}.legend-container{position:relative;background-color:#e9e9e9;padding:9px 0}.tooltipp img{max-width:none}h2:has(.helpicon){position:relative}.legend-container{position:relative;background-color:#e9e9e9;padding:9px 0}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;padding-right:10px}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;pointer-events:none}*:focus{outline:none}#load-wrapper{position:fixed;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;font-size:50px;background:var(--BG_SHADOW);top:0;z-index:5}overlay-element{background:var(--BG_SHADOW);display:block;display:flex;align-items:center;justify-content:center;position:absolute;pointer-events:none;p { text-align: center; font-size: 1.5rem; font-weight: bold; } &:hover { p { display: none; } }}.row_100 .main_content{padding:30px 0!important;&:has(quick-shop) { min-height:unset!important; }}label:has(input[type=radio]:checked:not([name*=article_sorting])){pointer-events:none}[data-state=loading]:not(button):not(.button_like){pointer-events:none;position:relative;opacity:.6;&::before { left:50%; top:30%; position:absolute; text-align:right; font-family:"Font Awesome 6 Sharp Duotone"; content:"\f3f4"; color:black; animation:spin 1s ease-in-out 0s infinite; z-index:5; font-size:20px; }}