@vmscloud/moz-ui-chart-vue 0.1.1

package/dist/index.js

@@ -0,0 +1,531 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { reactive, createApp, onBeforeUnmount, inject, ref, defineComponent, provide, computed, onUnmounted, onMounted, useModel, useSlots, getCurrentInstance, toRaw, watch, openBlock, createElementBlock, mergeModels, createVNode, unref, isRef } from "vue";
+import { generateUUID, koKR, listenChartPopupPayload, openChartPopupWindow, showMessage, ChartChrome, ViewDefinitionPanelHost } from "@vmscloud/moz-ui-chart-core";
+import { Aggregate, ChartChrome as ChartChrome2, DataType, MozEChart, RENDER_LIMIT, enUS, jaJP, koKR as koKR2, showConfirm, showDialog, showMessage as showMessage2, zhCN } from "@vmscloud/moz-ui-chart-core";
+import { useRouter } from "vue-router";
+class VueRenderer {
+  constructor() {
+    __publicField(this, "appContext", null);
+    __publicField(this, "apps", /* @__PURE__ */ new Set());
+  }
+  setAppContext(ctx) {
+    this.appContext = ctx;
+  }
+  mountInstance(container, slot, initialProps) {
+    const reactiveProps = reactive({ ...initialProps });
+    const app = createApp({
+      render() {
+        return slot(reactiveProps);
+      }
+    });
+    if (this.appContext) {
+      app._context.provides = { ...this.appContext.provides };
+      app._context.components = { ...this.appContext.components };
+      app._context.directives = { ...this.appContext.directives };
+      app._context.config.globalProperties = { ...this.appContext.config.globalProperties };
+    }
+    app.mount(container);
+    this.apps.add(app);
+    return {
+      update: (props) => {
+        Object.assign(reactiveProps, props);
+      },
+      destroy: () => {
+        this.apps.delete(app);
+        app.unmount();
+      }
+    };
+  }
+  unmountAll() {
+    for (const app of this.apps) {
+      try {
+        app.unmount();
+      } catch {
+      }
+    }
+    this.apps.clear();
+  }
+  get size() {
+    return this.apps.size;
+  }
+}
+class UserLayoutInstance {
+  constructor({ id, type, exportDef, importDef, strict, dependencies, manualLifeCycle }) {
+    __publicField(this, "uniqueId");
+    __publicField(this, "_id");
+    __publicField(this, "_type");
+    __publicField(this, "_default");
+    __publicField(this, "_importDef");
+    __publicField(this, "_exportDef");
+    __publicField(this, "_pendingDef");
+    __publicField(this, "_pending");
+    __publicField(this, "dispose", () => {
+    });
+    __publicField(this, "setApplied", () => {
+    });
+    __publicField(this, "strict");
+    __publicField(this, "dependencies");
+    this.uniqueId = generateUUID();
+    this._id = id;
+    this._type = type;
+    this._importDef = importDef;
+    this._exportDef = exportDef;
+    this._default = exportDef();
+    this._pending = false;
+    this._pendingDef = null;
+    this.strict = strict ?? false;
+    this.dependencies = dependencies ?? null;
+    if (!manualLifeCycle) {
+      onBeforeUnmount(() => {
+        this.dispose();
+      });
+    }
+  }
+  get pending() {
+    return this._pending;
+  }
+  set pending(value) {
+    this._pending = value;
+    if (!value && this._pendingDef) {
+      try {
+        this._importDef(this._pendingDef);
+        this.setApplied(true);
+      } catch (e) {
+        console.warn(`[UserLayoutInstance] id="${this._id}" importDef 실패:`, e);
+      } finally {
+        this._pendingDef = null;
+      }
+    }
+  }
+  get id() {
+    return this._id;
+  }
+  get type() {
+    return this._type;
+  }
+  get default() {
+    return this._default;
+  }
+  set default(value) {
+    this._default = value;
+  }
+  get current() {
+    return this._exportDef();
+  }
+  set current(value) {
+    if (this.pending) {
+      this._pendingDef = value;
+      return;
+    }
+    this._importDef(value);
+    this.setApplied(true);
+  }
+  setDefaultToCurrent() {
+    this._default = this._exportDef();
+  }
+}
+const USER_LAYOUT_PROVIDER_KEY = "user-layout-module";
+const useUserLayoutModule = () => inject(USER_LAYOUT_PROVIDER_KEY, {
+  register: () => {
+  },
+  currentPreset: ref(null)
+});
+const MOZ_CHART_LOCALE_KEY = Symbol("MozChartLocale");
+function useChartLocale() {
+  const injected = inject(MOZ_CHART_LOCALE_KEY, null);
+  if (injected) return injected;
+  return computed(() => koKR);
+}
+const ChartLocaleProvider = defineComponent({
+  name: "ChartLocaleProvider",
+  props: {
+    locale: { type: Object, default: () => koKR }
+  },
+  setup(props, { slots }) {
+    provide(
+      MOZ_CHART_LOCALE_KEY,
+      computed(() => props.locale)
+    );
+    return () => {
+      var _a;
+      return (_a = slots.default) == null ? void 0 : _a.call(slots);
+    };
+  }
+});
+function useEChartPopup() {
+  const locale = useChartLocale();
+  const router = useRouter();
+  const chartPopupTitle = ref("");
+  let handle = null;
+  const openChartPopup = async (data, chartKey, title) => {
+    chartPopupTitle.value = title ?? locale.value.Chart.chartPopup;
+    handle == null ? void 0 : handle.close();
+    const href = router.resolve({ path: `/chartPopup/${chartKey}`, query: {} }).href;
+    handle = openChartPopupWindow({
+      href,
+      name: chartKey,
+      payload: data,
+      title: chartPopupTitle.value,
+      onBlocked: () => showMessage(locale.value.Chart.errorMessage, false)
+    });
+  };
+  const closePopup = () => {
+    handle == null ? void 0 : handle.close();
+    handle = null;
+  };
+  onUnmounted(() => closePopup());
+  return { openChartPopup, closePopup, chartPopupTitle };
+}
+function useEChartPopupView() {
+  const itemsSource = ref([]);
+  const chartDef = ref({});
+  const viewDef = ref({ fields: [], columnFields: [], rowFields: [], valueFields: [] });
+  const filterDef = ref([]);
+  const chartPopupTitle = ref("");
+  const chartDefTemplate = ref({});
+  let stop = null;
+  onMounted(() => {
+    stop = listenChartPopupPayload((data) => {
+      itemsSource.value = data.itemsSource;
+      chartDef.value = data.chartDef;
+      viewDef.value = data.viewDef;
+      filterDef.value = data.filterDef;
+      chartDefTemplate.value = data.chartDefTemplate ?? {};
+      if (data.title) chartPopupTitle.value = data.title;
+    });
+  });
+  onUnmounted(() => stop == null ? void 0 : stop());
+  return { itemsSource, chartDef, viewDef, filterDef, chartPopupTitle, chartDefTemplate };
+}
+const _hoisted_1$1 = ["data-chart-id"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "EChart",
+  props: /* @__PURE__ */ mergeModels({
+    id: {},
+    itemsSource: { default: () => [] },
+    isFetching: { type: Boolean },
+    chartDef: { default: () => ({}) },
+    chartDefTemplate: {},
+    useToolBox: { type: Boolean, default: true },
+    useChartPopupIcon: { type: Boolean, default: false },
+    useChartSetting: { type: Boolean, default: true },
+    chartPopupTitle: {},
+    useStackBarHover: { type: Boolean, default: true },
+    onInitialized: {}
+  }, {
+    "viewDef": {
+      default: () => ({ fields: [], rowFields: [], columnFields: [], valueFields: [] })
+    },
+    "viewDefModifiers": {},
+    "filterDef": { default: () => [] },
+    "filterDefModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:chartDef"], ["update:viewDef", "update:filterDef"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const viewDef = useModel(__props, "viewDef");
+    const filterDef = useModel(__props, "filterDef");
+    const hostRef = ref();
+    const slots = useSlots();
+    const locale = useChartLocale();
+    const { register } = useUserLayoutModule();
+    const { openChartPopup } = useEChartPopup();
+    const renderer = new VueRenderer();
+    const vm = getCurrentInstance();
+    if (vm) renderer.setAppContext(vm.appContext);
+    let chrome = null;
+    let layoutInstance = null;
+    const SLOT_NAMES = ["tool-left", "tool-items", "tool-items-after"];
+    function slotRenderer(name) {
+      return (el, scope) => {
+        const handle = renderer.mountInstance(el, (p) => {
+          var _a;
+          return (_a = slots[name]) == null ? void 0 : _a.call(slots, p);
+        }, scope ?? {});
+        return { update: (s) => handle.update(s ?? {}), dispose: () => handle.destroy() };
+      };
+    }
+    function coreProps() {
+      return {
+        id: props.id,
+        itemsSource: props.itemsSource,
+        chartDef: props.chartDef,
+        viewDef: viewDef.value,
+        filterDef: filterDef.value,
+        chartDefTemplate: props.chartDefTemplate,
+        isFetching: props.isFetching,
+        useToolBox: props.useToolBox,
+        useChartSetting: props.useChartSetting,
+        useChartPopupIcon: props.useChartPopupIcon,
+        chartPopupTitle: props.chartPopupTitle,
+        useStackBarHover: props.useStackBarHover,
+        onInitialized: props.onInitialized
+      };
+    }
+    onMounted(() => {
+      const slotMap = {};
+      for (const name of SLOT_NAMES) if (slots[name]) slotMap[name] = slotRenderer(name);
+      const c = new ChartChrome(hostRef.value, coreProps(), {
+        locale: locale.value,
+        slots: slotMap,
+        onOpenPopup: (payload, key, title) => openChartPopup(payload, key, title)
+      });
+      c.on("chartDef:change", (def) => emits("update:chartDef", def));
+      c.on("viewDef:change", (v) => {
+        if (toRaw(viewDef.value) !== toRaw(v)) viewDef.value = v;
+      });
+      c.on("filterDef:change", (f) => {
+        if (toRaw(filterDef.value) !== toRaw(f)) filterDef.value = f;
+        else vm == null ? void 0 : vm.emit("update:filterDef", f);
+      });
+      chrome = c;
+      c.mount();
+      layoutInstance = new UserLayoutInstance({
+        id: props.id,
+        type: "chart",
+        importDef: (preset) => chrome == null ? void 0 : chrome.importDefinition(preset),
+        exportDef: () => chrome ? chrome.getDefinitionWithoutData() : {}
+      });
+      register(layoutInstance);
+    });
+    watch(
+      () => props.itemsSource,
+      (v) => chrome == null ? void 0 : chrome.update({ itemsSource: v })
+    );
+    watch(
+      () => props.chartDef,
+      (v) => chrome == null ? void 0 : chrome.update({ chartDef: v })
+    );
+    watch(
+      () => props.chartDefTemplate,
+      (v) => chrome == null ? void 0 : chrome.update({ chartDefTemplate: v }),
+      { deep: true }
+    );
+    watch(viewDef, (v) => chrome == null ? void 0 : chrome.update({ viewDef: v }), { deep: true });
+    watch(filterDef, (v) => chrome == null ? void 0 : chrome.update({ filterDef: v }), { deep: true });
+    watch(
+      () => [props.isFetching, props.useToolBox, props.useChartSetting, props.useChartPopupIcon, props.chartPopupTitle, props.useStackBarHover, props.onInitialized, props.id],
+      () => chrome == null ? void 0 : chrome.update({
+        id: props.id,
+        isFetching: props.isFetching,
+        useToolBox: props.useToolBox,
+        useChartSetting: props.useChartSetting,
+        useChartPopupIcon: props.useChartPopupIcon,
+        chartPopupTitle: props.chartPopupTitle,
+        useStackBarHover: props.useStackBarHover,
+        onInitialized: props.onInitialized
+      })
+    );
+    watch(locale, (m) => chrome == null ? void 0 : chrome.setLocale(m));
+    onBeforeUnmount(() => {
+      chrome == null ? void 0 : chrome.destroy();
+      chrome = null;
+      renderer.unmountAll();
+    });
+    const exposed = {
+      get chartCategorySource() {
+        return chrome == null ? void 0 : chrome.mozEChart.chartCategorySource;
+      },
+      get chartTypeSource() {
+        return chrome == null ? void 0 : chrome.mozEChart.chartTypeSource;
+      },
+      get mozEChart() {
+        return chrome == null ? void 0 : chrome.mozEChart;
+      },
+      get chartRef() {
+        return (chrome == null ? void 0 : chrome.echarts) ?? null;
+      },
+      get state() {
+        return chrome == null ? void 0 : chrome.state;
+      },
+      get chartCategory() {
+        return chrome == null ? void 0 : chrome.chartCategory;
+      },
+      get chartType() {
+        return chrome == null ? void 0 : chrome.chartType;
+      },
+      get useZoomX() {
+        return !!(chrome == null ? void 0 : chrome.mozEChart.dataZoomComputedProperty("x").get());
+      },
+      set useZoomX(v) {
+        chrome == null ? void 0 : chrome.mozEChart.dataZoomComputedProperty("x").set(v);
+        chrome == null ? void 0 : chrome.syncOption();
+      },
+      get useZoomY() {
+        return !!(chrome == null ? void 0 : chrome.mozEChart.dataZoomComputedProperty("y").get());
+      },
+      set useZoomY(v) {
+        chrome == null ? void 0 : chrome.mozEChart.dataZoomComputedProperty("y").set(v);
+        chrome == null ? void 0 : chrome.syncOption();
+      },
+      get chartOptionModal() {
+        return !!(chrome == null ? void 0 : chrome.optionModalOpen);
+      },
+      set chartOptionModal(v) {
+        if (chrome) chrome.optionModalOpen = v;
+      },
+      get chartFilterModel() {
+        return !!(chrome == null ? void 0 : chrome.filterModalOpen);
+      },
+      set chartFilterModel(v) {
+        if (chrome) chrome.filterModalOpen = v;
+      },
+      initializeDefinition: (initial) => chrome == null ? void 0 : chrome.initializeDefinition(initial),
+      get chartKey() {
+        return chrome == null ? void 0 : chrome.chartKey;
+      },
+      get customYAxisForSeriesType() {
+        var _a;
+        return ((_a = chrome == null ? void 0 : chrome.mozEChart.chartModule.series) == null ? void 0 : _a.customYAxisComputedProperty().get()) ?? [];
+      },
+      set customYAxisForSeriesType(v) {
+        var _a;
+        (_a = chrome == null ? void 0 : chrome.mozEChart.chartModule.series) == null ? void 0 : _a.customYAxisComputedProperty().set(v);
+        chrome == null ? void 0 : chrome.syncOption();
+      },
+      clickChartPopup: () => chrome == null ? void 0 : chrome.clickChartPopup(),
+      get useChartPopupIcon() {
+        return props.useChartPopupIcon;
+      },
+      onClickLegend: (params) => chrome == null ? void 0 : chrome.onClickLegend(params),
+      get chrome() {
+        return chrome;
+      }
+    };
+    __expose(exposed);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "hostRef",
+        ref: hostRef,
+        class: "mzch-vue-echart-host",
+        "data-chart-id": __props.id
+      }, null, 8, _hoisted_1$1);
+    };
+  }
+});
+const _hoisted_1 = { class: "chart-popup-wrapper" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "EChartPopup",
+  setup(__props) {
+    const { itemsSource, chartDef, viewDef, filterDef, chartDefTemplate } = useEChartPopupView();
+    const mozEChartInitialized = (mozEChart) => {
+      mozEChart.dataZoomComputedProperty("X").set(true);
+      mozEChart.dataZoomComputedProperty("Y").set(true);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$2, {
+          id: "chart_popup",
+          onInitialized: mozEChartInitialized,
+          itemsSource: unref(itemsSource),
+          chartDef: unref(chartDef),
+          "onUpdate:chartDef": _cache[0] || (_cache[0] = ($event) => isRef(chartDef) ? chartDef.value = $event : null),
+          viewDef: unref(viewDef),
+          "onUpdate:viewDef": _cache[1] || (_cache[1] = ($event) => isRef(viewDef) ? viewDef.value = $event : null),
+          filterDef: unref(filterDef),
+          "onUpdate:filterDef": _cache[2] || (_cache[2] = ($event) => isRef(filterDef) ? filterDef.value = $event : null),
+          chartDefTemplate: unref(chartDefTemplate),
+          ref: "chartPopupRef",
+          "use-tool-box": false
+        }, null, 8, ["itemsSource", "chartDef", "viewDef", "filterDef", "chartDefTemplate"])
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const EChartPopup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8e21a7ac"]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ViewDefinitionPanel",
+  props: /* @__PURE__ */ mergeModels({
+    customRule: { type: Function, default: () => true },
+    disableSourceField: { type: Boolean },
+    disableColumnField: { type: Boolean },
+    disableRowField: { type: Boolean },
+    disableValueField: { type: Boolean },
+    disableAggregate: { type: Boolean }
+  }, {
+    "definition": { required: true },
+    "definitionModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["change"], ["update:definition"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const definition = useModel(__props, "definition");
+    const hostRef = ref();
+    const locale = useChartLocale();
+    let host = null;
+    onMounted(() => {
+      host = new ViewDefinitionPanelHost(
+        hostRef.value,
+        {
+          definition: definition.value,
+          customRule: props.customRule,
+          disableSourceField: props.disableSourceField,
+          disableColumnField: props.disableColumnField,
+          disableRowField: props.disableRowField,
+          disableValueField: props.disableValueField,
+          disableAggregate: props.disableAggregate,
+          onChange: (field) => emits("change", field)
+        },
+        { locale: locale.value }
+      ).mount();
+    });
+    watch(
+      () => [props.disableSourceField, props.disableColumnField, props.disableRowField, props.disableValueField, props.disableAggregate],
+      () => host == null ? void 0 : host.update({
+        disableSourceField: props.disableSourceField,
+        disableColumnField: props.disableColumnField,
+        disableRowField: props.disableRowField,
+        disableValueField: props.disableValueField,
+        disableAggregate: props.disableAggregate
+      })
+    );
+    watch(definition, (v) => host == null ? void 0 : host.update({ definition: v }), { deep: true });
+    watch(locale, (m) => host == null ? void 0 : host.setLocale(m));
+    onBeforeUnmount(() => {
+      host == null ? void 0 : host.destroy();
+      host = null;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "hostRef",
+        ref: hostRef,
+        class: "mzch-vue-view-def-host"
+      }, null, 512);
+    };
+  }
+});
+export {
+  Aggregate,
+  ChartChrome2 as ChartChrome,
+  ChartLocaleProvider,
+  DataType,
+  _sfc_main$2 as EChart,
+  EChartPopup,
+  MOZ_CHART_LOCALE_KEY,
+  MozEChart,
+  RENDER_LIMIT,
+  UserLayoutInstance,
+  _sfc_main as ViewDefinitionPanel,
+  enUS,
+  jaJP,
+  koKR2 as koKR,
+  showConfirm,
+  showDialog,
+  showMessage2 as showMessage,
+  useChartLocale,
+  useEChartPopup,
+  useEChartPopupView,
+  useUserLayoutModule,
+  zhCN
+};

package/dist/locale/index.d.ts

@@ -0,0 +1,23 @@
+import { InjectionKey, Ref } from 'vue';
+import { ChartLocaleMessages } from '@vmscloud/moz-ui-chart-core';
+export declare const MOZ_CHART_LOCALE_KEY: InjectionKey<Ref<ChartLocaleMessages>>;
+/** 주입된 로케일(없으면 koKR) */
+export declare function useChartLocale(): Ref<ChartLocaleMessages>;
+/** 하위 트리에 로케일을 provide 하는 래퍼 컴포넌트 (레거시 MozConfigProvider 대응) */
+export declare const ChartLocaleProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    locale: {
+        type: () => ChartLocaleMessages;
+        default: () => ChartLocaleMessages;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    locale: {
+        type: () => ChartLocaleMessages;
+        default: () => ChartLocaleMessages;
+    };
+}>> & Readonly<{}>, {
+    locale: ChartLocaleMessages;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { koKR, enUS, zhCN, jaJP } from '@vmscloud/moz-ui-chart-core';
+export type { ChartLocaleMessages } from '@vmscloud/moz-ui-chart-core';

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";@layer mzch{:root{--mzch-color-accent: var(--moz-color-accent, #4568e0);--mzch-color-accent-strong: var(--moz-color-accent-strong, #3e5dc9);--mzch-color-accent-subtle: var(--moz-color-accent-subtle, #e2e7fa);--mzch-color-danger: var(--moz-color-danger, #dc5a5a);--mzch-color-warning: var(--moz-color-warning, #fa9e23);--mzch-color-success: var(--moz-color-success, #357e63);--mzch-color-surface: var(--moz-color-surface, #ffffff);--mzch-color-on-accent: var(--moz-color-on-accent, #ffffff);--mzch-color-surface-subtle: var(--moz-color-surface-subtle, #f4f4f9);--mzch-color-surface-muted: var(--moz-color-surface-muted, #f8f8fd);--mzch-color-border: var(--moz-color-border, #bac6d4);--mzch-color-border-subtle: var(--moz-color-border-subtle, #e1e3f0);--mzch-color-text: var(--moz-color-text, #28364e);--mzch-color-text-secondary: var(--moz-color-text-secondary, #6a7184);--mzch-color-text-subtle: var(--moz-color-text-subtle, #96a5be);--mzch-color-text-muted: var(--moz-color-text-muted, #a7b1bc);--mzch-color-disabled: var(--moz-color-disabled, #e0e1ec);--mzch-color-inverse-surface: var(--mzch-color-text);--mzch-color-inverse-text: var(--mzch-color-surface);--mzch-color-accent-ring: color-mix(in srgb, var(--mzch-color-accent) 20%, transparent);--mzch-color-accent-ring-strong: color-mix(in srgb, var(--mzch-color-accent) 30%, transparent);--mzch-color-accent-soft: color-mix(in srgb, var(--mzch-color-accent) 16%, transparent);--mzch-color-accent-ghost: color-mix(in srgb, var(--mzch-color-accent) 9%, transparent);--mzch-color-danger-ring: color-mix(in srgb, var(--mzch-color-danger) 20%, transparent);--mzch-color-danger-ghost: color-mix(in srgb, var(--mzch-color-danger) 13%, transparent);--mzch-color-muted-soft: color-mix(in srgb, var(--mzch-color-text-subtle) 16%, transparent);--mzch-color-shadow: var(--moz-color-shadow, rgb(57 55 122 / .1));--mzch-color-shadow-weak: var(--moz-color-shadow-weak, rgb(0 0 0 / .05));--mzch-color-scrim: var(--moz-color-scrim, rgb(0 0 0 / .3));--mzch-color-scrim-strong: var(--moz-color-scrim-strong, rgb(66 72 83 / .5))}}@layer mzch{:root{--mzch-radius-xs: var(--moz-radius-xs, 2px);--mzch-radius-control: var(--moz-radius-control, 4px);--mzch-radius-surface: var(--moz-radius-surface, 6px);--mzch-radius-panel: var(--moz-radius-panel, 10px);--mzch-radius-chip: var(--moz-radius-chip, 10px);--mzch-radius-pill: var(--moz-radius-pill, 999px);--mzch-radius-circle: var(--moz-radius-circle, 50%)}}@layer mzch{@keyframes moz-spin{to{transform:rotate(360deg)}}.mzch-circle-loader{display:flex;justify-content:center;align-items:center;width:14px;height:14px;color:var(--mzch-color-surface);animation:moz-spin 1s linear infinite}.mzch-button{display:flex;justify-content:center;align-items:center;text-align:center;height:30px;border:1px solid var(--mzch-color-accent);border-radius:var(--mzch-radius-control);background-color:var(--mzch-color-surface);font-size:.875rem;padding:0 14px;gap:8px}.mzch-button .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center;font-size:.875rem;line-height:normal}.mzch-button:disabled{cursor:not-allowed}.mzch-button:focus{border-color:var(--mzch-color-accent);box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-button.loading{width:var(--mzch-btn-loading-width)}.mzch-button.loading .spinner{font-size:0}.mzch-button.loading span.text{display:none}.mzch-button.mzch-default-button{background-color:var(--mzch-color-accent);color:var(--mzch-color-surface);border-color:var(--mzch-color-accent);padding:0 .6875rem;font-weight:300}.mzch-button.mzch-default-button:hover{background-color:var(--mzch-color-accent-strong);border-color:var(--mzch-color-accent-strong)}.mzch-button.mzch-default-button:disabled{background-color:var(--mzch-color-disabled);border-color:var(--mzch-color-disabled);color:var(--mzch-color-text-muted)}.mzch-button.mzch-default-button:disabled .mozart-icons:before{color:var(--mzch-color-text-muted)}.mzch-button.mzch-icon-text-button{padding:0 12px}.mzch-button.mzch-text-button{min-width:unset;background-color:transparent;color:var(--mzch-color-accent);border-color:transparent;gap:5px;padding:0}.mzch-button.mzch-text-button .text{font-weight:400}.mzch-button.mzch-text-button:disabled{color:var(--mzch-color-text-muted)}.mzch-button.mzch-text-button:disabled:hover{background-color:transparent;cursor:not-allowed}.mzch-button.mzch-icon-button{display:flex;justify-content:center;align-items:center;padding:0;background-color:transparent;color:var(--mzch-color-surface);min-width:26px;min-height:26px;width:26px;height:26px;border-color:transparent;font-weight:300}.mzch-button.mzch-icon-button.small{min-width:20px;min-height:20px;width:20px;height:20px}.mzch-button.mzch-icon-button:hover{background-color:var(--mzch-color-muted-soft)}.mzch-button.mzch-icon-button:disabled{background-color:transparent;color:var(--mzch-color-surface)}.mzch-button.mzch-icon-button.mzch-icon-accent-button{background-color:var(--mzch-color-accent)}.mzch-button.mzch-icon-button.mzch-icon-accent-button:hover{background-color:var(--mzch-color-accent-strong);color:var(--mzch-color-surface)}.mzch-button.mzch-icon-button.mzch-icon-accent-button:disabled{background-color:var(--mzch-color-disabled)}.mzch-button.mzch-outline-button{background-color:transparent;border-color:var(--mzch-color-accent);color:var(--mzch-color-accent);font-weight:400}.mzch-button.mzch-outline-button:hover{border-color:var(--mzch-color-accent-strong);color:var(--mzch-color-accent-strong)}.mzch-button.mzch-outline-button:disabled{border-color:var(--mzch-color-text-muted);color:var(--mzch-color-text-muted)}.mzch-button.mzch-no-interaction-button:hover{background-color:transparent}.mzch-button.mzch-no-interaction-button:focus{box-shadow:none}}@layer mzch{.mzch-label{-webkit-user-select:none;user-select:none;font-size:.75rem;color:var(--mzch-color-text-secondary);font-weight:500;line-height:12px;text-align:left}.mzch-label.disabled{pointer-events:none;color:var(--mzch-color-text-muted)}.mzch-label.read-only{pointer-events:none;color:var(--mzch-color-text-secondary)}.mzch-label .require-mark{padding-left:.1875rem;color:var(--mzch-color-danger)}}@layer mzch{.mzch-switch{width:100%;box-sizing:border-box;height:1.75rem;display:flex;align-items:center;gap:6px}.mzch-switch .label-left,.mzch-switch .label-right{cursor:pointer}.mzch-switch .mzch-switch-box{width:36px;height:20px;padding:2px;box-sizing:border-box;border-radius:var(--mzch-radius-pill);background-color:var(--mzch-color-accent-ring-strong);transition:background-color .2s ease-in;position:relative}.mzch-switch .mzch-switch-box.active{background-color:var(--mzch-color-accent)}.mzch-switch .mzch-switch-box.disabled{background-color:var(--mzch-color-disabled)}.mzch-switch .mzch-switch-box.active.disabled{background-color:var(--mzch-color-border)}.mzch-switch .mzch-switch-box:focus-within{box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-switch .mzch-switch-box .mzch-switch-input{width:100%;height:100%;position:absolute;left:0;top:0;margin:0;cursor:pointer;z-index:2;opacity:0}.mzch-switch .mzch-switch-box .mzch-switch-input:disabled{cursor:not-allowed}.mzch-switch .mzch-switch-box .mzch-switch-handler{width:16px;height:16px;border-radius:var(--mzch-radius-pill);background-color:var(--mzch-color-surface);transition:transform .2s cubic-bezier(.65,.05,.36,1)}.mzch-switch .mzch-switch-box .mzch-switch-handler.active{transform:translate(16px)}.mzch-switch .mzch-switch-box .mzch-switch-handler.disabled{background-color:var(--mzch-color-surface-subtle)}}@layer mzch{.mzch-checkbox{-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;flex-direction:row!important;position:relative}.mzch-checkbox.disabled{cursor:not-allowed}.mzch-checkbox:hover:not(.disabled) .check-icon path:last-of-type{stroke:var(--mzch-color-accent-strong)}.mzch-checkbox:hover:not(.disabled) .checked-icon path{fill:var(--mzch-color-accent-strong)}.mzch-checkbox:focus{outline:none}.mzch-checkbox .checkbox-icon-wrapper{position:relative;height:12px;min-height:12px;width:12px;min-width:12px}.mzch-checkbox .checkbox-input{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;margin:0;height:100%;width:100%;border-radius:var(--mzch-radius-xs);opacity:0}.mzch-checkbox .checkbox-visual{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:var(--mzch-radius-xs);transition:box-shadow .15s ease-in-out}.mzch-checkbox .checkbox-visual.focused{box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-checkbox .mzch-checkbox-label{font-weight:500;line-height:.75rem;font-size:.75rem;display:flex;align-items:center;padding-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}}@layer mzch{.mzch-input-wrapper{display:flex;flex-direction:column;position:relative}.mzch-input-wrapper .input-wrapper{display:flex;flex-direction:column;gap:3px;height:100%}.mzch-input-wrapper .input-label{display:flex;align-items:center}.mzch-input-wrapper .mzch-input{height:1.875rem;padding:0 .625rem;border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-control);background-color:var(--mzch-color-surface);box-sizing:border-box;color:var(--mzch-color-text);font-size:.8125rem;font-family:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mzch-input-wrapper .mzch-input:hover{border-color:var(--mzch-color-accent)}.mzch-input-wrapper .mzch-input:focus{border-color:var(--mzch-color-accent);box-shadow:0 0 0 3px var(--mzch-color-accent-ring);outline:none}.mzch-input-wrapper .mzch-input::placeholder{color:var(--mzch-color-text-subtle);font-size:.8125rem}.mzch-input-wrapper .mzch-input.has-inside-message{padding-right:50%}.mzch-input-wrapper .mzch-input.has-invalid-icon{padding-right:1.875rem}.mzch-input-wrapper .mzch-input.disabled{-webkit-user-select:none;user-select:none;color:var(--mzch-color-text-muted);border:1px solid var(--mzch-color-text-muted);background:var(--mzch-color-surface-subtle);cursor:not-allowed}.mzch-input-wrapper .mzch-input.disabled::placeholder{color:var(--mzch-color-text-muted)}.mzch-input-wrapper .mzch-input.disabled:hover{border:1px solid var(--mzch-color-text-muted)}.mzch-input-wrapper .mzch-input.read-only{-webkit-user-select:none;user-select:none;border:1px solid var(--mzch-color-border);background:var(--mzch-color-surface-muted);cursor:not-allowed;border-color:var(--mzch-color-border)}.mzch-input-wrapper .mzch-input.read-only::placeholder{color:var(--mzch-color-text-muted)}.mzch-input-wrapper.is-invalid .mzch-input{border-color:var(--mzch-color-danger);box-shadow:0 0 0 3px var(--mzch-color-danger-ring)}.mzch-input-wrapper .mzch-input-invalid-message{color:var(--mzch-color-danger);font-size:.75rem;font-weight:500;cursor:default}.mzch-input-wrapper .mzch-input-invalid-message.position-outside{position:absolute;bottom:calc((.75rem + 7px)*-1);left:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mzch-input-wrapper .mzch-input-invalid-message.position-inside{position:absolute;top:50%;right:2px;transform:translateY(-50%);white-space:nowrap;padding:0 2px;pointer-events:auto;max-width:50%;overflow:hidden;text-overflow:ellipsis;z-index:1}.mzch-input-wrapper .mzch-input-invalid-icon-v2{position:absolute;bottom:0;right:0;width:1.875rem;height:1.875rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1}}@layer mzch{.mzch-number-input-container{display:flex;flex-direction:column;align-items:flex-start;margin:0;gap:6px}.mzch-number-input-container span.require-mark{color:var(--mzch-color-danger)}.mzch-number-input-container .mzch-number-input-wrapper{display:flex;align-items:center}.mzch-number-input-container .mzch-number-input-wrapper:hover .mzch-number-input,.mzch-number-input-container .mzch-number-input-wrapper:focus .mzch-number-input,.mzch-number-input-container .mzch-number-input-wrapper:focus-within .mzch-number-input{border-color:var(--mzch-color-accent)}.mzch-number-input-container .mzch-number-input-wrapper:hover .mzch-number-input .mzch-number-input-btn-icon path,.mzch-number-input-container .mzch-number-input-wrapper:focus .mzch-number-input .mzch-number-input-btn-icon path,.mzch-number-input-container .mzch-number-input-wrapper:focus-within .mzch-number-input .mzch-number-input-btn-icon path{fill:var(--mzch-color-accent)}.mzch-number-input-container .mzch-number-input-wrapper:hover .num-change-btn.disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus .num-change-btn.disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus-within .num-change-btn.disabled{border-color:var(--mzch-color-text-muted)}.mzch-number-input-container .mzch-number-input-wrapper:hover .num-change-btn.disabled.min-disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus .num-change-btn.disabled.min-disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus-within .num-change-btn.disabled.min-disabled{border-right-color:var(--mzch-color-text-muted)}.mzch-number-input-container .mzch-number-input-wrapper:hover .num-change-btn.disabled.max-disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus .num-change-btn.disabled.max-disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus-within .num-change-btn.disabled.max-disabled{border-left-color:var(--mzch-color-text-muted)}.mzch-number-input-container .mzch-number-input-wrapper .num-change-btn{box-sizing:border-box;width:30px;height:30px;min-width:30px;padding:4px}.mzch-number-input-container .mzch-number-input-wrapper .num-change-btn.disabled{border:1px solid var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.mzch-number-input-container .mzch-number-input-wrapper .num-change-btn:focus{box-shadow:0 0 0 3px var(--mzch-color-accent-ring);z-index:2}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input{display:flex;box-sizing:border-box;flex-grow:1;min-height:30px;height:30px;border:1px solid var(--mzch-color-border);border-left:none;border-right:none;background-color:var(--mzch-color-surface);overflow:hidden}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input input::-webkit-outer-spin-button,.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input input[type=number]{-moz-appearance:textfield}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input input{min-height:100%;height:100%;width:100%;font-size:.8125rem;color:var(--mzch-color-text);border:none;outline:none;box-sizing:border-box;text-align:center;background-color:transparent}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input:focus-within{box-shadow:0 0 0 3px var(--mzch-color-accent-ring);z-index:2}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input-btn{display:flex;flex-direction:column;justify-content:space-between;border-style:none}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input-btn-icon{display:flex;align-items:center;justify-content:center;margin-top:1px;margin-bottom:1px;cursor:pointer}.mzch-number-input-container .mzch-number-input-wrapper .input-border{border:1px solid var(--mzch-color-border);width:100%}.mzch-number-input-container .mzch-number-input-wrapper .input-border input{text-align:left;padding:5px 0 5px 7px}.mzch-number-input-container .mzch-number-input-wrapper .input-border .mzch-number-input-btn{margin-left:9px;margin-right:9px}.mzch-number-input-container.disabled .mzch-number-input-wrapper .num-change-btn{border:1px solid var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.mzch-number-input-container.disabled .mzch-number-input-wrapper .num-change-btn:hover{background-color:var(--mzch-color-surface-subtle)}.mzch-number-input-container.disabled .mzch-number-input-wrapper .mzch-number-input{border-color:var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.mzch-number-input-container.disabled .mzch-number-input-wrapper .mzch-number-input input{cursor:not-allowed;color:var(--mzch-color-text-muted)}.mzch-number-input-container.disabled:hover,.mzch-number-input-container.disabled:focus,.mzch-number-input-container.disabled:focus-within{border-color:var(--mzch-color-text-muted)}.mzch-number-input-container.disabled:hover .mzch-date-input,.mzch-number-input-container.disabled:focus .mzch-date-input,.mzch-number-input-container.disabled:focus-within .mzch-date-input{border-color:var(--mzch-color-text-muted)}}@layer mzch{.mzch-calendar-container{box-sizing:border-box;width:20.9375rem;overflow:hidden;padding:.625rem;border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-surface);background-color:var(--mzch-color-surface);box-shadow:0 3px 4px 0 var(--mzch-color-shadow);-webkit-user-select:none;user-select:none}.mzch-calendar-header{display:flex;height:26px;min-width:19rem;flex-shrink:0;flex-grow:0;align-items:center;justify-content:space-between;margin-bottom:.5rem}.mzch-calendar-header__spacer{flex-grow:1}.mzch-calendar-select{display:flex;margin:.375rem .375rem .375rem .25rem;cursor:pointer;align-items:center;font-size:.875rem;font-weight:700}.mzch-calendar-select__text{margin-left:.25rem}.mzch-calendar-select__text:hover{color:var(--mzch-color-accent)}.mzch-calendar-select-btn{margin-left:.625rem;cursor:pointer;padding-top:.125rem;color:var(--mzch-color-text-subtle)}.mzch-calendar-select-btn:hover{color:var(--mzch-color-accent)}.mzch-calendar-select-btn-group{display:flex;align-items:center}.mzch-calendar-row{display:flex;align-items:center;justify-content:center;font-size:.875rem}.mzch-calendar-row--wrap{flex-wrap:wrap;overflow-y:auto}.mzch-calendar-column{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--mzch-radius-control);border:1px solid transparent;color:var(--mzch-color-text)}.mzch-calendar-column--hoverable:hover{background-color:var(--mzch-color-accent-ghost)}.mzch-calendar-column-day{cursor:default;color:var(--mzch-color-text-subtle)}.mzch-calendar-column-otherMonth{color:var(--mzch-color-text-subtle)}.mzch-calendar-selected{border-color:var(--mzch-color-accent);background-color:var(--mzch-color-accent-soft);font-weight:500;color:var(--mzch-color-accent)}.date-disable{cursor:not-allowed!important;color:var(--mzch-color-text-muted)}}@layer mzch{.mzch-date-input-container{margin:0;display:flex;cursor:pointer;flex-direction:column;gap:.375rem}.mzch-date-input-container.disabled{cursor:default}.mzch-date-input-container.disabled:hover .mzch-date-input{border-color:var(--mzch-color-text-muted)}.mzch-date-input-container.disabled:hover .mzch-date-input__icon{color:var(--mzch-color-text-muted)}.mzch-date-input-container:hover .mzch-date-input{border-color:var(--mzch-color-accent)}.mzch-date-input-container:focus-within .mzch-date-input{border-color:var(--mzch-color-accent)}.mzch-date-input-container:hover .mzch-date-input__icon{color:var(--mzch-color-accent)}.mzch-date-input-container:focus-within .mzch-date-input__icon{color:var(--mzch-color-accent)}.mzch-date-input-container .require-mark{color:var(--mzch-color-danger)}.mzch-date-input-wrapper{display:flex;align-items:center}.date-move-btn{height:1.875rem;min-height:1.875rem;width:1.875rem;min-width:1.875rem;padding:.25rem}.date-move-btn--left{border-radius:var(--mzch-radius-control) 0 0 var(--mzch-radius-control)}.date-move-btn--right{border-radius:0 var(--mzch-radius-control) var(--mzch-radius-control) 0}.date-move-btn--disabled{border:1px solid var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.mzch-date-input-container .mzch-date-input-wrapper .date-move-btn{width:1.875rem;min-width:1.875rem;height:1.875rem;min-height:1.875rem;padding:.25rem}.mzch-date-input{box-sizing:border-box;display:flex;height:1.875rem;min-height:1.875rem;width:100%;overflow:hidden;border:1px solid var(--mzch-color-border);background-color:var(--mzch-color-surface)}.mzch-date-input--radius{border-radius:var(--mzch-radius-control)}.mzch-date-input--no-lr-border{border-right:0;border-left:0}.mzch-date-input--disabled{flex-grow:1;border-color:var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.mzch-date-input:focus-within{z-index:2;box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-date-input__field{height:100%;min-height:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;color:var(--mzch-color-text);box-sizing:border-box;border:none;background-color:transparent;outline:none;padding-right:0;padding-left:.625rem}.mzch-date-input__field--disabled{cursor:not-allowed;color:var(--mzch-color-text-muted)}.mzch-date-input__icon-container{display:flex;align-items:center;border:none;margin-right:.625rem}.mzch-date-input__icon{color:var(--mzch-color-text-subtle)}.mzch-date-input__icon--disabled{color:var(--mzch-color-text-muted)}.calendar-container{position:fixed;z-index:1000;margin-top:.1875rem;margin-bottom:.1875rem}.calendar-container .mzch-calendar-container{position:static!important}}@layer mzch{.mzch-popup-container{position:fixed;top:0;left:0;z-index:1000;height:100dvh;width:100dvw;overflow:hidden}.mzch-popup-backdrop{height:100%;width:100%;background-color:var(--mzch-color-scrim-strong)}.mzch-popup{pointer-events:auto;position:absolute;display:flex;flex-direction:column;overflow:hidden;font-weight:500;border-radius:var(--mzch-radius-panel);background-color:var(--mzch-color-surface)}.mzch-popup-title{display:flex;height:2.8125rem;min-height:2.8125rem;align-items:center;justify-content:space-between;line-height:2.8125rem;font-size:1rem;font-weight:500;color:var(--mzch-color-text);box-sizing:border-box;border-bottom:1px solid var(--mzch-color-border-subtle);padding:0 16px}.mzch-popup-title.draggable{cursor:move}.mzch-popup-title .close-button{cursor:pointer}.mzch-popup-description{padding:8px 16px 0;font-size:.8125rem;line-height:1.4;color:var(--mzch-color-text-secondary)}.mzch-popup-body{height:100%;overflow-y:auto;font-weight:400;color:var(--mzch-color-text);box-sizing:content-box}.mzch-dialog-body{display:flex;align-items:center;gap:16px;font-size:.875rem;line-height:normal;word-break:keep-all}.mzch-dialog-body .dialog-icon{margin-left:4px;min-width:30px}.mzch-dialog-body .dialog-message{white-space:pre-wrap}.mzch-popup-footer{box-sizing:border-box;width:100%;display:flex;justify-content:flex-end;gap:6px;padding:16px;font-weight:400;border:none}.mzch-popup-footer.with-border{border-top:1px solid var(--mzch-color-border-subtle)}.mzch-popup-footer .preset-btn{width:5rem;min-width:5rem;padding:0!important}.resize-handler{position:absolute;right:0;bottom:0;height:15px;width:15px;cursor:nwse-resize}.mzch-popup-footer .mzch-button{min-width:80px}.mzch-popup-side .mzch-popup{border-radius:0;max-width:100dvw;max-height:100dvh;animation:moz-popup-slide-in .2s ease-out}.mzch-popup-side-right .mzch-popup,.mzch-popup-side-left .mzch-popup{top:0;bottom:0;height:100dvh;width:20rem}.mzch-popup-side-right .mzch-popup{right:0;left:auto;--mzch-popup-slide-from: translateX(100%)}.mzch-popup-side-left .mzch-popup{left:0;--mzch-popup-slide-from: translateX(-100%)}.mzch-popup-side-top .mzch-popup,.mzch-popup-side-bottom .mzch-popup{left:0;right:0;width:100dvw;height:20rem}.mzch-popup-side-top .mzch-popup{top:0;--mzch-popup-slide-from: translateY(-100%)}.mzch-popup-side-bottom .mzch-popup{bottom:0;top:auto;--mzch-popup-slide-from: translateY(100%)}.mzch-popup-no-backdrop{pointer-events:none}.mzch-popup-no-backdrop .mzch-popup{pointer-events:auto}@keyframes moz-popup-slide-in{0%{transform:var(--mzch-popup-slide-from, none)}to{transform:none}}}@layer mzch{.mzch-select{position:relative;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}.mzch-select.is-invalid .select-input-container,.mzch-select.is-invalid .mzch-input-container{border-color:var(--mzch-color-danger);box-shadow:0 0 0 3px var(--mzch-color-danger-ring)}.mzch-select.is-open .select-input-container,.mzch-select.is-open .mzch-input-container{border-color:var(--mzch-color-accent)}.mzch-select.disabled{cursor:not-allowed}.mzch-select.disabled .select-input-container,.mzch-select.disabled .mzch-input-container{pointer-events:none;border-color:var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.input-wrapper{display:flex;width:100%;flex-direction:column;gap:.375rem}.mzch-input-container.select-input-container{box-sizing:border-box;display:flex;height:1.875rem;min-height:1.875rem;cursor:pointer;overflow:hidden;border-radius:var(--mzch-radius-control);border:1px solid var(--mzch-color-border);background-color:var(--mzch-color-surface)}.mzch-input-container.select-input-container:focus-within{border-color:var(--mzch-color-accent);box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-input-container.select-input-container:hover{border-color:var(--mzch-color-accent)}.input-container-wrapper{display:flex;width:100%;cursor:text;align-items:center;padding-top:.1875rem;padding-bottom:.1875rem;padding-right:0;padding-left:.625rem;font-size:.8125rem;color:var(--mzch-color-text)}.input-container-wrapper--disabled{cursor:not-allowed;color:var(--mzch-color-text-muted)}.input-container-wrapper--disabled::placeholder{color:var(--mzch-color-text-muted)}.icon-container{display:flex;height:100%;width:2.125rem;min-width:2.125rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border:none;background-color:transparent;padding:0;outline:none}.icon-container:disabled{cursor:not-allowed}.select-display-input{box-sizing:border-box;height:100%;min-height:100%;width:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;background-color:transparent;padding-top:.1875rem;padding-bottom:.1875rem;padding-right:0;padding-left:.625rem;font-size:.8125rem;color:var(--mzch-color-text);outline:none}.select-display-input::placeholder{color:var(--mzch-color-text-subtle)}.select-display-input--disabled{cursor:not-allowed;color:var(--mzch-color-text-muted)}.select-display-input--disabled::placeholder{color:var(--mzch-color-text-muted)}.mzch-input-invalid-message{position:absolute;bottom:-.625rem;font-size:.75rem;font-weight:500;color:var(--mzch-color-danger)}.list-box{position:fixed;z-index:1000;margin-top:.3125rem;margin-bottom:.3125rem;box-sizing:border-box;max-height:250px;overflow:hidden;border-radius:var(--mzch-radius-control);border:1px solid var(--mzch-color-border);background-color:var(--mzch-color-surface);box-shadow:0 3px 4px 0 var(--mzch-color-shadow)}.filter-input{position:relative;box-sizing:border-box;display:flex;height:1.8125rem;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;border-width:0;border-bottom-width:1px;border-style:solid;border-color:var(--mzch-color-border)}.filter-input .filter-input__field{width:100%;border:none;background-color:transparent;color:var(--mzch-color-text);padding:.125rem .625rem;font-size:.8125rem;outline:none}.filter-input .filter-input__field::placeholder{color:var(--mzch-color-text-subtle)}.search-icon{display:flex;min-width:1.75rem;align-items:center;justify-content:center}.list-box-container{max-height:250px;overflow-y:auto;padding-top:.1875rem;padding-bottom:.1875rem}.list-box-container--with-filter{max-height:222px}.inner-container{position:relative}.list-box-item{box-sizing:border-box;display:flex;min-height:1.5rem;align-items:center;justify-content:space-between;padding-left:.625rem;padding-right:.625rem;font-size:.8125rem;line-height:1.5rem;color:var(--mzch-color-text)}.list-box-item.virtual-row{position:absolute;width:100%;cursor:pointer;gap:.375rem;outline:none}.list-box-item.virtual-row:hover,.list-box-item.virtual-row:focus{background-color:var(--mzch-color-accent-ghost)}.list-box-item.loading.not-hover{cursor:default;color:var(--mzch-color-text-subtle)}.highlight-container{display:inline-block;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.highlight{font-weight:700;color:var(--mzch-color-accent)}.icon-check{min-width:.75rem}}@layer mzch{.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list{position:relative;inset:auto;width:100%;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;z-index:auto}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list .filter-input{height:32px;margin:12px 16px 8px;border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-control)}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list .filter-input:focus-within{border-color:var(--mzch-color-accent)}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list .list-box-container{height:var(--mzch-multiselect-list-height, 224px);max-height:min(var(--mzch-multiselect-list-height, 224px),40vh);padding:0;overscroll-behavior:contain}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list .list-box-item{padding-inline:16px}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list .multi-select-all{margin:0 0 6px}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list [aria-disabled=true]{cursor:not-allowed;opacity:.5}.mzch-multi-select{align-items:flex-start;flex-direction:column;margin:0;display:flex;position:relative}.mzch-multi-select span.require-mark{color:var(--mzch-color-danger)}.mzch-multi-select .mzch-input-container{width:100%;min-height:30px;height:30px;box-sizing:border-box;border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-control);background-color:var(--mzch-color-surface);overflow:hidden;display:flex}.mzch-multi-select .mzch-input-container input{width:100%;min-height:100%;height:100%;font-size:.813rem;color:var(--mzch-color-text);border:none;outline:none;box-sizing:border-box;padding:.375rem .625rem;padding-right:0;background-color:transparent}.mzch-multi-select .mzch-input-container input::placeholder{color:var(--mzch-color-text-subtle)}.mzch-multi-select .mzch-input-container .icon-container{width:34px;min-width:34px;height:100%;-webkit-appearance:button;background-color:transparent;background-image:none;border:none;padding:0;display:flex;justify-content:center;align-items:center}.mzch-multi-select.disabled{cursor:not-allowed}.mzch-multi-select.disabled .mzch-input-container{border-color:var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle);pointer-events:none}.mzch-multi-select.disabled input{color:var(--mzch-color-text-muted)}.mzch-multi-select.disabled input::placeholder{color:var(--mzch-color-text-muted)}.mzch-multi-select.disabled:hover,.mzch-multi-select.disabled:focus,.mzch-multi-select.disabled:focus-within,.mzch-multi-select.disabled.is-open{border-color:var(--mzch-color-text-muted)}.mzch-multi-select.disabled:hover .mzch-input-container,.mzch-multi-select.disabled:focus .mzch-input-container,.mzch-multi-select.disabled:focus-within .mzch-input-container,.mzch-multi-select.disabled.is-open .mzch-input-container{border-color:var(--mzch-color-text-muted)}.mzch-multi-select:hover .mzch-input-container,.mzch-multi-select:focus-within .mzch-input-container,.mzch-multi-select.is-open .mzch-input-container{border-color:var(--mzch-color-accent)}.mzch-multi-select:focus-within .mzch-input-container{box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-multi-select .input-wrapper{width:100%;display:flex;flex-direction:column;gap:.375rem}.mzch-multi-select.is-invalid .mzch-input-container{border-color:var(--mzch-color-danger);box-shadow:0 0 0 3px var(--mzch-color-danger-ring)}.mzch-multi-select .mzch-input-invalid-message{position:absolute;bottom:-1rem;color:var(--mzch-color-danger);font-size:.688rem;font-weight:500}.list-box{position:fixed;background-color:var(--mzch-color-surface);box-shadow:0 3px 4px 0 var(--mzch-color-shadow);border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-control);z-index:1000;max-height:250px;box-sizing:border-box;margin:.25rem 0}.list-box:not(.show-top){top:48px}.list-box.show-top{transform:translateY(calc(-100% - 19px))}.list-box.no-label:not(.show-top){top:34px}.list-box.no-label.show-top{transform:translateY(calc(-100% - 4px)))}.list-box .mzch-checkbox:focus{box-shadow:0 0 0 3px var(--mzch-color-accent-ring);border-color:var(--mzch-color-accent);border-radius:var(--mzch-radius-xs)}.list-box .search-icon{display:flex;justify-content:center;align-items:center;margin-right:10px}.list-box .list-box-container{max-height:250px;overflow-y:auto;padding:.375rem 0}.list-box:has(.multi-select-all) .multi-select-all{justify-content:space-between;margin-top:.375rem}.list-box:has(.multi-select-all) .multi-select-all.is-scrolled{box-shadow:0 3px 4px 0 var(--mzch-color-shadow)}.list-box:has(.multi-select-all) .list-box-container{max-height:188px;padding-top:0}.list-box .filter-input{border-bottom:1px solid var(--mzch-color-border);position:relative;height:29px;box-sizing:border-box;display:flex;border-radius:var(--mzch-radius-control) var(--mzch-radius-control) 0 0;overflow:hidden}.list-box .filter-input input{width:100%;background-color:transparent;color:var(--mzch-color-text);font-size:.813rem;padding:.131rem .625rem;border:none;outline:none}.list-box .filter-input input::placeholder{color:var(--mzch-color-text-subtle)}.list-box .list-box-item{font-size:.813rem;min-height:24px;line-height:24px;padding:0 .625rem;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--mzch-color-text);gap:.375rem}.list-box .list-box-item.loading.not-hover{cursor:default;color:var(--mzch-color-text-subtle)}.list-box .list-box-item span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.list-box .list-box-item .item-only{font-size:.688rem;color:var(--mzch-color-text-secondary);cursor:pointer;padding:0;display:none;word-break:keep-all;height:15px;line-height:12px;background:transparent;border:none}.list-box .list-box-item .item-only:focus{outline:1px solid var(--mzch-color-accent);outline-offset:1px;border-radius:var(--mzch-radius-xs)}.list-box .list-box-item:hover:not(.not-hover),.list-box .list-box-item:focus-within:not(.not-hover){background-color:var(--mzch-color-accent-ghost)}.list-box .list-box-item:hover:not(.not-hover) .item-only,.list-box .list-box-item:focus-within:not(.not-hover) .item-only{display:block}.list-box .list-box-item.mzch-multi-focus{background-color:var(--mzch-color-accent-ghost)}.list-box .list-box-item.multi-select-item{justify-content:flex-start;-webkit-user-select:none;user-select:none}.highlight-container{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex-grow:1}.highlight-container span{text-overflow:initial;overflow:initial;white-space:inherit}.highlight-container .highlight{color:var(--mzch-color-accent);font-weight:700}.inner-container{position:relative}.virtual-row{position:absolute;width:100%}input[type=checkbox].mzch-checkbox{position:relative;opacity:1;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;background-color:var(--mzch-color-surface);border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-xs);width:12px;height:12px;min-width:12px;min-height:12px;margin:0}input[type=checkbox].mzch-checkbox:hover:not(:disabled){border-color:var(--mzch-color-accent-strong)}input[type=checkbox].mzch-checkbox:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}input[type=checkbox].mzch-checkbox:checked,input[type=checkbox].mzch-checkbox.is-indeterminate{background-color:var(--mzch-color-accent);border-color:var(--mzch-color-accent)}input[type=checkbox].mzch-checkbox:checked:hover:not(:disabled),input[type=checkbox].mzch-checkbox.is-indeterminate:hover:not(:disabled){background-color:var(--mzch-color-accent-strong)}input[type=checkbox].mzch-checkbox:checked:after,input[type=checkbox].mzch-checkbox.is-indeterminate:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;background-color:var(--mzch-color-on-accent);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.276 6.142 4.667 8.294 9.723 3.469' fill='none' stroke='currentColor' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.276 6.142 4.667 8.294 9.723 3.469' fill='none' stroke='currentColor' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}input[type=checkbox].mzch-checkbox.is-indeterminate:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6H9' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6H9' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}input[type=checkbox].mzch-checkbox:disabled{cursor:not-allowed;background-color:var(--mzch-color-disabled);border-color:var(--mzch-color-text-muted)}input[type=checkbox].mzch-checkbox:checked:disabled,input[type=checkbox].mzch-checkbox.is-indeterminate:disabled{background-color:var(--mzch-color-text-muted)}}@layer mzch{.mzch-toast{display:inline-flex;align-items:center;border-radius:var(--mzch-radius-pill);padding:.875rem 1.25rem;margin:.5rem 0;gap:.875rem;box-shadow:0 1px 2px 0 var(--mzch-color-shadow-weak);color:var(--mzch-color-surface);pointer-events:auto;cursor:pointer}.mzch-toast.bg-success{background-color:var(--mzch-color-success)}.mzch-toast.bg-error{background-color:var(--mzch-color-danger)}.mzch-toast.bg-info{background-color:var(--mzch-color-accent)}.mzch-toast.bg-warning{background-color:var(--mzch-color-warning)}.mzch-toast.position-center{align-self:center}.mzch-toast.position-end{align-self:flex-end}.mzch-toast.position-start{align-self:flex-start}.mzch-toast.mzch-toast-composed{position:relative;display:flex;align-items:flex-start;cursor:default;margin:0;color:inherit}.mzch-toast.mzch-toast-composed .mzch-toast-icon{flex-shrink:0}.mzch-toast.mzch-toast-composed .mzch-toast-content{flex:1 1 auto;min-width:0}.mzch-toast.mzch-toast-composed .mzch-toast-heading,.mzch-toast.mzch-toast-composed .mzch-toast-description,.mzch-toast.mzch-toast-composed .mzch-toast-actions{display:contents}.mzch-toast.mzch-toast-composed .mzch-toast-close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;border-radius:var(--mzch-radius-control)}.mzch-toast.mzch-toast-composed .mzch-toast-progress{position:absolute;top:0;left:0;right:0;height:4px;overflow:hidden}.mzch-toast.mzch-toast-composed .mzch-toast-progress-bar{height:100%;background-color:currentColor}.toast-message{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.mzch-toast-body{position:fixed;display:flex;top:0;right:0;bottom:0;left:0;padding:1.25rem;overflow:hidden;z-index:2000;pointer-events:none}.mzch-toast-body--top{flex-direction:column}.mzch-toast-body--bottom{flex-direction:column-reverse}.mzch-toast-body>.mzch-overlay-portal{display:contents}}@layer mzch{.mzch-chart-container{height:100%;border:1px solid #bbc6d9;background-color:var(--mzch-color-surface);display:flex;flex-direction:column;box-sizing:border-box;gap:10px;overflow:hidden;position:relative}.mzch-chart-container .mzch-chart-content-container{flex:1;display:flex;position:relative;min-height:0}.mzch-chart-container .mzch-chart-header-container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;height:50px;min-height:50px;border-bottom:1px solid #bbc6d9;box-sizing:border-box}.mzch-chart-container .mzch-chart-header-container .mzch-chart-header{display:flex;align-items:center;gap:8px;min-width:0}.mzch-chart-container .mzch-chart-header-container .mzch-chart-option-button-wrapper{position:relative;display:flex;align-items:center;gap:4px}.mzch-chart-container .mzch-chart-option-button{cursor:pointer;width:24px;height:24px;display:flex;justify-content:center;align-items:center;border-radius:4px;border:0;padding:0;background:transparent}.mzch-chart-container .mzch-chart-option-button:hover{background-color:#e9edf4}.mzch-chart-container .mzch-chart-option-button.is-active{background-color:#8998b529}.mzch-chart-container .mzch-chart-option-button:focus-visible{outline:2px solid var(--mzch-color-accent-ring)}.mzch-chart-container .mzch-chart-svg-container{height:100%;width:100%;padding:10px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;position:relative;min-height:0}.mzch-chart-container .mzch-chart-canvas{width:100%;height:100%;min-height:0}.mzch-chart-container .mzch-chart-warning{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--mzch-color-text-secondary);font-size:13px}.mzch-chart-container .mzch-chart-icon-container{position:absolute;top:8px;right:8px}.mzch-chart-container .mzch-chart-icon-container .mzch-chart-icon-wrapper{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px}.mzch-chart-container .mzch-chart-icon-container .mzch-chart-icon-wrapper:hover{background-color:#e9edf4}.mzch-chart-container .mzch-chart-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background-color:#fff9;z-index:5}.mzch-chart-container .mzch-chart-spinner{width:28px;height:28px;border-radius:var(--mzch-radius-circle);border:3px solid var(--mzch-color-accent-subtle);border-top-color:var(--mzch-color-accent);animation:mzch-chart-spin .8s linear infinite}@keyframes mzch-chart-spin{to{transform:rotate(360deg)}}.mzch-chart-option-modal-popup .mzch-popup-body{padding:0!important}.mzch-chart-option-modal{width:755px;height:570px;display:flex}.mzch-chart-option-modal .mzch-chart-option-wrapper{padding:36px 16px;width:286px;box-sizing:border-box}.mzch-chart-option-modal .mzch-chart-option-wrapper .mzch-chart-option-item{margin:6px 0;display:grid;grid-template-columns:45% 55%;align-items:center}.mzch-chart-option-modal .mzch-chart-option-wrapper .mzch-chart-option-item>span{font-size:13px;color:var(--mzch-color-text)}.mzch-chart-option-modal .mzch-chart-option-wrapper .mzch-chart-zoom-toggles{display:flex;justify-content:space-between}.mzch-chart-option-modal .mzch-chart-option-wrapper .mzch-option-item-divider{margin-top:8px!important;margin-bottom:8px!important}.mzch-chart-option-modal .mzch-divider{width:.5px;height:100%;background-color:#bbc6d9}.mzch-chart-option-modal .mzch-chart-pivot-processor-wrapper{flex:1;padding:24px 16px;box-sizing:border-box;min-width:0}.mzch-popup-container.mzch-filter-popup .mzch-filters-wrapper{display:flex;flex-direction:column;gap:8px}.mzch-popup-container.mzch-filter-popup .mzch-filter-row{align-items:center;display:grid;grid-template-columns:75px 130px 65px minmax(0,1fr) 20px;gap:10px}.mzch-popup-container.mzch-filter-popup .mzch-filter-row.minify-width{grid-template-columns:130px 65px minmax(0,1fr) 20px}.mzch-popup-container.mzch-filter-popup .mzch-remove-row{cursor:pointer;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;display:flex;justify-content:center;align-items:center;border:0;padding:0;background:transparent;border-radius:4px}.mzch-popup-container.mzch-filter-popup .mzch-remove-row:focus-visible{box-shadow:0 0 0 3px #4568e033,0 0 0 .5px #4568e0}.mzch-popup-container.mzch-filter-popup .mzch-add-row{display:flex;justify-content:space-between;color:var(--mzch-color-accent);font-size:12px;padding-top:0;width:100%}.mzch-filter-operation-row{display:flex;flex-direction:row}.mzch-filter-operation-row td{font-family:Roboto,sans-serif;white-space:pre;overflow:hidden;text-overflow:ellipsis}.mzch-filter-operation-row td.symbol{width:14px;margin-right:20px;text-align:center}.mzch-filter-operation-row td.desc{width:100px;color:var(--mzch-color-text-subtle)}.mzch-view-def-processor-wrapper{min-width:400px;min-height:500px;display:flex;gap:16px}.mzch-view-def-processor-desc{color:var(--mzch-color-text-secondary);font-weight:500;font-size:12px;margin:0}.mzch-view-def-processor-label{font-size:12px;font-weight:500;color:var(--mzch-color-text-secondary)}.mzch-view-def-processor-left{height:100%;flex:1;display:flex;flex-direction:column;gap:6px;overflow:hidden}.mzch-view-def-processor-left.disabled{opacity:.4;pointer-events:none}.mzch-view-def-processor-fields-source-wrapper{height:100%;overflow:hidden}.mzch-view-def-processor-right{height:100%;flex:1;display:flex;flex-direction:column;gap:16px;overflow:hidden}.mzch-view-def-processor-applied-fields-wrapper{height:100%;display:flex;flex-direction:column;gap:16px}.mzch-view-def-processor-applied-fields-inner-wrapper{flex:1;display:flex;flex-direction:column;gap:6px;height:100%;overflow:hidden}.mzch-view-def-processor-applied-fields-inner-wrapper.disabled{opacity:.4;pointer-events:none;display:none}.mzch-fields-source-section{height:100%;border:1px solid #bbc6d9;padding:6px 5px 0;overflow:auto;box-sizing:border-box}.mzch-fields-source-section .mzch-fields-source-item{padding:0 0 0 6px;height:22px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:6px}.mzch-fields-source-section .mzch-fields-source-item:hover{background-color:#4568e017}.mzch-fields-source-section .mzch-fields-source-item .mzch-fields-source-label{color:var(--mzch-color-text);font-weight:400;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;cursor:pointer}.mzch-applied-fields-section{flex:1;border:1px dashed var(--mzch-color-accent);background-color:var(--mzch-color-surface-muted);padding:12px;display:flex;flex-direction:column;gap:6px;overflow:auto}.mzch-applied-fields-section .mzch-fields-applied-item{cursor:pointer;height:26px!important;border-radius:4px;border:1px solid var(--mzch-color-accent);color:var(--mzch-color-accent);background-color:var(--mzch-color-accent-subtle)!important;display:flex;align-items:center;padding-left:6px;padding-right:7px;font-size:13px;line-height:100%;overflow:hidden;box-sizing:border-box}.mzch-applied-fields-section .mzch-fields-applied-item .mzch-drag-handle{display:inline-flex;margin-right:4px}.mzch-applied-fields-section .mzch-fields-applied-item .mzch-applied-field-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mzch-applied-fields-section .mzch-drag-item{position:relative}.mzch-applied-fields-section .mzch-drag-item.on-drag-over-top:before,.mzch-applied-fields-section .mzch-drag-item.on-drag-over-bottom:before{content:"";width:100%;height:4px;position:absolute;background-color:#a2b3ef;left:0}.mzch-applied-fields-section .mzch-drag-item.on-drag-over-top:before{top:-5px}.mzch-applied-fields-section .mzch-drag-item.on-drag-over-bottom:before{top:calc(100% + 1px)}.mzch-dragging-container{display:flex;flex-direction:column;gap:6px}.mzch-value-field{display:flex;justify-content:space-between}.mzch-value-field .mzch-value-field-left{display:flex;overflow:hidden;align-items:center}.mzch-value-field .mzch-value-field-left .mzch-drag-handle{margin-right:2px}.mzch-value-field .mzch-value-field-left .mzch-value-field-summary{color:var(--mzch-color-text-secondary);font-weight:500;line-height:100%;position:relative;font-size:12px;display:flex;align-items:center}.mzch-value-field .mzch-value-field-left .mzch-value-field-summary:after{position:relative;right:-4px;content:"l";color:var(--mzch-color-text-muted);margin-right:7px;display:flex;line-height:100%}.mzch-value-field .mzch-value-field-option-button{width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;border:0;padding:0;background:transparent;cursor:pointer}.mzch-value-field-option-modal{pointer-events:none}.mzch-value-field-option-modal .mzch-popup-backdrop{display:none}.mzch-value-field-option-modal .mzch-popup{box-shadow:0 2px 8px #0000001f;border:1px solid var(--mzch-color-border)}.mzch-value-field-option-modal .mzch-popup .mzch-popup-body{padding:9px 16px!important}.mzch-value-field-option-modal .mzch-view-def-panel-option-item{margin:4px 0;display:grid;grid-template-columns:45% 55%;align-items:center}.mzch-value-field-option-modal .mzch-view-def-panel-option-item>span{font-size:13px;color:var(--mzch-color-text)}}.mzch-vue-echart-host{width:100%;height:100%;min-height:0}.chart-popup-wrapper[data-v-8e21a7ac]{width:100vw;height:100vh}