From 8b5eb3204716645c99c57a108f863b4233919b38 Mon Sep 17 00:00:00 2001 From: w-okada Date: Fri, 4 Aug 2023 12:20:04 +0900 Subject: [PATCH] bugfix: 200slot gui --- client/demo/dist/index.js | 101 ++++++++++++- .../demo/components2/100_ModelSlotArea.tsx | 141 +++++++++++------- client/demo/src/css/App.css | 74 ++++++++- client/lib/src/const.ts | 1 + server/data/ModelSlot.py | 2 + 5 files changed, 261 insertions(+), 58 deletions(-) diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js index 4d125454..fca8dedd 100644 --- a/client/demo/dist/index.js +++ b/client/demo/dist/index.js @@ -19,6 +19,17 @@ eval("/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default in /***/ }), +/***/ "./node_modules/@fortawesome/react-fontawesome/index.es.js": +/*!*****************************************************************!*\ + !*** ./node_modules/@fortawesome/react-fontawesome/index.es.js ***! + \*****************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ FontAwesomeIcon: () => (/* binding */ FontAwesomeIcon)\n/* harmony export */ });\n/* harmony import */ var _fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @fortawesome/fontawesome-svg-core */ \"./node_modules/@fortawesome/fontawesome-svg-core/index.mjs\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\n\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n\n return keys;\n}\n\nfunction _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n\n return target;\n}\n\nfunction _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) {\n return typeof obj;\n } : function (obj) {\n return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n }, _typeof(obj);\n}\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nfunction _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n\n var target = _objectWithoutPropertiesLoose(source, excluded);\n\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}\n\nfunction _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();\n}\n\nfunction _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return _arrayLikeToArray(arr);\n}\n\nfunction _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}\n\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\n\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\n return arr2;\n}\n\nfunction _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\n// Get CSS class list from a props object\nfunction classList(props) {\n var _classes;\n\n var beat = props.beat,\n fade = props.fade,\n beatFade = props.beatFade,\n bounce = props.bounce,\n shake = props.shake,\n flash = props.flash,\n spin = props.spin,\n spinPulse = props.spinPulse,\n spinReverse = props.spinReverse,\n pulse = props.pulse,\n fixedWidth = props.fixedWidth,\n inverse = props.inverse,\n border = props.border,\n listItem = props.listItem,\n flip = props.flip,\n size = props.size,\n rotation = props.rotation,\n pull = props.pull; // map of CSS class names to properties\n\n var classes = (_classes = {\n 'fa-beat': beat,\n 'fa-fade': fade,\n 'fa-beat-fade': beatFade,\n 'fa-bounce': bounce,\n 'fa-shake': shake,\n 'fa-flash': flash,\n 'fa-spin': spin,\n 'fa-spin-reverse': spinReverse,\n 'fa-spin-pulse': spinPulse,\n 'fa-pulse': pulse,\n 'fa-fw': fixedWidth,\n 'fa-inverse': inverse,\n 'fa-border': border,\n 'fa-li': listItem,\n 'fa-flip': flip === true,\n 'fa-flip-horizontal': flip === 'horizontal' || flip === 'both',\n 'fa-flip-vertical': flip === 'vertical' || flip === 'both'\n }, _defineProperty(_classes, \"fa-\".concat(size), typeof size !== 'undefined' && size !== null), _defineProperty(_classes, \"fa-rotate-\".concat(rotation), typeof rotation !== 'undefined' && rotation !== null && rotation !== 0), _defineProperty(_classes, \"fa-pull-\".concat(pull), typeof pull !== 'undefined' && pull !== null), _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _classes); // map over all the keys in the classes object\n // return an array of the keys where the value for the key is not null\n\n return Object.keys(classes).map(function (key) {\n return classes[key] ? key : null;\n }).filter(function (key) {\n return key;\n });\n}\n\n// Camelize taken from humps\n// humps is copyright © 2012+ Dom Christie\n// Released under the MIT license.\n// Performant way to determine if object coerces to a number\nfunction _isNumerical(obj) {\n obj = obj - 0; // eslint-disable-next-line no-self-compare\n\n return obj === obj;\n}\n\nfunction camelize(string) {\n if (_isNumerical(string)) {\n return string;\n } // eslint-disable-next-line no-useless-escape\n\n\n string = string.replace(/[\\-_\\s]+(.)?/g, function (match, chr) {\n return chr ? chr.toUpperCase() : '';\n }); // Ensure 1st char is always lowercase\n\n return string.substr(0, 1).toLowerCase() + string.substr(1);\n}\n\nvar _excluded = [\"style\"];\n\nfunction capitalize(val) {\n return val.charAt(0).toUpperCase() + val.slice(1);\n}\n\nfunction styleToObject(style) {\n return style.split(';').map(function (s) {\n return s.trim();\n }).filter(function (s) {\n return s;\n }).reduce(function (acc, pair) {\n var i = pair.indexOf(':');\n var prop = camelize(pair.slice(0, i));\n var value = pair.slice(i + 1).trim();\n prop.startsWith('webkit') ? acc[capitalize(prop)] = value : acc[prop] = value;\n return acc;\n }, {});\n}\n\nfunction convert(createElement, element) {\n var extraProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n if (typeof element === 'string') {\n return element;\n }\n\n var children = (element.children || []).map(function (child) {\n return convert(createElement, child);\n });\n /* eslint-disable dot-notation */\n\n var mixins = Object.keys(element.attributes || {}).reduce(function (acc, key) {\n var val = element.attributes[key];\n\n switch (key) {\n case 'class':\n acc.attrs['className'] = val;\n delete element.attributes['class'];\n break;\n\n case 'style':\n acc.attrs['style'] = styleToObject(val);\n break;\n\n default:\n if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0) {\n acc.attrs[key.toLowerCase()] = val;\n } else {\n acc.attrs[camelize(key)] = val;\n }\n\n }\n\n return acc;\n }, {\n attrs: {}\n });\n\n var _extraProps$style = extraProps.style,\n existingStyle = _extraProps$style === void 0 ? {} : _extraProps$style,\n remaining = _objectWithoutProperties(extraProps, _excluded);\n\n mixins.attrs['style'] = _objectSpread2(_objectSpread2({}, mixins.attrs['style']), existingStyle);\n /* eslint-enable */\n\n return createElement.apply(void 0, [element.tag, _objectSpread2(_objectSpread2({}, mixins.attrs), remaining)].concat(_toConsumableArray(children)));\n}\n\nvar PRODUCTION = false;\n\ntry {\n PRODUCTION = \"development\" === 'production';\n} catch (e) {}\n\nfunction log () {\n if (!PRODUCTION && console && typeof console.error === 'function') {\n var _console;\n\n (_console = console).error.apply(_console, arguments);\n }\n}\n\nfunction normalizeIconArgs(icon) {\n // this has everything that it needs to be rendered which means it was probably imported\n // directly from an icon svg package\n if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {\n return icon;\n }\n\n if (_fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__.parse.icon) {\n return _fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__.parse.icon(icon);\n } // if the icon is null, there's nothing to do\n\n\n if (icon === null) {\n return null;\n } // if the icon is an object and has a prefix and an icon name, return it\n\n\n if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName) {\n return icon;\n } // if it's an array with length of two\n\n\n if (Array.isArray(icon) && icon.length === 2) {\n // use the first item as prefix, second as icon name\n return {\n prefix: icon[0],\n iconName: icon[1]\n };\n } // if it's a string, use it as the icon name\n\n\n if (typeof icon === 'string') {\n return {\n prefix: 'fas',\n iconName: icon\n };\n }\n}\n\n// creates an object with a key of key\n// and a value of value\n// if certain conditions are met\nfunction objectWithKey(key, value) {\n // if the value is a non-empty array\n // or it's not an array but it is truthy\n // then create the object with the key and the value\n // if not, return an empty array\n return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};\n}\n\nvar FontAwesomeIcon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {\n var iconArgs = props.icon,\n maskArgs = props.mask,\n symbol = props.symbol,\n className = props.className,\n title = props.title,\n titleId = props.titleId,\n maskId = props.maskId;\n var iconLookup = normalizeIconArgs(iconArgs);\n var classes = objectWithKey('classes', [].concat(_toConsumableArray(classList(props)), _toConsumableArray(className.split(' '))));\n var transform = objectWithKey('transform', typeof props.transform === 'string' ? _fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__.parse.transform(props.transform) : props.transform);\n var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));\n var renderedIcon = (0,_fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__.icon)(iconLookup, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes), transform), mask), {}, {\n symbol: symbol,\n title: title,\n titleId: titleId,\n maskId: maskId\n }));\n\n if (!renderedIcon) {\n log('Could not find icon', iconLookup);\n return null;\n }\n\n var abstract = renderedIcon.abstract;\n var extraProps = {\n ref: ref\n };\n Object.keys(props).forEach(function (key) {\n // eslint-disable-next-line no-prototype-builtins\n if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {\n extraProps[key] = props[key];\n }\n });\n return convertCurry(abstract[0], extraProps);\n});\nFontAwesomeIcon.displayName = 'FontAwesomeIcon';\nFontAwesomeIcon.propTypes = {\n beat: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n border: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n beatFade: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n bounce: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n className: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n fade: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n flash: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n mask: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().array), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)]),\n maskId: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n fixedWidth: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n inverse: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n flip: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf([true, false, 'horizontal', 'vertical', 'both']),\n icon: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().array), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)]),\n listItem: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n pull: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['right', 'left']),\n pulse: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n rotation: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf([0, 90, 180, 270]),\n shake: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n size: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x']),\n spin: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n spinPulse: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n spinReverse: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n symbol: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)]),\n title: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n titleId: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n transform: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().object)]),\n swapOpacity: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool)\n};\nFontAwesomeIcon.defaultProps = {\n border: false,\n className: '',\n mask: null,\n maskId: null,\n fixedWidth: false,\n inverse: false,\n flip: false,\n icon: null,\n listItem: false,\n pull: null,\n pulse: false,\n rotation: null,\n size: null,\n spin: false,\n spinPulse: false,\n spinReverse: false,\n beat: false,\n fade: false,\n beatFade: false,\n bounce: false,\n shake: false,\n symbol: false,\n title: '',\n titleId: null,\n transform: null,\n swapOpacity: false\n};\nvar convertCurry = convert.bind(null, (react__WEBPACK_IMPORTED_MODULE_1___default().createElement));\n\n\n\n\n//# sourceURL=webpack://demo/./node_modules/@fortawesome/react-fontawesome/index.es.js?"); + +/***/ }), + /***/ "./src/000_index.tsx": /*!***************************!*\ !*** ./src/000_index.tsx ***! @@ -323,7 +334,7 @@ eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ModelSlotArea: () => (/* binding */ ModelSlotArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\nvar ModelSlotArea = function ModelSlotArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)(),\n serverSetting = _useAppState.serverSetting,\n getInfo = _useAppState.getInfo;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_5__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"edit\", {\n \"ja\": \"編集\",\n \"en\": \"edit\"\n });\n }, []);\n var modelTiles = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n if (!serverSetting.serverSetting.modelSlots) {\n return [];\n }\n return serverSetting.serverSetting.modelSlots.map(function (x, index) {\n if (!x.modelFile || x.modelFile.length == 0) {\n return null;\n }\n var tileContainerClass = index == serverSetting.serverSetting.modelSlotIndex ? \"model-slot-tile-container-selected\" : \"model-slot-tile-container\";\n var name = x.name.length > 8 ? x.name.substring(0, 7) + \"...\" : x.name;\n var iconElem = x.iconFile.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"img\", {\n className: \"model-slot-tile-icon\",\n src: x.iconFile,\n alt: x.name\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-vctype\"\n }, x.voiceChangerType)) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-icon-no-entry\"\n }, \"no image\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-vctype\"\n }, x.voiceChangerType));\n var clickAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee() {\n var dummyModelSlotIndex;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n dummyModelSlotIndex = Math.floor(Date.now() / 1000) * 1000 + index;\n _context.next = 3;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n modelSlotIndex: dummyModelSlotIndex\n }));\n case 3:\n setTimeout(function () {\n // quick hack\n getInfo();\n }, 1000 * 2);\n case 4:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function clickAction() {\n return _ref.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n key: index,\n className: tileContainerClass,\n onClick: clickAction\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-icon-div\"\n }, iconElem), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-dscription\"\n }, name));\n }).filter(function (x) {\n return x != null;\n });\n }, [serverSetting.serverSetting.modelSlots, serverSetting.serverSetting.modelSlotIndex]);\n var modelSlotArea = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n var onModelSlotEditClicked = function onModelSlotEditClicked() {\n guiState.stateControls.showModelSlotManagerCheckbox.updateState(true);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-panel\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tiles-container\"\n }, modelTiles), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: onModelSlotEditClicked\n }, messageBuilderState.getMessage(__filename, \"edit\")))));\n }, [modelTiles]);\n return modelSlotArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/100_ModelSlotArea.tsx?"); +eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ModelSlotArea: () => (/* binding */ ModelSlotArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ \"./node_modules/@fortawesome/react-fontawesome/index.es.js\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\nvar SortTypes = {\n slot: \"slot\",\n name: \"name\"\n};\nvar ModelSlotArea = function ModelSlotArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n serverSetting = _useAppState.serverSetting,\n getInfo = _useAppState.getInfo;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_6__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__.useMessageBuilder)();\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"slot\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n sortType = _useState2[0],\n setSortType = _useState2[1];\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"edit\", {\n ja: \"編集\",\n en: \"edit\"\n });\n }, []);\n var modelTiles = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (!serverSetting.serverSetting.modelSlots) {\n return [];\n }\n var modelSlots = sortType == \"slot\" ? serverSetting.serverSetting.modelSlots : serverSetting.serverSetting.modelSlots.slice().sort(function (a, b) {\n return a.name.localeCompare(b.name);\n });\n return modelSlots.map(function (x, index) {\n if (!x.modelFile || x.modelFile.length == 0) {\n return null;\n }\n var tileContainerClass = x.id == serverSetting.serverSetting.modelSlotIndex ? \"model-slot-tile-container-selected\" : \"model-slot-tile-container\";\n var name = x.name.length > 8 ? x.name.substring(0, 7) + \"...\" : x.name;\n var iconElem = x.iconFile.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n className: \"model-slot-tile-icon\",\n src: x.iconFile,\n alt: x.name\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-tile-vctype\"\n }, x.voiceChangerType)) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-tile-icon-no-entry\"\n }, \"no image\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-tile-vctype\"\n }, x.voiceChangerType));\n var clickAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n var dummyModelSlotIndex;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n dummyModelSlotIndex = Math.floor(Date.now() / 1000) * 1000 + x.id;\n _context.next = 3;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n modelSlotIndex: dummyModelSlotIndex\n }));\n case 3:\n setTimeout(function () {\n // quick hack\n getInfo();\n }, 1000 * 2);\n case 4:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function clickAction() {\n return _ref.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n key: index,\n className: tileContainerClass,\n onClick: clickAction\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-tile-icon-div\"\n }, iconElem), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-tile-dscription\"\n }, name));\n }).filter(function (x) {\n return x != null;\n });\n }, [serverSetting.serverSetting.modelSlots, serverSetting.serverSetting.modelSlotIndex, sortType]);\n var modelSlotArea = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var onModelSlotEditClicked = function onModelSlotEditClicked() {\n guiState.stateControls.showModelSlotManagerCheckbox.updateState(true);\n };\n var sortSlotByIdClass = sortType == \"slot\" ? \"model-slot-sort-button-active\" : \"model-slot-sort-button\";\n var sortSlotByNameClass = sortType == \"name\" ? \"model-slot-sort-button-active\" : \"model-slot-sort-button\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-panel\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-tiles-container\"\n }, modelTiles), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-sort-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: sortSlotByIdClass,\n onClick: function onClick() {\n setSortType(\"slot\");\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_8__.FontAwesomeIcon, {\n icon: [\"fas\", \"arrow-down-1-9\"],\n style: {\n fontSize: \"1rem\"\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: sortSlotByNameClass,\n onClick: function onClick() {\n setSortType(\"name\");\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_8__.FontAwesomeIcon, {\n icon: [\"fas\", \"arrow-down-a-z\"],\n style: {\n fontSize: \"1rem\"\n }\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: onModelSlotEditClicked\n }, messageBuilderState.getMessage(__filename, \"edit\")))));\n }, [modelTiles, sortType]);\n return modelSlotArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/100_ModelSlotArea.tsx?"); /***/ }), @@ -543,7 +554,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./101_RotatedButton.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/101_RotatedButton.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./Error.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/Error.css\");\n// Imports\n\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:root {\r\n --text-color: #333;\r\n --company-color1: rgba(64, 119, 187, 1);\r\n --company-color2: rgba(29, 47, 78, 1);\r\n --company-color3: rgba(255, 255, 255, 1);\r\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\r\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\r\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\r\n --global-shadow-color: rgba(0, 0, 0, 0.4);\r\n\r\n --sidebar-transition-time: 0.2s;\r\n --sidebar-transition-time-quick: 0.1s;\r\n --sidebar-transition-animation: ease-in-out;\r\n\r\n --header-height: 1.5rem;\r\n --right-sidebar-width: 320px;\r\n\r\n --dialog-border-color: rgba(100, 100, 100, 1);\r\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\r\n --dialog-background-color: rgba(255, 255, 255, 1);\r\n --dialog-primary-color: rgba(19, 70, 209, 1);\r\n --dialog-active-color: rgba(40, 70, 209, 1);\r\n --dialog-input-border-color: rgba(200, 200, 200, 1);\r\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\r\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\r\n\r\n --body-video-seeker-height: 3rem;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: \"Poppins\", sans-serif;\r\n}\r\nhtml {\r\n font-size: 16px;\r\n}\r\nbody {\r\n height: 100%;\r\n width: 100%;\r\n overflow-y: scroll;\r\n overflow-x: hidden;\r\n color: var(--text-color);\r\n /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */\r\n background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 90%, var(--company-color1) 90% 95%, var(--company-color2) 95% 100%);\r\n}\r\n#app {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n.first-gesture {\r\n background: rgba(200, 0, 0, 0.2);\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n}\r\n\r\n/* Main + Section Partition*/\r\n.main-body {\r\n height: 100%;\r\n width: 100%;\r\n padding: 2rem;\r\n font-family: \"Yusei Magic\", sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n font-size: 1rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n}\r\n/* Title */\r\n.main-body .top-title .title {\r\n font-size: 3rem;\r\n }\r\n.main-body .top-title .top-title-version {\r\n margin-left: 2rem;\r\n font-size: 1.2rem;\r\n background: linear-gradient(transparent 60%, yellow 30%);\r\n }\r\n.main-body .top-title .top-title-version-number {\r\n margin-left: 0.3rem;\r\n font-size: 0.8rem;\r\n }\r\n.main-body .top-title .belongings {\r\n margin-left: 1rem;\r\n margin-right: 1rem;\r\n }\r\n.main-body .top-title .belongings .link {\r\n margin-left: 1rem;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n }\r\n/* Partition */\r\n.main-body .partition {\r\n width: 100%;\r\n }\r\n.main-body .partition .partition-header {\r\n font-weight: 700;\r\n color: rgb(71, 69, 69);\r\n display: flex;\r\n }\r\n.main-body .partition .partition-header .caret {\r\n width: 2rem;\r\n }\r\n.main-body .partition .partition-header .title {\r\n font-size: 1.1rem;\r\n }\r\n.main-body .partition .partition-header .belongings {\r\n font-weight: 400;\r\n font-size: 0.8rem;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-end;\r\n margin-left: 10px;\r\n }\r\n.main-body .partition .partition-header .belongings .belongings-checkbox {\r\n margin-bottom: 3px;\r\n }\r\n.main-body .partition .partition-content {\r\n position: static;\r\n overflow-y: hidden;\r\n }\r\n.main-body .partition .row-split {\r\n }\r\n.state-control-checkbox:checked + .partition .partition-content {\r\n max-height: 700px;\r\n background: rgba(255, 255, 255, 0.3);\r\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\r\n}\r\n.state-control-checkbox + .partition .partition-content {\r\n max-height: 0px;\r\n background: rgba(233, 233, 255, 0.3);\r\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\r\n}\r\n/* ROW */\r\n\r\n.split-8-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-8-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 80%;\r\n }\r\n\r\n.split-8-2 > div:nth-child(2) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-6-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-6-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 60%;\r\n }\r\n.split-6-4 > div:nth-child(2) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-5-5 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-5-5 > div:nth-child(1) {\r\n left: 0px;\r\n width: 50%;\r\n }\r\n.split-5-5 > div:nth-child(2) {\r\n left: 50%;\r\n width: 50%;\r\n }\r\n.split-4-6 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-4-6 > div:nth-child(1) {\r\n left: 0px;\r\n width: 40%;\r\n }\r\n.split-4-6 > div:nth-child(2) {\r\n left: 40%;\r\n width: 60%;\r\n }\r\n.split-3-7 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-7 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-7 > div:nth-child(2) {\r\n left: 30%;\r\n width: 70%;\r\n }\r\n\r\n.split-2-8 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-2-8 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n\r\n.split-2-8 > div:nth-child(2) {\r\n left: 20%;\r\n width: 80%;\r\n }\r\n\r\n.split-1-8-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-1-8-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 10%;\r\n }\r\n\r\n.split-1-8-1 > div:nth-child(2) {\r\n left: 10%;\r\n width: 80%;\r\n }\r\n\r\n.split-1-8-1 > div:nth-child(3) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n.split-2-2-6 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-2-2-6 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n.split-2-2-6 > div:nth-child(2) {\r\n left: 20%;\r\n width: 20%;\r\n }\r\n.split-2-2-6 > div:nth-child(3) {\r\n left: 40%;\r\n width: 60%;\r\n }\r\n.split-3-3-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-3-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-3-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 30%;\r\n }\r\n.split-3-3-4 > div:nth-child(3) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n\r\n.split-3-4-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-3-4-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n\r\n.split-3-4-3 > div:nth-child(2) {\r\n left: 30%;\r\n width: 40%;\r\n }\r\n\r\n.split-3-4-3 > div:nth-child(3) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-2-5-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-2-5-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n.split-2-5-3 > div:nth-child(2) {\r\n left: 20%;\r\n width: 50%;\r\n }\r\n.split-2-5-3 > div:nth-child(3) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-4-4-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-4-4-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 40%;\r\n }\r\n.split-4-4-2 > div:nth-child(2) {\r\n left: 40%;\r\n width: 40%;\r\n }\r\n.split-4-4-2 > div:nth-child(3) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-1-4-4-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-1-4-4-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 10%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(2) {\r\n left: 10%;\r\n width: 40%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(3) {\r\n left: 50%;\r\n width: 40%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(4) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n\r\n.split-3-2-2-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-3-2-2-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(3) {\r\n left: 50%;\r\n width: 20%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(4) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-3-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(3) {\r\n left: 50%;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(4) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-3-1-2-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-1-2-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 10%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(3) {\r\n left: 40%;\r\n width: 20%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(4) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-3-2-1-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-1-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(3) {\r\n left: 50%;\r\n width: 10%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(4) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-3-2-2-2-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-2-2-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(3) {\r\n left: 50%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(4) {\r\n left: 70%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(5) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-1-1-1-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(3) {\r\n left: 40%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(4) {\r\n left: 50%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(5) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.w20 {\r\n width: 20%;\r\n}\r\n.bold {\r\n font-weight: 700;\r\n}\r\n.w40 {\r\n width: 40%;\r\n}\r\n\r\n.underline {\r\n border-bottom: 3px solid #333;\r\n}\r\n.left-padding-05 {\r\n padding-left: 0.5rem;\r\n}\r\n.left-padding-1 {\r\n padding-left: 1rem;\r\n}\r\n.left-padding-2 {\r\n padding-left: 2rem;\r\n}\r\n.left-margin-1 {\r\n margin-left: 1rem;\r\n}\r\n.left-margin-2 {\r\n margin-left: 2rem;\r\n}\r\n.highlight {\r\n background-color: rgba(200, 200, 255, 0.3);\r\n}\r\n.guided {\r\n /* background-color: rgba(9, 133, 67, 0.3); */\r\n background-color: rgba(159, 165, 162, 0.1);\r\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\r\n}\r\n\r\n.divider {\r\n height: 0.8rem;\r\n /* background-color: rgba(16, 210, 113, 0.1); */\r\n background-color: rgba(31, 42, 36, 0.1);\r\n}\r\n\r\n.body-section-title {\r\n font-size: 1.5rem;\r\n color: rgb(51, 49, 49);\r\n}\r\n.body-sub-section-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: rgb(3, 53, 12);\r\n}\r\n\r\n.body-item-title {\r\n color: rgb(51, 99, 49);\r\n display: flex;\r\n}\r\n.body-item-text {\r\n color: rgb(30, 30, 30);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n.body-item-text .body-item-text-item {\r\n padding-left: 1rem;\r\n }\r\n.body-item-text-small {\r\n color: rgb(30, 30, 30);\r\n font-size: 0.7rem;\r\n}\r\n.body-item-text-em {\r\n color: rgb(250, 30, 30);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 700;\r\n}\r\n\r\n.body-input-container {\r\n display: flex;\r\n}\r\n.body-item-input {\r\n width: 60%;\r\n}\r\n.body-item-input-slider {\r\n width: 60%;\r\n}\r\n.body-item-input-slider-label {\r\n margin-right: 1rem;\r\n}\r\n.body-item-input-slider-val {\r\n margin-left: 1rem;\r\n}\r\n.body-item-input-slider-2nd {\r\n width: 60%;\r\n accent-color: #33f;\r\n}\r\n\r\n.body-button-container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n}\r\n\r\n.body-button-container > div {\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n padding-left: 20px;\r\n padding-right: 20px;\r\n }\r\n\r\n.body-button-container .body-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n }\r\n\r\n.body-button-container .body-button:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.body-button-container .body-button-disabled {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n vertical-align: middle;\r\n background: #ddd;\r\n }\r\n\r\n.body-button-container .body-button-active {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n }\r\n\r\n.body-button-container .body-button-stanby {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n }\r\n\r\n.body-button-container .body-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.body-button-container-space-around {\r\n justify-content: space-around;\r\n}\r\n\r\n.body-select {\r\n color: rgb(30, 30, 30);\r\n max-width: 100%;\r\n}\r\n\r\n.body-select-50 {\r\n color: rgb(30, 30, 30);\r\n max-width: 50%;\r\n height: 1.5rem;\r\n}\r\n.select-option-red {\r\n color: #f66;\r\n font-weight: 700;\r\n}\r\n\r\n.body-image-container,\r\n.body-wav-container {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n.body-image-container .body-image-container-title,\r\n .body-image-container .body-wav-container-title,\r\n .body-wav-container .body-image-container-title,\r\n .body-wav-container .body-wav-container-title {\r\n width: 20%;\r\n }\r\n\r\n.body-image-container .body-image-container-img,\r\n .body-image-container .body-wav-container-wav,\r\n .body-wav-container .body-image-container-img,\r\n .body-wav-container .body-wav-container-wav {\r\n width: 80%;\r\n }\r\n\r\n.donate-img {\r\n border-radius: 35px;\r\n height: 1.5rem;\r\n}\r\n\r\n/* Dialog */\r\n.dialog-container,\r\n.dialog-container2 {\r\n justify-content: center;\r\n align-items: center;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n width: 100vw;\r\n height: 100vh;\r\n z-index: -1;\r\n display: none;\r\n}\r\n.dialog-container .dialog-frame, .dialog-container2 .dialog-frame {\r\n color: var(--company-color2);\r\n width: 40rem;\r\n max-height: 80vh;\r\n border: 2px solid var(--dialog-border-color);\r\n border-radius: 20px;\r\n flex-direction: column;\r\n align-items: center;\r\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\r\n background: var(--dialog-background-color);\r\n overflow: hidden;\r\n display: flex;\r\n }\r\n.dialog-container .dialog-frame .dialog-title, .dialog-container2 .dialog-frame .dialog-title {\r\n margin-top: 20px;\r\n background: var(--company-color2);\r\n color: #fff;\r\n width: 100%;\r\n text-align: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-content, .dialog-container2 .dialog-frame .dialog-content {\r\n width: 90%;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .dialog-application-title, .dialog-container2 .dialog-frame .dialog-content .dialog-application-title {\r\n font-family: \"Chicle\", cursive;\r\n font-size: 3rem;\r\n text-align: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .dialog-content-part, .dialog-container2 .dialog-frame .dialog-content .dialog-content-part {\r\n margin-top: 1rem;\r\n margin-bottom: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .input-text-container, .dialog-container2 .dialog-frame .dialog-content .input-text-container {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 20px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content, .dialog-container2 .dialog-frame .dialog-fixed-size-content {\r\n width: 90%;\r\n max-height: 70vh;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header {\r\n font-weight: 700;\r\n margin: 5px 5px 5px 5px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button {\r\n font-weight: 400;\r\n font-size: 0.8rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px 5px 1px 5px;\r\n margin-left: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container {\r\n max-height: 60vh;\r\n width: 100%;\r\n overflow-y: scroll;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot {\r\n height: 5rem;\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon {\r\n width: 5rem;\r\n height: 5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable {\r\n width: 5rem;\r\n height: 5rem;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail {\r\n display: flex;\r\n flex-direction: column;\r\n font-size: 0.8rem;\r\n border-bottom: solid 1px #aaa;\r\n width: 80%;\r\n overflow-y: scroll;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track {\r\n background-color: #eee;\r\n border-radius: 3px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb {\r\n background: #f7cfec80;\r\n border-radius: 3px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label {\r\n width: 20%;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value {\r\n width: 55%;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download {\r\n width: 55%;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable {\r\n width: 55%;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit {\r\n width: 55%;\r\n font-weight: 700;\r\n color: #f00;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button {\r\n width: 15%;\r\n height: 90%;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons {\r\n display: flex;\r\n flex-direction: column;\r\n border-bottom: solid 1px #a00;\r\n width: 20%;\r\n font-size: 0.8rem;\r\n padding: 4px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n vertical-align: middle;\r\n background: #ddd;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-title,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-title {\r\n font-size: 1rem;\r\n padding-left: 0.5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container {\r\n font-size: 0.9rem;\r\n padding-left: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 0.2rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label {\r\n width: 10rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value {\r\n width: 15rem;\r\n color: #f00;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container {\r\n display: flex;\r\n flex-direction: row;\r\n margin-top: 1rem;\r\n margin-bottom: 0.5rem;\r\n justify-content: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button {\r\n /* width: 12rem; */\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px 10px 1px 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title {\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 0px 0px 0px 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label {\r\n margin: 0px 0px 0px 0.5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons {\r\n margin: 0px 0px 0px 0.5rem;\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button {\r\n margin: 0px 0.5rem 0px 0.5rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 0px 10px 0px 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container-show {\r\n display: flex;\r\n}\r\n\r\n.state-control-checkbox:checked ~ .dialog-container {\r\n background: rgba(200, 200, 200, 0.4);\r\n animation-name: dialog-show;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox ~ .dialog-container {\r\n background: rgba(100, 100, 100, 0.4);\r\n animation-name: dialog-hide;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox:checked + .dialog-frame {\r\n display: flex;\r\n}\r\n.state-control-checkbox + .dialog-frame {\r\n display: none;\r\n}\r\n\r\n@keyframes dialog-hide {\r\n from {\r\n opacity: 1;\r\n z-index: 200;\r\n }\r\n 90% {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n to {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n}\r\n\r\n@keyframes dialog-show {\r\n from {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n 10% {\r\n z-index: 200;\r\n }\r\n to {\r\n opacity: 1;\r\n z-index: 200;\r\n }\r\n}\r\n\r\n.state-control-checkbox:checked ~ .dialog-container2 {\r\n background: rgba(200, 200, 200, 0.4);\r\n animation-name: dialog-show2;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox ~ .dialog-container2 {\r\n background: rgba(100, 100, 100, 0.4);\r\n animation-name: dialog-hide2;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n/* .state-control-checkbox:checked + .dialog-frame {\r\n display: flex;\r\n}\r\n.state-control-checkbox + .dialog-frame {\r\n display: none;\r\n} */\r\n\r\n@keyframes dialog-hide2 {\r\n from {\r\n opacity: 1;\r\n z-index: 400;\r\n }\r\n 90% {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n to {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n}\r\n\r\n@keyframes dialog-show2 {\r\n from {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n 10% {\r\n z-index: 400;\r\n }\r\n to {\r\n opacity: 1;\r\n z-index: 400;\r\n }\r\n}\r\n\r\n.tooltip-text {\r\n display: none;\r\n position: absolute;\r\n padding: 4px;\r\n font-size: 0.7rem;\r\n line-height: 2rem;\r\n color: #ddd;\r\n border-radius: 5px;\r\n background: #444;\r\n /* width: 100px; */\r\n}\r\n.tooltip-text-100px {\r\n width: 100px;\r\n}\r\n.tooltip-text-thin {\r\n line-height: 1rem;\r\n}\r\n.tooltip-text-right {\r\n line-height: 1rem;\r\n}\r\n.tooltip-text:before {\r\n content: \"\";\r\n position: absolute;\r\n top: -1.4rem;\r\n border: 12px solid transparent;\r\n border-top: 16px solid #444;\r\n margin-left: 0rem;\r\n transform: rotateZ(180deg);\r\n}\r\n.tooltip:hover .tooltip-text {\r\n display: inline-block;\r\n top: 30px;\r\n left: 0px;\r\n}\r\n.tooltip:hover .tooltip-text-lower {\r\n display: inline-block;\r\n top: 60px;\r\n left: 0px;\r\n}\r\n\r\n.tooltip {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n\r\n/* ################## */\r\n.merge-field-container {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.merge-field-container .merge-field {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-field-container .merge-field .merge-field-elem {\r\n padding-left: 5px;\r\n }\r\n.merge-field-container .merge-field .red {\r\n color: #f00;\r\n }\r\n.merge-field-container .merge-field .purple {\r\n color: #33f;\r\n }\r\n.merge-field-container .merge-field .grey-bold {\r\n color: #555;\r\n font-weight: 800;\r\n }\r\n.model-slot-area {\r\n display: inline-block;\r\n background: var(--company-color2);\r\n border-radius: 10px;\r\n padding: 20px;\r\n}\r\n.model-slot-area .model-slot-panel {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-tiles-container {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 2px;\r\n flex-wrap: wrap;\r\n overflow-y: scroll;\r\n max-height: 12rem;\r\n /* width: calc(30rem + 40px + 10px); */\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 2px;\r\n background: #333;\r\n cursor: pointer;\r\n padding: 5px;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n.model-slot-tile-container,\r\n.model-slot-tile-container-selected {\r\n width: 6rem;\r\n height: 6rem;\r\n border-radius: 2px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n}\r\n.model-slot-tile-container-selected {\r\n background: #43030c;\r\n}\r\n.model-slot-tile-container:hover {\r\n background: #43030c;\r\n}\r\n\r\n.model-slot-tile-icon-div {\r\n width: 5rem;\r\n height: 5rem;\r\n padding-top: 4px;\r\n position: relative;\r\n}\r\n.model-slot-tile-icon {\r\n width: 5rem;\r\n height: 5rem;\r\n -o-object-fit: contain;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n position: absolute;\r\n}\r\n.model-slot-tile-vctype {\r\n position: absolute;\r\n font-size: 0.6rem;\r\n font-weight: 800;\r\n top: 5px;\r\n left: 2px;\r\n background: RGBA(10, 200, 100, 0.6);\r\n border-radius: 5px;\r\n padding: 0px 2px 0px 2px;\r\n}\r\n.model-slot-tile-icon-no-entry {\r\n color: gray;\r\n position: absolute;\r\n top: 2rem;\r\n}\r\n.model-slot-tile-dscription {\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n color: navajowhite;\r\n padding-top: 4px;\r\n}\r\n\r\n.character-area {\r\n display: flex;\r\n gap: 5px;\r\n padding: 20px;\r\n}\r\n\r\n.character-area .portrait-area {\r\n width: 20rem;\r\n height: 20rem;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container {\r\n position: relative;\r\n width: 20rem;\r\n height: 20rem;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait {\r\n width: 20rem;\r\n height: 20rem;\r\n -o-object-fit: contain;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n position: absolute;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-status {\r\n width: 5rem;\r\n background: rgba(100, 100, 100, 0.5);\r\n color: white;\r\n position: absolute;\r\n padding: 0px 0px 0px 3px;\r\n font-size: 0.7rem;\r\n left: 5px;\r\n top: 5px;\r\n border-radius: 2px;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-status .portrait-area-status-vctype {\r\n font-weight: 800;\r\n color: #866;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use {\r\n width: 5rem;\r\n background: rgba(100, 100, 100, 0.5);\r\n color: white;\r\n position: absolute;\r\n paddig: 2px;\r\n font-size: 0.7rem;\r\n right: 5px;\r\n bottom: 5px;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use .portrait-area-terms-of-use-link {\r\n color: white;\r\n }\r\n\r\n.character-area .character-area-control-area {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control {\r\n display: flex;\r\n gap: 3px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 10px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-active {\r\n width: 5rem;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby {\r\n width: 5rem;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-title {\r\n width: 4rem;\r\n font-weight: 700;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field {\r\n /* width: 20rem; */\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-kind {\r\n width: 2rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-slider {\r\n width: 10rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-val {\r\n width: 3rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-text {\r\n padding: 0px 1px 0px 1px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 2px;\r\n background: #666;\r\n cursor: pointer;\r\n padding: 5px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n\r\n/* audio::-webkit-media-controls-play-button,\r\naudio::-webkit-media-controls-panel {\r\n background-color: #ff0;\r\n height: 1rem;\r\n}\r\naudio::-webkit-media-controls-enclosure {\r\n max-height: 1rem;\r\n}\r\naudio::-webkit-media-controls {\r\n justify-content: start;\r\n}\r\naudio::-webkit-media-controls-overlay-enclosure{\r\n height: 1rem;\r\n} */\r\n\r\n.config-area {\r\n display: flex;\r\n gap: 5px;\r\n padding: 20px;\r\n}\r\n\r\n.config-area .config-sub-area {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control {\r\n display: flex;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title {\r\n width: 5rem;\r\n font-weight: 700;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title-long {\r\n width: 20rem;\r\n font-weight: 700;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field {\r\n width: 15rem;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container .config-sub-area-noise-checkbox-container {\r\n display: flex;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-kind {\r\n width: 1rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-slider {\r\n width: 10rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-val {\r\n width: 3rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n align-items: center;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button {\r\n border: solid 2px #999;\r\n color: white;\r\n background: #666;\r\n\r\n cursor: pointer;\r\n\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button-active {\r\n border: solid 2px #999;\r\n color: white;\r\n background: #844;\r\n\r\n cursor: pointer;\r\n\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-filter {\r\n max-width: 30%;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-select {\r\n max-width: 70%;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-screen-select {\r\n display: flex;\r\n flex-direction: row-reverse;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-screen-select .config-sub-area-control-field-screen-select-button-active {\r\n font-size: 0.8rem;\r\n border: solid 1px #333;\r\n border-radius: 5px;\r\n background: #ada;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-screen-select .config-sub-area-control-field-screen-select-button {\r\n border: solid 1px #333;\r\n background: #fff;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container {\r\n height: 1rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container .config-sub-area-control-field-wav-file-audio {\r\n height: 1rem;\r\n width: 15rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-folder {\r\n height: 1rem;\r\n width: 1rem;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button {\r\n border: solid 1px #333;\r\n background: #fff;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button-active {\r\n font-size: 0.8rem;\r\n border: solid 1px #333;\r\n border-radius: 5px;\r\n background: #ada;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field-long {\r\n width: 30rem;\r\n }\r\n\r\n.headerArea {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.headerArea .title1 {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n align-items: flex-end;\r\n }\r\n\r\n.headerArea .title1 .title {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: #333;\r\n text-shadow: 0 0 2px #333;\r\n }\r\n\r\n.headerArea .title1 .title-version {\r\n font-size: 0.9rem;\r\n }\r\n\r\n.headerArea .title1 .title-version-number {\r\n font-size: 0.7rem;\r\n }\r\n\r\n.headerArea .icons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 20px;\r\n }\r\n\r\n.headerArea .icons .belongings {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 3px;\r\n }\r\n\r\n.headerArea .icons .belongings .belongings-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n background: #666;\r\n cursor: pointer;\r\n padding: 5px;\r\n height: 1.7rem;\r\n top: -2px;\r\n }\r\n\r\n.headerArea .icons .belongings .belongings-button:hover {\r\n border: solid 2px #cc6;\r\n }\r\n\r\n.advanced-setting-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n margin: 10px;\r\n}\r\n\r\n.advanced-setting-container .advanced-setting-container-row {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-title {\r\n width: 7rem;\r\n font-weight: 700;\r\n font-size: 0.9rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field {\r\n width: 15rem;\r\n font-size: 0.9rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n width: 10rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 3px;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(1) {\r\n color: #333;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(2) {\r\n }\r\n.get-server-information-container {\r\n margin: 10px;\r\n}\r\n.get-server-information-container .get-server-information-text-area {\r\n width: 100%;\r\n height: 20rem;\r\n }\r\n.merge-lab-container {\r\n display: flex;\r\n flex-direction: column;\r\n margin: 10px;\r\n gap: 10px;\r\n}\r\n.merge-lab-container .merge-lab-type-filter {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-type-filter > div:nth-child(1) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-type-filter > div:nth-child(2) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list {\r\n width: 70%;\r\n overflow-y: scroll;\r\n max-height: 20rem;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(1) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(2) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n width: 30%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button {\r\n border: solid 2px #ddd;\r\n color: black;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n background: #eee;\r\n cursor: pointer;\r\n padding: 5px;\r\n height: 1.7rem;\r\n text-align: center;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button:hover {\r\n border: solid 2px #aaa;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-buttons-notice {\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n color: #333;\r\n text-align: center;\r\n }\r\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://demo/./src/css/App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B2%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./101_RotatedButton.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/101_RotatedButton.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./Error.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/Error.css\");\n// Imports\n\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:root {\r\n --text-color: #333;\r\n --company-color1: rgba(64, 119, 187, 1);\r\n --company-color2: rgba(29, 47, 78, 1);\r\n --company-color3: rgba(255, 255, 255, 1);\r\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\r\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\r\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\r\n --global-shadow-color: rgba(0, 0, 0, 0.4);\r\n\r\n --sidebar-transition-time: 0.2s;\r\n --sidebar-transition-time-quick: 0.1s;\r\n --sidebar-transition-animation: ease-in-out;\r\n\r\n --header-height: 1.5rem;\r\n --right-sidebar-width: 320px;\r\n\r\n --dialog-border-color: rgba(100, 100, 100, 1);\r\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\r\n --dialog-background-color: rgba(255, 255, 255, 1);\r\n --dialog-primary-color: rgba(19, 70, 209, 1);\r\n --dialog-active-color: rgba(40, 70, 209, 1);\r\n --dialog-input-border-color: rgba(200, 200, 200, 1);\r\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\r\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\r\n\r\n --body-video-seeker-height: 3rem;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: \"Poppins\", sans-serif;\r\n}\r\nhtml {\r\n font-size: 16px;\r\n}\r\nbody {\r\n height: 100%;\r\n width: 100%;\r\n overflow-y: scroll;\r\n overflow-x: hidden;\r\n color: var(--text-color);\r\n /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */\r\n background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 90%, var(--company-color1) 90% 95%, var(--company-color2) 95% 100%);\r\n}\r\n#app {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n.first-gesture {\r\n background: rgba(200, 0, 0, 0.2);\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n}\r\n\r\n/* Main + Section Partition*/\r\n.main-body {\r\n height: 100%;\r\n width: 100%;\r\n padding: 2rem;\r\n font-family: \"Yusei Magic\", sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n font-size: 1rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n}\r\n/* Title */\r\n.main-body .top-title .title {\r\n font-size: 3rem;\r\n }\r\n.main-body .top-title .top-title-version {\r\n margin-left: 2rem;\r\n font-size: 1.2rem;\r\n background: linear-gradient(transparent 60%, yellow 30%);\r\n }\r\n.main-body .top-title .top-title-version-number {\r\n margin-left: 0.3rem;\r\n font-size: 0.8rem;\r\n }\r\n.main-body .top-title .belongings {\r\n margin-left: 1rem;\r\n margin-right: 1rem;\r\n }\r\n.main-body .top-title .belongings .link {\r\n margin-left: 1rem;\r\n font-weight: 700;\r\n text-decoration: underline;\r\n }\r\n/* Partition */\r\n.main-body .partition {\r\n width: 100%;\r\n }\r\n.main-body .partition .partition-header {\r\n font-weight: 700;\r\n color: rgb(71, 69, 69);\r\n display: flex;\r\n }\r\n.main-body .partition .partition-header .caret {\r\n width: 2rem;\r\n }\r\n.main-body .partition .partition-header .title {\r\n font-size: 1.1rem;\r\n }\r\n.main-body .partition .partition-header .belongings {\r\n font-weight: 400;\r\n font-size: 0.8rem;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-end;\r\n margin-left: 10px;\r\n }\r\n.main-body .partition .partition-header .belongings .belongings-checkbox {\r\n margin-bottom: 3px;\r\n }\r\n.main-body .partition .partition-content {\r\n position: static;\r\n overflow-y: hidden;\r\n }\r\n.main-body .partition .row-split {\r\n }\r\n.state-control-checkbox:checked + .partition .partition-content {\r\n max-height: 700px;\r\n background: rgba(255, 255, 255, 0.3);\r\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\r\n}\r\n.state-control-checkbox + .partition .partition-content {\r\n max-height: 0px;\r\n background: rgba(233, 233, 255, 0.3);\r\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\r\n}\r\n/* ROW */\r\n\r\n.split-8-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-8-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 80%;\r\n }\r\n\r\n.split-8-2 > div:nth-child(2) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-6-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-6-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 60%;\r\n }\r\n.split-6-4 > div:nth-child(2) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-5-5 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-5-5 > div:nth-child(1) {\r\n left: 0px;\r\n width: 50%;\r\n }\r\n.split-5-5 > div:nth-child(2) {\r\n left: 50%;\r\n width: 50%;\r\n }\r\n.split-4-6 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-4-6 > div:nth-child(1) {\r\n left: 0px;\r\n width: 40%;\r\n }\r\n.split-4-6 > div:nth-child(2) {\r\n left: 40%;\r\n width: 60%;\r\n }\r\n.split-3-7 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-7 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-7 > div:nth-child(2) {\r\n left: 30%;\r\n width: 70%;\r\n }\r\n\r\n.split-2-8 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-2-8 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n\r\n.split-2-8 > div:nth-child(2) {\r\n left: 20%;\r\n width: 80%;\r\n }\r\n\r\n.split-1-8-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-1-8-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 10%;\r\n }\r\n\r\n.split-1-8-1 > div:nth-child(2) {\r\n left: 10%;\r\n width: 80%;\r\n }\r\n\r\n.split-1-8-1 > div:nth-child(3) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n.split-2-2-6 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-2-2-6 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n.split-2-2-6 > div:nth-child(2) {\r\n left: 20%;\r\n width: 20%;\r\n }\r\n.split-2-2-6 > div:nth-child(3) {\r\n left: 40%;\r\n width: 60%;\r\n }\r\n.split-3-3-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-3-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-3-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 30%;\r\n }\r\n.split-3-3-4 > div:nth-child(3) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n\r\n.split-3-4-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-3-4-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n\r\n.split-3-4-3 > div:nth-child(2) {\r\n left: 30%;\r\n width: 40%;\r\n }\r\n\r\n.split-3-4-3 > div:nth-child(3) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-2-5-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-2-5-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 20%;\r\n }\r\n.split-2-5-3 > div:nth-child(2) {\r\n left: 20%;\r\n width: 50%;\r\n }\r\n.split-2-5-3 > div:nth-child(3) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-4-4-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-4-4-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 40%;\r\n }\r\n.split-4-4-2 > div:nth-child(2) {\r\n left: 40%;\r\n width: 40%;\r\n }\r\n.split-4-4-2 > div:nth-child(3) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-1-4-4-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-1-4-4-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 10%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(2) {\r\n left: 10%;\r\n width: 40%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(3) {\r\n left: 50%;\r\n width: 40%;\r\n }\r\n.split-1-4-4-1 > div:nth-child(4) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n\r\n.split-3-2-2-3 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n\r\n.split-3-2-2-3 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(3) {\r\n left: 50%;\r\n width: 20%;\r\n }\r\n\r\n.split-3-2-2-3 > div:nth-child(4) {\r\n left: 70%;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-3-2 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(3) {\r\n left: 50%;\r\n width: 30%;\r\n }\r\n.split-3-2-3-2 > div:nth-child(4) {\r\n left: 80%;\r\n width: 20%;\r\n }\r\n.split-3-1-2-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-1-2-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 10%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(3) {\r\n left: 40%;\r\n width: 20%;\r\n }\r\n.split-3-1-2-4 > div:nth-child(4) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-3-2-1-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-1-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(3) {\r\n left: 50%;\r\n width: 10%;\r\n }\r\n.split-3-2-1-4 > div:nth-child(4) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.split-3-2-2-2-1 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-2-2-2-1 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(2) {\r\n left: 30%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(3) {\r\n left: 50%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(4) {\r\n left: 70%;\r\n width: 20%;\r\n }\r\n.split-3-2-2-2-1 > div:nth-child(5) {\r\n left: 90%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 {\r\n display: flex;\r\n width: 100%;\r\n justify-content: center;\r\n margin: 1px 0px 1px 0px;\r\n}\r\n.split-3-1-1-1-4 > div:nth-child(1) {\r\n left: 0px;\r\n width: 30%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(2) {\r\n left: 30%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(3) {\r\n left: 40%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(4) {\r\n left: 50%;\r\n width: 10%;\r\n }\r\n.split-3-1-1-1-4 > div:nth-child(5) {\r\n left: 60%;\r\n width: 40%;\r\n }\r\n.w20 {\r\n width: 20%;\r\n}\r\n.bold {\r\n font-weight: 700;\r\n}\r\n.w40 {\r\n width: 40%;\r\n}\r\n\r\n.underline {\r\n border-bottom: 3px solid #333;\r\n}\r\n.left-padding-05 {\r\n padding-left: 0.5rem;\r\n}\r\n.left-padding-1 {\r\n padding-left: 1rem;\r\n}\r\n.left-padding-2 {\r\n padding-left: 2rem;\r\n}\r\n.left-margin-1 {\r\n margin-left: 1rem;\r\n}\r\n.left-margin-2 {\r\n margin-left: 2rem;\r\n}\r\n.highlight {\r\n background-color: rgba(200, 200, 255, 0.3);\r\n}\r\n.guided {\r\n /* background-color: rgba(9, 133, 67, 0.3); */\r\n background-color: rgba(159, 165, 162, 0.1);\r\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\r\n}\r\n\r\n.divider {\r\n height: 0.8rem;\r\n /* background-color: rgba(16, 210, 113, 0.1); */\r\n background-color: rgba(31, 42, 36, 0.1);\r\n}\r\n\r\n.body-section-title {\r\n font-size: 1.5rem;\r\n color: rgb(51, 49, 49);\r\n}\r\n.body-sub-section-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: rgb(3, 53, 12);\r\n}\r\n\r\n.body-item-title {\r\n color: rgb(51, 99, 49);\r\n display: flex;\r\n}\r\n.body-item-text {\r\n color: rgb(30, 30, 30);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n.body-item-text .body-item-text-item {\r\n padding-left: 1rem;\r\n }\r\n.body-item-text-small {\r\n color: rgb(30, 30, 30);\r\n font-size: 0.7rem;\r\n}\r\n.body-item-text-em {\r\n color: rgb(250, 30, 30);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 700;\r\n}\r\n\r\n.body-input-container {\r\n display: flex;\r\n}\r\n.body-item-input {\r\n width: 60%;\r\n}\r\n.body-item-input-slider {\r\n width: 60%;\r\n}\r\n.body-item-input-slider-label {\r\n margin-right: 1rem;\r\n}\r\n.body-item-input-slider-val {\r\n margin-left: 1rem;\r\n}\r\n.body-item-input-slider-2nd {\r\n width: 60%;\r\n accent-color: #33f;\r\n}\r\n\r\n.body-button-container {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n}\r\n\r\n.body-button-container > div {\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n padding-left: 20px;\r\n padding-right: 20px;\r\n }\r\n\r\n.body-button-container .body-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n }\r\n\r\n.body-button-container .body-button:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.body-button-container .body-button-disabled {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n vertical-align: middle;\r\n background: #ddd;\r\n }\r\n\r\n.body-button-container .body-button-active {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n }\r\n\r\n.body-button-container .body-button-stanby {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n }\r\n\r\n.body-button-container .body-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.body-button-container-space-around {\r\n justify-content: space-around;\r\n}\r\n\r\n.body-select {\r\n color: rgb(30, 30, 30);\r\n max-width: 100%;\r\n}\r\n\r\n.body-select-50 {\r\n color: rgb(30, 30, 30);\r\n max-width: 50%;\r\n height: 1.5rem;\r\n}\r\n.select-option-red {\r\n color: #f66;\r\n font-weight: 700;\r\n}\r\n\r\n.body-image-container,\r\n.body-wav-container {\r\n display: flex;\r\n width: 100%;\r\n}\r\n\r\n.body-image-container .body-image-container-title,\r\n .body-image-container .body-wav-container-title,\r\n .body-wav-container .body-image-container-title,\r\n .body-wav-container .body-wav-container-title {\r\n width: 20%;\r\n }\r\n\r\n.body-image-container .body-image-container-img,\r\n .body-image-container .body-wav-container-wav,\r\n .body-wav-container .body-image-container-img,\r\n .body-wav-container .body-wav-container-wav {\r\n width: 80%;\r\n }\r\n\r\n.donate-img {\r\n border-radius: 35px;\r\n height: 1.5rem;\r\n}\r\n\r\n/* Dialog */\r\n.dialog-container,\r\n.dialog-container2 {\r\n justify-content: center;\r\n align-items: center;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n width: 100vw;\r\n height: 100vh;\r\n z-index: -1;\r\n display: none;\r\n}\r\n.dialog-container .dialog-frame, .dialog-container2 .dialog-frame {\r\n color: var(--company-color2);\r\n width: 40rem;\r\n max-height: 80vh;\r\n border: 2px solid var(--dialog-border-color);\r\n border-radius: 20px;\r\n flex-direction: column;\r\n align-items: center;\r\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\r\n background: var(--dialog-background-color);\r\n overflow: hidden;\r\n display: flex;\r\n }\r\n.dialog-container .dialog-frame .dialog-title, .dialog-container2 .dialog-frame .dialog-title {\r\n margin-top: 20px;\r\n background: var(--company-color2);\r\n color: #fff;\r\n width: 100%;\r\n text-align: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-content, .dialog-container2 .dialog-frame .dialog-content {\r\n width: 90%;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .dialog-application-title, .dialog-container2 .dialog-frame .dialog-content .dialog-application-title {\r\n font-family: \"Chicle\", cursive;\r\n font-size: 3rem;\r\n text-align: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .dialog-content-part, .dialog-container2 .dialog-frame .dialog-content .dialog-content-part {\r\n margin-top: 1rem;\r\n margin-bottom: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-content .input-text-container, .dialog-container2 .dialog-frame .dialog-content .input-text-container {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 20px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content, .dialog-container2 .dialog-frame .dialog-fixed-size-content {\r\n width: 90%;\r\n max-height: 70vh;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header {\r\n font-weight: 700;\r\n margin: 5px 5px 5px 5px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button {\r\n font-weight: 400;\r\n font-size: 0.8rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px 5px 1px 5px;\r\n margin-left: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container {\r\n max-height: 60vh;\r\n width: 100%;\r\n overflow-y: scroll;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container::-webkit-scrollbar, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container::-webkit-scrollbar {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container::-webkit-scrollbar-track, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container::-webkit-scrollbar-track {\r\n background-color: #eee;\r\n border-radius: 3px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container::-webkit-scrollbar-thumb, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container::-webkit-scrollbar-thumb {\r\n background: #f7cfec80;\r\n border-radius: 3px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot {\r\n height: 5rem;\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon {\r\n width: 5rem;\r\n height: 5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable {\r\n width: 5rem;\r\n height: 5rem;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail {\r\n display: flex;\r\n flex-direction: column;\r\n font-size: 0.8rem;\r\n border-bottom: solid 1px #aaa;\r\n width: 80%;\r\n overflow-y: scroll;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track {\r\n background-color: #eee;\r\n border-radius: 3px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb {\r\n background: #f7cfec80;\r\n border-radius: 3px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label {\r\n width: 20%;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value {\r\n width: 55%;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download {\r\n width: 55%;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable {\r\n width: 55%;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit {\r\n width: 55%;\r\n font-weight: 700;\r\n color: #f00;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button {\r\n width: 15%;\r\n height: 90%;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons {\r\n display: flex;\r\n flex-direction: column;\r\n border-bottom: solid 1px #a00;\r\n width: 20%;\r\n font-size: 0.8rem;\r\n padding: 4px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n vertical-align: middle;\r\n background: #ddd;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-title,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-title {\r\n font-size: 1rem;\r\n padding-left: 0.5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container {\r\n font-size: 0.9rem;\r\n padding-left: 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 0.2rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label {\r\n width: 10rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value {\r\n width: 15rem;\r\n color: #f00;\r\n white-space: nowrap;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container {\r\n display: flex;\r\n flex-direction: row;\r\n margin-top: 1rem;\r\n margin-bottom: 0.5rem;\r\n justify-content: center;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button {\r\n /* width: 12rem; */\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 1px 10px 1px 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title {\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 0px 0px 0px 1rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\r\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\r\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label {\r\n margin: 0px 0px 0px 0.5rem;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons {\r\n margin: 0px 0px 0px 0.5rem;\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button {\r\n margin: 0px 0.5rem 0px 0.5rem;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n user-select: none;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n text-align: center;\r\n padding: 0px 10px 0px 10px;\r\n }\r\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover {\r\n border: solid 1px #000;\r\n }\r\n.dialog-container-show {\r\n display: flex;\r\n}\r\n\r\n.state-control-checkbox:checked ~ .dialog-container {\r\n background: rgba(200, 200, 200, 0.4);\r\n animation-name: dialog-show;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox ~ .dialog-container {\r\n background: rgba(100, 100, 100, 0.4);\r\n animation-name: dialog-hide;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox:checked + .dialog-frame {\r\n display: flex;\r\n}\r\n.state-control-checkbox + .dialog-frame {\r\n display: none;\r\n}\r\n\r\n@keyframes dialog-hide {\r\n from {\r\n opacity: 1;\r\n z-index: 200;\r\n }\r\n 90% {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n to {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n}\r\n\r\n@keyframes dialog-show {\r\n from {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n 10% {\r\n z-index: 200;\r\n }\r\n to {\r\n opacity: 1;\r\n z-index: 200;\r\n }\r\n}\r\n\r\n.state-control-checkbox:checked ~ .dialog-container2 {\r\n background: rgba(200, 200, 200, 0.4);\r\n animation-name: dialog-show2;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n.state-control-checkbox ~ .dialog-container2 {\r\n background: rgba(100, 100, 100, 0.4);\r\n animation-name: dialog-hide2;\r\n animation-duration: 0.4s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-direction: normal;\r\n}\r\n/* .state-control-checkbox:checked + .dialog-frame {\r\n display: flex;\r\n}\r\n.state-control-checkbox + .dialog-frame {\r\n display: none;\r\n} */\r\n\r\n@keyframes dialog-hide2 {\r\n from {\r\n opacity: 1;\r\n z-index: 400;\r\n }\r\n 90% {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n to {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n}\r\n\r\n@keyframes dialog-show2 {\r\n from {\r\n opacity: 0;\r\n z-index: -1;\r\n }\r\n 10% {\r\n z-index: 400;\r\n }\r\n to {\r\n opacity: 1;\r\n z-index: 400;\r\n }\r\n}\r\n\r\n.tooltip-text {\r\n display: none;\r\n position: absolute;\r\n padding: 4px;\r\n font-size: 0.7rem;\r\n line-height: 2rem;\r\n color: #ddd;\r\n border-radius: 5px;\r\n background: #444;\r\n /* width: 100px; */\r\n}\r\n.tooltip-text-100px {\r\n width: 100px;\r\n}\r\n.tooltip-text-thin {\r\n line-height: 1rem;\r\n}\r\n.tooltip-text-right {\r\n line-height: 1rem;\r\n}\r\n.tooltip-text:before {\r\n content: \"\";\r\n position: absolute;\r\n top: -1.4rem;\r\n border: 12px solid transparent;\r\n border-top: 16px solid #444;\r\n margin-left: 0rem;\r\n transform: rotateZ(180deg);\r\n}\r\n.tooltip:hover .tooltip-text {\r\n display: inline-block;\r\n top: 30px;\r\n left: 0px;\r\n}\r\n.tooltip:hover .tooltip-text-lower {\r\n display: inline-block;\r\n top: 60px;\r\n left: 0px;\r\n}\r\n\r\n.tooltip {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n\r\n/* ################## */\r\n.merge-field-container {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.merge-field-container .merge-field {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-field-container .merge-field .merge-field-elem {\r\n padding-left: 5px;\r\n }\r\n.merge-field-container .merge-field .red {\r\n color: #f00;\r\n }\r\n.merge-field-container .merge-field .purple {\r\n color: #33f;\r\n }\r\n.merge-field-container .merge-field .grey-bold {\r\n color: #555;\r\n font-weight: 800;\r\n }\r\n.model-slot-area {\r\n display: inline-block;\r\n background: var(--company-color2);\r\n border-radius: 10px;\r\n padding: 20px;\r\n}\r\n.model-slot-area .model-slot-panel {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-tiles-container {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 2px;\r\n flex-wrap: wrap;\r\n overflow-y: scroll;\r\n max-height: 12rem;\r\n\r\n /* width: calc(30rem + 40px + 10px); */\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-tiles-container::-webkit-scrollbar {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-tiles-container::-webkit-scrollbar-track {\r\n background-color: #eee;\r\n border-radius: 3px;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-tiles-container::-webkit-scrollbar-thumb {\r\n background: #f7cfec80;\r\n border-radius: 3px;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons {\r\n display: flex;\r\n gap: 5px;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n width: 4rem;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 2px;\r\n background: #333;\r\n cursor: pointer;\r\n padding: 5px;\r\n text-align: center;\r\n width: 3rem;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-sort-buttons {\r\n height: 50%;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-sort-buttons .model-slot-sort-button {\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 4px;\r\n background: #333;\r\n border: solid 2px #444;\r\n cursor: pointer;\r\n padding: 1px;\r\n text-align: center;\r\n width: 3rem;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-sort-buttons .model-slot-sort-button-active {\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 4px;\r\n background: #595;\r\n border: solid 2px #595;\r\n cursor: pointer;\r\n padding: 1px;\r\n text-align: center;\r\n width: 3rem;\r\n }\r\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-sort-buttons .model-slot-sort-button:hover {\r\n border: solid 2px #faa;\r\n background: #343;\r\n }\r\n.model-slot-tile-container,\r\n.model-slot-tile-container-selected {\r\n width: 6rem;\r\n height: 6rem;\r\n border-radius: 2px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n}\r\n.model-slot-tile-container-selected {\r\n background: #43030c;\r\n}\r\n.model-slot-tile-container:hover {\r\n background: #43030c;\r\n}\r\n\r\n.model-slot-tile-icon-div {\r\n width: 5rem;\r\n height: 5rem;\r\n padding-top: 4px;\r\n position: relative;\r\n}\r\n.model-slot-tile-icon {\r\n width: 5rem;\r\n height: 5rem;\r\n -o-object-fit: contain;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n position: absolute;\r\n}\r\n.model-slot-tile-vctype {\r\n position: absolute;\r\n font-size: 0.6rem;\r\n font-weight: 800;\r\n top: 5px;\r\n left: 2px;\r\n background: RGBA(10, 200, 100, 0.6);\r\n border-radius: 5px;\r\n padding: 0px 2px 0px 2px;\r\n}\r\n.model-slot-tile-icon-no-entry {\r\n color: gray;\r\n position: absolute;\r\n top: 2rem;\r\n}\r\n.model-slot-tile-dscription {\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n color: navajowhite;\r\n padding-top: 4px;\r\n}\r\n\r\n.character-area {\r\n display: flex;\r\n gap: 5px;\r\n padding: 20px;\r\n}\r\n\r\n.character-area .portrait-area {\r\n width: 20rem;\r\n height: 20rem;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container {\r\n position: relative;\r\n width: 20rem;\r\n height: 20rem;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait {\r\n width: 20rem;\r\n height: 20rem;\r\n -o-object-fit: contain;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n position: absolute;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-status {\r\n width: 5rem;\r\n background: rgba(100, 100, 100, 0.5);\r\n color: white;\r\n position: absolute;\r\n padding: 0px 0px 0px 3px;\r\n font-size: 0.7rem;\r\n left: 5px;\r\n top: 5px;\r\n border-radius: 2px;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-status .portrait-area-status-vctype {\r\n font-weight: 800;\r\n color: #866;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use {\r\n width: 5rem;\r\n background: rgba(100, 100, 100, 0.5);\r\n color: white;\r\n position: absolute;\r\n paddig: 2px;\r\n font-size: 0.7rem;\r\n right: 5px;\r\n bottom: 5px;\r\n }\r\n\r\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use .portrait-area-terms-of-use-link {\r\n color: white;\r\n }\r\n\r\n.character-area .character-area-control-area {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control {\r\n display: flex;\r\n gap: 3px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 10px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-active {\r\n width: 5rem;\r\n border: solid 1px #333;\r\n border-radius: 2px;\r\n background: #ada;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby {\r\n width: 5rem;\r\n border: solid 1px #999;\r\n border-radius: 2px;\r\n background: #aba;\r\n cursor: pointer;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby:hover {\r\n border: solid 1px #000;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-title {\r\n width: 4rem;\r\n font-weight: 700;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field {\r\n /* width: 20rem; */\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-kind {\r\n width: 2rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-slider {\r\n width: 10rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-val {\r\n width: 3rem;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-text {\r\n padding: 0px 1px 0px 1px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 2px;\r\n background: #666;\r\n cursor: pointer;\r\n padding: 5px;\r\n }\r\n\r\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n\r\n/* audio::-webkit-media-controls-play-button,\r\naudio::-webkit-media-controls-panel {\r\n background-color: #ff0;\r\n height: 1rem;\r\n}\r\naudio::-webkit-media-controls-enclosure {\r\n max-height: 1rem;\r\n}\r\naudio::-webkit-media-controls {\r\n justify-content: start;\r\n}\r\naudio::-webkit-media-controls-overlay-enclosure{\r\n height: 1rem;\r\n} */\r\n\r\n.config-area {\r\n display: flex;\r\n gap: 5px;\r\n padding: 20px;\r\n}\r\n\r\n.config-area .config-sub-area {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control {\r\n display: flex;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title {\r\n width: 5rem;\r\n font-weight: 700;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title-long {\r\n width: 20rem;\r\n font-weight: 700;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field {\r\n width: 15rem;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container .config-sub-area-noise-checkbox-container {\r\n display: flex;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-kind {\r\n width: 1rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-slider {\r\n width: 10rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-val {\r\n width: 3rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n align-items: center;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button {\r\n border: solid 2px #999;\r\n color: white;\r\n background: #666;\r\n\r\n cursor: pointer;\r\n\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button:hover {\r\n border: solid 2px #faa;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button-active {\r\n border: solid 2px #999;\r\n color: white;\r\n background: #844;\r\n\r\n cursor: pointer;\r\n\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-filter {\r\n max-width: 30%;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-select {\r\n max-width: 70%;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-screen-select {\r\n display: flex;\r\n flex-direction: row-reverse;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-screen-select .config-sub-area-control-field-screen-select-button-active {\r\n font-size: 0.8rem;\r\n border: solid 1px #333;\r\n border-radius: 5px;\r\n background: #ada;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-screen-select .config-sub-area-control-field-screen-select-button {\r\n border: solid 1px #333;\r\n background: #fff;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container {\r\n height: 1rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container .config-sub-area-control-field-wav-file-audio {\r\n height: 1rem;\r\n width: 15rem;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-folder {\r\n height: 1rem;\r\n width: 1rem;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button {\r\n border: solid 1px #333;\r\n background: #fff;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button-active {\r\n font-size: 0.8rem;\r\n border: solid 1px #333;\r\n border-radius: 5px;\r\n background: #ada;\r\n height: 1.2rem;\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field-long {\r\n width: 30rem;\r\n }\r\n\r\n.headerArea {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.headerArea .title1 {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n align-items: flex-end;\r\n }\r\n\r\n.headerArea .title1 .title {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: #333;\r\n text-shadow: 0 0 2px #333;\r\n }\r\n\r\n.headerArea .title1 .title-version {\r\n font-size: 0.9rem;\r\n }\r\n\r\n.headerArea .title1 .title-version-number {\r\n font-size: 0.7rem;\r\n }\r\n\r\n.headerArea .icons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 20px;\r\n }\r\n\r\n.headerArea .icons .belongings {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 3px;\r\n }\r\n\r\n.headerArea .icons .belongings .belongings-button {\r\n border: solid 2px #999;\r\n color: white;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n background: #666;\r\n cursor: pointer;\r\n padding: 5px;\r\n height: 1.7rem;\r\n top: -2px;\r\n }\r\n\r\n.headerArea .icons .belongings .belongings-button:hover {\r\n border: solid 2px #cc6;\r\n }\r\n\r\n.advanced-setting-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n margin: 10px;\r\n}\r\n\r\n.advanced-setting-container .advanced-setting-container-row {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-title {\r\n width: 7rem;\r\n font-weight: 700;\r\n font-size: 0.9rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field {\r\n width: 15rem;\r\n font-size: 0.9rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n width: 10rem;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 3px;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(1) {\r\n color: #333;\r\n }\r\n\r\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(2) {\r\n }\r\n.get-server-information-container {\r\n margin: 10px;\r\n}\r\n.get-server-information-container .get-server-information-text-area {\r\n width: 100%;\r\n height: 20rem;\r\n }\r\n.merge-lab-container {\r\n display: flex;\r\n flex-direction: column;\r\n margin: 10px;\r\n gap: 10px;\r\n}\r\n.merge-lab-container .merge-lab-type-filter {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-type-filter > div:nth-child(1) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-type-filter > div:nth-child(2) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list {\r\n width: 70%;\r\n overflow-y: scroll;\r\n max-height: 20rem;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list::-webkit-scrollbar {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list::-webkit-scrollbar-track {\r\n background-color: #eee;\r\n border-radius: 3px;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list::-webkit-scrollbar-thumb {\r\n background: #f7cfec80;\r\n border-radius: 3px;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(1) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(2) {\r\n width: 50%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n width: 30%;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button {\r\n border: solid 2px #ddd;\r\n color: black;\r\n font-size: 0.8rem;\r\n border-radius: 5px;\r\n background: #eee;\r\n cursor: pointer;\r\n padding: 5px;\r\n height: 1.7rem;\r\n text-align: center;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button:hover {\r\n border: solid 2px #aaa;\r\n }\r\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-buttons-notice {\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n color: #333;\r\n text-align: center;\r\n }\r\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://demo/./src/css/App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B2%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); /***/ }), @@ -580,6 +591,70 @@ eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=w /***/ }), +/***/ "./node_modules/object-assign/index.js": +/*!*********************************************!*\ + !*** ./node_modules/object-assign/index.js ***! + \*********************************************/ +/***/ ((module) => { + +"use strict"; +eval("/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\n\n\n/* eslint-disable no-unused-vars */\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\nfunction toObject(val) {\n\tif (val === null || val === undefined) {\n\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t}\n\n\treturn Object(val);\n}\n\nfunction shouldUseNative() {\n\ttry {\n\t\tif (!Object.assign) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Detect buggy property enumeration order in older V8 versions.\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\tvar test1 = new String('abc'); // eslint-disable-line no-new-wrappers\n\t\ttest1[5] = 'de';\n\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test2 = {};\n\t\tfor (var i = 0; i < 10; i++) {\n\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t}\n\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\treturn test2[n];\n\t\t});\n\t\tif (order2.join('') !== '0123456789') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test3 = {};\n\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\ttest3[letter] = letter;\n\t\t});\n\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} catch (err) {\n\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\treturn false;\n\t}\n}\n\nmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\tvar from;\n\tvar to = toObject(target);\n\tvar symbols;\n\n\tfor (var s = 1; s < arguments.length; s++) {\n\t\tfrom = Object(arguments[s]);\n\n\t\tfor (var key in from) {\n\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\tto[key] = from[key];\n\t\t\t}\n\t\t}\n\n\t\tif (getOwnPropertySymbols) {\n\t\t\tsymbols = getOwnPropertySymbols(from);\n\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn to;\n};\n\n\n//# sourceURL=webpack://demo/./node_modules/object-assign/index.js?"); + +/***/ }), + +/***/ "./node_modules/prop-types/checkPropTypes.js": +/*!***************************************************!*\ + !*** ./node_modules/prop-types/checkPropTypes.js ***! + \***************************************************/ +/***/ ((module, __unused_webpack_exports, __webpack_require__) => { + +"use strict"; +eval("/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar printWarning = function() {};\n\nif (true) {\n var ReactPropTypesSecret = __webpack_require__(/*! ./lib/ReactPropTypesSecret */ \"./node_modules/prop-types/lib/ReactPropTypesSecret.js\");\n var loggedTypeFailures = {};\n var has = __webpack_require__(/*! ./lib/has */ \"./node_modules/prop-types/lib/has.js\");\n\n printWarning = function(text) {\n var message = 'Warning: ' + text;\n if (typeof console !== 'undefined') {\n console.error(message);\n }\n try {\n // --- Welcome to debugging React ---\n // This error was thrown as a convenience so that you can use this stack\n // to find the callsite that caused this warning to fire.\n throw new Error(message);\n } catch (x) { /**/ }\n };\n}\n\n/**\n * Assert that the values match with the type specs.\n * Error messages are memorized and will only be shown once.\n *\n * @param {object} typeSpecs Map of name to a ReactPropType\n * @param {object} values Runtime values that need to be type-checked\n * @param {string} location e.g. \"prop\", \"context\", \"child context\"\n * @param {string} componentName Name of the component for error messages.\n * @param {?Function} getStack Returns the component stack.\n * @private\n */\nfunction checkPropTypes(typeSpecs, values, location, componentName, getStack) {\n if (true) {\n for (var typeSpecName in typeSpecs) {\n if (has(typeSpecs, typeSpecName)) {\n var error;\n // Prop type validation may throw. In case they do, we don't want to\n // fail the render phase where it didn't fail before. So we log it.\n // After these have been cleaned up, we'll let them throw.\n try {\n // This is intentionally an invariant that gets caught. It's the same\n // behavior as without this statement except with a better message.\n if (typeof typeSpecs[typeSpecName] !== 'function') {\n var err = Error(\n (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +\n 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +\n 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'\n );\n err.name = 'Invariant Violation';\n throw err;\n }\n error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);\n } catch (ex) {\n error = ex;\n }\n if (error && !(error instanceof Error)) {\n printWarning(\n (componentName || 'React class') + ': type specification of ' +\n location + ' `' + typeSpecName + '` is invalid; the type checker ' +\n 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +\n 'You may have forgotten to pass an argument to the type checker ' +\n 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +\n 'shape all require an argument).'\n );\n }\n if (error instanceof Error && !(error.message in loggedTypeFailures)) {\n // Only monitor this failure once because there tends to be a lot of the\n // same error.\n loggedTypeFailures[error.message] = true;\n\n var stack = getStack ? getStack() : '';\n\n printWarning(\n 'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')\n );\n }\n }\n }\n }\n}\n\n/**\n * Resets warning cache when testing.\n *\n * @private\n */\ncheckPropTypes.resetWarningCache = function() {\n if (true) {\n loggedTypeFailures = {};\n }\n}\n\nmodule.exports = checkPropTypes;\n\n\n//# sourceURL=webpack://demo/./node_modules/prop-types/checkPropTypes.js?"); + +/***/ }), + +/***/ "./node_modules/prop-types/factoryWithTypeCheckers.js": +/*!************************************************************!*\ + !*** ./node_modules/prop-types/factoryWithTypeCheckers.js ***! + \************************************************************/ +/***/ ((module, __unused_webpack_exports, __webpack_require__) => { + +"use strict"; +eval("/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar ReactIs = __webpack_require__(/*! react-is */ \"./node_modules/react-is/index.js\");\nvar assign = __webpack_require__(/*! object-assign */ \"./node_modules/object-assign/index.js\");\n\nvar ReactPropTypesSecret = __webpack_require__(/*! ./lib/ReactPropTypesSecret */ \"./node_modules/prop-types/lib/ReactPropTypesSecret.js\");\nvar has = __webpack_require__(/*! ./lib/has */ \"./node_modules/prop-types/lib/has.js\");\nvar checkPropTypes = __webpack_require__(/*! ./checkPropTypes */ \"./node_modules/prop-types/checkPropTypes.js\");\n\nvar printWarning = function() {};\n\nif (true) {\n printWarning = function(text) {\n var message = 'Warning: ' + text;\n if (typeof console !== 'undefined') {\n console.error(message);\n }\n try {\n // --- Welcome to debugging React ---\n // This error was thrown as a convenience so that you can use this stack\n // to find the callsite that caused this warning to fire.\n throw new Error(message);\n } catch (x) {}\n };\n}\n\nfunction emptyFunctionThatReturnsNull() {\n return null;\n}\n\nmodule.exports = function(isValidElement, throwOnDirectAccess) {\n /* global Symbol */\n var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;\n var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.\n\n /**\n * Returns the iterator method function contained on the iterable object.\n *\n * Be sure to invoke the function with the iterable as context:\n *\n * var iteratorFn = getIteratorFn(myIterable);\n * if (iteratorFn) {\n * var iterator = iteratorFn.call(myIterable);\n * ...\n * }\n *\n * @param {?object} maybeIterable\n * @return {?function}\n */\n function getIteratorFn(maybeIterable) {\n var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);\n if (typeof iteratorFn === 'function') {\n return iteratorFn;\n }\n }\n\n /**\n * Collection of methods that allow declaration and validation of props that are\n * supplied to React components. Example usage:\n *\n * var Props = require('ReactPropTypes');\n * var MyArticle = React.createClass({\n * propTypes: {\n * // An optional string prop named \"description\".\n * description: Props.string,\n *\n * // A required enum prop named \"category\".\n * category: Props.oneOf(['News','Photos']).isRequired,\n *\n * // A prop named \"dialog\" that requires an instance of Dialog.\n * dialog: Props.instanceOf(Dialog).isRequired\n * },\n * render: function() { ... }\n * });\n *\n * A more formal specification of how these methods are used:\n *\n * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)\n * decl := ReactPropTypes.{type}(.isRequired)?\n *\n * Each and every declaration produces a function with the same signature. This\n * allows the creation of custom validation functions. For example:\n *\n * var MyLink = React.createClass({\n * propTypes: {\n * // An optional string or URI prop named \"href\".\n * href: function(props, propName, componentName) {\n * var propValue = props[propName];\n * if (propValue != null && typeof propValue !== 'string' &&\n * !(propValue instanceof URI)) {\n * return new Error(\n * 'Expected a string or an URI for ' + propName + ' in ' +\n * componentName\n * );\n * }\n * }\n * },\n * render: function() {...}\n * });\n *\n * @internal\n */\n\n var ANONYMOUS = '<>';\n\n // Important!\n // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.\n var ReactPropTypes = {\n array: createPrimitiveTypeChecker('array'),\n bigint: createPrimitiveTypeChecker('bigint'),\n bool: createPrimitiveTypeChecker('boolean'),\n func: createPrimitiveTypeChecker('function'),\n number: createPrimitiveTypeChecker('number'),\n object: createPrimitiveTypeChecker('object'),\n string: createPrimitiveTypeChecker('string'),\n symbol: createPrimitiveTypeChecker('symbol'),\n\n any: createAnyTypeChecker(),\n arrayOf: createArrayOfTypeChecker,\n element: createElementTypeChecker(),\n elementType: createElementTypeTypeChecker(),\n instanceOf: createInstanceTypeChecker,\n node: createNodeChecker(),\n objectOf: createObjectOfTypeChecker,\n oneOf: createEnumTypeChecker,\n oneOfType: createUnionTypeChecker,\n shape: createShapeTypeChecker,\n exact: createStrictShapeTypeChecker,\n };\n\n /**\n * inlined Object.is polyfill to avoid requiring consumers ship their own\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\n */\n /*eslint-disable no-self-compare*/\n function is(x, y) {\n // SameValue algorithm\n if (x === y) {\n // Steps 1-5, 7-10\n // Steps 6.b-6.e: +0 != -0\n return x !== 0 || 1 / x === 1 / y;\n } else {\n // Step 6.a: NaN == NaN\n return x !== x && y !== y;\n }\n }\n /*eslint-enable no-self-compare*/\n\n /**\n * We use an Error-like object for backward compatibility as people may call\n * PropTypes directly and inspect their output. However, we don't use real\n * Errors anymore. We don't inspect their stack anyway, and creating them\n * is prohibitively expensive if they are created too often, such as what\n * happens in oneOfType() for any type before the one that matched.\n */\n function PropTypeError(message, data) {\n this.message = message;\n this.data = data && typeof data === 'object' ? data: {};\n this.stack = '';\n }\n // Make `instanceof Error` still work for returned errors.\n PropTypeError.prototype = Error.prototype;\n\n function createChainableTypeChecker(validate) {\n if (true) {\n var manualPropTypeCallCache = {};\n var manualPropTypeWarningCount = 0;\n }\n function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {\n componentName = componentName || ANONYMOUS;\n propFullName = propFullName || propName;\n\n if (secret !== ReactPropTypesSecret) {\n if (throwOnDirectAccess) {\n // New behavior only for users of `prop-types` package\n var err = new Error(\n 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +\n 'Use `PropTypes.checkPropTypes()` to call them. ' +\n 'Read more at http://fb.me/use-check-prop-types'\n );\n err.name = 'Invariant Violation';\n throw err;\n } else if ( true && typeof console !== 'undefined') {\n // Old behavior for people using React.PropTypes\n var cacheKey = componentName + ':' + propName;\n if (\n !manualPropTypeCallCache[cacheKey] &&\n // Avoid spamming the console because they are often not actionable except for lib authors\n manualPropTypeWarningCount < 3\n ) {\n printWarning(\n 'You are manually calling a React.PropTypes validation ' +\n 'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +\n 'and will throw in the standalone `prop-types` package. ' +\n 'You may be seeing this warning due to a third-party PropTypes ' +\n 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'\n );\n manualPropTypeCallCache[cacheKey] = true;\n manualPropTypeWarningCount++;\n }\n }\n }\n if (props[propName] == null) {\n if (isRequired) {\n if (props[propName] === null) {\n return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));\n }\n return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));\n }\n return null;\n } else {\n return validate(props, propName, componentName, location, propFullName);\n }\n }\n\n var chainedCheckType = checkType.bind(null, false);\n chainedCheckType.isRequired = checkType.bind(null, true);\n\n return chainedCheckType;\n }\n\n function createPrimitiveTypeChecker(expectedType) {\n function validate(props, propName, componentName, location, propFullName, secret) {\n var propValue = props[propName];\n var propType = getPropType(propValue);\n if (propType !== expectedType) {\n // `propValue` being instance of, say, date/regexp, pass the 'object'\n // check, but we can offer a more precise error message here rather than\n // 'of type `object`'.\n var preciseType = getPreciseType(propValue);\n\n return new PropTypeError(\n 'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),\n {expectedType: expectedType}\n );\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createAnyTypeChecker() {\n return createChainableTypeChecker(emptyFunctionThatReturnsNull);\n }\n\n function createArrayOfTypeChecker(typeChecker) {\n function validate(props, propName, componentName, location, propFullName) {\n if (typeof typeChecker !== 'function') {\n return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');\n }\n var propValue = props[propName];\n if (!Array.isArray(propValue)) {\n var propType = getPropType(propValue);\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));\n }\n for (var i = 0; i < propValue.length; i++) {\n var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret);\n if (error instanceof Error) {\n return error;\n }\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createElementTypeChecker() {\n function validate(props, propName, componentName, location, propFullName) {\n var propValue = props[propName];\n if (!isValidElement(propValue)) {\n var propType = getPropType(propValue);\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createElementTypeTypeChecker() {\n function validate(props, propName, componentName, location, propFullName) {\n var propValue = props[propName];\n if (!ReactIs.isValidElementType(propValue)) {\n var propType = getPropType(propValue);\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createInstanceTypeChecker(expectedClass) {\n function validate(props, propName, componentName, location, propFullName) {\n if (!(props[propName] instanceof expectedClass)) {\n var expectedClassName = expectedClass.name || ANONYMOUS;\n var actualClassName = getClassName(props[propName]);\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createEnumTypeChecker(expectedValues) {\n if (!Array.isArray(expectedValues)) {\n if (true) {\n if (arguments.length > 1) {\n printWarning(\n 'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +\n 'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'\n );\n } else {\n printWarning('Invalid argument supplied to oneOf, expected an array.');\n }\n }\n return emptyFunctionThatReturnsNull;\n }\n\n function validate(props, propName, componentName, location, propFullName) {\n var propValue = props[propName];\n for (var i = 0; i < expectedValues.length; i++) {\n if (is(propValue, expectedValues[i])) {\n return null;\n }\n }\n\n var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {\n var type = getPreciseType(value);\n if (type === 'symbol') {\n return String(value);\n }\n return value;\n });\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));\n }\n return createChainableTypeChecker(validate);\n }\n\n function createObjectOfTypeChecker(typeChecker) {\n function validate(props, propName, componentName, location, propFullName) {\n if (typeof typeChecker !== 'function') {\n return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');\n }\n var propValue = props[propName];\n var propType = getPropType(propValue);\n if (propType !== 'object') {\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));\n }\n for (var key in propValue) {\n if (has(propValue, key)) {\n var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);\n if (error instanceof Error) {\n return error;\n }\n }\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createUnionTypeChecker(arrayOfTypeCheckers) {\n if (!Array.isArray(arrayOfTypeCheckers)) {\n true ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : 0;\n return emptyFunctionThatReturnsNull;\n }\n\n for (var i = 0; i < arrayOfTypeCheckers.length; i++) {\n var checker = arrayOfTypeCheckers[i];\n if (typeof checker !== 'function') {\n printWarning(\n 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +\n 'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'\n );\n return emptyFunctionThatReturnsNull;\n }\n }\n\n function validate(props, propName, componentName, location, propFullName) {\n var expectedTypes = [];\n for (var i = 0; i < arrayOfTypeCheckers.length; i++) {\n var checker = arrayOfTypeCheckers[i];\n var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret);\n if (checkerResult == null) {\n return null;\n }\n if (checkerResult.data && has(checkerResult.data, 'expectedType')) {\n expectedTypes.push(checkerResult.data.expectedType);\n }\n }\n var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));\n }\n return createChainableTypeChecker(validate);\n }\n\n function createNodeChecker() {\n function validate(props, propName, componentName, location, propFullName) {\n if (!isNode(props[propName])) {\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function invalidValidatorError(componentName, location, propFullName, key, type) {\n return new PropTypeError(\n (componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +\n 'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'\n );\n }\n\n function createShapeTypeChecker(shapeTypes) {\n function validate(props, propName, componentName, location, propFullName) {\n var propValue = props[propName];\n var propType = getPropType(propValue);\n if (propType !== 'object') {\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));\n }\n for (var key in shapeTypes) {\n var checker = shapeTypes[key];\n if (typeof checker !== 'function') {\n return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));\n }\n var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);\n if (error) {\n return error;\n }\n }\n return null;\n }\n return createChainableTypeChecker(validate);\n }\n\n function createStrictShapeTypeChecker(shapeTypes) {\n function validate(props, propName, componentName, location, propFullName) {\n var propValue = props[propName];\n var propType = getPropType(propValue);\n if (propType !== 'object') {\n return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));\n }\n // We need to check all keys in case some are required but missing from props.\n var allKeys = assign({}, props[propName], shapeTypes);\n for (var key in allKeys) {\n var checker = shapeTypes[key];\n if (has(shapeTypes, key) && typeof checker !== 'function') {\n return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));\n }\n if (!checker) {\n return new PropTypeError(\n 'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +\n '\\nBad object: ' + JSON.stringify(props[propName], null, ' ') +\n '\\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ')\n );\n }\n var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);\n if (error) {\n return error;\n }\n }\n return null;\n }\n\n return createChainableTypeChecker(validate);\n }\n\n function isNode(propValue) {\n switch (typeof propValue) {\n case 'number':\n case 'string':\n case 'undefined':\n return true;\n case 'boolean':\n return !propValue;\n case 'object':\n if (Array.isArray(propValue)) {\n return propValue.every(isNode);\n }\n if (propValue === null || isValidElement(propValue)) {\n return true;\n }\n\n var iteratorFn = getIteratorFn(propValue);\n if (iteratorFn) {\n var iterator = iteratorFn.call(propValue);\n var step;\n if (iteratorFn !== propValue.entries) {\n while (!(step = iterator.next()).done) {\n if (!isNode(step.value)) {\n return false;\n }\n }\n } else {\n // Iterator will provide entry [k,v] tuples rather than values.\n while (!(step = iterator.next()).done) {\n var entry = step.value;\n if (entry) {\n if (!isNode(entry[1])) {\n return false;\n }\n }\n }\n }\n } else {\n return false;\n }\n\n return true;\n default:\n return false;\n }\n }\n\n function isSymbol(propType, propValue) {\n // Native Symbol.\n if (propType === 'symbol') {\n return true;\n }\n\n // falsy value can't be a Symbol\n if (!propValue) {\n return false;\n }\n\n // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'\n if (propValue['@@toStringTag'] === 'Symbol') {\n return true;\n }\n\n // Fallback for non-spec compliant Symbols which are polyfilled.\n if (typeof Symbol === 'function' && propValue instanceof Symbol) {\n return true;\n }\n\n return false;\n }\n\n // Equivalent of `typeof` but with special handling for array and regexp.\n function getPropType(propValue) {\n var propType = typeof propValue;\n if (Array.isArray(propValue)) {\n return 'array';\n }\n if (propValue instanceof RegExp) {\n // Old webkits (at least until Android 4.0) return 'function' rather than\n // 'object' for typeof a RegExp. We'll normalize this here so that /bla/\n // passes PropTypes.object.\n return 'object';\n }\n if (isSymbol(propType, propValue)) {\n return 'symbol';\n }\n return propType;\n }\n\n // This handles more types than `getPropType`. Only used for error messages.\n // See `createPrimitiveTypeChecker`.\n function getPreciseType(propValue) {\n if (typeof propValue === 'undefined' || propValue === null) {\n return '' + propValue;\n }\n var propType = getPropType(propValue);\n if (propType === 'object') {\n if (propValue instanceof Date) {\n return 'date';\n } else if (propValue instanceof RegExp) {\n return 'regexp';\n }\n }\n return propType;\n }\n\n // Returns a string that is postfixed to a warning about an invalid type.\n // For example, \"undefined\" or \"of type array\"\n function getPostfixForTypeWarning(value) {\n var type = getPreciseType(value);\n switch (type) {\n case 'array':\n case 'object':\n return 'an ' + type;\n case 'boolean':\n case 'date':\n case 'regexp':\n return 'a ' + type;\n default:\n return type;\n }\n }\n\n // Returns class name of the object, if any.\n function getClassName(propValue) {\n if (!propValue.constructor || !propValue.constructor.name) {\n return ANONYMOUS;\n }\n return propValue.constructor.name;\n }\n\n ReactPropTypes.checkPropTypes = checkPropTypes;\n ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;\n ReactPropTypes.PropTypes = ReactPropTypes;\n\n return ReactPropTypes;\n};\n\n\n//# sourceURL=webpack://demo/./node_modules/prop-types/factoryWithTypeCheckers.js?"); + +/***/ }), + +/***/ "./node_modules/prop-types/index.js": +/*!******************************************!*\ + !*** ./node_modules/prop-types/index.js ***! + \******************************************/ +/***/ ((module, __unused_webpack_exports, __webpack_require__) => { + +eval("/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nif (true) {\n var ReactIs = __webpack_require__(/*! react-is */ \"./node_modules/react-is/index.js\");\n\n // By explicitly using `prop-types` you are opting into new development behavior.\n // http://fb.me/prop-types-in-prod\n var throwOnDirectAccess = true;\n module.exports = __webpack_require__(/*! ./factoryWithTypeCheckers */ \"./node_modules/prop-types/factoryWithTypeCheckers.js\")(ReactIs.isElement, throwOnDirectAccess);\n} else {}\n\n\n//# sourceURL=webpack://demo/./node_modules/prop-types/index.js?"); + +/***/ }), + +/***/ "./node_modules/prop-types/lib/ReactPropTypesSecret.js": +/*!*************************************************************!*\ + !*** ./node_modules/prop-types/lib/ReactPropTypesSecret.js ***! + \*************************************************************/ +/***/ ((module) => { + +"use strict"; +eval("/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nmodule.exports = ReactPropTypesSecret;\n\n\n//# sourceURL=webpack://demo/./node_modules/prop-types/lib/ReactPropTypesSecret.js?"); + +/***/ }), + +/***/ "./node_modules/prop-types/lib/has.js": +/*!********************************************!*\ + !*** ./node_modules/prop-types/lib/has.js ***! + \********************************************/ +/***/ ((module) => { + +eval("module.exports = Function.call.bind(Object.prototype.hasOwnProperty);\n\n\n//# sourceURL=webpack://demo/./node_modules/prop-types/lib/has.js?"); + +/***/ }), + /***/ "./node_modules/react-dom/cjs/react-dom.development.js": /*!*************************************************************!*\ !*** ./node_modules/react-dom/cjs/react-dom.development.js ***! @@ -613,6 +688,28 @@ eval("\n\nfunction checkDCE() {\n /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */\n /***/ }), +/***/ "./node_modules/react-is/cjs/react-is.development.js": +/*!***********************************************************!*\ + !*** ./node_modules/react-is/cjs/react-is.development.js ***! + \***********************************************************/ +/***/ ((__unused_webpack_module, exports) => { + +"use strict"; +eval("/** @license React v16.13.1\n * react-is.development.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\n\n\nif (true) {\n (function() {\n'use strict';\n\n// The Symbol used to tag the ReactElement-like types. If there is no native Symbol\n// nor polyfill, then a plain number is used for performance.\nvar hasSymbol = typeof Symbol === 'function' && Symbol.for;\nvar REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;\nvar REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;\nvar REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;\nvar REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;\nvar REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;\nvar REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;\nvar REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary\n// (unstable) APIs that have been removed. Can we remove the symbols?\n\nvar REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;\nvar REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;\nvar REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;\nvar REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;\nvar REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;\nvar REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;\nvar REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;\nvar REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;\nvar REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;\nvar REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;\nvar REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;\n\nfunction isValidElementType(type) {\n return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.\n type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);\n}\n\nfunction typeOf(object) {\n if (typeof object === 'object' && object !== null) {\n var $$typeof = object.$$typeof;\n\n switch ($$typeof) {\n case REACT_ELEMENT_TYPE:\n var type = object.type;\n\n switch (type) {\n case REACT_ASYNC_MODE_TYPE:\n case REACT_CONCURRENT_MODE_TYPE:\n case REACT_FRAGMENT_TYPE:\n case REACT_PROFILER_TYPE:\n case REACT_STRICT_MODE_TYPE:\n case REACT_SUSPENSE_TYPE:\n return type;\n\n default:\n var $$typeofType = type && type.$$typeof;\n\n switch ($$typeofType) {\n case REACT_CONTEXT_TYPE:\n case REACT_FORWARD_REF_TYPE:\n case REACT_LAZY_TYPE:\n case REACT_MEMO_TYPE:\n case REACT_PROVIDER_TYPE:\n return $$typeofType;\n\n default:\n return $$typeof;\n }\n\n }\n\n case REACT_PORTAL_TYPE:\n return $$typeof;\n }\n }\n\n return undefined;\n} // AsyncMode is deprecated along with isAsyncMode\n\nvar AsyncMode = REACT_ASYNC_MODE_TYPE;\nvar ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;\nvar ContextConsumer = REACT_CONTEXT_TYPE;\nvar ContextProvider = REACT_PROVIDER_TYPE;\nvar Element = REACT_ELEMENT_TYPE;\nvar ForwardRef = REACT_FORWARD_REF_TYPE;\nvar Fragment = REACT_FRAGMENT_TYPE;\nvar Lazy = REACT_LAZY_TYPE;\nvar Memo = REACT_MEMO_TYPE;\nvar Portal = REACT_PORTAL_TYPE;\nvar Profiler = REACT_PROFILER_TYPE;\nvar StrictMode = REACT_STRICT_MODE_TYPE;\nvar Suspense = REACT_SUSPENSE_TYPE;\nvar hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated\n\nfunction isAsyncMode(object) {\n {\n if (!hasWarnedAboutDeprecatedIsAsyncMode) {\n hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint\n\n console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');\n }\n }\n\n return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;\n}\nfunction isConcurrentMode(object) {\n return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;\n}\nfunction isContextConsumer(object) {\n return typeOf(object) === REACT_CONTEXT_TYPE;\n}\nfunction isContextProvider(object) {\n return typeOf(object) === REACT_PROVIDER_TYPE;\n}\nfunction isElement(object) {\n return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;\n}\nfunction isForwardRef(object) {\n return typeOf(object) === REACT_FORWARD_REF_TYPE;\n}\nfunction isFragment(object) {\n return typeOf(object) === REACT_FRAGMENT_TYPE;\n}\nfunction isLazy(object) {\n return typeOf(object) === REACT_LAZY_TYPE;\n}\nfunction isMemo(object) {\n return typeOf(object) === REACT_MEMO_TYPE;\n}\nfunction isPortal(object) {\n return typeOf(object) === REACT_PORTAL_TYPE;\n}\nfunction isProfiler(object) {\n return typeOf(object) === REACT_PROFILER_TYPE;\n}\nfunction isStrictMode(object) {\n return typeOf(object) === REACT_STRICT_MODE_TYPE;\n}\nfunction isSuspense(object) {\n return typeOf(object) === REACT_SUSPENSE_TYPE;\n}\n\nexports.AsyncMode = AsyncMode;\nexports.ConcurrentMode = ConcurrentMode;\nexports.ContextConsumer = ContextConsumer;\nexports.ContextProvider = ContextProvider;\nexports.Element = Element;\nexports.ForwardRef = ForwardRef;\nexports.Fragment = Fragment;\nexports.Lazy = Lazy;\nexports.Memo = Memo;\nexports.Portal = Portal;\nexports.Profiler = Profiler;\nexports.StrictMode = StrictMode;\nexports.Suspense = Suspense;\nexports.isAsyncMode = isAsyncMode;\nexports.isConcurrentMode = isConcurrentMode;\nexports.isContextConsumer = isContextConsumer;\nexports.isContextProvider = isContextProvider;\nexports.isElement = isElement;\nexports.isForwardRef = isForwardRef;\nexports.isFragment = isFragment;\nexports.isLazy = isLazy;\nexports.isMemo = isMemo;\nexports.isPortal = isPortal;\nexports.isProfiler = isProfiler;\nexports.isStrictMode = isStrictMode;\nexports.isSuspense = isSuspense;\nexports.isValidElementType = isValidElementType;\nexports.typeOf = typeOf;\n })();\n}\n\n\n//# sourceURL=webpack://demo/./node_modules/react-is/cjs/react-is.development.js?"); + +/***/ }), + +/***/ "./node_modules/react-is/index.js": +/*!****************************************!*\ + !*** ./node_modules/react-is/index.js ***! + \****************************************/ +/***/ ((module, __unused_webpack_exports, __webpack_require__) => { + +"use strict"; +eval("\n\nif (false) {} else {\n module.exports = __webpack_require__(/*! ./cjs/react-is.development.js */ \"./node_modules/react-is/cjs/react-is.development.js\");\n}\n\n\n//# sourceURL=webpack://demo/./node_modules/react-is/index.js?"); + +/***/ }), + /***/ "./node_modules/react/cjs/react.development.js": /*!*****************************************************!*\ !*** ./node_modules/react/cjs/react.development.js ***! diff --git a/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx b/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx index c253ac95..e142c8bf 100644 --- a/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx +++ b/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx @@ -1,83 +1,114 @@ -import React, { useMemo } from "react" -import { useAppState } from "../../../001_provider/001_AppStateProvider" -import { useGuiState } from "../001_GuiStateProvider" -import { useMessageBuilder } from "../../../hooks/useMessageBuilder" +import React, { useMemo, useState } from "react"; +import { useAppState } from "../../../001_provider/001_AppStateProvider"; +import { useGuiState } from "../001_GuiStateProvider"; +import { useMessageBuilder } from "../../../hooks/useMessageBuilder"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -export type ModelSlotAreaProps = { -} +export type ModelSlotAreaProps = {}; +const SortTypes = { + slot: "slot", + name: "name", +} as const; +export type SortTypes = (typeof SortTypes)[keyof typeof SortTypes]; export const ModelSlotArea = (_props: ModelSlotAreaProps) => { - const { serverSetting, getInfo } = useAppState() - const guiState = useGuiState() - const messageBuilderState = useMessageBuilder() + const { serverSetting, getInfo } = useAppState(); + const guiState = useGuiState(); + const messageBuilderState = useMessageBuilder(); + const [sortType, setSortType] = useState("slot"); useMemo(() => { - messageBuilderState.setMessage(__filename, "edit", { "ja": "編集", "en": "edit" }) - }, []) - + messageBuilderState.setMessage(__filename, "edit", { ja: "編集", en: "edit" }); + }, []); const modelTiles = useMemo(() => { if (!serverSetting.serverSetting.modelSlots) { - return [] + return []; } - return serverSetting.serverSetting.modelSlots.map((x, index) => { - if (!x.modelFile || x.modelFile.length == 0) { - return null - } - const tileContainerClass = index == serverSetting.serverSetting.modelSlotIndex ? "model-slot-tile-container-selected" : "model-slot-tile-container" - const name = x.name.length > 8 ? x.name.substring(0, 7) + "..." : x.name - const iconElem = x.iconFile.length > 0 ? - <> - {x.name} -
{x.voiceChangerType}
- - : - <> -
no image
-
{x.voiceChangerType}
- + const modelSlots = + sortType == "slot" + ? serverSetting.serverSetting.modelSlots + : serverSetting.serverSetting.modelSlots.slice().sort((a, b) => { + return a.name.localeCompare(b.name); + }); - const clickAction = async () => { - const dummyModelSlotIndex = (Math.floor(Date.now() / 1000)) * 1000 + index - await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, modelSlotIndex: dummyModelSlotIndex }) - setTimeout(() => { // quick hack - getInfo() - }, 1000 * 2) - } + return modelSlots + .map((x, index) => { + if (!x.modelFile || x.modelFile.length == 0) { + return null; + } + const tileContainerClass = x.id == serverSetting.serverSetting.modelSlotIndex ? "model-slot-tile-container-selected" : "model-slot-tile-container"; + const name = x.name.length > 8 ? x.name.substring(0, 7) + "..." : x.name; + const iconElem = + x.iconFile.length > 0 ? ( + <> + {x.name} +
{x.voiceChangerType}
+ + ) : ( + <> +
no image
+
{x.voiceChangerType}
+ + ); - return ( -
-
- {iconElem} + const clickAction = async () => { + const dummyModelSlotIndex = Math.floor(Date.now() / 1000) * 1000 + x.id; + await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, modelSlotIndex: dummyModelSlotIndex }); + setTimeout(() => { + // quick hack + getInfo(); + }, 1000 * 2); + }; + + return ( +
+
{iconElem}
+
{name}
-
- {name} -
-
- ) - }).filter(x => x != null) - }, [serverSetting.serverSetting.modelSlots, serverSetting.serverSetting.modelSlotIndex]) - + ); + }) + .filter((x) => x != null); + }, [serverSetting.serverSetting.modelSlots, serverSetting.serverSetting.modelSlotIndex, sortType]); const modelSlotArea = useMemo(() => { const onModelSlotEditClicked = () => { - guiState.stateControls.showModelSlotManagerCheckbox.updateState(true) - } + guiState.stateControls.showModelSlotManagerCheckbox.updateState(true); + }; + const sortSlotByIdClass = sortType == "slot" ? "model-slot-sort-button-active" : "model-slot-sort-button"; + const sortSlotByNameClass = sortType == "name" ? "model-slot-sort-button-active" : "model-slot-sort-button"; return (
{modelTiles}
+
+
{ + setSortType("slot"); + }} + > + +
+
{ + setSortType("name"); + }} + > + +
+
{messageBuilderState.getMessage(__filename, "edit")}
-
- ) - }, [modelTiles]) + ); + }, [modelTiles, sortType]); - return modelSlotArea -} \ No newline at end of file + return modelSlotArea; +}; diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css index f4929254..c36cd5be 100644 --- a/client/demo/src/css/App.css +++ b/client/demo/src/css/App.css @@ -757,6 +757,18 @@ body { max-height: 60vh; width: 100%; overflow-y: scroll; + &::-webkit-scrollbar { + width: 10px; + height: 10px; + } + &::-webkit-scrollbar-track { + background-color: #eee; + border-radius: 3px; + } + &::-webkit-scrollbar-thumb { + background: #f7cfec80; + border-radius: 3px; + } .model-slot { height: 5rem; @@ -1152,12 +1164,28 @@ body { flex-wrap: wrap; overflow-y: scroll; max-height: 12rem; + &::-webkit-scrollbar { + width: 10px; + height: 10px; + } + &::-webkit-scrollbar-track { + background-color: #eee; + border-radius: 3px; + } + &::-webkit-scrollbar-thumb { + background: #f7cfec80; + border-radius: 3px; + } + /* width: calc(30rem + 40px + 10px); */ } .model-slot-buttons { display: flex; - flex-direction: column-reverse; + gap: 5px; + flex-direction: column; + justify-content: space-between; + width: 4rem; .model-slot-button { border: solid 2px #999; color: white; @@ -1166,10 +1194,41 @@ body { background: #333; cursor: pointer; padding: 5px; + text-align: center; + width: 3rem; } .model-slot-button:hover { border: solid 2px #faa; } + .model-slot-sort-buttons { + height: 50%; + .model-slot-sort-button { + color: white; + font-size: 0.8rem; + border-radius: 4px; + background: #333; + border: solid 2px #444; + cursor: pointer; + padding: 1px; + text-align: center; + width: 3rem; + } + .model-slot-sort-button-active { + color: white; + font-size: 0.8rem; + border-radius: 4px; + background: #595; + border: solid 2px #595; + cursor: pointer; + padding: 1px; + text-align: center; + width: 3rem; + } + .model-slot-sort-button:hover { + border: solid 2px #faa; + background: #343; + } + } } } } @@ -1639,6 +1698,19 @@ audio::-webkit-media-controls-overlay-enclosure{ width: 70%; overflow-y: scroll; max-height: 20rem; + &::-webkit-scrollbar { + width: 10px; + height: 10px; + } + &::-webkit-scrollbar-track { + background-color: #eee; + border-radius: 3px; + } + &::-webkit-scrollbar-thumb { + background: #f7cfec80; + border-radius: 3px; + } + .merge-lab-model-item { display: flex; flex-direction: row; diff --git a/client/lib/src/const.ts b/client/lib/src/const.ts index 7548cc86..2d73da3b 100644 --- a/client/lib/src/const.ts +++ b/client/lib/src/const.ts @@ -193,6 +193,7 @@ export type VoiceChangerServerSetting = { } type ModelSlot = { + id: number voiceChangerType: VoiceChangerType name: string, description: string, diff --git a/server/data/ModelSlot.py b/server/data/ModelSlot.py index 5c989b5d..558623db 100644 --- a/server/data/ModelSlot.py +++ b/server/data/ModelSlot.py @@ -9,6 +9,7 @@ import json @dataclass class ModelSlot: + id: int = -1 voiceChangerType: VoiceChangerType | None = None name: str = "" description: str = "" @@ -153,6 +154,7 @@ def loadAllSlotInfo(model_dir: str): slotInfos: list[ModelSlots] = [] for slotIndex in range(MAX_SLOT_NUM): slotInfo = loadSlotInfo(model_dir, slotIndex) + slotInfo.id = slotIndex slotInfos.append(slotInfo) return slotInfos