@configura/web-ui 1.3.0-alpha.5 → 1.4.0-alpha.1

package/dist/components/productConfiguration/CfgOptionNumericView.js

@@ -1,116 +1,117 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
-import React, { useEffect, useState } from "react";
-import { useRerender } from "../../useRerender.js";
-import { useUuid } from "../../useUniqueId.js";
-import { Checkmark } from "../icons/Checkmark.js";
-export const CfgOptionNumericView = (props) => {
-    const { option } = props;
-    const { isUseNumericValue } = option;
-    // Contrary to most other components this one has its own connection to the
-    // option that is backing it. This is for it to be able to "live" update
-    // as we drag sliders. The value is not "commited" at immediate drag, and so
-    // the full machinery of validations and such is not run until later.
-    const rerender = useRerender();
-    useEffect(() => {
-        option.listenForChange(rerender);
-        return () => {
-            option.stopListenForChange(rerender);
-        };
-    }, [option, rerender]);
-    if (!isUseNumericValue) {
-        return null;
-    }
-    const { allowedNumericValues, numericValue, unit } = option;
-    if (allowedNumericValues === undefined) {
-        throw new Error("AllowedNumericValues undefined for numeric option");
-    }
-    if (numericValue === undefined) {
-        throw new Error("Numeric value not set for numeric option");
-    }
-    const { ranges } = allowedNumericValues;
-    const isSingleRange = ranges.length === 1;
-    if (isSingleRange && ranges[0] instanceof NumericValueDiscrete) {
-        return null;
-    }
-    return (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent ${props.className || ""}`, style: props.style }, ranges.map((range) => (React.createElement(NumericValueView, { currentValue: numericValue, unit: unit, range: range, key: range.first, hasNoSiblings: isSingleRange, updateValue: (value, commit) => __awaiter(void 0, void 0, void 0, function* () { return yield option.setNumericValue(value, commit); }) })))));
-};
-/**
- * Displays GUI for selecting in one "range". Please note that the range
- * parameter can also be a discrete value.
- */
-export const NumericValueView = (props) => {
-    const { range, currentValue, updateValue, hasNoSiblings } = props;
-    const { legend, first } = range;
-    const selected = range.includesValue(currentValue);
-    const optionClasses = selected ? "cfgFeatureItemOption--checked" : "";
-    const uniqueId = useUuid();
-    const [inputValue, setInputValue] = useState(first);
-    const [inputCommited, setInputCommited] = useState(true);
-    const [showRangeError, setShowRangeError] = useState(false);
-    if (inputCommited && inputValue !== currentValue && range.includesValue(currentValue)) {
-        setInputValue(currentValue);
-    }
-    function isAcceptableValue(value) {
-        return !isNaN(value) && range.includesValue(value);
-    }
-    return (React.createElement("li", { className: `cfgFeatureItem cfgMb1 ${hasNoSiblings ? "" : "cfgMt1"}` },
-        !hasNoSiblings && (React.createElement("label", { className: `cfgFeatureItemOption ${optionClasses}`, htmlFor: uniqueId },
-            React.createElement("input", { checked: selected, className: "cfgFeatureItem__hiddenInput", id: uniqueId, name: uniqueId, onChange: (event) => {
-                    if (event.target.checked) {
-                        updateValue(inputValue, true);
-                    }
-                }, type: "radio", value: first }),
-            React.createElement("div", { className: "cfgFeatureItem__radio" }, selected && React.createElement(Checkmark, null)),
-            React.createElement("div", { className: "cfgFeatureItemOption__titleWrapper" },
-                React.createElement("div", { className: "cfgFeatureItemOption__title" }, legend)))),
-        selected && range instanceof NumericValueRangeDefinition && (React.createElement(RangeView, Object.assign({}, props, { className: hasNoSiblings ? undefined : "cfgOptionTree--indent", range: range, onChange: (val, instantUpdate) => {
-                setInputValue(val);
-                if (!isAcceptableValue(inputValue)) {
-                    return;
-                }
-                if (instantUpdate) {
-                    updateValue(val, false);
-                }
-                setShowRangeError(false);
-                setInputCommited(false);
-            }, onCommit: () => {
-                if (inputCommited) {
-                    return;
-                }
-                if (!isAcceptableValue(inputValue)) {
-                    setShowRangeError(true);
-                    return;
-                }
-                updateValue(inputValue, true);
-                setShowRangeError(false);
-                setInputCommited(true);
-            }, inputValue: inputValue, showRangeError: showRangeError })))));
-};
-export const RangeView = (props) => {
-    const { currentValue, unit, inputValue, range, onChange, onCommit, showRangeError } = props;
-    const { minValue, maxValue, increment, legend } = range;
-    const getOnChange = (instant) => (event) => onChange(event.currentTarget.valueAsNumber, instant);
-    const inputProps = {
-        min: minValue,
-        max: maxValue,
-        step: increment || Math.pow(10, Math.round(Math.log10(maxValue - minValue)) - 3),
-        onBlur: onCommit,
-        onMouseUp: onCommit,
-    };
-    return (React.createElement("div", { className: `cfgRangeView cfgMt1 ${props.className || ""}`, style: props.style },
-        React.createElement("input", Object.assign({}, inputProps, { type: "number", value: isNaN(inputValue) ? "" : inputValue, onChange: getOnChange(false), className: "cfgRangeView__number-input" })),
-        React.createElement("span", { className: "cfgRangeView__unit-label" }, unit),
-        React.createElement("input", Object.assign({}, inputProps, { type: "range", className: "cfgSlider cfgRangeView__slider-input", value: currentValue, onChange: getOnChange(true) })),
-        showRangeError && React.createElement("div", null,
-            "Value not allowed, allowed values are ",
-            legend)));
-};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
+import React, { useEffect, useState } from "react";
+import { useRerender } from "../../useRerender.js";
+import { useUuid } from "../../useUniqueId.js";
+import { Checkmark } from "../icons/Checkmark.js";
+export const CfgOptionNumericView = (props) => {
+    const { option } = props;
+    const { isUseNumericValue } = option;
+    // Contrary to most other components this one has its own connection to the
+    // option that is backing it. This is for it to be able to "live" update
+    // as we drag sliders. The value is not "commited" at immediate drag, and so
+    // the full machinery of validations and such is not run until later.
+    const rerender = useRerender();
+    useEffect(() => {
+        option.listenForChange(rerender);
+        return () => {
+            option.stopListenForChange(rerender);
+        };
+    }, [option, rerender]);
+    if (!isUseNumericValue) {
+        return null;
+    }
+    const { allowedNumericValues, numericValue, unit } = option;
+    if (allowedNumericValues === undefined) {
+        throw new Error("AllowedNumericValues undefined for numeric option");
+    }
+    if (numericValue === undefined) {
+        throw new Error("Numeric value not set for numeric option");
+    }
+    const { ranges } = allowedNumericValues;
+    const isSingleRange = ranges.length === 1;
+    if (isSingleRange && ranges[0] instanceof NumericValueDiscrete) {
+        return null;
+    }
+    return (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent ${props.className || ""}`, style: props.style }, ranges.map((range) => (React.createElement(NumericValueView, { currentValue: numericValue, unit: unit, range: range, key: range.first, hasNoSiblings: isSingleRange, updateValue: (value, commit) => __awaiter(void 0, void 0, void 0, function* () { return yield option.setNumericValue(value, commit); }) })))));
+};
+/**
+ * Displays GUI for selecting in one "range". Please note that the range
+ * parameter can also be a discrete value.
+ */
+export const NumericValueView = (props) => {
+    const { range, currentValue, updateValue, hasNoSiblings } = props;
+    const { legend, first } = range;
+    const selected = range.includesValue(currentValue);
+    const optionClasses = selected ? "cfgFeatureItemOption--checked" : "";
+    const uniqueId = useUuid();
+    const [inputValue, setInputValue] = useState(first);
+    const [inputCommited, setInputCommited] = useState(true);
+    const [showRangeError, setShowRangeError] = useState(false);
+    if (inputCommited && inputValue !== currentValue && range.includesValue(currentValue)) {
+        setInputValue(currentValue);
+    }
+    function isAcceptableValue(value) {
+        return !isNaN(value) && range.includesValue(value);
+    }
+    return (React.createElement("li", { className: `cfgFeatureItem cfgMb1 ${hasNoSiblings ? "" : "cfgMt1"}` },
+        !hasNoSiblings && (React.createElement("label", { className: `cfgFeatureItemOption ${optionClasses}`, htmlFor: uniqueId },
+            React.createElement("input", { checked: selected, className: "cfgFeatureItem__hiddenInput", id: uniqueId, name: uniqueId, onChange: (event) => {
+                    if (event.target.checked) {
+                        updateValue(inputValue, true);
+                    }
+                }, type: "radio", value: first }),
+            React.createElement("div", { className: "cfgFeatureItem__radio" }, selected && React.createElement(Checkmark, null)),
+            React.createElement("div", { className: "cfgFeatureItemOption__titleWrapper" },
+                React.createElement("div", { className: "cfgFeatureItemOption__title" }, legend)))),
+        selected && range instanceof NumericValueRangeDefinition && (React.createElement(RangeView, Object.assign({}, props, { className: hasNoSiblings ? undefined : "cfgOptionTree--indent", range: range, onChange: (val, instantUpdate) => {
+                setInputValue(val);
+                if (!isAcceptableValue(inputValue)) {
+                    return;
+                }
+                if (instantUpdate) {
+                    updateValue(val, false);
+                }
+                setShowRangeError(false);
+                setInputCommited(false);
+            }, onCommit: () => {
+                if (inputCommited) {
+                    return;
+                }
+                if (!isAcceptableValue(inputValue)) {
+                    setShowRangeError(true);
+                    return;
+                }
+                updateValue(inputValue, true);
+                setShowRangeError(false);
+                setInputCommited(true);
+            }, inputValue: inputValue, showRangeError: showRangeError })))));
+};
+export const RangeView = (props) => {
+    const { currentValue, unit, inputValue, range, onChange, onCommit, showRangeError } = props;
+    const { minValue, maxValue, increment, legend } = range;
+    const getOnChange = (instant) => (event) => onChange(event.currentTarget.valueAsNumber, instant);
+    const inputProps = {
+        min: minValue,
+        max: maxValue,
+        step: increment || Math.pow(10, Math.round(Math.log10(maxValue - minValue)) - 3),
+        onBlur: onCommit,
+        onMouseUp: onCommit,
+    };
+    return (React.createElement("div", { className: `cfgRangeView cfgMt1 ${props.className || ""}`, style: props.style },
+        React.createElement("div", { className: "cfgRangeView__inputs" },
+            React.createElement("input", Object.assign({}, inputProps, { type: "number", value: isNaN(inputValue) ? "" : inputValue, onChange: getOnChange(false), className: "cfgRangeView__number-input" })),
+            React.createElement("span", { className: "cfgRangeView__unit-label" }, unit),
+            React.createElement("input", Object.assign({}, inputProps, { type: "range", className: "cfgSlider cfgRangeView__slider-input", value: currentValue, onChange: getOnChange(true) }))),
+        showRangeError && (React.createElement("div", { className: "cfgRangeView__error" },
+            "Value not allowed, allowed values are ",
+            legend))));
+};

package/dist/components/productConfiguration/CfgOptionPriceView.d.ts

@@ -1,10 +1,10 @@
-import { CfgOption } from "@configura/web-api";
-import React from "react";
-import { UpchargeDisplayMode } from "./CfgProductConfigurationView.js";
-declare type Props = {
-    option: CfgOption;
-    upchargeDisplayMode: UpchargeDisplayMode | undefined;
-};
-export declare const CfgOptionPriceView: React.FC<Props>;
-export {};
+import { CfgOption } from "@configura/web-api";
+import React from "react";
+import { UpchargeDisplayMode } from "./CfgProductConfigurationView.js";
+declare type Props = {
+    option: CfgOption;
+    upchargeDisplayMode: UpchargeDisplayMode | undefined;
+};
+export declare const CfgOptionPriceView: React.FC<Props>;
+export {};
 //# sourceMappingURL=CfgOptionPriceView.d.ts.map

package/dist/components/productConfiguration/CfgOptionPriceView.js

@@ -1,29 +1,29 @@
-import React from "react";
-import { CurrencyPrice } from "../CurrencyPrice.js";
-import { UpchargeDisplayMode } from "./CfgProductConfigurationView.js";
-export const CfgOptionPriceView = (props) => {
-    const { option, upchargeDisplayMode } = props;
-    const { currency, fractionDigits, lang } = option.parentProduct;
-    if (currency === "") {
-        return null;
-    }
-    switch (upchargeDisplayMode) {
-        case UpchargeDisplayMode.None:
-            return null;
-        case UpchargeDisplayMode.Price:
-            const { upcharge } = option;
-            if (upcharge === undefined || upcharge === 0) {
-                return null;
-            }
-            return (React.createElement("div", { className: "cfgFeatureItemOption__price" },
-                React.createElement(CurrencyPrice, { currency: currency, language: lang, price: upcharge, fractionDigits: fractionDigits })));
-        default:
-            const { priceChangeAtSelectChange } = option;
-            if (priceChangeAtSelectChange === undefined || priceChangeAtSelectChange === 0) {
-                return null;
-            }
-            return (React.createElement("div", { className: "cfgFeatureItemOption__price" },
-                priceChangeAtSelectChange < 0 ? "-" : "+",
-                React.createElement(CurrencyPrice, { currency: currency, language: lang, price: Math.abs(priceChangeAtSelectChange), fractionDigits: fractionDigits })));
-    }
-};
+import React from "react";
+import { CurrencyPrice } from "../CurrencyPrice.js";
+import { UpchargeDisplayMode } from "./CfgProductConfigurationView.js";
+export const CfgOptionPriceView = (props) => {
+    const { option, upchargeDisplayMode } = props;
+    const { currency, fractionDigits, lang } = option.parentProduct;
+    if (currency === "") {
+        return null;
+    }
+    switch (upchargeDisplayMode) {
+        case UpchargeDisplayMode.None:
+            return null;
+        case UpchargeDisplayMode.Price:
+            const { upcharge } = option;
+            if (upcharge === undefined || upcharge === 0) {
+                return null;
+            }
+            return (React.createElement("div", { className: "cfgFeatureItemOption__price" },
+                React.createElement(CurrencyPrice, { currency: currency, language: lang, price: upcharge, fractionDigits: fractionDigits })));
+        default:
+            const { priceChangeAtSelectChange } = option;
+            if (priceChangeAtSelectChange === undefined || priceChangeAtSelectChange === 0) {
+                return null;
+            }
+            return (React.createElement("div", { className: "cfgFeatureItemOption__price" },
+                priceChangeAtSelectChange < 0 ? "-" : "+",
+                React.createElement(CurrencyPrice, { currency: currency, language: lang, price: Math.abs(priceChangeAtSelectChange), fractionDigits: fractionDigits })));
+    }
+};

package/dist/components/productConfiguration/CfgProductConfigurationView.d.ts

@@ -1,19 +1,19 @@
-import { CfgProduct, CfgProductConfiguration } from "@configura/web-api";
-import React from "react";
-import { CssProps } from "../../utilities.js";
-import { CfgProductConfigurationComponentAndPassthroughProps } from "./CfgFeatureView.js";
-export declare enum UpchargeDisplayMode {
-    SelectionImpact = 0,
-    None = 1,
-    Price = 2
-}
-export declare type PassthroughProps = {
-    upchargeDisplayMode?: UpchargeDisplayMode;
-};
-declare type Props = PassthroughProps & {
-    productOrConfiguration: CfgProductConfiguration | CfgProduct;
-    permanentlyExpandedAdditionalProductLevels?: number;
-};
-export declare const CfgProductConfigurationView: React.FC<Props & CfgProductConfigurationComponentAndPassthroughProps & CssProps>;
-export {};
+import { CfgProduct, CfgProductConfiguration } from "@configura/web-api";
+import React from "react";
+import { CssProps } from "../../utilities.js";
+import { CfgProductConfigurationComponentAndPassthroughProps } from "./CfgFeatureView.js";
+export declare enum UpchargeDisplayMode {
+    SelectionImpact = 0,
+    None = 1,
+    Price = 2
+}
+export declare type PassthroughProps = {
+    upchargeDisplayMode?: UpchargeDisplayMode;
+};
+declare type Props = PassthroughProps & {
+    productOrConfiguration: CfgProductConfiguration | CfgProduct;
+    permanentlyExpandedAdditionalProductLevels?: number;
+};
+export declare const CfgProductConfigurationView: React.FC<Props & CfgProductConfigurationComponentAndPassthroughProps & CssProps>;
+export {};
 //# sourceMappingURL=CfgProductConfigurationView.d.ts.map

package/dist/components/productConfiguration/CfgProductConfigurationView.js

@@ -1,45 +1,45 @@
-import { CfgProduct } from "@configura/web-api";
-import React, { useEffect } from "react";
-import { useRerender } from "../../useRerender.js";
-import { CfgAdditionalProductView } from "./CfgAdditionalProductView.js";
-import { CfgFeatureViewMemo, forwardProps, } from "./CfgFeatureView.js";
-export var UpchargeDisplayMode;
-(function (UpchargeDisplayMode) {
-    UpchargeDisplayMode[UpchargeDisplayMode["SelectionImpact"] = 0] = "SelectionImpact";
-    UpchargeDisplayMode[UpchargeDisplayMode["None"] = 1] = "None";
-    UpchargeDisplayMode[UpchargeDisplayMode["Price"] = 2] = "Price";
-})(UpchargeDisplayMode || (UpchargeDisplayMode = {}));
-export const CfgProductConfigurationView = React.memo((props) => {
-    const { productOrConfiguration, permanentlyExpandedAdditionalProductLevels, additionalProductComponent, } = props;
-    const configuration = productOrConfiguration instanceof CfgProduct
-        ? productOrConfiguration.configuration
-        : productOrConfiguration;
-    const features = configuration.features.reduce((agg, feature) => {
-        // It is possible in Cat Creator to double add a Feature. This fills no known
-        // purpose and React can not handle this, so we filter out the duplicates.
-        const code = feature.code;
-        if (agg.every((f) => f.code !== code)) {
-            agg.push(feature);
-        }
-        return agg;
-    }, []);
-    const additionalProducts = productOrConfiguration instanceof CfgProduct
-        ? productOrConfiguration.additionalProducts
-        : undefined;
-    const AdditionalProductComponent = additionalProductComponent || CfgAdditionalProductView;
-    // Re-rendering is driven from the very top of the tree. However, when selecting an option
-    // the change is not bubbled all the way to the top (and then down again) until after
-    // validation has been done. This keeps the 3D-view from re-rendering until after validation
-    // has been done. But it also makes the state of this GUI not update until after validate,
-    // which does not look good. So we add this extra hook to make this rerender early.
-    const rerender = useRerender();
-    useEffect(() => {
-        configuration.listenForChange(rerender);
-        return () => {
-            configuration.stopListenForChange(rerender);
-        };
-    }, [configuration, rerender]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--topLevel ${props.className || ""}`, style: props.style }, features.map((f) => (React.createElement(CfgFeatureViewMemo, Object.assign({ feature: f, key: f.key }, forwardProps(props)))))),
-        additionalProducts !== undefined && (React.createElement("ul", { className: `cfgAdditionalProduct cfgOptionTree cfgOptionTree--topLevel` }, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({ key: additionalProduct.key }, forwardProps(props), { additionalProductComponent: AdditionalProductComponent, product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedAdditionalProductLevels || 0 }))))))));
-});
+import { CfgProduct } from "@configura/web-api";
+import React, { useEffect } from "react";
+import { useRerender } from "../../useRerender.js";
+import { CfgAdditionalProductView } from "./CfgAdditionalProductView.js";
+import { CfgFeatureViewMemo, forwardProps, } from "./CfgFeatureView.js";
+export var UpchargeDisplayMode;
+(function (UpchargeDisplayMode) {
+    UpchargeDisplayMode[UpchargeDisplayMode["SelectionImpact"] = 0] = "SelectionImpact";
+    UpchargeDisplayMode[UpchargeDisplayMode["None"] = 1] = "None";
+    UpchargeDisplayMode[UpchargeDisplayMode["Price"] = 2] = "Price";
+})(UpchargeDisplayMode || (UpchargeDisplayMode = {}));
+export const CfgProductConfigurationView = React.memo((props) => {
+    const { productOrConfiguration, permanentlyExpandedAdditionalProductLevels, additionalProductComponent, } = props;
+    const configuration = productOrConfiguration instanceof CfgProduct
+        ? productOrConfiguration.configuration
+        : productOrConfiguration;
+    const features = configuration.features.reduce((agg, feature) => {
+        // It is possible in Cat Creator to double add a Feature. This fills no known
+        // purpose and React can not handle this, so we filter out the duplicates.
+        const code = feature.code;
+        if (agg.every((f) => f.code !== code)) {
+            agg.push(feature);
+        }
+        return agg;
+    }, []);
+    const additionalProducts = productOrConfiguration instanceof CfgProduct
+        ? productOrConfiguration.additionalProducts
+        : undefined;
+    const AdditionalProductComponent = additionalProductComponent || CfgAdditionalProductView;
+    // Re-rendering is driven from the very top of the tree. However, when selecting an option
+    // the change is not bubbled all the way to the top (and then down again) until after
+    // validation has been done. This keeps the 3D-view from re-rendering until after validation
+    // has been done. But it also makes the state of this GUI not update until after validate,
+    // which does not look good. So we add this extra hook to make this rerender early.
+    const rerender = useRerender();
+    useEffect(() => {
+        configuration.listenForChange(rerender);
+        return () => {
+            configuration.stopListenForChange(rerender);
+        };
+    }, [configuration, rerender]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--topLevel ${props.className || ""}`, style: props.style }, features.map((f) => (React.createElement(CfgFeatureViewMemo, Object.assign({ feature: f, key: f.key }, forwardProps(props)))))),
+        additionalProducts !== undefined && (React.createElement("ul", { className: `cfgAdditionalProduct cfgOptionTree cfgOptionTree--topLevel` }, additionalProducts.map((additionalProduct) => (React.createElement(AdditionalProductComponent, Object.assign({ key: additionalProduct.key }, forwardProps(props), { additionalProductComponent: AdditionalProductComponent, product: additionalProduct, permanentlyExpandedLevels: permanentlyExpandedAdditionalProductLevels || 0 }))))))));
+});

package/dist/css/web-ui.css

@@ -1 +1 @@
-.cfgRangeView{display:flex;align-items:center}.cfgRangeView__number-input{font-size:1.5em;flex-grow:1;text-align:right}.cfgRangeView__unit-label{font-size:1.5em;margin-left:.3em}.cfgRangeView__slider-input.cfgSlider{margin-left:1em;flex-grow:3}.cfgMl1{margin-left:1em}.cfgMt1{margin-top:1em}.cfgMb1{margin-bottom:1em}.cfgTextOverflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cfgButton{box-sizing:border-box;display:inline-block;background-color:transparent;color:#333;border-radius:.3em;border:.1em solid #bababa;font-size:1.3em;font-weight:500;outline:none;padding:.4em .8em}.cfgButton:after,.cfgButton:before{box-sizing:inherit}.cfgButton *{box-sizing:border-box}.cfgButton :after,.cfgButton :before{box-sizing:inherit}.cfgButton:focus{box-shadow:0 0 0 .075em #fff,0 0 0 .2em #333}.cfgButtonRow{box-sizing:border-box}.cfgButtonRow:after,.cfgButtonRow:before{box-sizing:inherit}.cfgButtonRow *{box-sizing:border-box}.cfgButtonRow :after,.cfgButtonRow :before{box-sizing:inherit}.cfgButtonRow__button:nth-child(n+2){margin-left:1em}.cfgConfigurator{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:10px;color:#333;min-width:0}.cfgConfigurator:after,.cfgConfigurator:before{box-sizing:inherit}.cfgConfigurator *{box-sizing:border-box}.cfgConfigurator :after,.cfgConfigurator :before{box-sizing:inherit}.cfgConfiguratorHeader{border-bottom:.1em solid #c8c7cc;padding:1.7em 1.7em 1.9em;position:relative}.cfgConfiguratorHeader__actions{margin-top:1em}.cfgConfiguratorTree{padding-top:1em}.cfgCanvasWrapper{box-sizing:border-box;position:relative;height:50rem;-webkit-user-select:none;user-select:none}.cfgCanvasWrapper:after,.cfgCanvasWrapper:before{box-sizing:inherit}.cfgCanvasWrapper *{box-sizing:border-box}.cfgCanvasWrapper :after,.cfgCanvasWrapper :before{box-sizing:inherit}.cfgCanvasWrapper canvas{outline:none}.cfgConfiguratorWrapper{box-sizing:border-box;color:#333;height:100%;width:100%}.cfgConfiguratorWrapper:after,.cfgConfiguratorWrapper:before{box-sizing:inherit}.cfgConfiguratorWrapper *{box-sizing:border-box}.cfgConfiguratorWrapper :after,.cfgConfiguratorWrapper :before{box-sizing:inherit}@media screen and (orientation:landscape){.cfgConfiguratorWrapper{display:flex;flex-direction:row}.cfgConfiguratorWrapper>.cfgConfigurator{flex:0 1 40%;height:100%}.cfgConfiguratorWrapper .cfgCanvasWrapper{flex:0 1 60%;height:85vh;overflow:hidden;position:sticky;top:0}}.cfgExpandableHeadingRow{box-sizing:border-box;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%}.cfgExpandableHeadingRow:after,.cfgExpandableHeadingRow:before{box-sizing:inherit}.cfgExpandableHeadingRow *{box-sizing:border-box}.cfgExpandableHeadingRow :after,.cfgExpandableHeadingRow :before{box-sizing:inherit}.cfgExpandableHeadingRow--expandable{cursor:pointer}.cfgExpandableHeadingRow__title{align-items:center;display:flex;flex:1 1 auto;font-size:1.5em;font-weight:500;justify-content:flex-start}.cfgExpandableHeadingRow__icon{align-items:center;display:flex;flex:0 0 5em;justify-content:center;padding:0 1.5em}.cfgHr{box-sizing:border-box;border:0;border-bottom:.1em solid #c8c7cc;padding:0;margin:0}.cfgHr:after,.cfgHr:before{box-sizing:inherit}.cfgHr *{box-sizing:border-box}.cfgHr :after,.cfgHr :before{box-sizing:inherit}.cfgThumbnailImage{border-radius:.7em;display:inline-block;height:3em;width:3em}.cfgThumbnailPlaceholder{align-items:center;display:flex;flex:0 0 4.2em;justify-content:flex-start}.cfgFeatureItem{box-sizing:border-box;color:#333}.cfgFeatureItem:after,.cfgFeatureItem:before{box-sizing:inherit}.cfgFeatureItem *{box-sizing:border-box}.cfgFeatureItem :after,.cfgFeatureItem :before{box-sizing:inherit}.cfgFeatureItem__dropdown{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%;cursor:pointer}.cfgFeatureItem--optional{margin-top:1em}.cfgFeatureItem__hiddenInput{left:-99999px;opacity:0;position:absolute;z-index:-1}.cfgFeatureItem__radio{border:.2em solid #c8c7cc;border-radius:50%}.cfgFeatureItem__checkbox,.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgFeatureItem__checkbox{border:.2em solid #c8c7cc;border-radius:.3em}.cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__checkbox,.cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__radio{box-shadow:0 0 0 .075em #fff,0 0 0 .2em #333}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{border:.2em solid #000;border-radius:50%}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox,.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox{border:.2em solid #000;border-radius:.3em}.cfgFeatureItemOption__titleWrapper,.cfgFeatureItemOptional__titleWrapper{flex:1 1 auto;margin-left:1em}.cfgFeatureItemOption__title,.cfgFeatureItemOptional__title{font-size:1.5em}.cfgFeatureItemOption__price{font-weight:600;font-size:.75em;color:grey}.cfgOptionTree--subLevel .cfgFeatureItem__hr{display:none}.cfgFeatureItemOption,.cfgFeatureItemOptional{align-items:center;display:flex}.cfgFeatureItemOptional{justify-content:center;margin-top:.5em}.cfgFeatureItemOptional__header{font-size:1.2em;font-weight:600;margin:0 0 .3em;padding:0;text-transform:uppercase}.cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr{margin-bottom:-.1em}.cfgOptionTree{box-sizing:border-box;list-style:none;margin:0;padding:0}.cfgOptionTree:after,.cfgOptionTree:before{box-sizing:inherit}.cfgOptionTree *{box-sizing:border-box}.cfgOptionTree :after,.cfgOptionTree :before{box-sizing:inherit}.cfgOptionTree--topLevel{padding-left:1.7em}.cfgOptionTree--indent{margin-left:3.2em}.cfgOptionTree--compThumb{margin-left:4.2em}.cfgProductInfo{box-sizing:border-box;color:#333;display:flex}.cfgProductInfo:after,.cfgProductInfo:before{box-sizing:inherit}.cfgProductInfo *{box-sizing:border-box}.cfgProductInfo :after,.cfgProductInfo :before{box-sizing:inherit}.cfgProductInfo__left{flex:1 1 auto;min-width:0;overflow:hidden}.cfgProductInfo__right{align-items:flex-end;display:flex;flex-direction:column;flex:1 0 auto;margin-left:1em;max-width:.333333333;min-width:0}.cfgProductInfo__name{display:block;font-size:1.6em;font-weight:600;line-height:1.33;margin:0}.cfgProductInfo__number{font-size:1.3em;font-weight:400;line-height:1.38;margin:0}.cfgCenteredLoading{box-sizing:border-box;align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.cfgCenteredLoading:after,.cfgCenteredLoading:before{box-sizing:inherit}.cfgCenteredLoading *{box-sizing:border-box}.cfgCenteredLoading :after,.cfgCenteredLoading :before{box-sizing:inherit}.cfgOverlayLoading{box-sizing:border-box;align-items:center;background-color:#fff;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1000}.cfgOverlayLoading:after,.cfgOverlayLoading:before{box-sizing:inherit}.cfgOverlayLoading *{box-sizing:border-box}.cfgOverlayLoading :after,.cfgOverlayLoading :before{box-sizing:inherit}.cfgOverlayLoading--clickThrough{background-color:transparent;pointer-events:none}.cfgOverlayLoading--clickThrough .cfgLoadingWithText{padding:2em 2em 1.8em;border-radius:.8em;background-color:#fff;opacity:.8;border:.1em solid rgba(0,0,0,.15)}.cfgOverlayLoading--fullWindow{position:fixed;z-index:1001}.cfgLoadingWithText{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;text-align:center}.cfgLoadingWithText:after,.cfgLoadingWithText:before{box-sizing:inherit}.cfgLoadingWithText *{box-sizing:border-box}.cfgLoadingWithText :after,.cfgLoadingWithText :before{box-sizing:inherit}.cfgLoadingWithText__text{color:#000;font-weight:600;margin-top:.5em;font-size:1.6em}.cfgLoading{box-sizing:border-box;animation:rotate 1.1s linear 0s infinite;border-radius:100%;border:.5em solid rgba(0,0,0,.15);border-bottom-color:#000;display:inline-block;height:3em;width:3em}.cfgLoading:after,.cfgLoading:before{box-sizing:inherit}.cfgLoading *{box-sizing:border-box}.cfgLoading :after,.cfgLoading :before{box-sizing:inherit}.cfgLoading--small{border-width:.4em;height:2em;width:2em}.cfgSlider{box-sizing:border-box;flex:1;margin:0;padding:0;min-height:2.8em;background:transparent;font:inherit}.cfgSlider:after,.cfgSlider:before{box-sizing:inherit}.cfgSlider *{box-sizing:border-box}.cfgSlider :after,.cfgSlider :before{box-sizing:inherit}.cfgSlider,.cfgSlider::-webkit-slider-thumb{-webkit-appearance:none}.cfgSlider::-webkit-slider-runnable-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-moz-range-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-ms-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-webkit-slider-thumb{margin-top:-1.3em;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-moz-range-thumb{box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-ms-thumb{margin-top:0;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-ms-tooltip{display:none}.cfgCheckmark{box-sizing:border-box;display:inline-block;width:100%;height:100%}.cfgCheckmark:after,.cfgCheckmark:before{box-sizing:inherit}.cfgCheckmark *{box-sizing:border-box}.cfgCheckmark :after,.cfgCheckmark :before{box-sizing:inherit}.cfgCheckmark__container{transition:transform .4s;transform:translateY(17px)}.cfgCheckmark__line{stroke:#000;stroke-linecap:round;stroke-width:12;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgCheckmark__lineLeft{stroke:#000;transform:rotate(40deg) translateY(24px) translateX(18px)}.cfgCheckmark__lineRight{stroke:#000;transform:rotate(-50deg) translateY(-2px) translateX(-3px)}.cfgCheckmark__border{border:.2em solid #c8c7cc;border-radius:.3em}.cfgCheckmark__border,.cfgCheckmark__border--active{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgCheckmark__border--active{border:.2em solid #000;border-radius:.3em}.cfgChevron{box-sizing:border-box;display:inline-block;width:100%}.cfgChevron:after,.cfgChevron:before{box-sizing:inherit}.cfgChevron *{box-sizing:border-box}.cfgChevron :after,.cfgChevron :before{box-sizing:inherit}.cfgChevron__container{transition:transform .4s}.cfgChevron__container--down{transform:translateY(13px)}.cfgChevron__container--up{transform:translateY(-13px)}.cfgChevron__line{stroke-linecap:round;stroke-width:10;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgChevron__lineLeft--active,.cfgChevron__lineRight--active{stroke:#000}.cfgChevron__lineLeft--passive,.cfgChevron__lineRight--passive{stroke:#bababa}.cfgChevron__lineLeft--down{transform:rotate(40deg)}.cfgChevron__lineLeft--up,.cfgChevron__lineRight--down{transform:rotate(-40deg)}.cfgChevron__lineRight--up{transform:rotate(40deg)}.cfgDarkTheme .cfgButton{box-sizing:border-box;display:inline-block;background-color:transparent;color:#d6d6d6;border-radius:.3em;border:.1em solid #6a6a6a;font-size:1.3em;font-weight:500;outline:none;padding:.4em .8em}.cfgDarkTheme .cfgButton:after,.cfgDarkTheme .cfgButton:before{box-sizing:inherit}.cfgDarkTheme .cfgButton *{box-sizing:border-box}.cfgDarkTheme .cfgButton :after,.cfgDarkTheme .cfgButton :before{box-sizing:inherit}.cfgDarkTheme .cfgButton:focus{box-shadow:0 0 0 .075em #333,0 0 0 .2em #d6d6d6}.cfgDarkTheme .cfgButtonRow{box-sizing:border-box}.cfgDarkTheme .cfgButtonRow:after,.cfgDarkTheme .cfgButtonRow:before{box-sizing:inherit}.cfgDarkTheme .cfgButtonRow *{box-sizing:border-box}.cfgDarkTheme .cfgButtonRow :after,.cfgDarkTheme .cfgButtonRow :before{box-sizing:inherit}.cfgDarkTheme .cfgButtonRow__button:nth-child(n+2){margin-left:1em}.cfgDarkTheme .cfgConfigurator{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:10px;color:#d6d6d6;min-width:0}.cfgDarkTheme .cfgConfigurator:after,.cfgDarkTheme .cfgConfigurator:before{box-sizing:inherit}.cfgDarkTheme .cfgConfigurator *{box-sizing:border-box}.cfgDarkTheme .cfgConfigurator :after,.cfgDarkTheme .cfgConfigurator :before{box-sizing:inherit}.cfgDarkTheme .cfgConfiguratorHeader{border-bottom:.1em solid #5b5963;padding:1.7em 1.7em 1.9em;position:relative}.cfgDarkTheme .cfgConfiguratorHeader__actions{margin-top:1em}.cfgDarkTheme .cfgConfiguratorTree{padding-top:1em}.cfgDarkTheme .cfgCanvasWrapper{box-sizing:border-box;position:relative;height:50rem;-webkit-user-select:none;user-select:none}.cfgDarkTheme .cfgCanvasWrapper:after,.cfgDarkTheme .cfgCanvasWrapper:before{box-sizing:inherit}.cfgDarkTheme .cfgCanvasWrapper *{box-sizing:border-box}.cfgDarkTheme .cfgCanvasWrapper :after,.cfgDarkTheme .cfgCanvasWrapper :before{box-sizing:inherit}.cfgDarkTheme .cfgCanvasWrapper canvas{outline:none}.cfgDarkTheme .cfgConfiguratorWrapper{box-sizing:border-box;color:#d6d6d6;height:100%;width:100%}.cfgDarkTheme .cfgConfiguratorWrapper:after,.cfgDarkTheme .cfgConfiguratorWrapper:before{box-sizing:inherit}.cfgDarkTheme .cfgConfiguratorWrapper *{box-sizing:border-box}.cfgDarkTheme .cfgConfiguratorWrapper :after,.cfgDarkTheme .cfgConfiguratorWrapper :before{box-sizing:inherit}@media screen and (orientation:landscape){.cfgDarkTheme .cfgConfiguratorWrapper{display:flex;flex-direction:row}.cfgDarkTheme .cfgConfiguratorWrapper>.cfgConfigurator{flex:0 1 40%;height:100%}.cfgDarkTheme .cfgConfiguratorWrapper .cfgCanvasWrapper{flex:0 1 60%;height:85vh;overflow:hidden;position:sticky;top:0}}.cfgDarkTheme .cfgExpandableHeadingRow{box-sizing:border-box;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%}.cfgDarkTheme .cfgExpandableHeadingRow:after,.cfgDarkTheme .cfgExpandableHeadingRow:before{box-sizing:inherit}.cfgDarkTheme .cfgExpandableHeadingRow *{box-sizing:border-box}.cfgDarkTheme .cfgExpandableHeadingRow :after,.cfgDarkTheme .cfgExpandableHeadingRow :before{box-sizing:inherit}.cfgDarkTheme .cfgExpandableHeadingRow--expandable{cursor:pointer}.cfgDarkTheme .cfgExpandableHeadingRow__title{align-items:center;display:flex;flex:1 1 auto;font-size:1.5em;font-weight:500;justify-content:flex-start}.cfgDarkTheme .cfgExpandableHeadingRow__icon{align-items:center;display:flex;flex:0 0 5em;justify-content:center;padding:0 1.5em}.cfgDarkTheme .cfgHr{box-sizing:border-box;border:0;border-bottom:.1em solid #5b5963;padding:0;margin:0}.cfgDarkTheme .cfgHr:after,.cfgDarkTheme .cfgHr:before{box-sizing:inherit}.cfgDarkTheme .cfgHr *{box-sizing:border-box}.cfgDarkTheme .cfgHr :after,.cfgDarkTheme .cfgHr :before{box-sizing:inherit}.cfgDarkTheme .cfgThumbnailImage{border-radius:.7em;display:inline-block;height:3em;width:3em}.cfgDarkTheme .cfgThumbnailPlaceholder{align-items:center;display:flex;flex:0 0 4.2em;justify-content:flex-start}.cfgDarkTheme .cfgFeatureItem{box-sizing:border-box;color:#d6d6d6}.cfgDarkTheme .cfgFeatureItem:after,.cfgDarkTheme .cfgFeatureItem:before{box-sizing:inherit}.cfgDarkTheme .cfgFeatureItem *{box-sizing:border-box}.cfgDarkTheme .cfgFeatureItem :after,.cfgDarkTheme .cfgFeatureItem :before{box-sizing:inherit}.cfgDarkTheme .cfgFeatureItem__dropdown{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%;cursor:pointer}.cfgDarkTheme .cfgFeatureItem--optional{margin-top:1em}.cfgDarkTheme .cfgFeatureItem__hiddenInput{left:-99999px;opacity:0;position:absolute;z-index:-1}.cfgDarkTheme .cfgFeatureItem__radio{border:.2em solid #5b5963;border-radius:50%}.cfgDarkTheme .cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgFeatureItem__checkbox{border:.2em solid #5b5963;border-radius:.3em}.cfgDarkTheme .cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__radio{box-shadow:0 0 0 .075em #333,0 0 0 .2em #d6d6d6}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{border:.2em solid #fff;border-radius:50%}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox{border:.2em solid #fff;border-radius:.3em}.cfgDarkTheme .cfgFeatureItemOption__titleWrapper,.cfgDarkTheme .cfgFeatureItemOptional__titleWrapper{flex:1 1 auto;margin-left:1em}.cfgDarkTheme .cfgFeatureItemOption__title,.cfgDarkTheme .cfgFeatureItemOptional__title{font-size:1.5em}.cfgDarkTheme .cfgFeatureItemOption__price{font-weight:600;font-size:.75em;color:#999}.cfgDarkTheme .cfgOptionTree--subLevel .cfgFeatureItem__hr{display:none}.cfgDarkTheme .cfgFeatureItemOption{align-items:center;display:flex}.cfgDarkTheme .cfgFeatureItemOptional{align-items:center;display:flex;justify-content:center;margin-top:.5em}.cfgDarkTheme .cfgFeatureItemOptional__header{font-size:1.2em;font-weight:600;margin:0 0 .3em;padding:0;text-transform:uppercase}.cfgDarkTheme .cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr{margin-bottom:-.1em}.cfgDarkTheme .cfgOptionTree{box-sizing:border-box;list-style:none;margin:0;padding:0}.cfgDarkTheme .cfgOptionTree:after,.cfgDarkTheme .cfgOptionTree:before{box-sizing:inherit}.cfgDarkTheme .cfgOptionTree *{box-sizing:border-box}.cfgDarkTheme .cfgOptionTree :after,.cfgDarkTheme .cfgOptionTree :before{box-sizing:inherit}.cfgDarkTheme .cfgOptionTree--topLevel{padding-left:1.7em}.cfgDarkTheme .cfgOptionTree--indent{margin-left:3.2em}.cfgDarkTheme .cfgOptionTree--compThumb{margin-left:4.2em}.cfgDarkTheme .cfgProductInfo{box-sizing:border-box;color:#d6d6d6;display:flex}.cfgDarkTheme .cfgProductInfo:after,.cfgDarkTheme .cfgProductInfo:before{box-sizing:inherit}.cfgDarkTheme .cfgProductInfo *{box-sizing:border-box}.cfgDarkTheme .cfgProductInfo :after,.cfgDarkTheme .cfgProductInfo :before{box-sizing:inherit}.cfgDarkTheme .cfgProductInfo__left{flex:1 1 auto;min-width:0;overflow:hidden}.cfgDarkTheme .cfgProductInfo__right{align-items:flex-end;display:flex;flex-direction:column;flex:1 0 auto;margin-left:1em;max-width:.333333333;min-width:0}.cfgDarkTheme .cfgProductInfo__name{display:block;font-size:1.6em;font-weight:600;line-height:1.33;margin:0}.cfgDarkTheme .cfgProductInfo__number{font-size:1.3em;font-weight:400;line-height:1.38;margin:0}.cfgDarkTheme .cfgCenteredLoading{box-sizing:border-box;align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.cfgDarkTheme .cfgCenteredLoading:after,.cfgDarkTheme .cfgCenteredLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgCenteredLoading *{box-sizing:border-box}.cfgDarkTheme .cfgCenteredLoading :after,.cfgDarkTheme .cfgCenteredLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading{box-sizing:border-box;align-items:center;background-color:#333;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1000}.cfgDarkTheme .cfgOverlayLoading:after,.cfgDarkTheme .cfgOverlayLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading *{box-sizing:border-box}.cfgDarkTheme .cfgOverlayLoading :after,.cfgDarkTheme .cfgOverlayLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading--clickThrough{background-color:transparent;pointer-events:none}.cfgDarkTheme .cfgOverlayLoading--clickThrough .cfgLoadingWithText{padding:2em 2em 1.8em;border-radius:.8em;background-color:#333;opacity:.8;border:.1em solid hsla(0,0%,100%,.15)}.cfgDarkTheme .cfgOverlayLoading--fullWindow{position:fixed;z-index:1001}.cfgDarkTheme .cfgLoadingWithText{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;text-align:center}.cfgDarkTheme .cfgLoadingWithText:after,.cfgDarkTheme .cfgLoadingWithText:before{box-sizing:inherit}.cfgDarkTheme .cfgLoadingWithText *{box-sizing:border-box}.cfgDarkTheme .cfgLoadingWithText :after,.cfgDarkTheme .cfgLoadingWithText :before{box-sizing:inherit}.cfgDarkTheme .cfgLoadingWithText__text{color:#fff;font-weight:600;margin-top:.5em;font-size:1.6em}.cfgDarkTheme .cfgLoading{box-sizing:border-box;animation:rotate 1.1s linear 0s infinite;border-radius:100%;border:.5em solid hsla(0,0%,100%,.15);border-bottom-color:#fff;display:inline-block;height:3em;width:3em}.cfgDarkTheme .cfgLoading:after,.cfgDarkTheme .cfgLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgLoading *{box-sizing:border-box}.cfgDarkTheme .cfgLoading :after,.cfgDarkTheme .cfgLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgLoading--small{border-width:.4em;height:2em;width:2em}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.cfgDarkTheme .cfgSlider{box-sizing:border-box;flex:1;margin:0;padding:0;min-height:2.8em;background:transparent;font:inherit}.cfgDarkTheme .cfgSlider:after,.cfgDarkTheme .cfgSlider:before{box-sizing:inherit}.cfgDarkTheme .cfgSlider *{box-sizing:border-box}.cfgDarkTheme .cfgSlider :after,.cfgDarkTheme .cfgSlider :before{box-sizing:inherit}.cfgDarkTheme .cfgSlider,.cfgDarkTheme .cfgSlider::-webkit-slider-thumb{-webkit-appearance:none}.cfgDarkTheme .cfgSlider::-webkit-slider-runnable-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-moz-range-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-ms-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-webkit-slider-thumb{margin-top:-1.3em;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-moz-range-thumb{box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-ms-thumb{margin-top:0;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-ms-tooltip{display:none}.cfgDarkTheme .cfgCheckmark{box-sizing:border-box;display:inline-block;width:100%;height:100%}.cfgDarkTheme .cfgCheckmark:after,.cfgDarkTheme .cfgCheckmark:before{box-sizing:inherit}.cfgDarkTheme .cfgCheckmark *{box-sizing:border-box}.cfgDarkTheme .cfgCheckmark :after,.cfgDarkTheme .cfgCheckmark :before{box-sizing:inherit}.cfgDarkTheme .cfgCheckmark__container{transition:transform .4s;transform:translateY(17px)}.cfgDarkTheme .cfgCheckmark__line{stroke:#fff;stroke-linecap:round;stroke-width:12;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgDarkTheme .cfgCheckmark__lineLeft{stroke:#fff;transform:rotate(40deg) translateY(24px) translateX(18px)}.cfgDarkTheme .cfgCheckmark__lineRight{stroke:#fff;transform:rotate(-50deg) translateY(-2px) translateX(-3px)}.cfgDarkTheme .cfgCheckmark__border{border:.2em solid #5b5963;border-radius:.3em}.cfgDarkTheme .cfgCheckmark__border,.cfgDarkTheme .cfgCheckmark__border--active{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgCheckmark__border--active{border:.2em solid #fff;border-radius:.3em}.cfgDarkTheme .cfgChevron{box-sizing:border-box;display:inline-block;width:100%}.cfgDarkTheme .cfgChevron:after,.cfgDarkTheme .cfgChevron:before{box-sizing:inherit}.cfgDarkTheme .cfgChevron *{box-sizing:border-box}.cfgDarkTheme .cfgChevron :after,.cfgDarkTheme .cfgChevron :before{box-sizing:inherit}.cfgDarkTheme .cfgChevron__container{transition:transform .4s}.cfgDarkTheme .cfgChevron__container--down{transform:translateY(13px)}.cfgDarkTheme .cfgChevron__container--up{transform:translateY(-13px)}.cfgDarkTheme .cfgChevron__line{stroke-linecap:round;stroke-width:10;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgDarkTheme .cfgChevron__lineLeft--active,.cfgDarkTheme .cfgChevron__lineRight--active{stroke:#fff}.cfgDarkTheme .cfgChevron__lineLeft--passive,.cfgDarkTheme .cfgChevron__lineRight--passive{stroke:#6a6a6a}.cfgDarkTheme .cfgChevron__lineLeft--down{transform:rotate(40deg)}.cfgDarkTheme .cfgChevron__lineLeft--up,.cfgDarkTheme .cfgChevron__lineRight--down{transform:rotate(-40deg)}.cfgDarkTheme .cfgChevron__lineRight--up{transform:rotate(40deg)}
+.cfgRangeView__inputs{display:flex;align-items:center}.cfgRangeView__number-input{font-size:1.5em;flex-grow:1;text-align:right}.cfgRangeView__unit-label{font-size:1.5em;margin-left:.3em}.cfgRangeView__slider-input.cfgSlider{margin-left:1em;flex-grow:3}.cfgRangeView__error{margin-top:1em;font-size:1.5em;color:#b00}.cfgMl1{margin-left:1em}.cfgMt1{margin-top:1em}.cfgMb1{margin-bottom:1em}.cfgTextOverflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cfgButton{box-sizing:border-box;display:inline-block;background-color:transparent;color:#333;border-radius:.3em;border:.1em solid #bababa;font-size:1.3em;font-weight:500;outline:none;padding:.4em .8em}.cfgButton:after,.cfgButton:before{box-sizing:inherit}.cfgButton *{box-sizing:border-box}.cfgButton :after,.cfgButton :before{box-sizing:inherit}.cfgButton:focus{box-shadow:0 0 0 .075em #fff,0 0 0 .2em #333}.cfgButtonRow{box-sizing:border-box}.cfgButtonRow:after,.cfgButtonRow:before{box-sizing:inherit}.cfgButtonRow *{box-sizing:border-box}.cfgButtonRow :after,.cfgButtonRow :before{box-sizing:inherit}.cfgButtonRow__button:nth-child(n+2){margin-left:1em}.cfgConfigurator{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:10px;color:#333;min-width:0}.cfgConfigurator:after,.cfgConfigurator:before{box-sizing:inherit}.cfgConfigurator *{box-sizing:border-box}.cfgConfigurator :after,.cfgConfigurator :before{box-sizing:inherit}.cfgConfiguratorHeader{border-bottom:.1em solid #c8c7cc;padding:1.7em 1.7em 1.9em;position:relative}.cfgConfiguratorHeader__actions{margin-top:1em}.cfgConfiguratorTree{padding-top:1em}.cfgCanvasWrapper{box-sizing:border-box;position:relative;height:50rem;-webkit-user-select:none;user-select:none}.cfgCanvasWrapper:after,.cfgCanvasWrapper:before{box-sizing:inherit}.cfgCanvasWrapper *{box-sizing:border-box}.cfgCanvasWrapper :after,.cfgCanvasWrapper :before{box-sizing:inherit}.cfgCanvasWrapper canvas{outline:none}.cfgConfiguratorWrapper{box-sizing:border-box;color:#333;height:100%;width:100%}.cfgConfiguratorWrapper:after,.cfgConfiguratorWrapper:before{box-sizing:inherit}.cfgConfiguratorWrapper *{box-sizing:border-box}.cfgConfiguratorWrapper :after,.cfgConfiguratorWrapper :before{box-sizing:inherit}@media screen and (orientation:landscape){.cfgConfiguratorWrapper{display:flex;flex-direction:row}.cfgConfiguratorWrapper>.cfgConfigurator{flex:0 1 40%;height:100%}.cfgConfiguratorWrapper .cfgCanvasWrapper{flex:0 1 60%;height:85vh;overflow:hidden;position:sticky;top:0}}.cfgExpandableHeadingRow{box-sizing:border-box;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%}.cfgExpandableHeadingRow:after,.cfgExpandableHeadingRow:before{box-sizing:inherit}.cfgExpandableHeadingRow *{box-sizing:border-box}.cfgExpandableHeadingRow :after,.cfgExpandableHeadingRow :before{box-sizing:inherit}.cfgExpandableHeadingRow--expandable{cursor:pointer}.cfgExpandableHeadingRow__title{align-items:center;display:flex;flex:1 1 auto;font-size:1.5em;font-weight:500;justify-content:flex-start}.cfgExpandableHeadingRow__icon{align-items:center;display:flex;flex:0 0 5em;justify-content:center;padding:0 1.5em}.cfgHr{box-sizing:border-box;border:0;border-bottom:.1em solid #c8c7cc;padding:0;margin:0}.cfgHr:after,.cfgHr:before{box-sizing:inherit}.cfgHr *{box-sizing:border-box}.cfgHr :after,.cfgHr :before{box-sizing:inherit}.cfgThumbnailImage{border-radius:.7em;display:inline-block;height:3em;width:3em}.cfgThumbnailPlaceholder{align-items:center;display:flex;flex:0 0 4.2em;justify-content:flex-start}.cfgFeatureItem{box-sizing:border-box;color:#333}.cfgFeatureItem:after,.cfgFeatureItem:before{box-sizing:inherit}.cfgFeatureItem *{box-sizing:border-box}.cfgFeatureItem :after,.cfgFeatureItem :before{box-sizing:inherit}.cfgFeatureItem__dropdown{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%;cursor:pointer}.cfgFeatureItem--optional{margin-top:1em}.cfgFeatureItem__hiddenInput{left:-99999px;opacity:0;position:absolute;z-index:-1}.cfgFeatureItem__radio{border:.2em solid #c8c7cc;border-radius:50%}.cfgFeatureItem__checkbox,.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgFeatureItem__checkbox{border:.2em solid #c8c7cc;border-radius:.3em}.cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__checkbox,.cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__radio{box-shadow:0 0 0 .075em #fff,0 0 0 .2em #333}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{border:.2em solid #000;border-radius:50%}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox,.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox{border:.2em solid #000;border-radius:.3em}.cfgFeatureItemOption__titleWrapper,.cfgFeatureItemOptional__titleWrapper{flex:1 1 auto;margin-left:1em}.cfgFeatureItemOption__title,.cfgFeatureItemOptional__title{font-size:1.5em}.cfgFeatureItemOption__price{font-weight:600;font-size:.75em;color:grey}.cfgOptionTree--subLevel .cfgFeatureItem__hr{display:none}.cfgFeatureItemOption,.cfgFeatureItemOptional{align-items:center;display:flex}.cfgFeatureItemOptional{justify-content:center;margin-top:.5em}.cfgFeatureItemOptional__header{font-size:1.2em;font-weight:600;margin:0 0 .3em;padding:0;text-transform:uppercase}.cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr{margin-bottom:-.1em}.cfgOptionTree{box-sizing:border-box;list-style:none;margin:0;padding:0}.cfgOptionTree:after,.cfgOptionTree:before{box-sizing:inherit}.cfgOptionTree *{box-sizing:border-box}.cfgOptionTree :after,.cfgOptionTree :before{box-sizing:inherit}.cfgOptionTree--topLevel{padding-left:1.7em}.cfgOptionTree--indent{margin-left:3.2em}.cfgOptionTree--compThumb{margin-left:4.2em}.cfgProductInfo{box-sizing:border-box;color:#333;display:flex}.cfgProductInfo:after,.cfgProductInfo:before{box-sizing:inherit}.cfgProductInfo *{box-sizing:border-box}.cfgProductInfo :after,.cfgProductInfo :before{box-sizing:inherit}.cfgProductInfo__left{flex:1 1 auto;min-width:0;overflow:hidden}.cfgProductInfo__right{align-items:flex-end;display:flex;flex-direction:column;flex:1 0 auto;margin-left:1em;max-width:.333333333;min-width:0}.cfgProductInfo__name{display:block;font-size:1.6em;font-weight:600;line-height:1.33;margin:0}.cfgProductInfo__number{font-size:1.3em;font-weight:400;line-height:1.38;margin:0}.cfgCenteredLoading{box-sizing:border-box;align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.cfgCenteredLoading:after,.cfgCenteredLoading:before{box-sizing:inherit}.cfgCenteredLoading *{box-sizing:border-box}.cfgCenteredLoading :after,.cfgCenteredLoading :before{box-sizing:inherit}.cfgOverlayLoading{box-sizing:border-box;align-items:center;background-color:#fff;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1000}.cfgOverlayLoading:after,.cfgOverlayLoading:before{box-sizing:inherit}.cfgOverlayLoading *{box-sizing:border-box}.cfgOverlayLoading :after,.cfgOverlayLoading :before{box-sizing:inherit}.cfgOverlayLoading--clickThrough{background-color:transparent;pointer-events:none}.cfgOverlayLoading--clickThrough .cfgLoadingWithText{padding:2em 2em 1.8em;border-radius:.8em;background-color:#fff;opacity:.8;border:.1em solid rgba(0,0,0,.15)}.cfgOverlayLoading--fullWindow{position:fixed;z-index:1001}.cfgLoadingWithText{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;text-align:center}.cfgLoadingWithText:after,.cfgLoadingWithText:before{box-sizing:inherit}.cfgLoadingWithText *{box-sizing:border-box}.cfgLoadingWithText :after,.cfgLoadingWithText :before{box-sizing:inherit}.cfgLoadingWithText__text{color:#000;font-weight:600;margin-top:.5em;font-size:1.6em}.cfgLoading{box-sizing:border-box;animation:rotate 1.1s linear 0s infinite;border-radius:100%;border:.5em solid rgba(0,0,0,.15);border-bottom-color:#000;display:inline-block;height:3em;width:3em}.cfgLoading:after,.cfgLoading:before{box-sizing:inherit}.cfgLoading *{box-sizing:border-box}.cfgLoading :after,.cfgLoading :before{box-sizing:inherit}.cfgLoading--small{border-width:.4em;height:2em;width:2em}.cfgSlider{box-sizing:border-box;flex:1;margin:0;padding:0;min-height:2.8em;background:transparent;font:inherit}.cfgSlider:after,.cfgSlider:before{box-sizing:inherit}.cfgSlider *{box-sizing:border-box}.cfgSlider :after,.cfgSlider :before{box-sizing:inherit}.cfgSlider,.cfgSlider::-webkit-slider-thumb{-webkit-appearance:none}.cfgSlider::-webkit-slider-runnable-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-moz-range-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-ms-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-webkit-slider-thumb{margin-top:-1.3em;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-moz-range-thumb{box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-ms-thumb{margin-top:0;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-ms-tooltip{display:none}.cfgCheckmark{box-sizing:border-box;display:inline-block;width:100%;height:100%}.cfgCheckmark:after,.cfgCheckmark:before{box-sizing:inherit}.cfgCheckmark *{box-sizing:border-box}.cfgCheckmark :after,.cfgCheckmark :before{box-sizing:inherit}.cfgCheckmark__container{transition:transform .4s;transform:translateY(17px)}.cfgCheckmark__line{stroke:#000;stroke-linecap:round;stroke-width:12;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgCheckmark__lineLeft{stroke:#000;transform:rotate(40deg) translateY(24px) translateX(18px)}.cfgCheckmark__lineRight{stroke:#000;transform:rotate(-50deg) translateY(-2px) translateX(-3px)}.cfgCheckmark__border{border:.2em solid #c8c7cc;border-radius:.3em}.cfgCheckmark__border,.cfgCheckmark__border--active{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgCheckmark__border--active{border:.2em solid #000;border-radius:.3em}.cfgChevron{box-sizing:border-box;display:inline-block;width:100%}.cfgChevron:after,.cfgChevron:before{box-sizing:inherit}.cfgChevron *{box-sizing:border-box}.cfgChevron :after,.cfgChevron :before{box-sizing:inherit}.cfgChevron__container{transition:transform .4s}.cfgChevron__container--down{transform:translateY(13px)}.cfgChevron__container--up{transform:translateY(-13px)}.cfgChevron__line{stroke-linecap:round;stroke-width:10;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgChevron__lineLeft--active,.cfgChevron__lineRight--active{stroke:#000}.cfgChevron__lineLeft--passive,.cfgChevron__lineRight--passive{stroke:#bababa}.cfgChevron__lineLeft--down{transform:rotate(40deg)}.cfgChevron__lineLeft--up,.cfgChevron__lineRight--down{transform:rotate(-40deg)}.cfgChevron__lineRight--up{transform:rotate(40deg)}.cfgDarkTheme .cfgButton{box-sizing:border-box;display:inline-block;background-color:transparent;color:#d6d6d6;border-radius:.3em;border:.1em solid #6a6a6a;font-size:1.3em;font-weight:500;outline:none;padding:.4em .8em}.cfgDarkTheme .cfgButton:after,.cfgDarkTheme .cfgButton:before{box-sizing:inherit}.cfgDarkTheme .cfgButton *{box-sizing:border-box}.cfgDarkTheme .cfgButton :after,.cfgDarkTheme .cfgButton :before{box-sizing:inherit}.cfgDarkTheme .cfgButton:focus{box-shadow:0 0 0 .075em #333,0 0 0 .2em #d6d6d6}.cfgDarkTheme .cfgButtonRow{box-sizing:border-box}.cfgDarkTheme .cfgButtonRow:after,.cfgDarkTheme .cfgButtonRow:before{box-sizing:inherit}.cfgDarkTheme .cfgButtonRow *{box-sizing:border-box}.cfgDarkTheme .cfgButtonRow :after,.cfgDarkTheme .cfgButtonRow :before{box-sizing:inherit}.cfgDarkTheme .cfgButtonRow__button:nth-child(n+2){margin-left:1em}.cfgDarkTheme .cfgConfigurator{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:10px;color:#d6d6d6;min-width:0}.cfgDarkTheme .cfgConfigurator:after,.cfgDarkTheme .cfgConfigurator:before{box-sizing:inherit}.cfgDarkTheme .cfgConfigurator *{box-sizing:border-box}.cfgDarkTheme .cfgConfigurator :after,.cfgDarkTheme .cfgConfigurator :before{box-sizing:inherit}.cfgDarkTheme .cfgConfiguratorHeader{border-bottom:.1em solid #5b5963;padding:1.7em 1.7em 1.9em;position:relative}.cfgDarkTheme .cfgConfiguratorHeader__actions{margin-top:1em}.cfgDarkTheme .cfgConfiguratorTree{padding-top:1em}.cfgDarkTheme .cfgCanvasWrapper{box-sizing:border-box;position:relative;height:50rem;-webkit-user-select:none;user-select:none}.cfgDarkTheme .cfgCanvasWrapper:after,.cfgDarkTheme .cfgCanvasWrapper:before{box-sizing:inherit}.cfgDarkTheme .cfgCanvasWrapper *{box-sizing:border-box}.cfgDarkTheme .cfgCanvasWrapper :after,.cfgDarkTheme .cfgCanvasWrapper :before{box-sizing:inherit}.cfgDarkTheme .cfgCanvasWrapper canvas{outline:none}.cfgDarkTheme .cfgConfiguratorWrapper{box-sizing:border-box;color:#d6d6d6;height:100%;width:100%}.cfgDarkTheme .cfgConfiguratorWrapper:after,.cfgDarkTheme .cfgConfiguratorWrapper:before{box-sizing:inherit}.cfgDarkTheme .cfgConfiguratorWrapper *{box-sizing:border-box}.cfgDarkTheme .cfgConfiguratorWrapper :after,.cfgDarkTheme .cfgConfiguratorWrapper :before{box-sizing:inherit}@media screen and (orientation:landscape){.cfgDarkTheme .cfgConfiguratorWrapper{display:flex;flex-direction:row}.cfgDarkTheme .cfgConfiguratorWrapper>.cfgConfigurator{flex:0 1 40%;height:100%}.cfgDarkTheme .cfgConfiguratorWrapper .cfgCanvasWrapper{flex:0 1 60%;height:85vh;overflow:hidden;position:sticky;top:0}}.cfgDarkTheme .cfgExpandableHeadingRow{box-sizing:border-box;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%}.cfgDarkTheme .cfgExpandableHeadingRow:after,.cfgDarkTheme .cfgExpandableHeadingRow:before{box-sizing:inherit}.cfgDarkTheme .cfgExpandableHeadingRow *{box-sizing:border-box}.cfgDarkTheme .cfgExpandableHeadingRow :after,.cfgDarkTheme .cfgExpandableHeadingRow :before{box-sizing:inherit}.cfgDarkTheme .cfgExpandableHeadingRow--expandable{cursor:pointer}.cfgDarkTheme .cfgExpandableHeadingRow__title{align-items:center;display:flex;flex:1 1 auto;font-size:1.5em;font-weight:500;justify-content:flex-start}.cfgDarkTheme .cfgExpandableHeadingRow__icon{align-items:center;display:flex;flex:0 0 5em;justify-content:center;padding:0 1.5em}.cfgDarkTheme .cfgHr{box-sizing:border-box;border:0;border-bottom:.1em solid #5b5963;padding:0;margin:0}.cfgDarkTheme .cfgHr:after,.cfgDarkTheme .cfgHr:before{box-sizing:inherit}.cfgDarkTheme .cfgHr *{box-sizing:border-box}.cfgDarkTheme .cfgHr :after,.cfgDarkTheme .cfgHr :before{box-sizing:inherit}.cfgDarkTheme .cfgThumbnailImage{border-radius:.7em;display:inline-block;height:3em;width:3em}.cfgDarkTheme .cfgThumbnailPlaceholder{align-items:center;display:flex;flex:0 0 4.2em;justify-content:flex-start}.cfgDarkTheme .cfgFeatureItem{box-sizing:border-box;color:#d6d6d6}.cfgDarkTheme .cfgFeatureItem:after,.cfgDarkTheme .cfgFeatureItem:before{box-sizing:inherit}.cfgDarkTheme .cfgFeatureItem *{box-sizing:border-box}.cfgDarkTheme .cfgFeatureItem :after,.cfgDarkTheme .cfgFeatureItem :before{box-sizing:inherit}.cfgDarkTheme .cfgFeatureItem__dropdown{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%;cursor:pointer}.cfgDarkTheme .cfgFeatureItem--optional{margin-top:1em}.cfgDarkTheme .cfgFeatureItem__hiddenInput{left:-99999px;opacity:0;position:absolute;z-index:-1}.cfgDarkTheme .cfgFeatureItem__radio{border:.2em solid #5b5963;border-radius:50%}.cfgDarkTheme .cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgFeatureItem__checkbox{border:.2em solid #5b5963;border-radius:.3em}.cfgDarkTheme .cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__radio{box-shadow:0 0 0 .075em #333,0 0 0 .2em #d6d6d6}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{border:.2em solid #fff;border-radius:50%}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox{border:.2em solid #fff;border-radius:.3em}.cfgDarkTheme .cfgFeatureItemOption__titleWrapper,.cfgDarkTheme .cfgFeatureItemOptional__titleWrapper{flex:1 1 auto;margin-left:1em}.cfgDarkTheme .cfgFeatureItemOption__title,.cfgDarkTheme .cfgFeatureItemOptional__title{font-size:1.5em}.cfgDarkTheme .cfgFeatureItemOption__price{font-weight:600;font-size:.75em;color:#999}.cfgDarkTheme .cfgOptionTree--subLevel .cfgFeatureItem__hr{display:none}.cfgDarkTheme .cfgFeatureItemOption{align-items:center;display:flex}.cfgDarkTheme .cfgFeatureItemOptional{align-items:center;display:flex;justify-content:center;margin-top:.5em}.cfgDarkTheme .cfgFeatureItemOptional__header{font-size:1.2em;font-weight:600;margin:0 0 .3em;padding:0;text-transform:uppercase}.cfgDarkTheme .cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr{margin-bottom:-.1em}.cfgDarkTheme .cfgOptionTree{box-sizing:border-box;list-style:none;margin:0;padding:0}.cfgDarkTheme .cfgOptionTree:after,.cfgDarkTheme .cfgOptionTree:before{box-sizing:inherit}.cfgDarkTheme .cfgOptionTree *{box-sizing:border-box}.cfgDarkTheme .cfgOptionTree :after,.cfgDarkTheme .cfgOptionTree :before{box-sizing:inherit}.cfgDarkTheme .cfgOptionTree--topLevel{padding-left:1.7em}.cfgDarkTheme .cfgOptionTree--indent{margin-left:3.2em}.cfgDarkTheme .cfgOptionTree--compThumb{margin-left:4.2em}.cfgDarkTheme .cfgProductInfo{box-sizing:border-box;color:#d6d6d6;display:flex}.cfgDarkTheme .cfgProductInfo:after,.cfgDarkTheme .cfgProductInfo:before{box-sizing:inherit}.cfgDarkTheme .cfgProductInfo *{box-sizing:border-box}.cfgDarkTheme .cfgProductInfo :after,.cfgDarkTheme .cfgProductInfo :before{box-sizing:inherit}.cfgDarkTheme .cfgProductInfo__left{flex:1 1 auto;min-width:0;overflow:hidden}.cfgDarkTheme .cfgProductInfo__right{align-items:flex-end;display:flex;flex-direction:column;flex:1 0 auto;margin-left:1em;max-width:.333333333;min-width:0}.cfgDarkTheme .cfgProductInfo__name{display:block;font-size:1.6em;font-weight:600;line-height:1.33;margin:0}.cfgDarkTheme .cfgProductInfo__number{font-size:1.3em;font-weight:400;line-height:1.38;margin:0}.cfgDarkTheme .cfgCenteredLoading{box-sizing:border-box;align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.cfgDarkTheme .cfgCenteredLoading:after,.cfgDarkTheme .cfgCenteredLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgCenteredLoading *{box-sizing:border-box}.cfgDarkTheme .cfgCenteredLoading :after,.cfgDarkTheme .cfgCenteredLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading{box-sizing:border-box;align-items:center;background-color:#333;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1000}.cfgDarkTheme .cfgOverlayLoading:after,.cfgDarkTheme .cfgOverlayLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading *{box-sizing:border-box}.cfgDarkTheme .cfgOverlayLoading :after,.cfgDarkTheme .cfgOverlayLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading--clickThrough{background-color:transparent;pointer-events:none}.cfgDarkTheme .cfgOverlayLoading--clickThrough .cfgLoadingWithText{padding:2em 2em 1.8em;border-radius:.8em;background-color:#333;opacity:.8;border:.1em solid hsla(0,0%,100%,.15)}.cfgDarkTheme .cfgOverlayLoading--fullWindow{position:fixed;z-index:1001}.cfgDarkTheme .cfgLoadingWithText{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;text-align:center}.cfgDarkTheme .cfgLoadingWithText:after,.cfgDarkTheme .cfgLoadingWithText:before{box-sizing:inherit}.cfgDarkTheme .cfgLoadingWithText *{box-sizing:border-box}.cfgDarkTheme .cfgLoadingWithText :after,.cfgDarkTheme .cfgLoadingWithText :before{box-sizing:inherit}.cfgDarkTheme .cfgLoadingWithText__text{color:#fff;font-weight:600;margin-top:.5em;font-size:1.6em}.cfgDarkTheme .cfgLoading{box-sizing:border-box;animation:rotate 1.1s linear 0s infinite;border-radius:100%;border:.5em solid hsla(0,0%,100%,.15);border-bottom-color:#fff;display:inline-block;height:3em;width:3em}.cfgDarkTheme .cfgLoading:after,.cfgDarkTheme .cfgLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgLoading *{box-sizing:border-box}.cfgDarkTheme .cfgLoading :after,.cfgDarkTheme .cfgLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgLoading--small{border-width:.4em;height:2em;width:2em}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.cfgDarkTheme .cfgSlider{box-sizing:border-box;flex:1;margin:0;padding:0;min-height:2.8em;background:transparent;font:inherit}.cfgDarkTheme .cfgSlider:after,.cfgDarkTheme .cfgSlider:before{box-sizing:inherit}.cfgDarkTheme .cfgSlider *{box-sizing:border-box}.cfgDarkTheme .cfgSlider :after,.cfgDarkTheme .cfgSlider :before{box-sizing:inherit}.cfgDarkTheme .cfgSlider,.cfgDarkTheme .cfgSlider::-webkit-slider-thumb{-webkit-appearance:none}.cfgDarkTheme .cfgSlider::-webkit-slider-runnable-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-moz-range-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-ms-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-webkit-slider-thumb{margin-top:-1.3em;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-moz-range-thumb{box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-ms-thumb{margin-top:0;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-ms-tooltip{display:none}.cfgDarkTheme .cfgCheckmark{box-sizing:border-box;display:inline-block;width:100%;height:100%}.cfgDarkTheme .cfgCheckmark:after,.cfgDarkTheme .cfgCheckmark:before{box-sizing:inherit}.cfgDarkTheme .cfgCheckmark *{box-sizing:border-box}.cfgDarkTheme .cfgCheckmark :after,.cfgDarkTheme .cfgCheckmark :before{box-sizing:inherit}.cfgDarkTheme .cfgCheckmark__container{transition:transform .4s;transform:translateY(17px)}.cfgDarkTheme .cfgCheckmark__line{stroke:#fff;stroke-linecap:round;stroke-width:12;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgDarkTheme .cfgCheckmark__lineLeft{stroke:#fff;transform:rotate(40deg) translateY(24px) translateX(18px)}.cfgDarkTheme .cfgCheckmark__lineRight{stroke:#fff;transform:rotate(-50deg) translateY(-2px) translateX(-3px)}.cfgDarkTheme .cfgCheckmark__border{border:.2em solid #5b5963;border-radius:.3em}.cfgDarkTheme .cfgCheckmark__border,.cfgDarkTheme .cfgCheckmark__border--active{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgCheckmark__border--active{border:.2em solid #fff;border-radius:.3em}.cfgDarkTheme .cfgChevron{box-sizing:border-box;display:inline-block;width:100%}.cfgDarkTheme .cfgChevron:after,.cfgDarkTheme .cfgChevron:before{box-sizing:inherit}.cfgDarkTheme .cfgChevron *{box-sizing:border-box}.cfgDarkTheme .cfgChevron :after,.cfgDarkTheme .cfgChevron :before{box-sizing:inherit}.cfgDarkTheme .cfgChevron__container{transition:transform .4s}.cfgDarkTheme .cfgChevron__container--down{transform:translateY(13px)}.cfgDarkTheme .cfgChevron__container--up{transform:translateY(-13px)}.cfgDarkTheme .cfgChevron__line{stroke-linecap:round;stroke-width:10;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgDarkTheme .cfgChevron__lineLeft--active,.cfgDarkTheme .cfgChevron__lineRight--active{stroke:#fff}.cfgDarkTheme .cfgChevron__lineLeft--passive,.cfgDarkTheme .cfgChevron__lineRight--passive{stroke:#6a6a6a}.cfgDarkTheme .cfgChevron__lineLeft--down{transform:rotate(40deg)}.cfgDarkTheme .cfgChevron__lineLeft--up,.cfgDarkTheme .cfgChevron__lineRight--down{transform:rotate(-40deg)}.cfgDarkTheme .cfgChevron__lineRight--up{transform:rotate(40deg)}