/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./dist-client/themes/md-typescale-styles.css ***!
  \*****************************************************************************************************************************************************************/
@layer {
  .md-typescale-display-small,
  .md-typescale-display-small-prominent {
    font: var(--md-sys-typescale-display-small-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-display-small-size, 2.25rem)/var(--md-sys-typescale-display-small-line-height, 2.75rem) var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, Roboto));
  }
  .md-typescale-display-medium,
  .md-typescale-display-medium-prominent {
    font: var(--md-sys-typescale-display-medium-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-display-medium-size, 2.8125rem)/var(--md-sys-typescale-display-medium-line-height, 3.25rem) var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, Roboto));
  }
  .md-typescale-display-large,
  .md-typescale-display-large-prominent {
    font: var(--md-sys-typescale-display-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-display-large-size, 3.5625rem)/var(--md-sys-typescale-display-large-line-height, 4rem) var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, Roboto));
  }
  .md-typescale-headline-small,
  .md-typescale-headline-small-prominent {
    font: var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-headline-small-size, 1.5rem)/var(--md-sys-typescale-headline-small-line-height, 2rem) var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto));
  }
  .md-typescale-headline-medium,
  .md-typescale-headline-medium-prominent {
    font: var(--md-sys-typescale-headline-medium-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-headline-medium-size, 1.75rem)/var(--md-sys-typescale-headline-medium-line-height, 2.25rem) var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, Roboto));
  }
  .md-typescale-headline-large,
  .md-typescale-headline-large-prominent {
    font: var(--md-sys-typescale-headline-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-headline-large-size, 2rem)/var(--md-sys-typescale-headline-large-line-height, 2.5rem) var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, Roboto));
  }
  .md-typescale-title-small,
  .md-typescale-title-small-prominent {
    font: var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-title-small-size, 0.875rem)/var(--md-sys-typescale-title-small-line-height, 1.25rem) var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto));
  }
  .md-typescale-title-medium,
  .md-typescale-title-medium-prominent {
    font: var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-title-medium-size, 1rem)/var(--md-sys-typescale-title-medium-line-height, 1.5rem) var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, Roboto));
  }
  .md-typescale-title-large,
  .md-typescale-title-large-prominent {
    font: var(--md-sys-typescale-title-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-title-large-size, 1.375rem)/var(--md-sys-typescale-title-large-line-height, 1.75rem) var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, Roboto));
  }
  .md-typescale-body-small,
  .md-typescale-body-small-prominent {
    font: var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-body-small-size, 0.75rem)/var(--md-sys-typescale-body-small-line-height, 1rem) var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto));
  }
  .md-typescale-body-medium,
  .md-typescale-body-medium-prominent {
    font: var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-body-medium-size, 0.875rem)/var(--md-sys-typescale-body-medium-line-height, 1.25rem) var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));
  }
  .md-typescale-body-large,
  .md-typescale-body-large-prominent {
    font: var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-body-large-size, 1rem)/var(--md-sys-typescale-body-large-line-height, 1.5rem) var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));
  }
  .md-typescale-label-small,
  .md-typescale-label-small-prominent {
    font: var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-small-size, 0.6875rem)/var(--md-sys-typescale-label-small-line-height, 1rem) var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));
  }
  .md-typescale-label-medium,
  .md-typescale-label-medium-prominent {
    font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem)/var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto));
  }
  .md-typescale-label-medium-prominent {
    font-weight: var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
  }
  .md-typescale-label-large,
  .md-typescale-label-large-prominent {
    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-large-size, 0.875rem)/var(--md-sys-typescale-label-large-line-height, 1.25rem) var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto));
  }
  .md-typescale-label-large-prominent {
    font-weight: var(--md-sys-typescale-label-large-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
  }
} 
/*!***************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./dist-client/themes/light.css ***!
  \***************************************************************************************************************************************************/
.light {
  --md-sys-color-primary: rgb(73 93 146);
  --md-sys-color-surface-tint: rgb(73 93 146);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: #e4eaf9;
  --md-sys-color-on-primary-container: rgb(0 24 72);
  --md-sys-color-secondary: rgb(27 101 133);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(195 232 255);
  --md-sys-color-on-secondary-container: rgb(0 30 44);
  --md-sys-color-tertiary: rgb(37 106 75);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(171 242 201);
  --md-sys-color-on-tertiary-container: rgb(0 33 19);
  --md-sys-color-error: #fe594e;
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 215);
  --md-sys-color-on-error-container: #fe594e;
  --md-sys-color-background: rgb(250 248 255);
  --md-sys-color-on-background: rgb(26 27 33);
  --md-sys-color-surface: rgb(250 248 255);
  --md-sys-color-on-surface: rgb(26 27 33);
  --md-sys-color-surface-variant: rgb(225 226 236);
  --md-sys-color-on-surface-variant: rgb(69 70 79);
  --md-sys-color-outline: rgba(0, 0, 0, 0.25);
  --md-sys-color-outline-variant: rgb(197 198 208);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(47 48 54);
  --md-sys-color-inverse-on-surface: rgb(241 240 247);
  --md-sys-color-inverse-primary: #c9d4f4;
  --md-sys-color-primary-fixed: rgb(218 226 255);
  --md-sys-color-on-primary-fixed: rgb(0 24 72);
  --md-sys-color-primary-fixed-dim: #c9d4f4;
  --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
  --md-sys-color-secondary-fixed: rgb(195 232 255);
  --md-sys-color-on-secondary-fixed: rgb(0 30 44);
  --md-sys-color-secondary-fixed-dim: rgb(143 207 243);
  --md-sys-color-on-secondary-fixed-variant: rgb(0 76 104);
  --md-sys-color-tertiary-fixed: #e5f6da;
  --md-sys-color-on-tertiary-fixed: #005234;
  --md-sys-color-tertiary-fixed-dim: #c8eabc;
  --md-sys-color-on-tertiary-fixed-variant: #005234;
  --md-sys-color-surface-dim: rgb(218 217 224);
  --md-sys-color-surface-bright: rgb(250 248 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(244 243 250);
  --md-sys-color-surface-container: rgb(238 237 244);
  --md-sys-color-surface-container-high: rgb(232 231 239);
  --md-sys-color-surface-container-highest: rgb(227 226 233);
}
/*!**************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./dist-client/themes/dark.css ***!
  \**************************************************************************************************************************************************/
.dark {
  --md-sys-color-primary: rgb(178 197 255);
  --md-sys-color-surface-tint: rgb(178 197 255);
  --md-sys-color-on-primary: rgb(24 46 96);
  --md-sys-color-primary-container: rgb(49 69 120);
  --md-sys-color-on-primary-container: rgb(218 226 255);
  --md-sys-color-secondary: rgb(143 207 243);
  --md-sys-color-on-secondary: rgb(0 53 73);
  --md-sys-color-secondary-container: rgb(0 76 104);
  --md-sys-color-on-secondary-container: rgb(195 232 255);
  --md-sys-color-tertiary: #cffce3;
  --md-sys-color-on-tertiary: rgb(0 56 35);
  --md-sys-color-tertiary-container: #005234;
  --md-sys-color-on-tertiary-container: #cffce3;
  --md-sys-color-error: #fbafa9;
  --md-sys-color-on-error: #fe594e;
  --md-sys-color-error-container: #fe594e;
  --md-sys-color-on-error-container: #fbafa9;
  --md-sys-color-background: rgb(18 19 24);
  --md-sys-color-on-background: rgb(227 226 233);
  --md-sys-color-surface: rgb(18 19 24);
  --md-sys-color-on-surface: rgb(227 226 233);
  --md-sys-color-surface-variant: rgb(69 70 79);
  --md-sys-color-on-surface-variant: rgb(197 198 208);
  --md-sys-color-outline: rgb(143 144 154);
  --md-sys-color-outline-variant: rgb(69 70 79);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(227 226 233);
  --md-sys-color-inverse-on-surface: rgb(47 48 54);
  --md-sys-color-inverse-primary: rgb(73 93 146);
  --md-sys-color-primary-fixed: rgb(218 226 255);
  --md-sys-color-on-primary-fixed: rgb(0 24 72);
  --md-sys-color-primary-fixed-dim: rgb(178 197 255);
  --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
  --md-sys-color-secondary-fixed: rgb(195 232 255);
  --md-sys-color-on-secondary-fixed: rgb(0 30 44);
  --md-sys-color-secondary-fixed-dim: rgb(143 207 243);
  --md-sys-color-on-secondary-fixed-variant: rgb(0 76 104);
  --md-sys-color-tertiary-fixed: #c7e6d5;
  --md-sys-color-on-tertiary-fixed: rgb(0 33 19);
  --md-sys-color-tertiary-fixed-dim: #c7e6d5;
  --md-sys-color-on-tertiary-fixed-variant: rgb(0 82 52);
  --md-sys-color-surface-dim: rgb(18 19 24);
  --md-sys-color-surface-bright: rgb(56 57 63);
  --md-sys-color-surface-container-lowest: rgb(13 14 19);
  --md-sys-color-surface-container-low: rgb(26 27 33);
  --md-sys-color-surface-container: rgb(30 31 37);
  --md-sys-color-surface-container-high: rgb(41 42 47);
  --md-sys-color-surface-container-highest: rgb(51 52 58);
}
/*!*********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./dist-client/themes/board-theme.css ***!
  \*********************************************************************************************************************************************************/
body {
  --board-renderer-border: 1px solid rgba(0, 0, 0, 0.1);
  --board-renderer-max-width: 120px;
  --more-panel-min-width: 200px;
  --board-renderer-name-background-color: var(--secondary-text-color);
  --board-renderer-name-font: normal 13px var(--theme-font);
  --board-renderer-icon-size: 24px;
  --board-renderer-icon-border-radius: 10px;
  --board-renderer-font: bold 16px/25px var(--md-icon-font, 'Material Symbols Outlined');
  --board-renderer-icon-edit-background-color: #95d40f;
  --board-renderer-icon-view-background-color: #27a1de;
  /* list page style*/
  --board-list-background-color: var(--md-sys-color-background);
  --board-list-border-radius: var(--border-radius);
  --board-list-box-border: var(--margin-default) solid #fff;
  --board-list-box-shadow: var(--box-shadow);
  --board-list-margin: var(--margin-default);
  --board-list-tile-background-color: #fff;
  --board-list-tile-name-font: bold 14px/18px var(--theme-font);
  --board-list-tile-name-color: var(--md-sys-color-secondary);
  --board-list-tile-description-font: 12px/14px var(--theme-font);
  --board-list-tile-description-color: var(--secondary-text-color);
  --board-list-tile-icon-color: rgba(0, 0, 0, 0.4);
  --board-list-star-color: rgba(0, 0, 0, 0.4);
  --board-list-star-active-color: var(--status-warning-color);
  --card-list-rows-height: 180px;
  --card-list-color: var(--md-sys-color-on-surface);
  --card-list-background-color: var(--md-sys-color-surface-container-lowest);
  --card-list-border-radius: var(--border-radius);
  --card-list-flip-transform: rotateX(180deg);
  --card-list-create-border: 1px dashed var(--md-sys-color-primary);
  --card-list-create-border-radius: var(--border-radius);
  --card-list-create-icon-color: var(--md-sys-color-primary);
  --card-list-create-color: var(--md-sys-color-secondary);
  --card-list-create-form-padding: 15px;
  --card-list-create-label-font: normal 14px var(--theme-font);
  --card-list-create-label-color: var(--md-sys-color-secondary);
  --card-list-create-input-font: normal 14px var(--theme-font);
  --card-list-create-input-color: var();
  --card-list-create-input-border: 1px solid rgba(0, 0, 0, 0.2);
  --card-list-create-input-border-radius: var(--border-radius);
  --card-list-create-input-padding: 2px 9px;
  --card-list-create-margin: 0 0 7px 0;
  /* board modeler page style */
  --edit-toolbar-background-color: var(--md-sys-color-secondary);
  --edit-toolbar-bigger-icon-size: 45px;
  --edit-toolbar-bigger-icon-line: 1px solid rgba(0, 0, 0, 0.1);
  --component-toolbar-background-color: var(--md-sys-color-background);
  --component-toolbar-icon-size: 45px;
  --component-toolbar-border: 1px solid rgba(0, 0, 0, 0.1);
  --component-menu-background-color: var(--md-sys-color-secondary-container);
  --component-menu-border-color: var(--md-sys-color-secondary);
  --component-menu-title: bold 11px/16px var(--theme-font);
  --component-menu-item-color: var(--md-sys-color-secondary);
  --component-menu-item-hover-color: var(--md-sys-color-secondary);
  --component-menu-item-icon-size: 20px;
  --property-sidebar-background-color: var(--md-sys-color-secondary-container);
  --property-sidebar-tab-icon-color: var(--md-sys-color-secondary);
  --property-sidebar-fieldset-border: 1px solid rgba(0, 0, 0, 0.2);
  --property-sidebar-fieldset-label-color: var(--md-sys-color-secondary);
  --property-sidebar-fieldset-label: normal 12px/16px var(--theme-font);
  --property-sidebar-fieldset-legend-color: var(--md-sys-color-on-secondary-container);
  --property-sidebar-fieldset-legend: bold 13px var(--theme-font);
  --scene-inspector-color: var(--md-sys-color-secondary);
  --scene-inspector-selected-background-color: rgba(115, 188, 28, 0.2);
  --scene-inspector-selected-border: 1px solid rgba(115, 188, 28, 1);
  --scene-inspector-name-background-color: var(--md-sys-color-primary);
  --scene-inspector-eye-icon-color: var(--md-sys-color-on-secondary-container);
}

@media (min-width: 461px) and (max-width: 1024px) {
  body {
    --card-list-create-form-padding: 7px;
  }
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/system/dist-client/themes/system-theme.css ***!
  \**********************************************************************************************************************************************************************************************/
body {
  /* system info style */
  --system-info-background-color: var(--md-sys-color-background);
  --system-info-content-padding: 40px 0 0 0;
  --system-info-font: normal 14px/24px var(--theme-font);
  --system-info-color: #666;
  --system-info-appname-color: var(--md-sys-color-secondary);
  --system-info-appname-font: bold 20px/20px var(--theme-font);
  --system-info-description-color: var(--md-sys-color-primary);
  --system-info-description-font: normal 15px/18px var(--theme-font);
  --system-info-version-background-color: var(--md-sys-color-secondary);
  --system-info-version-color: #fff;
  --system-info-version-font: normal 15px/15px var(--theme-font);
}
/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/setting-ui/dist-client/themes/setting-theme.css ***!
  \***************************************************************************************************************************************************************************************************/
body {
  --setting-background: var(--md-sys-color-background);
  --setting-let-background: var(--md-sys-color-on-primary);
  --setting-let-margin: var(--margin-wide);
  --setting-let-border-radius: var(--border-radius);
  --setting-let-border: var(--border-dim-color);
  --setting-title-font: var(--subtitle-font);
  --setting-title-color: var(--subtitle-text-color);
  --setting-content-padding: var(--padding-wide);
  --setting-content-font: normal 0.9em var(--theme-font);
  --setting-content-color: var(--md-sys-color-secondary);
  --setting-info-content-padding: 10px 15px;
  --setting-info-background-color: #f0f0f0;
  --setting-info-font: normal 14px/14px var(--theme-font);
  --setting-info-color: #666;
  --setting-info-appname-color: var(--md-sys-color-primary);
  --setting-icon-height: 170px;
  --setting-icon-margin: 40px 0 5px 0;
}

@media screen and (max-width: 460px) {
  body {
    --setting-let-margin: var(--margin-default);
    --setting-content-padding: var(--padding-default);
    --setting-icon-height: 140px;
    --setting-icon-margin: var(--margin-wide) 0;
  }
}
/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/context-ui/dist-client/themes/context-theme.css ***!
  \***************************************************************************************************************************************************************************************************/
body {
  --context-toolbar-background-color: var(--md-sys-color-background);
  --context-toolbar-button-background-color: #fff;
  --context-toolbar-border: 1px solid rgba(57, 78, 100, 0.5);
  --context-toolbar-border-hover: 1px solid var(--md-sys-color-primary);
  --context-toolbar-button-max-width: auto;
  --context-toolbar-button-height: 36px;
  --context-toolbar-button-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
  --context-toolbar-button-padding: 0 9px;
  --context-toolbar-button: normal 13px var(--theme-font);
  --context-toolbar-button-color: var(--md-sys-color-secondary);
  --context-toolbar-iconbutton-color: var(--primary-text-color);
  --context-toolbar-iconbutton-size: 16px;
  --context-toolbar-function-button-height: 34px;
  --context-toolbar-function-button-radius: 5px;
  --context-toolbar-function-button-background-color: #446281;
  --context-toolbar-function-button-hover-background-color: var(--md-sys-color-primary);
  --context-toolbar-function-iconbutton-size: 28px;
  --context-toolbar-function-iconbutton-color: var(--primary-background-color);
  --context-toolbar-function-button-lineheight: 36px;
  --context-toolbar-function-button-color: #fff;
  --context-toolbar-function-button-padding: 0 10px;
  --context-toolbar-function-button-border: 1px solid rgba(0, 0, 0, 0.1);
  --context-toolbar-list-background-color: var(--primary-background-color);
  --context-toolbar-list-text: bold 18px var(--theme-font);
  --context-toolbar-list-icon-size: var(--icon-default-size);
  --context-toolbar-side-padding: 15px;
  --context-toolbar-shadow-line: none;
  --context-toolbar-title: bold 19px var(--theme-font);
  --context-ui-background-color: rgba(40, 54, 68, 0.9);
  --context-ui-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  --context-ui-border-radius: 10px;
  --context-ui-padding: 10px;
  --context-ui-list-color: #d0fdee;
  --context-ui-list-border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  --context-ui-list-border-hover-bottom: 1px solid var(--md-sys-color-primary);
  --context-ui-list-padding: 5px;
  --context-ui-button-color: var(--secondary-text-color);
  --context-ui-button-hover-color: #fff;
  --context-ui-button-background-color: #fff;
  --context-ui-button-background-hover-color: var(--md-sys-color-primary);
  --context-action-bar-button-margin: var(--margin-narrow) 0 var(--margin-wide) var(--margin-narrow);
  --context-action-bar-more-button-background-color: var(--context-ui-background-color);
  --context-action-bar-more-button-padding: 6px var(--padding-default);
  --context-action-bar-more-button-color: var(--md-sys-color-on-primary);
  --context-action-bar-more-button-border-radius: 4px;
}

@media only screen and (max-width: 460px) {
  body {
    --context-toolbar-button: normal 9px var(--theme-font);
    --context-toolbar-button-max-width: 60px;
    --context-toolbar-button-height: 50px;
    --context-toolbar-iconbutton-size: 30px;
    --context-toolbar-border: none;
    --context-toolbar-border-hover: none;
    --context-toolbar-iconbutton-display: block;
    --context-toolbar-iconbutton-margin: -2px;
    --context-toolbar-button-background-color: transparent;
    --context-toolbar-button-margin: 0;
    --context-toolbar-function-button-height: 34px;
    --context-toolbar-function-button-lineheight: 34px;
    --context-toolbar-function-button-radius: 0;
    --context-toolbar-side-padding: 0;
    --context-toolbar-shadow-line: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
    --context-toolbar-button-padding: 0 10px 0 0;
    --context-action-bar-button-margin: 0;
    --context-action-bar-more-button-border-radius: 0;
    --context-action-bar-more-button-padding: 6px var(--padding-wide);
  }
}
/*!****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/form-ui/client/themes/form-theme.css ***!
  \****************************************************************************************************************************************************************************************/
body {
  --form-border: none;
  --form-margin: var(--spacing-medium);
  --form-max-width: 700px;
  --form-multi-column-max-width: 100%;
  --form-sublabel-font: normal 13px var(--theme-font);
  --form-grid-gap: 12px 5px;
  --legend-padding: var(--spacing-medium) 0;
  --legend-font: bold 16px var(--theme-font);
  --legend-text-color: var(--md-sys-color-on-secondary);
  --legend-border-bottom: 1px solid var(--md-sys-color-primary);
  --label-padding: 3px 0;
  --label-font: normal 14px var(--theme-font);
  --input-field-border: 1px solid rgba(0, 0, 0, 0.2);
  --input-field-border-radius: var(--border-radius);
  --input-field-padding: 2px 9px;
  --input-field-font: normal 14px var(--theme-font);
  --search-panel-background-color: rgba(0, 0, 0, 0.1);
  --search-panel-search-iconbutton-size: var(--icon-default-size);
  --search-form-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.15);
  --search-form-box-padding: 15px 30px 15px 15px;
  --ox-input-border: none;
  --file-uploader-border: 1px solid rgba(0, 0, 0, 0.1);
  --file-uploader-background-color: var(--md-sys-color-background);
  --file-uploader-font: normal 12px/20px var(--theme-font);
  --file-uploader-color: var(--md-sys-color-secondary);
  --file-uploader-icon-color: var(--md-sys-color-primary);
  --file-uploader-candrop-background-color: #fffde9;
  --file-uploader-label-padding: 3px 20px;
  --file-uploader-label-border-radius: var(--border-radius);
  --file-uploader-label-background-color: var(--md-sys-color-secondary);
  --file-uploader-label-font: normal 12px var(--theme-font);
  --file-uploader-label-color: #fff;
  --file-uploader-li-padding: 2px 5px 0px 5px;
  --file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
  --file-uploader-li-icon-margin: 2px 0 2px 5px;
  --file-uploader-li-icon-font: normal 15px var(--md-icon-font, 'Material Symbols Outlined');
  --file-uploader-li-icon-focus-color: var(--md-sys-color-primary);
}

@media screen and (max-width: 480px) {
  body {
    --label-font: normal 15px var(--theme-font);
  }
}
@media (min-width: 481px) and (max-width: 1024px) {
  body {
    --form-margin: 15px 0;
    --form-multi-column-max-width: 100%;
    --form-container-padding: 0 9px 12px 9px;
    --label-font: normal 14px var(--theme-font);
    --input-field-font: normal 15px var(--theme-font);
    --input-field-padding: 3px 5px;
  }
}
@media only screen and (max-width: 925px) {
  body {
    --form-margin: 14px 0;
    --form-multi-column-max-width: 100%;
    --form-container-padding: 0 9px 12px 9px;
    --input-field-padding: 3px 5px;
  }
}
/*!*********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/auth-ui/dist-client/themes/auth-theme.css ***!
  \*********************************************************************************************************************************************************************************************/
body {
  /* login page style*/
  --auth-brand-name: bold 20px var(--theme-font);
  --auth-brand-name-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  --auth-brand-welcome-msg: normal 12px var(--theme-font);
  --auth-title-font: bold 32px var(--theme-font);
  --auth-description-font: normal 12px var(--theme-font);
  --auth-description-padding: 5px 5px 15px 5px;
  --auth-input-font: normal 18px/24px var(--theme-font);
  --auth-input-border: 1px solid rgba(0, 0, 0, 0.4);
  --auth-input-border-light: 1px solid rgba(255, 255, 255, 0.8);
  --auth-input-color: var(--md-sys-color-on-primary);
  --auth-button-background-color: var(--md-sys-color-surface-variant);
  --auth-button-background-focus-color: var(--status-success-color);
  --auth-button-font: bold 20px var(--theme-font);
  --auth-button-padding: 9px 12px 7px 12px;
  /* profile page style*/
  --profile-brand-width: 150px;
  --profile-brand-height: 45px;
  --profile-brand-padding: 30px auto 20px auto;
  --profile-wrap-max-width: 550px;
  --profile-icon-margin: 7% 0 0 0;
  --auth-input-field-width: 100%;
  --auth-input-field-font: normal 16px var(--theme-font);
  --change-password-field-font: var(--auth-input-field-font);
  --change-password-field-border: 1px solid rgba(0, 0, 0, 0.2);
  --change-password-field-border-radius: var(--border-radius);
  --change-password-field-margin: var(--margin-narrow) 0;
  --change-password-field-padding: var(--padding-default);
  --change-password-field-width: var(--auth-input-field-width);
  --auth-special-page-padding: 250px 0 100px 0;
  /* domain select page style*/
  --checkin-background-color: var(--md-sys-color-background);
  --checkin-header-height: 45px;
  --checkin-header-background-color: var(--md-sys-color-primary);
  --checkin-header-title-font: bold 19px var(--theme-font);
  --checkin-header-title-color: var(--md-sys-color-on-primary);
  --checkin-wrap-max-width: 500px;
  --checkin-wrap-padding: var(--padding-wide);
}

@media only screen and (max-width: 460px) {
  body {
    /* profile page style*/
    --profile-wrap-max-width: 85vw;
    --auth-input-field-font: normal 20px var(--theme-font);
  }
}
@media (min-width: 461px) and (max-width: 1024px) {
  body {
    /* profile page style*/
    --auth-input-field-font: normal 20px var(--theme-font);
  }
}
/*!*********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/more-ui/dist-client/themes/more-theme.css ***!
  \*********************************************************************************************************************************************************************************************/
body {
  --more-panel-background-color: var(--md-sys-color-secondary-fixed-dim);
  --more-panel-head-color: var(--more-panel-background-color);
  --more-panel-tail-color: var(--more-panel-background-color);
  --more-panel-min-width: 200px;
  --morelet-min-width: 200px;
  --morelet-title-color: var(--md-sys-color-on-secondary-fixed);
  --morelet-title-font: normal 14px var(--theme-font);
  --morelet-border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  --morelet-focus-border-top: 3px solid var(--md-sys-color-primary);
  --morelet-background-color: var(--md-sys-color-surface);
  --morelet-padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-default);
  --morelet-color: var(--md-sys-color-on-secondary-fixed);
  --morelet-font: normal 0.9em/1.4em var(--theme-font);
  --morelet-icon-color: var(--md-sys-color-on-primary);
}

@media screen and (max-width: 460px) {
  body {
    --morelet-padding: var(--padding-wide);
    --morelet-font: normal 1em/0.9em var(--theme-font);
  }
}
/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/help/dist-client/themes/help-theme.css ***!
  \******************************************************************************************************************************************************************************************/
body {
  --help-panel-background-color: var(--md-sys-color-surface-variant);
  --help-panel-width: 450px;
  --help-panel-margin: 0;
  --help-panel-padding: var(--padding-default) 0 var(--padding-default) var(--padding-wide);
  --help-panel-border-raidus: 9px;
  --help-panel-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.15);
  --help-panel-border: 2px solid var(--md-sys-color-primary);
  --help-panel-color: var(--md-sys-color-on-surface-variant);
  --help-panel-title-margin: var(--margin-default) 0 var(--margin-narrow) 0;
  --help-panel-title-padding: 0;
  --help-panel-title-background-color: var(--md-sys-color-surface);
  --help-panel-h1-title-font-size: 1.6em;
  --help-panel-h1-title-color: var(--md-sys-color-primary);
  --help-panel-h2-title-font-size: 1.3em;
  --help-panel-h2-title-color: var(--md-sys-color-secondary);
  --help-panel-h3-title-font-size: 1.1em;
  --help-panel-h3-title-color: var(--secondary-text-color);
  --help-panel-content-padding: var(--padding-default) var(--padding-wide);
  --help-panel-paragraph-margin: 0 0 var(--margin-default) 0;
  --help-panel-font-size: 0.9em;
  --help-panel-content-font-size: 0.8em;
  --help-panel-focusBox-padding: var(--padding-narrow) var(--padding-default);
  --help-panel-focusBox-border: 1px solid rgba(0, 0, 0, 0.2);
  --help-panel-focusBox-border-radius: var(--border-radius);
  --help-panel-focusBox-background-color: rgba(0, 0, 0, 0.2);
  --help-panel-focusBox-color: #ffe393;
  --help-panel-a-color: var(--md-sys-color-secondary);
  --help-panel-a-icon-size: 1.3em;
  --help-icon-color: var(--md-sys-color-secondary);
  --help-icon-hover-color: var(--md-sys-color-primary);
  --help-icon-size: 18px;
  --help-icon-opacity: 0.4;
  --help-icon-hover-opacity: 1;
  --help-navigation-padding: 0;
  --help-navigation-bottom: var(--md-sys-color-surface-variant);
  --help-navigation-icon-padding: 10px;
  --help-navigation-icon-border: 1px solid rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 460px) {
  body {
    --help-panel-width: 100vw;
    --help-panel-border-raidus: 0;
    --help-panel-border: none;
    --help-panel-box-shadow: none;
    --help-panel-title-padding: 0 0 0 var(--padding-wide);
  }
}
/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/api/client/themes/api-theme.css ***!
  \***********************************************************************************************************************************************************************************/

/*!*****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/tooltip-theme.css ***!
  \*****************************************************************************************************************************************************************************************/
body {
  --tooltip-padding: 4px 4px 4px 4px;
  --tooltip-background-color: rgba(0, 0, 0, 0.7);
  --tooltip-font: bold 11px var(--theme-font);
  /* 
  --tooltip-left-positon-left: auto;
  --tooltip-left-position-top: 7px;
  --tooltip-left-position-right: 110%;
  --tooltip-left-position-animation: tooltip-left 0.3s ease-out 0s 1 normal; 
  */
}
/*!***************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/state-color.css ***!
  \***************************************************************************************************************************************************************************************/
:root {
  --status-danger-color: var(--md-sys-color-error, #d14946);
  --status-warning-color: #ee8d03;
  --status-info-color: #398ace;
  --status-success-color: #35a24a;
}
/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/spacing.css ***!
  \***********************************************************************************************************************************************************************************/
:root {
  /* spacing */
  --spacing-none: 0px;
  --spacing-tiny: 2px;
  --spacing-small: 4px;
  --spacing-medium: 8px;
  --spacing-large: 12px;
  --spacing-huge: 24px;
  /* icon size */
  --icon-size-tiny: 14px;
  --icon-size-small: 18px;
  --icon-size-medium: 24px;
  --icon-size-large: 32px;
  --icon-size-huge: 48px;
  /* form element height */
  --form-element-height-tiny: 18px;
  --form-element-height-small: 24px;
  --form-element-height-medium: 30px;
  --form-element-height-large: 40px;
  --form-element-height-huge: 55px;
}
/*!****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/report-theme.css ***!
  \****************************************************************************************************************************************************************************************/
body {
  --report-background-color: var(--md-sys-color-background);
  --report-padding: 15px;
  --report-title-margin: 0 0 0 10px;
  --report-title-border: none;
  --report-title-color: var(--md-sys-color-secondary);
  --report-title-icon-color: var(--md-sys-color-primary);
  --report-title-icon-margin: 0 3px 2px 0;
  --report-title-icon-size: 14px;
  --report-title-with-grid-padding: 0;
  --report-component-border-radius: var(--border-radius);
  --report-header-background-color: var(--md-sys-color-surface);
  --report-header-border: 1px solid var(--report-header-border-color);
  --report-header-border-color: var(--md-sys-color-outline);
  --report-header-padding: 5px 0 5px 5px;
  --report-header-color: var(--secondary-text-color);
  --report-header-font: normal 1em/1.5 var(--theme-font);
  --report-header-fontsize: 13px;
  --report-record-background-color: #fff;
  --report-record-odd-background-color: #f6f6f6;
  --report-record-field-padding: 7px 10px;
  --report-record-field-border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  --report-record-wide-fontsize: 13px;
  --report-record-focused-background-color: #ffde3b47;
  --report-record-focused-border: 1px dashed rgba(0, 0, 0, 0.5);
  --report-totalized-background-color: #efefef;
  --report-totalized-border: 1px solid rgba(0, 0, 0, 0.1);
  --report-totalized-color: var(--secondary-text-color);
  --report-grouped-background-color: #607d8bbf;
  --report-grouped-border: 1px solid rgba(0, 0, 0, 0.2);
  --report-grouped-color: #fff;
}

@media print {
  body {
    --report-header-padding: 5px;
    --report-record-field-padding: 5px;
    --report-record-wide-fontsize: 10px;
    --report-grouped-background-color: #d7d7d7;
    --report-grouped-color: #000;
    --report-totalized-color: #000;
  }
}
/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/oops-theme.css ***!
  \**************************************************************************************************************************************************************************************/
body {
  /* oops note style */
  --oops-note-icon-font: normal 24px var(--md-icon-font, 'Material Symbols Outlined');
  --oops-note-icon-color: var(--md-sys-color-on-surface);
  --oops-note-icon-border: 2px solid var(--md-sys-color-outline);
  --oops-note-icon-border-radius: 50px;
  --oops-note-icon-padding: var(--padding-default);
  --oops-note-title-margin: 7px 0 2px 0;
  --oops-note-title-font: bold 14px var(--theme-font);
  --oops-note-title-color: var(--md-sys-color-secondary);
  --oops-note-description-font: normal 12px var(--theme-font);
  --oops-note-description-color: var(--md-sys-color-primary);
}

@media only screen and (max-width: 460px) {
  body {
    --oops-note-icon-padding: var(--padding-narrow);
    --oops-note-icon-font: normal 18px var(--md-icon-font, 'Material Symbols Outlined');
    --oops-note-title-font: bold 13px var(--theme-font);
    --oops-note-title-margin: var(--margin-narrow) 0 2px 0;
    --oops-note-description-font: normal 0px var(--theme-font);
  }
}
/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/material-theme.css ***!
  \******************************************************************************************************************************************************************************************/
body {
  font-variation-settings: "FILL" 1;
  /* shape corner */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-small: 5px;
  --md-sys-shape-corner-medium: 10px;
  --md-sys-shape-corner-large: 30px;
  --md-sys-shape-corner-full: 999px;
  /* md-switch */
  --md-switch-selected-handle-color: var(--md-sys-color-on-primary);
  --md-switch-selected-track-color: var(--md-sys-color-primary);
  /* md component shapes */
  --md-switch-handle-shape: var(--md-sys-shape-corner-full);
  --md-switch-track-shape: var(--md-sys-shape-corner-full);
  --md-filter-chip-container-shape: var(--md-sys-shape-corner-full);
  --md-text-button-container-shape: var(--md-sys-shape-corner-small);
  --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
  --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
  --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
}
/*!****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/layout-theme.css ***!
  \****************************************************************************************************************************************************************************************/
body {
  --header-bar-background-color: var(--md-sys-color-primary);
  --header-bar-icon-size: var(--icon-default-size);
  --header-bar-title: bold 17.5px var(--theme-font);
  --header-bar-color: var(--md-sys-color-on-primary);
  --header-bar-height: 42px;
  --nav-bar-background-color: var(--md-sys-color-primary-container);
  --group-bar-background-color: var(--md-sys-color-secondary-container);
  --group-bar-textbutton: 16px/32px var(--theme-font);
  --group-bar-textbutton-active: bold var(--group-bar-textbutton);
  --group-bar-active-line-color: var(--md-sys-color-on-secondary-container);
  --group-bar-line: solid 3px rgba(0, 0, 0, 0.2);
  --footer-bar-border-top: 1px solid rgba(0, 0, 0, 0.2);
  --aside-background-color: var(--md-sys-color-secondary-container);
  --aside-list-textbtton: 18px var(--theme-font);
  --aside-list-icon: var(--icon-default-size);
  --aside-list-bottom-line: var(--md-sys-color-outline);
  --aside-list-detail-background-color: #fff;
  --aside-list-detail-text: 14px var(--md-sys-color-on-secondary-container);
  --footer-bar-border-top: 1px solid rgba(0, 0, 0, 0.2);
  --button-container-margin: inintial;
  --button-container-padding: 0 var(--padding-default) var(--padding-wide) var(--padding-default);
  --button-container-background: transparent;
  --button-container-height: initial;
  --button-container-align: right;
  --button-container-button-background-color: var(--md-sys-color-secondary);
  --button-container-button-border-radius: var(--button-border-radius);
  --button-container-button-margin: var(--button-margin);
  --button-container-button-font: bold var(--fontsize-large) var(--theme-font);
  --button-container-button-color: var(--md-sys-color-on-primary);
  --button-container-button-height: initial;
  --button-container-button-border: var(--button-border);
  --popup-content-background-color: var(--md-sys-color-background);
  --popup-content-color: var(--md-sys-color-on-background);
  --popup-content-padding: 10px 20px;
  /* components - floating overlay style */
  --overlay-center-small-width: 30%;
  --overlay-center-small-height: 30%;
  --overlay-center-normal-width: 50%;
  --overlay-center-normal-height: 50%;
  --overlay-center-large-width: 75%;
  --overlay-center-large-height: 75%;
  --overlay-header-height: var(--header-bar-height);
  --overlay-header-background-color: var(--header-bar-background-color);
  --overlay-header-color: #fff;
  --overlay-header-font: var(--header-bar-title);
  --overlay-background-color: rgba(0, 0, 0, 0.5);
  --overlay-margin-bottom: 0px;
  /* components - resize splitter style */
  --splitter-background-color: rgba(0, 0, 0, 0.1);
  --splitter-hover-background-color: rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 460px) {
  body {
    --button-container-margin: 0 -15px;
    --button-container-padding: 0 0 0 0;
    --button-container-background: #586272;
    --button-container-height: 50px;
    --button-container-align: right;
    --button-container-button-background-color: transparent;
    --button-container-button-border-radius: 0;
    --button-container-button-margin: 0;
    --button-container-button-height: 50px;
    --button-container-button-border: 1px solid rgba(0, 0, 0, 0.1);
    --overlay-center-small-width: 100%;
    --overlay-center-small-height: 100%;
    --overlay-center-normal-width: 100%;
    --overlay-center-normal-height: 100%;
    --overlay-center-large-width: 100%;
    --overlay-center-large-height: 100%;
  }
}
@media (min-width: 461px) and (max-width: 1024px) {
  body {
    --overlay-center-small-width: 40%;
    --overlay-center-small-height: 40%;
    --overlay-center-normal-width: 60%;
    --overlay-center-normal-height: 60%;
    --overlay-center-large-width: 80%;
    --overlay-center-large-height: 80%;
  }
}
/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/index.css ***!
  \*********************************************************************************************************************************************************************************/
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  /* This is a font-stack that tries to use the system-default sans-serifs first */
  font-family: Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-background);
}
/*!***************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/grist-theme.css ***!
  \***************************************************************************************************************************************************************************************/
body {
  --grid-container-border-color: 1px solid rgba(0, 0, 0, 0.09);
  --grid-container-border-width: 1px 0;
  --grid-wrap-container-border: 0px solid transparent;
  --grid-wrap-container-border-width: 0;
  --grist-background-color: transparent;
  --grist-title-margin: 0 0 0 10px;
  --grist-title-border: none;
  --grist-title-font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 1.1em
    var(--theme-font, 'Roboto');
  --grist-title-color: var(--md-sys-color-on-surface);
  --grist-title-icon-color: var(--md-sys-color-on-surface-variant);
  --grist-title-icon-margin: 0 3px 2px 0;
  --grist-title-icon-size: var(--md-sys-typescale-label-large-size, 0.875rem);
  --grist-title-with-grid-padding: 0;
  --grist-object-editor-font: normal 1em var(--theme-font, 'Roboto');
  --grist-object-editor-color: var(--md-sys-color-on-surface);
  --grist-input-progress-border: 1px solid rgba(255, 255, 255, 0.5);
  --grist-input-progress-background: rgba(121, 110, 110, 0.1);
  --grist-input-progress-bar-background: var(--md-sys-color-primary-fixed-dim);
  --grist-input-progress-bar-color: var(--md-sys-color-on-surface-variant);
  --grid-header-background-color: var(--md-sys-color-surface-container-low);
  --grid-header-top-border: 2px solid var(--md-sys-color-primary);
  --grid-header-bottom-border: var(--grid-container-border-color);
  --grid-header-border-color: var(--md-sys-color-outline);
  --grid-header-padding: var(--spacing-small) var(--spacing-tiny);
  --grid-header-sorter-size: 18px;
  --grid-header-splitter-border: var(--grid-container-border-color);
  --grid-header-splitter-border-hover: 1px solid var(--md-sys-color-inverse-primary);
  --grid-header-color: var(--md-sys-color-primary);
  --grid-header-font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
    var(--fontsize-small) var(--theme-font, 'Roboto');
  --grid-header-filter-title-color: var(--md-sys-color-on-surface);
  --grid-header-filter-title-font: normal 12px var(--theme-font, 'Roboto');
  --grid-header-filter-title-icon-color: var(--md-sys-color-on-surface-variant);
  --grid-body-bottom-border: var(--grid-header-bottom-border);
  --grid-gutter-padding: var(--spacing-tiny) 0;
  --grid-record-background-color: var(--md-sys-color-surface-container-lowest);
  --grid-record-odd-background-color: var(--md-sys-color-surface-container-low);
  --grid-record-padding: var(--spacing-small) var(--spacing-medium);
  --grid-record-color: var(--md-sys-color-on-surface-variant);
  --grid-record-color-hover: var(--md-sys-color-primary);
  --grid-record-wide-fontsize: var(--md-sys-typescale-label-large-size, 0.875rem);
  --grid-record-selected-background-color: var(--md-sys-color-primary-container);
  --grid-record-selected-color: var(--md-sys-color-on-primary-container);
  --grid-record-focused-border: 1px solid var(--md-sys-color-outline-variant);
  --grid-record-focused-cell-background-color: var(--md-sys-color-secondary-container);
  --grid-record-focused-cell-border: 1px dashed var(--md-sys-color-outline);
  --grid-record-focused-box-shadow: 0px 2px 0px 0px rgb(0 0 0 / 10%);
  --grid-record-emphasized-background-color: var(--md-sys-color-secondary-fixed-dim);
  --grid-record-emphasized-color: var(--md-sys-color-on-secondary-fixed-variant);
  --grid-record-editing-background-color: var(--md-sys-color-inverse-primary);
  --grid-record-editing-border: 1px dashed rgba(var(--md-sys-color-primary-rgb), 0.4);
  --grid-record-fontsize: var(--md-sys-typescale-label-large-size, 0.875rem);
  --grid-record-border-bottom: var(--grid-container-border-color);
  --grid-record-dirty-border-top: 24px solid rgba(var(--md-sys-color-primary-rgb), 0.6);
  --grid-record-dirty-border-left: 24px solid transparent;
  --grid-record-dirty-icon-font: bold 10px/12px var(--md-icon-font, 'Material Symbols Outlined');
  --grid-record-dirty-icon-size: var(--fontsize-large);
  --grid-record-dirty-color: var(--md-sys-color-surface);
  --grid-footer-background-color: var(--md-sys-color-surface-container-low);
  --grid-footer-font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
  --grid-footer-color: var(--md-sys-color-primary);
  --grid-footer-limit-color: var(--md-ref-palette-neutral40, #5f5f5f);
  --grid-footer-inactive-color: var(--md-ref-palette-neutral40, #5f5f5f);
  --grid-footer-padding: var(--spacing-small) var(--spacing-medium);
  --data-list-background-color: var(--md-sys-color-surface-container-lowest);
  --data-list-item-margin: var(--spacing-medium);
  --data-list-item-padding: var(--spacing-medium) var(--spacing-large);
  --data-list-item-border-bottom: var(--grid-container-border-color);
  --data-list-item-name-font: bold 1.1em var(--theme-font, 'Roboto');
  --data-list-item-name-color: var(--md-sys-color-secondary);
  --data-list-item-disc-font: normal 0.9em var(--theme-font, 'Roboto');
  --data-list-item-disc-color: var(--md-sys-color-on-tertiary-container);
  --data-list-item-etc-label-font: bold 1em/1em var(--theme-font, 'Roboto');
  --data-list-item-etc-font: normal 0.9em/1em var(--theme-font, 'Roboto');
  --data-list-item-etc-color: var(--md-ref-palette-neutral50, #787878);
  --data-list-item-icon-font: normal 1em/1em;
  --data-list-item-icon-color: var(--md-sys-color-on-secondary);
  --data-list-selected-background-color: var(--grid-record-selected-background-color);
  --data-list-fab-position-horizontal: 15px;
  --data-list-fab-position-vertical: 15px;
  --data-list-fab-color: var(--md-sys-color-primary);
  --data-list-fab-shadow: var(--box-shadow);
  --data-card-background-color: var(--md-sys-color-surface-container);
  --data-card-record-card-background-color: var(--md-sys-color-surface-container-lowest);
  --data-card-record-card-border: var(--grid-container-border-color);
  --data-card-record-card-border-hover: 1px solid var(--md-sys-color-primary);
  --data-card-record-card-boxshadow-hover: 1px 1px 2px 1px rgba(0, 0, 0, 0.15);
  --data-card-record-card-selected-border: 1px solid var(--md-sys-color-primary);
  --data-card-record-card-border-radius: var(--md-sys-shape-corner-small);
  --data-card-item-margin: var(--spacing-medium);
  --data-card-item-padding: var(--spacing-medium) var(--spacing-large);
  --data-card-item-border-bottom: var(--grid-container-border-color);
  --data-card-item-name-font: bold 1.1em var(--theme-font, 'Roboto');
  --data-card-item-name-color: var(--md-sys-color-secondary);
  --data-card-item-name-label-font: normal 0.65em/0.8em var(--theme-font, 'Roboto');
  --data-card-item-name-label-color: var(--md-sys-color-secondary);
  --data-card-item-disc-font: normal 0.9em var(--theme-font, 'Roboto');
  --data-card-item-disc-color: var(--md-sys-color-tertiary);
  --data-card-item-etc-label-font: normal 1em/1em var(--theme-font, 'Roboto');
  --data-card-item-etc-font: normal 0.9em/1em var(--theme-font, 'Roboto');
  --data-card-item-etc-color: var(--md-ref-palette-neutral50, #787878);
  --data-card-item-icon-font: normal 1em/1em;
  --data-card-item-icon-color: var(--md-sys-color-on-secondary);
  --data-card-item-btn-border: var(--grid-container-border-color);
  --data-card-item-btn-border-radius: var(--md-sys-shape-corner-small);
  --data-card-item-btn-padding: var(--spacing-small);
  --data-card-selected-background-color: var(--grid-record-selected-background-color);
  --data-card-fab-position-horizontal: 15px;
  --data-card-fab-position-vertical: 15px;
  --data-card-fab-color: var(--md-sys-color-primary);
  --data-card-fab-shadow: var(--box-shadow);
  --data-card-thumbnail-height: 140px;
  --data-card-thumbnail-border-bottom: var(--grid-container-border-color);
  --data-card-attachimg-height: 70px;
  --record-view-background-color: var(--md-sys-color-surface-container);
  --record-view-gap: var(--spacing-small) 0;
  --record-view-padding: var(--spacing-medium);
  --record-view-label-font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 15px
    var(--theme-font, 'Roboto');
  --record-view-label-color: var(--md-sys-color-secondary);
  --record-view-label-icon-size: var(--fontsize-small);
  --record-view-font: normal 15px var(--theme-font, 'Roboto');
  --record-view-color: var(--md-sys-color-secondary);
  --record-view-focus-color: var(--md-sys-color-primary);
  --record-view-border-bottom: var(--grid-container-border-color);
  --record-view-edit-border-bottom: 2px solid var(--md-sys-color-primary);
  --record-view-item-padding: var(--spacing-medium);
  --record-view-footer-background: var(--md-ref-palette-neutral50, #787878);
  --record-view-footer-button-border: var(--grid-container-border-color);
  --record-view-footer-button-border-width: 0 0 0 1px;
  --record-view-footer-button-font: 17px;
  --record-view-footer-button-color: var(--md-sys-color-surface);
  --record-view-footer-iconbutton-size: 35px;
  --record-view-footer-focus-background: var(--md-sys-color-primary);
  --ox-grist-padding: var(--spacing-medium);
}

@media only screen and (max-width: 460px) {
  body {
    --record-view-label-font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 15px/32px
      var(--theme-font, 'Roboto');
    --record-view-font: normal 15px/32px var(--theme-font, 'Roboto');
    --ox-grist-padding: 0;
  }
}
@media (min-width: 461px) and (max-width: 700px) {
  body {
    --ox-grist-padding: 0;
  }
}
@media (min-width: 461px) and (max-width: 1024px) {
  body {
    --data-card-create-form-padding: 7px;
  }
}
body.dark {
  --grid-container-border-color: 1px solid rgba(255, 255, 255, 0.09);
}
/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/calendar-theme.css ***!
  \******************************************************************************************************************************************************************************************/
body {
  --ox-calendar-padding: var(--padding-default);
  /* monthly common color */
  --calendar-monthly-text-color: var(--md-sys-color-secondary);
  --calendar-monthly-border: 1px solid rgba(0, 0, 0, 0.1);
  --calendar-monthly-border-width: 0 1px 1px 0px;
  /* monthly layout */
  --calendar-monthly-ol-margin: var(--margin-default) 0;
  --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
  --calendar-current-month-color: var(--md-sys-color-on-surface);
  --calendar-monthly-label-align: left;
  --calendar-monthly-label-padding: var(--padding-narrow) 0;
  --calendar-monthly-label-color: var(--md-sys-color-secondary);
  --calendar-monthly-opacity: 0.5;
  --calendar-monthly-date-label-background-color: var(--status-danger-color);
  --calendar-monthly-date-label-margin: var(--margin-narrow);
  --calendar-monthly-date-label-padding: 0px 6px;
  --calendar-monthly-date-label-color: var(--md-sys-color-on-primary);
  --calendar-monthly-background-color: #f4f4f4;
  --calendar-monthly-event-border-radius: var(--border-radius);
  --calendar-monthly-event-margin: var(--padding-narrow) 0 0 0;
  --calendar-monthly-event-padding: 2px var(--padding-default);
  --calendar-monthly-event-border: 3px solid #ccc;
  --calendar-monthly-event-border-width: 0 0 0 3px;
  /* weekly common color */
  --calendar-weekly-text-color: var(--md-sys-color-secondary);
  --calendar-weekly-border: 1px solid rgba(0, 0, 0, 0.1);
  --calendar-weekly-border-width: 0 1px 1px 0px;
  /* weekly layout */
  --calendar-weekly-ol-margin: var(--margin-default) 0;
  --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
  --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
  --calendar-current-week-color: var(--md-sys-color-on-surface);
  --calendar-weekly-label-align: center;
  --calendar-weekly-label-padding: var(--padding-narrow) 0;
  --calendar-weekly-label-color: var(--md-sys-color-secondary);
  --calendar-weekly-opacity: 0.5;
  --calendar-weekly-date-label-background-color: var(--status-danger-color);
  --calendar-weekly-date-label-margin: var(--margin-narrow);
  --calendar-weekly-date-label-padding: 0px 6px;
  --calendar-weekly-date-label-color: var(--md-sys-color-on-primary);
  --calendar-weekly-background-color: #f4f4f4;
  --calendar-weekly-event-border-radius: var(--border-radius);
  --calendar-weekly-event-margin: var(--padding-narrow) 0 0 0;
  --calendar-weekly-event-padding: 2px var(--padding-default);
  --calendar-weekly-event-border: 3px solid #ccc;
  --calendar-weekly-event-border-width: 0 0 0 3px;
}

@media only screen and (max-width: 460px) {
  body {
    --calendar-monthly-text-color: tomato;
  }
}
/*!*************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@things-factory/shell/client/themes/app-theme.css ***!
  \*************************************************************************************************************************************************************************************/
body {
  /* theme color */
  --primary-color: var(--md-sys-color-primary);
  --secondary-color: var(--md-sys-color-secondary);
  --focus-color: var(--md-sys-color-on-primary);
  --primary-background-color: var(--md-sys-color-primary-container);
  --secondary-background-color: var(--md-sys-color-secondary-container);
  --focus-background-color: var(--md-sys-color-primary);
  --primary-text-color: var(--md-sys-color-on-primary);
  --secondary-text-color: var(--md-sys-color-on-secondary);
  /* common style */
  --border-radius: 4px;
  --border-dim-color: 1px solid rgba(0, 0, 0, 0.15);
  --border-light-color: 1px solid rgba(255, 255, 255, 0.3);
  --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
  --theme-font: 'Noto', Helvetica;
  --margin-default: var(--spacing-medium, 8px);
  --margin-narrow: var(--spacing-small, 4px);
  --margin-wide: var(--spacing-large, 12px);
  --padding-default: var(--spacing-medium, 8px);
  --padding-narrow: var(--spacing-small, 4px);
  --padding-wide: var(--spacing-large, 12px);
  --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);
  --scrollbar-thumb-hover-color: var(--md-sys-color-primary);
  --fontsize-default: 14px;
  --fontsize-small: 13px;
  --fontsize-large: 16px;
  /* app layout style */
  --app-grid-template-area: 'header header header' 'nav main aside' 'nav footer aside';
  /* title & description style */
  --title-margin: var(--margin-narrow) 0;
  --title-font: bold 24px var(--theme-font);
  --title-text-color: var(--md-sys-color-secondary);
  --title-font-mobile: bold 20px var(--theme-font);
  --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
  --page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);
  --page-description-color: var(--md-sys-color-primary);
  --subtitle-padding: 12px 5px 3px 5px;
  --subtitle-font: bold 18px var(--theme-font);
  --subtitle-text-color: var(--md-sys-color-primary);
  --subtitle-border-bottom: 1px solid var(--md-sys-color-primary);
  /* icon style */
  --icon-tiny-size: var(--icon-size-medium, 24px);
  --icon-default-size: var(--icon-size-large, 32px);
  --icon-big-size: var(--icon-size-huge, 48px);
  --icon-default-color: var(--md-sys-color-on-primary);
  /* material design component themes */
  --mdc-theme-on-primary: var(--md-sys-color-on-primary);
  --mdc-theme-primary: var(--secondary-text-color);
  --mdc-theme-on-secondary: var(--md-sys-color-on-primary);
  --mdc-theme-secondary: var(--md-sys-color-primary);
  --mdc-button-outline-color: var(--md-sys-color-primary);
  --mdc-danger-button-primary-color: var(--status-danger-color);
  --mdc-danger-button-outline-color: var(--status-danger-color);
  --mdc-button-outline-width: 1px;
  --mdc-button-horizontal-padding: 16px;
  /* button style */
  --button-background-color: var(--md-sys-color-surface-variant);
  --button-background-focus-color: var(--md-sys-color-primary);
  --button-border: var(--border-dim-color);
  --button-border-radius: var(--border-radius);
  --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
  --button-padding: calc(var(--padding-narrow) * 1.5) var(--padding-wide);
  --button-color: var(--md-sys-color-secondary);
  --button-font: 600 var(--fontsize-default) var(--theme-font);
  --button-text-transform: capitalize;
  --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  --button-activ-border: 1px solid var(--md-sys-color-primary);
  --button-activ-background-color: var(--md-sys-color-primary);
  --button-activ-color: var(--md-sys-color-on-primary);
  --iconbtn-padding: var(--padding-narrow);
  --button-primary-background-color: var(--md-sys-color-primary);
  --button-primary-active-background-color: var(--status-success-color);
  --button-primary-padding: var(--margin-default) var(--margin-wide);
  --button-primary-color: var(--md-sys-color-on-primary);
  --button-primary-font: bold 16px var(--theme-font);
  /* table style */
  --th-padding: var(--padding-default);
  --th-border-top: 2px solid var(--md-sys-color-secondary);
  --th-text-transform: capitalize;
  --th-font: bold var(--fontsize-small) var(--theme-font);
  --th-color: var(--md-sys-color-secondary);
  --tr-background-color: var(--md-sys-color-surface-variant);
  --tr-background-odd-color: rgba(255, 255, 255, 0.4);
  --tr-background-hover-color: #e1f5fe;
  --td-border-line: 1px solid rgba(0, 0, 0, 0.05);
  --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  --td-padding: var(--padding-default);
  --td-font: normal 13px var(--theme-font);
  --td-color: var(--md-sys-color-secondary);
  --label-cell-background-color: var(--md-sys-color-surface); /* th or td common background color */
  /* form style */
  --label-font: normal var(--fontsize-default) var(--theme-font);
  --label-color: var(--md-sys-color-on-surface);
  --label-text-transform: capitalize;
  --input-margin: var(--margin-narrow) 0;
  --input-padding: 6px 2px;
  --input-min-width: 200px;
  --input-font: normal var(--fontsize-default) var(--theme-font);
  --input-hint-font: normal var(--fontsize-small) var(--theme-font);
  --input-hint-color: #666;
  --input-container-max-width: 900px;
  --fieldset-margin: var(--padding-wide) 0;
  --fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);
  --legend-padding: var(--padding-default) 0;
  --legend-color: var(--md-sys-color-secondary);
  --legend-font: bold 16px var(--theme-font);
}

body.dark {
  caret-color: white;
}

html {
  --scene-theme-font-family: 'Roboto', Helvetica;
}

@media only screen and (max-width: 460px) {
  body {
    /* subtitle style */
    --subtitle-margin: 0;
  }
}

/*# sourceMappingURL=theme.css.map*/