diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js index 6e7f4f8a..9a80ce2b 100644 --- a/client/demo/dist/index.js +++ b/client/demo/dist/index.js @@ -103,7 +103,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__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 */ GuiStateProvider: () => (/* binding */ GuiStateProvider),\n/* harmony export */ OpenAdvancedSettingCheckbox: () => (/* binding */ OpenAdvancedSettingCheckbox),\n/* harmony export */ OpenAdvancedSettingDialogCheckbox: () => (/* binding */ OpenAdvancedSettingDialogCheckbox),\n/* harmony export */ OpenConverterSettingCheckbox: () => (/* binding */ OpenConverterSettingCheckbox),\n/* harmony export */ OpenDeviceSettingCheckbox: () => (/* binding */ OpenDeviceSettingCheckbox),\n/* harmony export */ OpenLabCheckbox: () => (/* binding */ OpenLabCheckbox),\n/* harmony export */ OpenLicenseDialogCheckbox: () => (/* binding */ OpenLicenseDialogCheckbox),\n/* harmony export */ OpenMergeLabDialogCheckbox: () => (/* binding */ OpenMergeLabDialogCheckbox),\n/* harmony export */ OpenModelSettingCheckbox: () => (/* binding */ OpenModelSettingCheckbox),\n/* harmony export */ OpenModelSlotManagerDialogCheckbox: () => (/* binding */ OpenModelSlotManagerDialogCheckbox),\n/* harmony export */ OpenQualityControlCheckbox: () => (/* binding */ OpenQualityControlCheckbox),\n/* harmony export */ OpenServerControlCheckbox: () => (/* binding */ OpenServerControlCheckbox),\n/* harmony export */ OpenSpeakerSettingCheckbox: () => (/* binding */ OpenSpeakerSettingCheckbox),\n/* harmony export */ OpenStartingNoticeDialogCheckbox: () => (/* binding */ OpenStartingNoticeDialogCheckbox),\n/* harmony export */ OpenTextInputDialogCheckbox: () => (/* binding */ OpenTextInputDialogCheckbox),\n/* harmony export */ OpenWaitingDialogCheckbox: () => (/* binding */ OpenWaitingDialogCheckbox),\n/* harmony export */ useGuiState: () => (/* binding */ useGuiState)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __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_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.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_AppRootProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../001_provider/001_AppRootProvider */ \"./src/001_provider/001_AppRootProvider.tsx\");\n/* harmony import */ var _hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks/useStateControlCheckbox */ \"./src/hooks/useStateControlCheckbox.tsx\");\n\n\n\n\n\n\nvar OpenServerControlCheckbox = \"open-server-control-checkbox\";\nvar OpenModelSettingCheckbox = \"open-model-setting-checkbox\";\nvar OpenDeviceSettingCheckbox = \"open-device-setting-checkbox\";\nvar OpenQualityControlCheckbox = \"open-quality-control-checkbox\";\nvar OpenSpeakerSettingCheckbox = \"open-speaker-setting-checkbox\";\nvar OpenConverterSettingCheckbox = \"open-converter-setting-checkbox\";\nvar OpenAdvancedSettingCheckbox = \"open-advanced-setting-checkbox\";\nvar OpenLabCheckbox = \"open-lab-checkbox\";\nvar OpenLicenseDialogCheckbox = \"open-license-dialog-checkbox\";\nvar OpenWaitingDialogCheckbox = \"open-waiting-dialog-checkbox\";\nvar OpenStartingNoticeDialogCheckbox = \"open-starting-notice-dialog-checkbox\";\nvar OpenModelSlotManagerDialogCheckbox = \"open-model-slot-manager-dialog-checkbox\";\nvar OpenMergeLabDialogCheckbox = \"open-merge-lab-dialog-checkbox\";\nvar OpenAdvancedSettingDialogCheckbox = \"open-advanced-setting-dialog-checkbox\";\nvar OpenTextInputDialogCheckbox = \"open-text-input-dialog-checkbox\";\nvar GuiStateContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createContext(null);\nvar useGuiState = function useGuiState() {\n var state = (0,react__WEBPACK_IMPORTED_MODULE_3__.useContext)(GuiStateContext);\n if (!state) {\n throw new Error(\"useGuiState must be used within GuiStateProvider\");\n }\n return state;\n};\nvar GuiStateProvider = function GuiStateProvider(_ref) {\n var children = _ref.children;\n var _useAppRoot = (0,_001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_4__.useAppRoot)(),\n appGuiSettingState = _useAppRoot.appGuiSettingState;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState, 2),\n isConverting = _useState2[0],\n setIsConverting = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState3, 2),\n isAnalyzing = _useState4[0],\n setIsAnalyzing = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(0),\n _useState6 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState5, 2),\n modelSlotNum = _useState6[0],\n setModelSlotNum = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState8 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState7, 2),\n showPyTorchModelUpload = _useState8[0],\n setShowPyTorchModelUpload = _useState8[1];\n var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)([]),\n _useState10 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState9, 2),\n inputAudioDeviceInfo = _useState10[0],\n setInputAudioDeviceInfo = _useState10[1];\n var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)([]),\n _useState12 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState11, 2),\n outputAudioDeviceInfo = _useState12[0],\n setOutputAudioDeviceInfo = _useState12[1];\n var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"none\"),\n _useState14 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState13, 2),\n audioInputForGUI = _useState14[0],\n setAudioInputForGUI = _useState14[1];\n var _useState15 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"none\"),\n _useState16 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState15, 2),\n audioOutputForGUI = _useState16[0],\n setAudioOutputForGUI = _useState16[1];\n var _useState17 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState18 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState17, 2),\n fileInputEchoback = _useState18[0],\n setFileInputEchoback = _useState18[1]; //最初のmuteが有効になるように。undefined <-- ??? falseしておけばよさそう。undefinedだとwarningがでる。\n var _useState19 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"default\"),\n _useState20 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState19, 2),\n audioOutputForAnalyzer = _useState20[0],\n setAudioOutputForAnalyzer = _useState20[1];\n var _useState21 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(null),\n _useState22 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState21, 2),\n textInputResolve = _useState22[0],\n setTextInputResolve = _useState22[1];\n var reloadDeviceInfo = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee() {\n var ms, mediaDeviceInfos, audioInputs, audioOutputs;\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 _context.prev = 0;\n _context.next = 3;\n return navigator.mediaDevices.getUserMedia({\n video: false,\n audio: true\n });\n case 3:\n ms = _context.sent;\n ms.getTracks().forEach(function (x) {\n x.stop();\n });\n _context.next = 10;\n break;\n case 7:\n _context.prev = 7;\n _context.t0 = _context[\"catch\"](0);\n console.warn(\"Enumerate device error::\", _context.t0);\n case 10:\n _context.next = 12;\n return navigator.mediaDevices.enumerateDevices();\n case 12:\n mediaDeviceInfos = _context.sent;\n audioInputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audioinput\";\n });\n audioInputs.push({\n deviceId: \"none\",\n groupId: \"none\",\n kind: \"audioinput\",\n label: \"none\",\n toJSON: function toJSON() {}\n });\n audioInputs.push({\n deviceId: \"file\",\n groupId: \"file\",\n kind: \"audioinput\",\n label: \"file\",\n toJSON: function toJSON() {}\n });\n audioOutputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audiooutput\";\n });\n audioOutputs.push({\n deviceId: \"none\",\n groupId: \"none\",\n kind: \"audiooutput\",\n label: \"none\",\n toJSON: function toJSON() {}\n });\n // audioOutputs.push({\n // deviceId: \"record\",\n // groupId: \"record\",\n // kind: \"audiooutput\",\n // label: \"record\",\n // toJSON: () => { }\n // })\n return _context.abrupt(\"return\", [audioInputs, audioOutputs]);\n case 19:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[0, 7]]);\n }));\n return function reloadDeviceInfo() {\n return _ref2.apply(this, arguments);\n };\n }();\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n var audioInitialize = /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee2() {\n var audioInfo;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return reloadDeviceInfo();\n case 2:\n audioInfo = _context2.sent;\n setInputAudioDeviceInfo(audioInfo[0]);\n setOutputAudioDeviceInfo(audioInfo[1]);\n case 5:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function audioInitialize() {\n return _ref3.apply(this, arguments);\n };\n }();\n audioInitialize();\n }, []);\n\n // (1) Controller Switch\n var openServerControlCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenServerControlCheckbox);\n var openModelSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenModelSettingCheckbox);\n var openDeviceSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenDeviceSettingCheckbox);\n var openQualityControlCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenQualityControlCheckbox);\n var openSpeakerSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenSpeakerSettingCheckbox);\n var openConverterSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenConverterSettingCheckbox);\n var openAdvancedSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenAdvancedSettingCheckbox);\n var openLabCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenLabCheckbox);\n var showWaitingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenWaitingDialogCheckbox);\n var showStartingNoticeCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenStartingNoticeDialogCheckbox);\n var showModelSlotManagerCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenModelSlotManagerDialogCheckbox);\n var showMergeLabCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenMergeLabDialogCheckbox);\n var showAdvancedSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenAdvancedSettingDialogCheckbox);\n var showTextInputCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenTextInputDialogCheckbox);\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n openServerControlCheckbox.updateState(true);\n openModelSettingCheckbox.updateState(false);\n openDeviceSettingCheckbox.updateState(true);\n openSpeakerSettingCheckbox.updateState(true);\n openConverterSettingCheckbox.updateState(true);\n openQualityControlCheckbox.updateState(false);\n openLabCheckbox.updateState(false);\n openAdvancedSettingCheckbox.updateState(false);\n showWaitingCheckbox.updateState(false);\n showStartingNoticeCheckbox.updateState(false);\n showModelSlotManagerCheckbox.updateState(false);\n showMergeLabCheckbox.updateState(false);\n showAdvancedSettingCheckbox.updateState(false);\n showTextInputCheckbox.updateState(false);\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n var show = function show() {\n var _document$getElementB, _document$getElementB2;\n // const lang = window.navigator.language\n // const edition = appGuiSettingState.edition\n // console.log(\"appGuiSettingState.edition\", appGuiSettingState.edition, lang)\n // if ((edition == \"onnxdirectML-cuda\" || edition == \"\") && lang == \"ja\") {\n // return\n // }\n\n (_document$getElementB = document.getElementById(\"dialog\")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.classList.add(\"dialog-container-show\");\n showStartingNoticeCheckbox.updateState(true);\n (_document$getElementB2 = document.getElementById(\"dialog2\")) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.classList.add(\"dialog-container-show\");\n };\n setTimeout(show);\n }, [appGuiSettingState.edition]);\n var providerValue = {\n stateControls: {\n openServerControlCheckbox: openServerControlCheckbox,\n openModelSettingCheckbox: openModelSettingCheckbox,\n openDeviceSettingCheckbox: openDeviceSettingCheckbox,\n openQualityControlCheckbox: openQualityControlCheckbox,\n openSpeakerSettingCheckbox: openSpeakerSettingCheckbox,\n openConverterSettingCheckbox: openConverterSettingCheckbox,\n openAdvancedSettingCheckbox: openAdvancedSettingCheckbox,\n openLabCheckbox: openLabCheckbox,\n showWaitingCheckbox: showWaitingCheckbox,\n showStartingNoticeCheckbox: showStartingNoticeCheckbox,\n showModelSlotManagerCheckbox: showModelSlotManagerCheckbox,\n showMergeLabCheckbox: showMergeLabCheckbox,\n showAdvancedSettingCheckbox: showAdvancedSettingCheckbox,\n showTextInputCheckbox: showTextInputCheckbox\n },\n isConverting: isConverting,\n setIsConverting: setIsConverting,\n isAnalyzing: isAnalyzing,\n setIsAnalyzing: setIsAnalyzing,\n showPyTorchModelUpload: showPyTorchModelUpload,\n setShowPyTorchModelUpload: setShowPyTorchModelUpload,\n reloadDeviceInfo: reloadDeviceInfo,\n inputAudioDeviceInfo: inputAudioDeviceInfo,\n outputAudioDeviceInfo: outputAudioDeviceInfo,\n audioInputForGUI: audioInputForGUI,\n audioOutputForGUI: audioOutputForGUI,\n fileInputEchoback: fileInputEchoback,\n audioOutputForAnalyzer: audioOutputForAnalyzer,\n setInputAudioDeviceInfo: setInputAudioDeviceInfo,\n setOutputAudioDeviceInfo: setOutputAudioDeviceInfo,\n setAudioInputForGUI: setAudioInputForGUI,\n setAudioOutputForGUI: setAudioOutputForGUI,\n setFileInputEchoback: setFileInputEchoback,\n setAudioOutputForAnalyzer: setAudioOutputForAnalyzer,\n modelSlotNum: modelSlotNum,\n setModelSlotNum: setModelSlotNum,\n textInputResolve: textInputResolve,\n setTextInputResolve: setTextInputResolve\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(GuiStateContext.Provider, {\n value: providerValue\n }, children);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/001_GuiStateProvider.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ GuiStateProvider: () => (/* binding */ GuiStateProvider),\n/* harmony export */ OpenAdvancedSettingCheckbox: () => (/* binding */ OpenAdvancedSettingCheckbox),\n/* harmony export */ OpenAdvancedSettingDialogCheckbox: () => (/* binding */ OpenAdvancedSettingDialogCheckbox),\n/* harmony export */ OpenConverterSettingCheckbox: () => (/* binding */ OpenConverterSettingCheckbox),\n/* harmony export */ OpenDeviceSettingCheckbox: () => (/* binding */ OpenDeviceSettingCheckbox),\n/* harmony export */ OpenGetServerInformationDialogCheckbox: () => (/* binding */ OpenGetServerInformationDialogCheckbox),\n/* harmony export */ OpenLabCheckbox: () => (/* binding */ OpenLabCheckbox),\n/* harmony export */ OpenLicenseDialogCheckbox: () => (/* binding */ OpenLicenseDialogCheckbox),\n/* harmony export */ OpenMergeLabDialogCheckbox: () => (/* binding */ OpenMergeLabDialogCheckbox),\n/* harmony export */ OpenModelSettingCheckbox: () => (/* binding */ OpenModelSettingCheckbox),\n/* harmony export */ OpenModelSlotManagerDialogCheckbox: () => (/* binding */ OpenModelSlotManagerDialogCheckbox),\n/* harmony export */ OpenQualityControlCheckbox: () => (/* binding */ OpenQualityControlCheckbox),\n/* harmony export */ OpenServerControlCheckbox: () => (/* binding */ OpenServerControlCheckbox),\n/* harmony export */ OpenSpeakerSettingCheckbox: () => (/* binding */ OpenSpeakerSettingCheckbox),\n/* harmony export */ OpenStartingNoticeDialogCheckbox: () => (/* binding */ OpenStartingNoticeDialogCheckbox),\n/* harmony export */ OpenTextInputDialogCheckbox: () => (/* binding */ OpenTextInputDialogCheckbox),\n/* harmony export */ OpenWaitingDialogCheckbox: () => (/* binding */ OpenWaitingDialogCheckbox),\n/* harmony export */ useGuiState: () => (/* binding */ useGuiState)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __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_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.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_AppRootProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../001_provider/001_AppRootProvider */ \"./src/001_provider/001_AppRootProvider.tsx\");\n/* harmony import */ var _hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks/useStateControlCheckbox */ \"./src/hooks/useStateControlCheckbox.tsx\");\n\n\n\n\n\n\nvar OpenServerControlCheckbox = \"open-server-control-checkbox\";\nvar OpenModelSettingCheckbox = \"open-model-setting-checkbox\";\nvar OpenDeviceSettingCheckbox = \"open-device-setting-checkbox\";\nvar OpenQualityControlCheckbox = \"open-quality-control-checkbox\";\nvar OpenSpeakerSettingCheckbox = \"open-speaker-setting-checkbox\";\nvar OpenConverterSettingCheckbox = \"open-converter-setting-checkbox\";\nvar OpenAdvancedSettingCheckbox = \"open-advanced-setting-checkbox\";\nvar OpenLabCheckbox = \"open-lab-checkbox\";\nvar OpenLicenseDialogCheckbox = \"open-license-dialog-checkbox\";\nvar OpenWaitingDialogCheckbox = \"open-waiting-dialog-checkbox\";\nvar OpenStartingNoticeDialogCheckbox = \"open-starting-notice-dialog-checkbox\";\nvar OpenModelSlotManagerDialogCheckbox = \"open-model-slot-manager-dialog-checkbox\";\nvar OpenMergeLabDialogCheckbox = \"open-merge-lab-dialog-checkbox\";\nvar OpenAdvancedSettingDialogCheckbox = \"open-advanced-setting-dialog-checkbox\";\nvar OpenGetServerInformationDialogCheckbox = \"open-get-server-information-dialog-checkbox\";\nvar OpenTextInputDialogCheckbox = \"open-text-input-dialog-checkbox\";\nvar GuiStateContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createContext(null);\nvar useGuiState = function useGuiState() {\n var state = (0,react__WEBPACK_IMPORTED_MODULE_3__.useContext)(GuiStateContext);\n if (!state) {\n throw new Error(\"useGuiState must be used within GuiStateProvider\");\n }\n return state;\n};\nvar GuiStateProvider = function GuiStateProvider(_ref) {\n var children = _ref.children;\n var _useAppRoot = (0,_001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_4__.useAppRoot)(),\n appGuiSettingState = _useAppRoot.appGuiSettingState;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState, 2),\n isConverting = _useState2[0],\n setIsConverting = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState3, 2),\n isAnalyzing = _useState4[0],\n setIsAnalyzing = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(0),\n _useState6 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState5, 2),\n modelSlotNum = _useState6[0],\n setModelSlotNum = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState8 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState7, 2),\n showPyTorchModelUpload = _useState8[0],\n setShowPyTorchModelUpload = _useState8[1];\n var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)([]),\n _useState10 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState9, 2),\n inputAudioDeviceInfo = _useState10[0],\n setInputAudioDeviceInfo = _useState10[1];\n var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)([]),\n _useState12 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState11, 2),\n outputAudioDeviceInfo = _useState12[0],\n setOutputAudioDeviceInfo = _useState12[1];\n var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"none\"),\n _useState14 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState13, 2),\n audioInputForGUI = _useState14[0],\n setAudioInputForGUI = _useState14[1];\n var _useState15 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"none\"),\n _useState16 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState15, 2),\n audioOutputForGUI = _useState16[0],\n setAudioOutputForGUI = _useState16[1];\n var _useState17 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(false),\n _useState18 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState17, 2),\n fileInputEchoback = _useState18[0],\n setFileInputEchoback = _useState18[1]; //最初のmuteが有効になるように。undefined <-- ??? falseしておけばよさそう。undefinedだとwarningがでる。\n var _useState19 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(\"default\"),\n _useState20 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState19, 2),\n audioOutputForAnalyzer = _useState20[0],\n setAudioOutputForAnalyzer = _useState20[1];\n var _useState21 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(null),\n _useState22 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState21, 2),\n textInputResolve = _useState22[0],\n setTextInputResolve = _useState22[1];\n var reloadDeviceInfo = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee() {\n var ms, mediaDeviceInfos, audioInputs, audioOutputs;\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 _context.prev = 0;\n _context.next = 3;\n return navigator.mediaDevices.getUserMedia({\n video: false,\n audio: true\n });\n case 3:\n ms = _context.sent;\n ms.getTracks().forEach(function (x) {\n x.stop();\n });\n _context.next = 10;\n break;\n case 7:\n _context.prev = 7;\n _context.t0 = _context[\"catch\"](0);\n console.warn(\"Enumerate device error::\", _context.t0);\n case 10:\n _context.next = 12;\n return navigator.mediaDevices.enumerateDevices();\n case 12:\n mediaDeviceInfos = _context.sent;\n audioInputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audioinput\";\n });\n audioInputs.push({\n deviceId: \"none\",\n groupId: \"none\",\n kind: \"audioinput\",\n label: \"none\",\n toJSON: function toJSON() {}\n });\n audioInputs.push({\n deviceId: \"file\",\n groupId: \"file\",\n kind: \"audioinput\",\n label: \"file\",\n toJSON: function toJSON() {}\n });\n audioOutputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audiooutput\";\n });\n audioOutputs.push({\n deviceId: \"none\",\n groupId: \"none\",\n kind: \"audiooutput\",\n label: \"none\",\n toJSON: function toJSON() {}\n });\n // audioOutputs.push({\n // deviceId: \"record\",\n // groupId: \"record\",\n // kind: \"audiooutput\",\n // label: \"record\",\n // toJSON: () => { }\n // })\n return _context.abrupt(\"return\", [audioInputs, audioOutputs]);\n case 19:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[0, 7]]);\n }));\n return function reloadDeviceInfo() {\n return _ref2.apply(this, arguments);\n };\n }();\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n var audioInitialize = /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee2() {\n var audioInfo;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return reloadDeviceInfo();\n case 2:\n audioInfo = _context2.sent;\n setInputAudioDeviceInfo(audioInfo[0]);\n setOutputAudioDeviceInfo(audioInfo[1]);\n case 5:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function audioInitialize() {\n return _ref3.apply(this, arguments);\n };\n }();\n audioInitialize();\n }, []);\n\n // (1) Controller Switch\n var openServerControlCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenServerControlCheckbox);\n var openModelSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenModelSettingCheckbox);\n var openDeviceSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenDeviceSettingCheckbox);\n var openQualityControlCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenQualityControlCheckbox);\n var openSpeakerSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenSpeakerSettingCheckbox);\n var openConverterSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenConverterSettingCheckbox);\n var openAdvancedSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenAdvancedSettingCheckbox);\n var openLabCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenLabCheckbox);\n var showWaitingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenWaitingDialogCheckbox);\n var showStartingNoticeCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenStartingNoticeDialogCheckbox);\n var showModelSlotManagerCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenModelSlotManagerDialogCheckbox);\n var showMergeLabCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenMergeLabDialogCheckbox);\n var showAdvancedSettingCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenAdvancedSettingDialogCheckbox);\n var showGetServerInformationCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenGetServerInformationDialogCheckbox);\n var showTextInputCheckbox = (0,_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_5__.useStateControlCheckbox)(OpenTextInputDialogCheckbox);\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n openServerControlCheckbox.updateState(true);\n openModelSettingCheckbox.updateState(false);\n openDeviceSettingCheckbox.updateState(true);\n openSpeakerSettingCheckbox.updateState(true);\n openConverterSettingCheckbox.updateState(true);\n openQualityControlCheckbox.updateState(false);\n openLabCheckbox.updateState(false);\n openAdvancedSettingCheckbox.updateState(false);\n showWaitingCheckbox.updateState(false);\n showStartingNoticeCheckbox.updateState(false);\n showModelSlotManagerCheckbox.updateState(false);\n showMergeLabCheckbox.updateState(false);\n showAdvancedSettingCheckbox.updateState(false);\n showGetServerInformationCheckbox.updateState(false);\n showTextInputCheckbox.updateState(false);\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n var show = function show() {\n var _document$getElementB, _document$getElementB2;\n // const lang = window.navigator.language\n // const edition = appGuiSettingState.edition\n // console.log(\"appGuiSettingState.edition\", appGuiSettingState.edition, lang)\n // if ((edition == \"onnxdirectML-cuda\" || edition == \"\") && lang == \"ja\") {\n // return\n // }\n\n (_document$getElementB = document.getElementById(\"dialog\")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.classList.add(\"dialog-container-show\");\n showStartingNoticeCheckbox.updateState(true);\n (_document$getElementB2 = document.getElementById(\"dialog2\")) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.classList.add(\"dialog-container-show\");\n };\n setTimeout(show);\n }, [appGuiSettingState.edition]);\n var providerValue = {\n stateControls: {\n openServerControlCheckbox: openServerControlCheckbox,\n openModelSettingCheckbox: openModelSettingCheckbox,\n openDeviceSettingCheckbox: openDeviceSettingCheckbox,\n openQualityControlCheckbox: openQualityControlCheckbox,\n openSpeakerSettingCheckbox: openSpeakerSettingCheckbox,\n openConverterSettingCheckbox: openConverterSettingCheckbox,\n openAdvancedSettingCheckbox: openAdvancedSettingCheckbox,\n openLabCheckbox: openLabCheckbox,\n showWaitingCheckbox: showWaitingCheckbox,\n showStartingNoticeCheckbox: showStartingNoticeCheckbox,\n showModelSlotManagerCheckbox: showModelSlotManagerCheckbox,\n showMergeLabCheckbox: showMergeLabCheckbox,\n showAdvancedSettingCheckbox: showAdvancedSettingCheckbox,\n showGetServerInformationCheckbox: showGetServerInformationCheckbox,\n showTextInputCheckbox: showTextInputCheckbox\n },\n isConverting: isConverting,\n setIsConverting: setIsConverting,\n isAnalyzing: isAnalyzing,\n setIsAnalyzing: setIsAnalyzing,\n showPyTorchModelUpload: showPyTorchModelUpload,\n setShowPyTorchModelUpload: setShowPyTorchModelUpload,\n reloadDeviceInfo: reloadDeviceInfo,\n inputAudioDeviceInfo: inputAudioDeviceInfo,\n outputAudioDeviceInfo: outputAudioDeviceInfo,\n audioInputForGUI: audioInputForGUI,\n audioOutputForGUI: audioOutputForGUI,\n fileInputEchoback: fileInputEchoback,\n audioOutputForAnalyzer: audioOutputForAnalyzer,\n setInputAudioDeviceInfo: setInputAudioDeviceInfo,\n setOutputAudioDeviceInfo: setOutputAudioDeviceInfo,\n setAudioInputForGUI: setAudioInputForGUI,\n setAudioOutputForGUI: setAudioOutputForGUI,\n setFileInputEchoback: setFileInputEchoback,\n setAudioOutputForAnalyzer: setAudioOutputForAnalyzer,\n modelSlotNum: modelSlotNum,\n setModelSlotNum: setModelSlotNum,\n textInputResolve: textInputResolve,\n setTextInputResolve: setTextInputResolve\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(GuiStateContext.Provider, {\n value: providerValue\n }, children);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/001_GuiStateProvider.tsx?"); /***/ }), @@ -136,7 +136,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__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 */ Dialogs: () => (/* binding */ Dialogs)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _902_WaitingDialog__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./902_WaitingDialog */ \"./src/components/demo/902_WaitingDialog.tsx\");\n/* harmony import */ var _903_StartingNoticeDialog__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./903_StartingNoticeDialog */ \"./src/components/demo/903_StartingNoticeDialog.tsx\");\n/* harmony import */ var _904_ModelSlotManagerDialog__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./904_ModelSlotManagerDialog */ \"./src/components/demo/904_ModelSlotManagerDialog.tsx\");\n/* harmony import */ var _905_MergeLabDialog__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./905_MergeLabDialog */ \"./src/components/demo/905_MergeLabDialog.tsx\");\n/* harmony import */ var _906_AdvancedSettingDialog__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./906_AdvancedSettingDialog */ \"./src/components/demo/906_AdvancedSettingDialog.tsx\");\n\n\n\n\n\n\n\nvar Dialogs = function Dialogs() {\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_1__.useGuiState)();\n var dialogs = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, guiState.stateControls.showWaitingCheckbox.trigger, guiState.stateControls.showStartingNoticeCheckbox.trigger, guiState.stateControls.showModelSlotManagerCheckbox.trigger, guiState.stateControls.showMergeLabCheckbox.trigger, guiState.stateControls.showAdvancedSettingCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"dialog-container\",\n id: \"dialog\"\n }, guiState.stateControls.showWaitingCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_902_WaitingDialog__WEBPACK_IMPORTED_MODULE_2__.WaitingDialog, null), guiState.stateControls.showStartingNoticeCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_903_StartingNoticeDialog__WEBPACK_IMPORTED_MODULE_3__.StartingNoticeDialog, null), guiState.stateControls.showModelSlotManagerCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_904_ModelSlotManagerDialog__WEBPACK_IMPORTED_MODULE_4__.ModelSlotManagerDialog, null), guiState.stateControls.showMergeLabCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_905_MergeLabDialog__WEBPACK_IMPORTED_MODULE_5__.MergeLabDialog, null), guiState.stateControls.showAdvancedSettingCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_906_AdvancedSettingDialog__WEBPACK_IMPORTED_MODULE_6__.AdvancedSettingDialog, null)));\n return dialogs;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/900_Dialogs.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Dialogs: () => (/* binding */ Dialogs)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _902_WaitingDialog__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./902_WaitingDialog */ \"./src/components/demo/902_WaitingDialog.tsx\");\n/* harmony import */ var _903_StartingNoticeDialog__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./903_StartingNoticeDialog */ \"./src/components/demo/903_StartingNoticeDialog.tsx\");\n/* harmony import */ var _904_ModelSlotManagerDialog__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./904_ModelSlotManagerDialog */ \"./src/components/demo/904_ModelSlotManagerDialog.tsx\");\n/* harmony import */ var _905_MergeLabDialog__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./905_MergeLabDialog */ \"./src/components/demo/905_MergeLabDialog.tsx\");\n/* harmony import */ var _906_AdvancedSettingDialog__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./906_AdvancedSettingDialog */ \"./src/components/demo/906_AdvancedSettingDialog.tsx\");\n/* harmony import */ var _907_GetServerInfomationDialog__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./907_GetServerInfomationDialog */ \"./src/components/demo/907_GetServerInfomationDialog.tsx\");\n\n\n\n\n\n\n\n\nvar Dialogs = function Dialogs() {\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_1__.useGuiState)();\n var dialogs = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, guiState.stateControls.showWaitingCheckbox.trigger, guiState.stateControls.showStartingNoticeCheckbox.trigger, guiState.stateControls.showModelSlotManagerCheckbox.trigger, guiState.stateControls.showMergeLabCheckbox.trigger, guiState.stateControls.showAdvancedSettingCheckbox.trigger, guiState.stateControls.showGetServerInformationCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"dialog-container\",\n id: \"dialog\"\n }, guiState.stateControls.showWaitingCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_902_WaitingDialog__WEBPACK_IMPORTED_MODULE_2__.WaitingDialog, null), guiState.stateControls.showStartingNoticeCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_903_StartingNoticeDialog__WEBPACK_IMPORTED_MODULE_3__.StartingNoticeDialog, null), guiState.stateControls.showModelSlotManagerCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_904_ModelSlotManagerDialog__WEBPACK_IMPORTED_MODULE_4__.ModelSlotManagerDialog, null), guiState.stateControls.showMergeLabCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_905_MergeLabDialog__WEBPACK_IMPORTED_MODULE_5__.MergeLabDialog, null), guiState.stateControls.showAdvancedSettingCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_906_AdvancedSettingDialog__WEBPACK_IMPORTED_MODULE_6__.AdvancedSettingDialog, null), guiState.stateControls.showGetServerInformationCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_907_GetServerInfomationDialog__WEBPACK_IMPORTED_MODULE_7__.GetServerInfomationDialog, null)));\n return dialogs;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/900_Dialogs.tsx?"); /***/ }), @@ -239,6 +239,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), +/***/ "./src/components/demo/907_GetServerInfomationDialog.tsx": +/*!***************************************************************!*\ + !*** ./src/components/demo/907_GetServerInfomationDialog.tsx ***! + \***************************************************************/ +/***/ ((__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 */ GetServerInfomationDialog: () => (/* binding */ GetServerInfomationDialog)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\n\n\nvar GetServerInfomationDialog = function GetServerInfomationDialog() {\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_1__.useGuiState)();\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var dialog = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {\n var closeButtonRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"body-row split-3-4-3 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"body-item-text\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"body-button-container body-button-container-space-around\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: function onClick() {\n guiState.stateControls.showGetServerInformationCheckbox.updateState(false);\n }\n }, \"close\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"body-item-text\"\n }));\n var content = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"get-server-information-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"textarea\", {\n className: \"get-server-information-text-area\",\n id: \"get-server-information-text-area\",\n value: JSON.stringify(serverSetting.serverSetting, null, 4)\n }));\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"dialog-title\"\n }, \"Server Information\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"dialog-content\"\n }, content, closeButtonRow));\n }, [serverSetting.serverSetting]);\n return dialog;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/907_GetServerInfomationDialog.tsx?"); + +/***/ }), + /***/ "./src/components/demo/910_Dialogs2.tsx": /*!**********************************************!*\ !*** ./src/components/demo/910_Dialogs2.tsx ***! @@ -422,7 +433,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__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 */ MoreActionArea: () => (/* binding */ MoreActionArea)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n\n\nvar MoreActionArea = function MoreActionArea(_props) {\n var _useGuiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_1__.useGuiState)(),\n stateControls = _useGuiState.stateControls;\n var serverIORecorderRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {\n var onOpenMergeLabClicked = function onOpenMergeLabClicked() {\n stateControls.showMergeLabCheckbox.updateState(true);\n };\n var onOpenAdvancedSettingClicked = function onOpenAdvancedSettingClicked() {\n stateControls.showAdvancedSettingCheckbox.updateState(true);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"config-sub-area-control left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"more...\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"config-sub-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n onClick: onOpenMergeLabClicked,\n className: \"config-sub-area-button\"\n }, \"Merge Lab\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n onClick: onOpenAdvancedSettingClicked,\n className: \"config-sub-area-button\"\n }, \"Advanced Setting\")))));\n }, [stateControls]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"config-sub-area\"\n }, serverIORecorderRow);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-5_MoreActionArea.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ MoreActionArea: () => (/* binding */ MoreActionArea)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n\n\nvar MoreActionArea = function MoreActionArea(_props) {\n var _useGuiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_1__.useGuiState)(),\n stateControls = _useGuiState.stateControls;\n var serverIORecorderRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {\n var onOpenMergeLabClicked = function onOpenMergeLabClicked() {\n stateControls.showMergeLabCheckbox.updateState(true);\n };\n var onOpenAdvancedSettingClicked = function onOpenAdvancedSettingClicked() {\n stateControls.showAdvancedSettingCheckbox.updateState(true);\n };\n var onOpenGetServerInformationClicked = function onOpenGetServerInformationClicked() {\n stateControls.showGetServerInformationCheckbox.updateState(true);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"config-sub-area-control left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"more...\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"config-sub-area-control-field config-sub-area-control-field-long\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"config-sub-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n onClick: onOpenMergeLabClicked,\n className: \"config-sub-area-button\"\n }, \"Merge Lab\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n onClick: onOpenAdvancedSettingClicked,\n className: \"config-sub-area-button\"\n }, \"Advanced Setting\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n onClick: onOpenGetServerInformationClicked,\n className: \"config-sub-area-button\"\n }, \"Server Info\")))));\n }, [stateControls]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"config-sub-area\"\n }, serverIORecorderRow);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-5_MoreActionArea.tsx?"); /***/ }), @@ -499,7 +510,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 {\n --text-color: #333;\n --company-color1: rgba(64, 119, 187, 1);\n --company-color2: rgba(29, 47, 78, 1);\n --company-color3: rgba(255, 255, 255, 1);\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\n --global-shadow-color: rgba(0, 0, 0, 0.4);\n\n --sidebar-transition-time: 0.2s;\n --sidebar-transition-time-quick: 0.1s;\n --sidebar-transition-animation: ease-in-out;\n\n --header-height: 1.5rem;\n --right-sidebar-width: 320px;\n\n --dialog-border-color: rgba(100, 100, 100, 1);\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\n --dialog-background-color: rgba(255, 255, 255, 1);\n --dialog-primary-color: rgba(19, 70, 209, 1);\n --dialog-active-color: rgba(40, 70, 209, 1);\n --dialog-input-border-color: rgba(200, 200, 200, 1);\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\n\n --body-video-seeker-height: 3rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Poppins\", sans-serif;\n}\nhtml {\n font-size: 16px;\n}\nbody {\n height: 100%;\n width: 100%;\n overflow-y: scroll;\n overflow-x: hidden;\n color: var(--text-color);\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%); */\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%);\n}\n#app {\n height: 100%;\n width: 100%;\n}\n.first-gesture {\n background: rgba(200, 0, 0, 0.2);\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n/* Main + Section Partition*/\n.main-body {\n height: 100%;\n width: 100%;\n padding: 2rem;\n font-family: \"Yusei Magic\", sans-serif;\n display: flex;\n flex-direction: column;\n font-size: 1rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n/* Title */\n.main-body .top-title .title {\n font-size: 3rem;\n }\n.main-body .top-title .top-title-version {\n margin-left: 2rem;\n font-size: 1.2rem;\n background: linear-gradient(transparent 60%, yellow 30%);\n }\n.main-body .top-title .top-title-version-number {\n margin-left: 0.3rem;\n font-size: 0.8rem;\n }\n.main-body .top-title .belongings {\n margin-left: 1rem;\n margin-right: 1rem;\n }\n.main-body .top-title .belongings .link {\n margin-left: 1rem;\n font-weight: 700;\n text-decoration: underline;\n }\n/* Partition */\n.main-body .partition {\n width: 100%;\n }\n.main-body .partition .partition-header {\n font-weight: 700;\n color: rgb(71, 69, 69);\n display: flex;\n }\n.main-body .partition .partition-header .caret {\n width: 2rem;\n }\n.main-body .partition .partition-header .title {\n font-size: 1.1rem;\n }\n.main-body .partition .partition-header .belongings {\n font-weight: 400;\n font-size: 0.8rem;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n margin-left: 10px;\n }\n.main-body .partition .partition-header .belongings .belongings-checkbox {\n margin-bottom: 3px;\n }\n.main-body .partition .partition-content {\n position: static;\n overflow-y: hidden;\n }\n.main-body .partition .row-split {\n }\n.state-control-checkbox:checked + .partition .partition-content {\n max-height: 700px;\n background: rgba(255, 255, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n.state-control-checkbox + .partition .partition-content {\n max-height: 0px;\n background: rgba(233, 233, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n/* ROW */\n\n.split-8-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-8-2 > div:nth-child(1) {\n left: 0px;\n width: 80%;\n }\n\n.split-8-2 > div:nth-child(2) {\n left: 80%;\n width: 20%;\n }\n.split-6-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-6-4 > div:nth-child(1) {\n left: 0px;\n width: 60%;\n }\n.split-6-4 > div:nth-child(2) {\n left: 60%;\n width: 40%;\n }\n.split-5-5 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-5-5 > div:nth-child(1) {\n left: 0px;\n width: 50%;\n }\n.split-5-5 > div:nth-child(2) {\n left: 50%;\n width: 50%;\n }\n.split-4-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-6 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-6 > div:nth-child(2) {\n left: 40%;\n width: 60%;\n }\n.split-3-7 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-7 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-7 > div:nth-child(2) {\n left: 30%;\n width: 70%;\n }\n\n.split-2-8 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-2-8 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n\n.split-2-8 > div:nth-child(2) {\n left: 20%;\n width: 80%;\n }\n\n.split-1-8-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-1-8-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n\n.split-1-8-1 > div:nth-child(2) {\n left: 10%;\n width: 80%;\n }\n\n.split-1-8-1 > div:nth-child(3) {\n left: 90%;\n width: 10%;\n }\n.split-2-2-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-2-6 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(2) {\n left: 20%;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(3) {\n left: 40%;\n width: 60%;\n }\n.split-3-3-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-3-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(2) {\n left: 30%;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(3) {\n left: 60%;\n width: 40%;\n }\n\n.split-3-4-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-4-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-4-3 > div:nth-child(2) {\n left: 30%;\n width: 40%;\n }\n\n.split-3-4-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-2-5-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-5-3 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-5-3 > div:nth-child(2) {\n left: 20%;\n width: 50%;\n }\n.split-2-5-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-4-4-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-4-2 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(2) {\n left: 40%;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(3) {\n left: 80%;\n width: 20%;\n }\n.split-1-4-4-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-1-4-4-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n.split-1-4-4-1 > div:nth-child(2) {\n left: 10%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(3) {\n left: 50%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(4) {\n left: 90%;\n width: 10%;\n }\n\n.split-3-2-2-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-2-2-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-2-2-3 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(4) {\n left: 70%;\n width: 30%;\n }\n.split-3-2-3-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-3-2 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-3-2 > div:nth-child(3) {\n left: 50%;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(4) {\n left: 80%;\n width: 20%;\n }\n.split-3-1-2-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-2-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-2-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-2-4 > div:nth-child(3) {\n left: 40%;\n width: 20%;\n }\n.split-3-1-2-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-1-4 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-1-4 > div:nth-child(3) {\n left: 50%;\n width: 10%;\n }\n.split-3-2-1-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-2-2-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-2-2-1 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-2-2-1 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(4) {\n left: 70%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(5) {\n left: 90%;\n width: 10%;\n }\n.split-3-1-1-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-1-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-1-1-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(3) {\n left: 40%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(4) {\n left: 50%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(5) {\n left: 60%;\n width: 40%;\n }\n.w20 {\n width: 20%;\n}\n.bold {\n font-weight: 700;\n}\n.w40 {\n width: 40%;\n}\n\n.underline {\n border-bottom: 3px solid #333;\n}\n.left-padding-05 {\n padding-left: 0.5rem;\n}\n.left-padding-1 {\n padding-left: 1rem;\n}\n.left-padding-2 {\n padding-left: 2rem;\n}\n.left-margin-1 {\n margin-left: 1rem;\n}\n.left-margin-2 {\n margin-left: 2rem;\n}\n.highlight {\n background-color: rgba(200, 200, 255, 0.3);\n}\n.guided {\n /* background-color: rgba(9, 133, 67, 0.3); */\n background-color: rgba(159, 165, 162, 0.1);\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\n}\n\n.divider {\n height: 0.8rem;\n /* background-color: rgba(16, 210, 113, 0.1); */\n background-color: rgba(31, 42, 36, 0.1);\n}\n\n.body-section-title {\n font-size: 1.5rem;\n color: rgb(51, 49, 49);\n}\n.body-sub-section-title {\n font-size: 1.1rem;\n font-weight: 700;\n color: rgb(3, 53, 12);\n}\n\n.body-item-title {\n color: rgb(51, 99, 49);\n display: flex;\n}\n.body-item-text {\n color: rgb(30, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.body-item-text .body-item-text-item {\n padding-left: 1rem;\n }\n.body-item-text-small {\n color: rgb(30, 30, 30);\n font-size: 0.7rem;\n}\n.body-item-text-em {\n color: rgb(250, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 700;\n}\n\n.body-input-container {\n display: flex;\n}\n.body-item-input {\n width: 60%;\n}\n.body-item-input-slider {\n width: 60%;\n}\n.body-item-input-slider-label {\n margin-right: 1rem;\n}\n.body-item-input-slider-val {\n margin-left: 1rem;\n}\n.body-item-input-slider-2nd {\n width: 60%;\n accent-color: #33f;\n}\n\n.body-button-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.body-button-container > div {\n margin-left: 5px;\n margin-right: 5px;\n padding-left: 20px;\n padding-right: 20px;\n }\n\n.body-button-container .body-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n }\n\n.body-button-container .body-button:hover {\n border: solid 1px #000;\n }\n\n.body-button-container .body-button-disabled {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\n\n.body-button-container .body-button-active {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\n\n.body-button-container .body-button-stanby {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\n\n.body-button-container .body-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.body-button-container-space-around {\n justify-content: space-around;\n}\n\n.body-select {\n color: rgb(30, 30, 30);\n max-width: 100%;\n}\n\n.body-select-50 {\n color: rgb(30, 30, 30);\n max-width: 50%;\n height: 1.5rem;\n}\n.select-option-red {\n color: #f66;\n font-weight: 700;\n}\n\n.body-image-container,\n.body-wav-container {\n display: flex;\n width: 100%;\n}\n\n.body-image-container .body-image-container-title,\n .body-image-container .body-wav-container-title,\n .body-wav-container .body-image-container-title,\n .body-wav-container .body-wav-container-title {\n width: 20%;\n }\n\n.body-image-container .body-image-container-img,\n .body-image-container .body-wav-container-wav,\n .body-wav-container .body-image-container-img,\n .body-wav-container .body-wav-container-wav {\n width: 80%;\n }\n\n.donate-img {\n border-radius: 35px;\n height: 1.5rem;\n}\n\n/* Dialog */\n.dialog-container,\n.dialog-container2 {\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100vw;\n height: 100vh;\n z-index: -1;\n display: none;\n}\n.dialog-container .dialog-frame, .dialog-container2 .dialog-frame {\n color: var(--company-color2);\n width: 40rem;\n max-height: 80vh;\n border: 2px solid var(--dialog-border-color);\n border-radius: 20px;\n flex-direction: column;\n align-items: center;\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\n background: var(--dialog-background-color);\n overflow: hidden;\n display: flex;\n }\n.dialog-container .dialog-frame .dialog-title, .dialog-container2 .dialog-frame .dialog-title {\n margin-top: 20px;\n background: var(--company-color2);\n color: #fff;\n width: 100%;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content, .dialog-container2 .dialog-frame .dialog-content {\n width: 90%;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-application-title, .dialog-container2 .dialog-frame .dialog-content .dialog-application-title {\n font-family: \"Chicle\", cursive;\n font-size: 3rem;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-content-part, .dialog-container2 .dialog-frame .dialog-content .dialog-content-part {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n.dialog-container .dialog-frame .dialog-content .input-text-container, .dialog-container2 .dialog-frame .dialog-content .input-text-container {\n display: flex;\n flex-direction: row;\n margin: 20px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content, .dialog-container2 .dialog-frame .dialog-fixed-size-content {\n width: 90%;\n max-height: 70vh;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header {\n font-weight: 700;\n margin: 5px 5px 5px 5px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button {\n font-weight: 400;\n font-size: 0.8rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 5px 1px 5px;\n margin-left: 1rem;\n }\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 {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container {\n max-height: 60vh;\n width: 100%;\n overflow-y: scroll;\n }\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 {\n height: 5rem;\n display: flex;\n flex-direction: row;\n }\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 {\n width: 5rem;\n height: 5rem;\n }\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 {\n width: 5rem;\n height: 5rem;\n cursor: pointer;\n }\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 {\n display: flex;\n flex-direction: column;\n font-size: 0.8rem;\n border-bottom: solid 1px #aaa;\n width: 80%;\n overflow-y: scroll;\n }\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 {\n width: 10px;\n height: 10px;\n }\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 {\n background-color: #eee;\n border-radius: 3px;\n }\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 {\n background: #f7cfec80;\n border-radius: 3px;\n }\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 {\n display: flex;\n flex-direction: row;\n }\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 {\n width: 20%;\n white-space: nowrap;\n }\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 {\n width: 55%;\n white-space: nowrap;\n }\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 {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\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 {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\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 {\n width: 55%;\n font-weight: 700;\n color: #f00;\n white-space: nowrap;\n }\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 {\n width: 15%;\n height: 90%;\n }\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 {\n display: flex;\n flex-direction: column;\n border-bottom: solid 1px #a00;\n width: 20%;\n font-size: 0.8rem;\n padding: 4px;\n }\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 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\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 {\n border: solid 1px #000;\n }\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 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\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 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\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 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\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 {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-title,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-title {\n font-size: 1rem;\n padding-left: 0.5rem;\n }\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 {\n font-size: 0.9rem;\n padding-left: 1rem;\n }\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 {\n display: flex;\n flex-direction: row;\n margin: 0.2rem;\n }\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 {\n width: 5rem;\n }\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 {\n width: 20rem;\n color: #f00;\n white-space: nowrap;\n }\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 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\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 {\n border: solid 1px #000;\n }\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 {\n display: flex;\n flex-direction: row;\n margin-top: 1rem;\n margin-bottom: 0.5rem;\n justify-content: center;\n }\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 {\n /* width: 12rem; */\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 10px 1px 10px;\n }\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 {\n border: solid 1px #000;\n }\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 {\n display: flex;\n flex-direction: row;\n }\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 {\n }\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 {\n display: flex;\n flex-direction: row;\n margin: 0px 0px 0px 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label {\n margin: 0px 0px 0px 0.5rem;\n }\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 {\n margin: 0px 0px 0px 0.5rem;\n display: flex;\n flex-direction: row;\n }\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 {\n margin: 0px 0.5rem 0px 0.5rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 0px 10px 0px 10px;\n }\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 {\n border: solid 1px #000;\n }\n.dialog-container-show {\n display: flex;\n}\n\n.state-control-checkbox:checked ~ .dialog-container {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n}\n\n@keyframes dialog-hide {\n from {\n opacity: 1;\n z-index: 200;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 200;\n }\n to {\n opacity: 1;\n z-index: 200;\n }\n}\n\n.state-control-checkbox:checked ~ .dialog-container2 {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container2 {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n/* .state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n} */\n\n@keyframes dialog-hide2 {\n from {\n opacity: 1;\n z-index: 400;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show2 {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 400;\n }\n to {\n opacity: 1;\n z-index: 400;\n }\n}\n\n.tooltip-text {\n display: none;\n position: absolute;\n padding: 4px;\n font-size: 0.7rem;\n line-height: 2rem;\n color: #ddd;\n border-radius: 5px;\n background: #444;\n /* width: 100px; */\n}\n.tooltip-text-100px {\n width: 100px;\n}\n.tooltip-text-thin {\n line-height: 1rem;\n}\n.tooltip-text-right {\n line-height: 1rem;\n}\n.tooltip-text:before {\n content: \"\";\n position: absolute;\n top: -1.4rem;\n border: 12px solid transparent;\n border-top: 16px solid #444;\n margin-left: 0rem;\n transform: rotateZ(180deg);\n}\n.tooltip:hover .tooltip-text {\n display: inline-block;\n top: 30px;\n left: 0px;\n}\n.tooltip:hover .tooltip-text-lower {\n display: inline-block;\n top: 60px;\n left: 0px;\n}\n\n.tooltip {\n position: relative;\n cursor: pointer;\n display: inline-block;\n}\n\n/* ################## */\n.merge-field-container {\n display: flex;\n flex-direction: column;\n}\n.merge-field-container .merge-field {\n display: flex;\n flex-direction: row;\n }\n.merge-field-container .merge-field .merge-field-elem {\n padding-left: 5px;\n }\n.merge-field-container .merge-field .red {\n color: #f00;\n }\n.merge-field-container .merge-field .purple {\n color: #33f;\n }\n.merge-field-container .merge-field .grey-bold {\n color: #555;\n font-weight: 800;\n }\n.model-slot-area {\n display: inline-block;\n background: var(--company-color2);\n border-radius: 10px;\n padding: 20px;\n}\n.model-slot-area .model-slot-panel {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-tiles-container {\n display: flex;\n flex-direction: row;\n gap: 2px;\n flex-wrap: wrap;\n /* width: calc(30rem + 40px + 10px); */\n }\n.model-slot-area .model-slot-panel .model-slot-buttons {\n display: flex;\n flex-direction: column-reverse;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #333;\n cursor: pointer;\n padding: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button:hover {\n border: solid 2px #faa;\n }\n.model-slot-tile-container,\n.model-slot-tile-container-selected {\n width: 6rem;\n height: 6rem;\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.model-slot-tile-container-selected {\n background: #43030c;\n}\n.model-slot-tile-container:hover {\n background: #43030c;\n}\n\n.model-slot-tile-icon-div {\n width: 5rem;\n height: 5rem;\n padding-top: 4px;\n position: relative;\n}\n.model-slot-tile-icon {\n width: 5rem;\n height: 5rem;\n -o-object-fit: contain;\n object-fit: contain;\n border-radius: 10px;\n position: absolute;\n}\n.model-slot-tile-vctype {\n position: absolute;\n font-size: 0.6rem;\n font-weight: 800;\n top: 5px;\n left: 2px;\n background: RGBA(10, 200, 100, 0.6);\n border-radius: 5px;\n padding: 0px 2px 0px 2px;\n}\n.model-slot-tile-icon-no-entry {\n color: gray;\n position: absolute;\n top: 2rem;\n}\n.model-slot-tile-dscription {\n font-size: 0.7rem;\n font-weight: 700;\n color: navajowhite;\n padding-top: 4px;\n}\n\n.character-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.character-area .portrait-area {\n width: 20rem;\n height: 20rem;\n }\n\n.character-area .portrait-area .portrait-container {\n position: relative;\n width: 20rem;\n height: 20rem;\n }\n\n.character-area .portrait-area .portrait-container .portrait {\n width: 20rem;\n height: 20rem;\n -o-object-fit: contain;\n object-fit: contain;\n border-radius: 10px;\n position: absolute;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-status {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n padding: 0px 0px 0px 3px;\n font-size: 0.7rem;\n left: 5px;\n top: 5px;\n border-radius: 2px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-status .portrait-area-status-vctype {\n font-weight: 800;\n color: #866;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n paddig: 2px;\n font-size: 0.7rem;\n right: 5px;\n bottom: 5px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use .portrait-area-terms-of-use-link {\n color: white;\n }\n\n.character-area .character-area-control-area {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control {\n display: flex;\n gap: 3px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-active {\n width: 5rem;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby {\n width: 5rem;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-title {\n width: 4rem;\n font-weight: 700;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field {\n /* width: 20rem; */\n display: flex;\n flex-direction: column;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-kind {\n width: 2rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-slider {\n width: 10rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-val {\n width: 3rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-text {\n padding: 0px 1px 0px 1px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button:hover {\n border: solid 2px #faa;\n }\n\n/* audio::-webkit-media-controls-play-button,\naudio::-webkit-media-controls-panel {\n background-color: #ff0;\n height: 1rem;\n}\naudio::-webkit-media-controls-enclosure {\n max-height: 1rem;\n}\naudio::-webkit-media-controls {\n justify-content: start;\n}\naudio::-webkit-media-controls-overlay-enclosure{\n height: 1rem;\n} */\n\n.config-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.config-area .config-sub-area {\n display: flex;\n flex-direction: column;\n gap: 3px;\n }\n\n.config-area .config-sub-area .config-sub-area-control {\n display: flex;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title {\n width: 5rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title-long {\n width: 20rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field {\n width: 15rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container {\n display: flex;\n gap: 10px;\n }\n\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 {\n display: flex;\n gap: 5px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\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 {\n width: 1rem;\n }\n\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 {\n width: 10rem;\n }\n\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 {\n width: 3rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button {\n border: solid 2px #999;\n color: white;\n background: #666;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button:hover {\n border: solid 2px #faa;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button-active {\n border: solid 2px #999;\n color: white;\n background: #844;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io {\n display: flex;\n flex-direction: row;\n }\n\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 {\n max-width: 30%;\n }\n\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 {\n max-width: 70%;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\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 {\n height: 1rem;\n }\n\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 {\n height: 1rem;\n width: 15rem;\n }\n\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 {\n height: 1rem;\n width: 1rem;\n cursor: pointer;\n }\n\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 {\n border: solid 1px #333;\n background: #fff;\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\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 {\n font-size: 0.8rem;\n border: solid 1px #333;\n border-radius: 5px;\n background: #ada;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\n.headerArea {\n display: flex;\n flex-direction: column;\n}\n\n.headerArea .title1 {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: flex-end;\n }\n\n.headerArea .title1 .title {\n font-size: 1.8rem;\n font-weight: 700;\n color: #333;\n text-shadow: 0 0 2px #333;\n }\n\n.headerArea .title1 .title-version {\n font-size: 0.9rem;\n }\n\n.headerArea .title1 .title-version-number {\n font-size: 0.7rem;\n }\n\n.headerArea .icons {\n display: flex;\n flex-direction: row;\n gap: 20px;\n }\n\n.headerArea .icons .belongings {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\n.headerArea .icons .belongings .belongings-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n top: -2px;\n }\n\n.headerArea .icons .belongings .belongings-button:hover {\n border: solid 2px #cc6;\n }\n\n.advanced-setting-container {\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin: 10px;\n}\n\n.advanced-setting-container .advanced-setting-container-row {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-title {\n width: 7rem;\n font-weight: 700;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field {\n width: 15rem;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container {\n display: flex;\n flex-direction: row;\n gap: 5px;\n width: 10rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\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) {\n color: #333;\n }\n\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) {\n }\n\n.merge-lab-container {\n display: flex;\n flex-direction: column;\n margin: 10px;\n gap: 10px;\n}\n\n.merge-lab-container .merge-lab-type-filter {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-type-filter > div:nth-child(1) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-type-filter > div:nth-child(2) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list {\n width: 70%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(1) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(2) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons {\n display: flex;\n flex-direction: column-reverse;\n width: 30%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button {\n border: solid 2px #ddd;\n color: black;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #eee;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n text-align: center;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button:hover {\n border: solid 2px #aaa;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-buttons-notice {\n font-size: 0.7rem;\n font-weight: 700;\n color: #333;\n text-align: center;\n }\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 {\n --text-color: #333;\n --company-color1: rgba(64, 119, 187, 1);\n --company-color2: rgba(29, 47, 78, 1);\n --company-color3: rgba(255, 255, 255, 1);\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\n --global-shadow-color: rgba(0, 0, 0, 0.4);\n\n --sidebar-transition-time: 0.2s;\n --sidebar-transition-time-quick: 0.1s;\n --sidebar-transition-animation: ease-in-out;\n\n --header-height: 1.5rem;\n --right-sidebar-width: 320px;\n\n --dialog-border-color: rgba(100, 100, 100, 1);\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\n --dialog-background-color: rgba(255, 255, 255, 1);\n --dialog-primary-color: rgba(19, 70, 209, 1);\n --dialog-active-color: rgba(40, 70, 209, 1);\n --dialog-input-border-color: rgba(200, 200, 200, 1);\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\n\n --body-video-seeker-height: 3rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Poppins\", sans-serif;\n}\nhtml {\n font-size: 16px;\n}\nbody {\n height: 100%;\n width: 100%;\n overflow-y: scroll;\n overflow-x: hidden;\n color: var(--text-color);\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%); */\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%);\n}\n#app {\n height: 100%;\n width: 100%;\n}\n.first-gesture {\n background: rgba(200, 0, 0, 0.2);\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n/* Main + Section Partition*/\n.main-body {\n height: 100%;\n width: 100%;\n padding: 2rem;\n font-family: \"Yusei Magic\", sans-serif;\n display: flex;\n flex-direction: column;\n font-size: 1rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n/* Title */\n.main-body .top-title .title {\n font-size: 3rem;\n }\n.main-body .top-title .top-title-version {\n margin-left: 2rem;\n font-size: 1.2rem;\n background: linear-gradient(transparent 60%, yellow 30%);\n }\n.main-body .top-title .top-title-version-number {\n margin-left: 0.3rem;\n font-size: 0.8rem;\n }\n.main-body .top-title .belongings {\n margin-left: 1rem;\n margin-right: 1rem;\n }\n.main-body .top-title .belongings .link {\n margin-left: 1rem;\n font-weight: 700;\n text-decoration: underline;\n }\n/* Partition */\n.main-body .partition {\n width: 100%;\n }\n.main-body .partition .partition-header {\n font-weight: 700;\n color: rgb(71, 69, 69);\n display: flex;\n }\n.main-body .partition .partition-header .caret {\n width: 2rem;\n }\n.main-body .partition .partition-header .title {\n font-size: 1.1rem;\n }\n.main-body .partition .partition-header .belongings {\n font-weight: 400;\n font-size: 0.8rem;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n margin-left: 10px;\n }\n.main-body .partition .partition-header .belongings .belongings-checkbox {\n margin-bottom: 3px;\n }\n.main-body .partition .partition-content {\n position: static;\n overflow-y: hidden;\n }\n.main-body .partition .row-split {\n }\n.state-control-checkbox:checked + .partition .partition-content {\n max-height: 700px;\n background: rgba(255, 255, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n.state-control-checkbox + .partition .partition-content {\n max-height: 0px;\n background: rgba(233, 233, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n/* ROW */\n\n.split-8-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-8-2 > div:nth-child(1) {\n left: 0px;\n width: 80%;\n }\n\n.split-8-2 > div:nth-child(2) {\n left: 80%;\n width: 20%;\n }\n.split-6-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-6-4 > div:nth-child(1) {\n left: 0px;\n width: 60%;\n }\n.split-6-4 > div:nth-child(2) {\n left: 60%;\n width: 40%;\n }\n.split-5-5 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-5-5 > div:nth-child(1) {\n left: 0px;\n width: 50%;\n }\n.split-5-5 > div:nth-child(2) {\n left: 50%;\n width: 50%;\n }\n.split-4-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-6 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-6 > div:nth-child(2) {\n left: 40%;\n width: 60%;\n }\n.split-3-7 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-7 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-7 > div:nth-child(2) {\n left: 30%;\n width: 70%;\n }\n\n.split-2-8 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-2-8 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n\n.split-2-8 > div:nth-child(2) {\n left: 20%;\n width: 80%;\n }\n\n.split-1-8-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-1-8-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n\n.split-1-8-1 > div:nth-child(2) {\n left: 10%;\n width: 80%;\n }\n\n.split-1-8-1 > div:nth-child(3) {\n left: 90%;\n width: 10%;\n }\n.split-2-2-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-2-6 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(2) {\n left: 20%;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(3) {\n left: 40%;\n width: 60%;\n }\n.split-3-3-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-3-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(2) {\n left: 30%;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(3) {\n left: 60%;\n width: 40%;\n }\n\n.split-3-4-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-4-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-4-3 > div:nth-child(2) {\n left: 30%;\n width: 40%;\n }\n\n.split-3-4-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-2-5-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-5-3 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-5-3 > div:nth-child(2) {\n left: 20%;\n width: 50%;\n }\n.split-2-5-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-4-4-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-4-2 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(2) {\n left: 40%;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(3) {\n left: 80%;\n width: 20%;\n }\n.split-1-4-4-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-1-4-4-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n.split-1-4-4-1 > div:nth-child(2) {\n left: 10%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(3) {\n left: 50%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(4) {\n left: 90%;\n width: 10%;\n }\n\n.split-3-2-2-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-2-2-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-2-2-3 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(4) {\n left: 70%;\n width: 30%;\n }\n.split-3-2-3-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-3-2 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-3-2 > div:nth-child(3) {\n left: 50%;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(4) {\n left: 80%;\n width: 20%;\n }\n.split-3-1-2-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-2-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-2-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-2-4 > div:nth-child(3) {\n left: 40%;\n width: 20%;\n }\n.split-3-1-2-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-1-4 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-1-4 > div:nth-child(3) {\n left: 50%;\n width: 10%;\n }\n.split-3-2-1-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-2-2-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-2-2-1 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-2-2-1 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(4) {\n left: 70%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(5) {\n left: 90%;\n width: 10%;\n }\n.split-3-1-1-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-1-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-1-1-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(3) {\n left: 40%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(4) {\n left: 50%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(5) {\n left: 60%;\n width: 40%;\n }\n.w20 {\n width: 20%;\n}\n.bold {\n font-weight: 700;\n}\n.w40 {\n width: 40%;\n}\n\n.underline {\n border-bottom: 3px solid #333;\n}\n.left-padding-05 {\n padding-left: 0.5rem;\n}\n.left-padding-1 {\n padding-left: 1rem;\n}\n.left-padding-2 {\n padding-left: 2rem;\n}\n.left-margin-1 {\n margin-left: 1rem;\n}\n.left-margin-2 {\n margin-left: 2rem;\n}\n.highlight {\n background-color: rgba(200, 200, 255, 0.3);\n}\n.guided {\n /* background-color: rgba(9, 133, 67, 0.3); */\n background-color: rgba(159, 165, 162, 0.1);\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\n}\n\n.divider {\n height: 0.8rem;\n /* background-color: rgba(16, 210, 113, 0.1); */\n background-color: rgba(31, 42, 36, 0.1);\n}\n\n.body-section-title {\n font-size: 1.5rem;\n color: rgb(51, 49, 49);\n}\n.body-sub-section-title {\n font-size: 1.1rem;\n font-weight: 700;\n color: rgb(3, 53, 12);\n}\n\n.body-item-title {\n color: rgb(51, 99, 49);\n display: flex;\n}\n.body-item-text {\n color: rgb(30, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.body-item-text .body-item-text-item {\n padding-left: 1rem;\n }\n.body-item-text-small {\n color: rgb(30, 30, 30);\n font-size: 0.7rem;\n}\n.body-item-text-em {\n color: rgb(250, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 700;\n}\n\n.body-input-container {\n display: flex;\n}\n.body-item-input {\n width: 60%;\n}\n.body-item-input-slider {\n width: 60%;\n}\n.body-item-input-slider-label {\n margin-right: 1rem;\n}\n.body-item-input-slider-val {\n margin-left: 1rem;\n}\n.body-item-input-slider-2nd {\n width: 60%;\n accent-color: #33f;\n}\n\n.body-button-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.body-button-container > div {\n margin-left: 5px;\n margin-right: 5px;\n padding-left: 20px;\n padding-right: 20px;\n }\n\n.body-button-container .body-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n }\n\n.body-button-container .body-button:hover {\n border: solid 1px #000;\n }\n\n.body-button-container .body-button-disabled {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\n\n.body-button-container .body-button-active {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\n\n.body-button-container .body-button-stanby {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\n\n.body-button-container .body-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.body-button-container-space-around {\n justify-content: space-around;\n}\n\n.body-select {\n color: rgb(30, 30, 30);\n max-width: 100%;\n}\n\n.body-select-50 {\n color: rgb(30, 30, 30);\n max-width: 50%;\n height: 1.5rem;\n}\n.select-option-red {\n color: #f66;\n font-weight: 700;\n}\n\n.body-image-container,\n.body-wav-container {\n display: flex;\n width: 100%;\n}\n\n.body-image-container .body-image-container-title,\n .body-image-container .body-wav-container-title,\n .body-wav-container .body-image-container-title,\n .body-wav-container .body-wav-container-title {\n width: 20%;\n }\n\n.body-image-container .body-image-container-img,\n .body-image-container .body-wav-container-wav,\n .body-wav-container .body-image-container-img,\n .body-wav-container .body-wav-container-wav {\n width: 80%;\n }\n\n.donate-img {\n border-radius: 35px;\n height: 1.5rem;\n}\n\n/* Dialog */\n.dialog-container,\n.dialog-container2 {\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100vw;\n height: 100vh;\n z-index: -1;\n display: none;\n}\n.dialog-container .dialog-frame, .dialog-container2 .dialog-frame {\n color: var(--company-color2);\n width: 40rem;\n max-height: 80vh;\n border: 2px solid var(--dialog-border-color);\n border-radius: 20px;\n flex-direction: column;\n align-items: center;\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\n background: var(--dialog-background-color);\n overflow: hidden;\n display: flex;\n }\n.dialog-container .dialog-frame .dialog-title, .dialog-container2 .dialog-frame .dialog-title {\n margin-top: 20px;\n background: var(--company-color2);\n color: #fff;\n width: 100%;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content, .dialog-container2 .dialog-frame .dialog-content {\n width: 90%;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-application-title, .dialog-container2 .dialog-frame .dialog-content .dialog-application-title {\n font-family: \"Chicle\", cursive;\n font-size: 3rem;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-content-part, .dialog-container2 .dialog-frame .dialog-content .dialog-content-part {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n.dialog-container .dialog-frame .dialog-content .input-text-container, .dialog-container2 .dialog-frame .dialog-content .input-text-container {\n display: flex;\n flex-direction: row;\n margin: 20px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content, .dialog-container2 .dialog-frame .dialog-fixed-size-content {\n width: 90%;\n max-height: 70vh;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header {\n font-weight: 700;\n margin: 5px 5px 5px 5px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button {\n font-weight: 400;\n font-size: 0.8rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 5px 1px 5px;\n margin-left: 1rem;\n }\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 {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container {\n max-height: 60vh;\n width: 100%;\n overflow-y: scroll;\n }\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 {\n height: 5rem;\n display: flex;\n flex-direction: row;\n }\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 {\n width: 5rem;\n height: 5rem;\n }\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 {\n width: 5rem;\n height: 5rem;\n cursor: pointer;\n }\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 {\n display: flex;\n flex-direction: column;\n font-size: 0.8rem;\n border-bottom: solid 1px #aaa;\n width: 80%;\n overflow-y: scroll;\n }\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 {\n width: 10px;\n height: 10px;\n }\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 {\n background-color: #eee;\n border-radius: 3px;\n }\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 {\n background: #f7cfec80;\n border-radius: 3px;\n }\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 {\n display: flex;\n flex-direction: row;\n }\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 {\n width: 20%;\n white-space: nowrap;\n }\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 {\n width: 55%;\n white-space: nowrap;\n }\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 {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\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 {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\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 {\n width: 55%;\n font-weight: 700;\n color: #f00;\n white-space: nowrap;\n }\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 {\n width: 15%;\n height: 90%;\n }\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 {\n display: flex;\n flex-direction: column;\n border-bottom: solid 1px #a00;\n width: 20%;\n font-size: 0.8rem;\n padding: 4px;\n }\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 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\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 {\n border: solid 1px #000;\n }\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 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\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 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\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 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\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 {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-title,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-title {\n font-size: 1rem;\n padding-left: 0.5rem;\n }\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 {\n font-size: 0.9rem;\n padding-left: 1rem;\n }\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 {\n display: flex;\n flex-direction: row;\n margin: 0.2rem;\n }\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 {\n width: 5rem;\n }\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 {\n width: 20rem;\n color: #f00;\n white-space: nowrap;\n }\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 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\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 {\n border: solid 1px #000;\n }\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 {\n display: flex;\n flex-direction: row;\n margin-top: 1rem;\n margin-bottom: 0.5rem;\n justify-content: center;\n }\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 {\n /* width: 12rem; */\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 10px 1px 10px;\n }\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 {\n border: solid 1px #000;\n }\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 {\n display: flex;\n flex-direction: row;\n }\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 {\n }\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 {\n display: flex;\n flex-direction: row;\n margin: 0px 0px 0px 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label {\n margin: 0px 0px 0px 0.5rem;\n }\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 {\n margin: 0px 0px 0px 0.5rem;\n display: flex;\n flex-direction: row;\n }\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 {\n margin: 0px 0.5rem 0px 0.5rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 0px 10px 0px 10px;\n }\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 {\n border: solid 1px #000;\n }\n.dialog-container-show {\n display: flex;\n}\n\n.state-control-checkbox:checked ~ .dialog-container {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n}\n\n@keyframes dialog-hide {\n from {\n opacity: 1;\n z-index: 200;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 200;\n }\n to {\n opacity: 1;\n z-index: 200;\n }\n}\n\n.state-control-checkbox:checked ~ .dialog-container2 {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container2 {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n/* .state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n} */\n\n@keyframes dialog-hide2 {\n from {\n opacity: 1;\n z-index: 400;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show2 {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 400;\n }\n to {\n opacity: 1;\n z-index: 400;\n }\n}\n\n.tooltip-text {\n display: none;\n position: absolute;\n padding: 4px;\n font-size: 0.7rem;\n line-height: 2rem;\n color: #ddd;\n border-radius: 5px;\n background: #444;\n /* width: 100px; */\n}\n.tooltip-text-100px {\n width: 100px;\n}\n.tooltip-text-thin {\n line-height: 1rem;\n}\n.tooltip-text-right {\n line-height: 1rem;\n}\n.tooltip-text:before {\n content: \"\";\n position: absolute;\n top: -1.4rem;\n border: 12px solid transparent;\n border-top: 16px solid #444;\n margin-left: 0rem;\n transform: rotateZ(180deg);\n}\n.tooltip:hover .tooltip-text {\n display: inline-block;\n top: 30px;\n left: 0px;\n}\n.tooltip:hover .tooltip-text-lower {\n display: inline-block;\n top: 60px;\n left: 0px;\n}\n\n.tooltip {\n position: relative;\n cursor: pointer;\n display: inline-block;\n}\n\n/* ################## */\n.merge-field-container {\n display: flex;\n flex-direction: column;\n}\n.merge-field-container .merge-field {\n display: flex;\n flex-direction: row;\n }\n.merge-field-container .merge-field .merge-field-elem {\n padding-left: 5px;\n }\n.merge-field-container .merge-field .red {\n color: #f00;\n }\n.merge-field-container .merge-field .purple {\n color: #33f;\n }\n.merge-field-container .merge-field .grey-bold {\n color: #555;\n font-weight: 800;\n }\n.model-slot-area {\n display: inline-block;\n background: var(--company-color2);\n border-radius: 10px;\n padding: 20px;\n}\n.model-slot-area .model-slot-panel {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-tiles-container {\n display: flex;\n flex-direction: row;\n gap: 2px;\n flex-wrap: wrap;\n /* width: calc(30rem + 40px + 10px); */\n }\n.model-slot-area .model-slot-panel .model-slot-buttons {\n display: flex;\n flex-direction: column-reverse;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #333;\n cursor: pointer;\n padding: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button:hover {\n border: solid 2px #faa;\n }\n.model-slot-tile-container,\n.model-slot-tile-container-selected {\n width: 6rem;\n height: 6rem;\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.model-slot-tile-container-selected {\n background: #43030c;\n}\n.model-slot-tile-container:hover {\n background: #43030c;\n}\n\n.model-slot-tile-icon-div {\n width: 5rem;\n height: 5rem;\n padding-top: 4px;\n position: relative;\n}\n.model-slot-tile-icon {\n width: 5rem;\n height: 5rem;\n -o-object-fit: contain;\n object-fit: contain;\n border-radius: 10px;\n position: absolute;\n}\n.model-slot-tile-vctype {\n position: absolute;\n font-size: 0.6rem;\n font-weight: 800;\n top: 5px;\n left: 2px;\n background: RGBA(10, 200, 100, 0.6);\n border-radius: 5px;\n padding: 0px 2px 0px 2px;\n}\n.model-slot-tile-icon-no-entry {\n color: gray;\n position: absolute;\n top: 2rem;\n}\n.model-slot-tile-dscription {\n font-size: 0.7rem;\n font-weight: 700;\n color: navajowhite;\n padding-top: 4px;\n}\n\n.character-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.character-area .portrait-area {\n width: 20rem;\n height: 20rem;\n }\n\n.character-area .portrait-area .portrait-container {\n position: relative;\n width: 20rem;\n height: 20rem;\n }\n\n.character-area .portrait-area .portrait-container .portrait {\n width: 20rem;\n height: 20rem;\n -o-object-fit: contain;\n object-fit: contain;\n border-radius: 10px;\n position: absolute;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-status {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n padding: 0px 0px 0px 3px;\n font-size: 0.7rem;\n left: 5px;\n top: 5px;\n border-radius: 2px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-status .portrait-area-status-vctype {\n font-weight: 800;\n color: #866;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n paddig: 2px;\n font-size: 0.7rem;\n right: 5px;\n bottom: 5px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use .portrait-area-terms-of-use-link {\n color: white;\n }\n\n.character-area .character-area-control-area {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control {\n display: flex;\n gap: 3px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-active {\n width: 5rem;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby {\n width: 5rem;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-title {\n width: 4rem;\n font-weight: 700;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field {\n /* width: 20rem; */\n display: flex;\n flex-direction: column;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-kind {\n width: 2rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-slider {\n width: 10rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-val {\n width: 3rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-text {\n padding: 0px 1px 0px 1px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button:hover {\n border: solid 2px #faa;\n }\n\n/* audio::-webkit-media-controls-play-button,\naudio::-webkit-media-controls-panel {\n background-color: #ff0;\n height: 1rem;\n}\naudio::-webkit-media-controls-enclosure {\n max-height: 1rem;\n}\naudio::-webkit-media-controls {\n justify-content: start;\n}\naudio::-webkit-media-controls-overlay-enclosure{\n height: 1rem;\n} */\n\n.config-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.config-area .config-sub-area {\n display: flex;\n flex-direction: column;\n gap: 3px;\n }\n\n.config-area .config-sub-area .config-sub-area-control {\n display: flex;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title {\n width: 5rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title-long {\n width: 20rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field {\n width: 15rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container {\n display: flex;\n gap: 10px;\n }\n\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 {\n display: flex;\n gap: 5px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\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 {\n width: 1rem;\n }\n\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 {\n width: 10rem;\n }\n\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 {\n width: 3rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button {\n border: solid 2px #999;\n color: white;\n background: #666;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button:hover {\n border: solid 2px #faa;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button-active {\n border: solid 2px #999;\n color: white;\n background: #844;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io {\n display: flex;\n flex-direction: row;\n }\n\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 {\n max-width: 30%;\n }\n\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 {\n max-width: 70%;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\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 {\n height: 1rem;\n }\n\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 {\n height: 1rem;\n width: 15rem;\n }\n\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 {\n height: 1rem;\n width: 1rem;\n cursor: pointer;\n }\n\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 {\n border: solid 1px #333;\n background: #fff;\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\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 {\n font-size: 0.8rem;\n border: solid 1px #333;\n border-radius: 5px;\n background: #ada;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field-long {\n width: 30rem;\n }\n\n.headerArea {\n display: flex;\n flex-direction: column;\n}\n\n.headerArea .title1 {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: flex-end;\n }\n\n.headerArea .title1 .title {\n font-size: 1.8rem;\n font-weight: 700;\n color: #333;\n text-shadow: 0 0 2px #333;\n }\n\n.headerArea .title1 .title-version {\n font-size: 0.9rem;\n }\n\n.headerArea .title1 .title-version-number {\n font-size: 0.7rem;\n }\n\n.headerArea .icons {\n display: flex;\n flex-direction: row;\n gap: 20px;\n }\n\n.headerArea .icons .belongings {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\n.headerArea .icons .belongings .belongings-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n top: -2px;\n }\n\n.headerArea .icons .belongings .belongings-button:hover {\n border: solid 2px #cc6;\n }\n\n.advanced-setting-container {\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin: 10px;\n}\n\n.advanced-setting-container .advanced-setting-container-row {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-title {\n width: 7rem;\n font-weight: 700;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field {\n width: 15rem;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container {\n display: flex;\n flex-direction: row;\n gap: 5px;\n width: 10rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\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) {\n color: #333;\n }\n\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) {\n }\n.get-server-information-container {\n margin: 10px;\n}\n.get-server-information-container .get-server-information-text-area {\n width: 100%;\n height: 20rem;\n }\n.merge-lab-container {\n display: flex;\n flex-direction: column;\n margin: 10px;\n gap: 10px;\n}\n.merge-lab-container .merge-lab-type-filter {\n display: flex;\n flex-direction: row;\n }\n.merge-lab-container .merge-lab-type-filter > div:nth-child(1) {\n width: 50%;\n }\n.merge-lab-container .merge-lab-type-filter > div:nth-child(2) {\n width: 50%;\n }\n.merge-lab-container .merge-lab-manipulator {\n display: flex;\n flex-direction: row;\n }\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list {\n width: 70%;\n }\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item {\n display: flex;\n flex-direction: row;\n }\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(1) {\n width: 50%;\n }\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(2) {\n width: 50%;\n }\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons {\n display: flex;\n flex-direction: column-reverse;\n width: 30%;\n }\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button {\n border: solid 2px #ddd;\n color: black;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #eee;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n text-align: center;\n }\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button:hover {\n border: solid 2px #aaa;\n }\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-buttons-notice {\n font-size: 0.7rem;\n font-weight: 700;\n color: #333;\n text-align: center;\n }\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"); /***/ }), diff --git a/client/demo/src/components/demo/001_GuiStateProvider.tsx b/client/demo/src/components/demo/001_GuiStateProvider.tsx index 7dfb40d3..d0e870f8 100644 --- a/client/demo/src/components/demo/001_GuiStateProvider.tsx +++ b/client/demo/src/components/demo/001_GuiStateProvider.tsx @@ -18,6 +18,7 @@ export const OpenStartingNoticeDialogCheckbox = "open-starting-notice-dialog-che export const OpenModelSlotManagerDialogCheckbox = "open-model-slot-manager-dialog-checkbox" export const OpenMergeLabDialogCheckbox = "open-merge-lab-dialog-checkbox" export const OpenAdvancedSettingDialogCheckbox = "open-advanced-setting-dialog-checkbox" +export const OpenGetServerInformationDialogCheckbox = "open-get-server-information-dialog-checkbox" export const OpenTextInputDialogCheckbox = "open-text-input-dialog-checkbox" type Props = { @@ -40,7 +41,7 @@ export type StateControls = { showMergeLabCheckbox: StateControlCheckbox showAdvancedSettingCheckbox: StateControlCheckbox - + showGetServerInformationCheckbox: StateControlCheckbox showTextInputCheckbox: StateControlCheckbox } @@ -169,6 +170,8 @@ export const GuiStateProvider = ({ children }: Props) => { const showModelSlotManagerCheckbox = useStateControlCheckbox(OpenModelSlotManagerDialogCheckbox); const showMergeLabCheckbox = useStateControlCheckbox(OpenMergeLabDialogCheckbox); const showAdvancedSettingCheckbox = useStateControlCheckbox(OpenAdvancedSettingDialogCheckbox); + const showGetServerInformationCheckbox = useStateControlCheckbox(OpenGetServerInformationDialogCheckbox); + const showTextInputCheckbox = useStateControlCheckbox(OpenTextInputDialogCheckbox); @@ -192,6 +195,7 @@ export const GuiStateProvider = ({ children }: Props) => { showModelSlotManagerCheckbox.updateState(false) showMergeLabCheckbox.updateState(false) showAdvancedSettingCheckbox.updateState(false) + showGetServerInformationCheckbox.updateState(false) showTextInputCheckbox.updateState(false) @@ -232,6 +236,7 @@ export const GuiStateProvider = ({ children }: Props) => { showMergeLabCheckbox, showAdvancedSettingCheckbox, + showGetServerInformationCheckbox, showTextInputCheckbox diff --git a/client/demo/src/components/demo/900_Dialogs.tsx b/client/demo/src/components/demo/900_Dialogs.tsx index 1cbff741..c49fe893 100644 --- a/client/demo/src/components/demo/900_Dialogs.tsx +++ b/client/demo/src/components/demo/900_Dialogs.tsx @@ -5,6 +5,7 @@ import { StartingNoticeDialog } from "./903_StartingNoticeDialog"; import { ModelSlotManagerDialog } from "./904_ModelSlotManagerDialog"; import { MergeLabDialog } from "./905_MergeLabDialog"; import { AdvancedSettingDialog } from "./906_AdvancedSettingDialog"; +import { GetServerInfomationDialog } from "./907_GetServerInfomationDialog"; export const Dialogs = () => { const guiState = useGuiState() @@ -15,6 +16,7 @@ export const Dialogs = () => { {guiState.stateControls.showModelSlotManagerCheckbox.trigger} {guiState.stateControls.showMergeLabCheckbox.trigger} {guiState.stateControls.showAdvancedSettingCheckbox.trigger} + {guiState.stateControls.showGetServerInformationCheckbox.trigger}
{guiState.stateControls.showWaitingCheckbox.trigger} @@ -26,6 +28,8 @@ export const Dialogs = () => { {guiState.stateControls.showAdvancedSettingCheckbox.trigger} + {guiState.stateControls.showGetServerInformationCheckbox.trigger} +
diff --git a/client/demo/src/components/demo/907_GetServerInfomationDialog.tsx b/client/demo/src/components/demo/907_GetServerInfomationDialog.tsx new file mode 100644 index 00000000..89669bac --- /dev/null +++ b/client/demo/src/components/demo/907_GetServerInfomationDialog.tsx @@ -0,0 +1,37 @@ +import React, { useMemo } from "react"; +import { useGuiState } from "./001_GuiStateProvider"; +import { useAppState } from "../../001_provider/001_AppStateProvider"; + + +export const GetServerInfomationDialog = () => { + const guiState = useGuiState() + const { serverSetting } = useAppState() + const dialog = useMemo(() => { + const closeButtonRow = ( +
+
+
+
+
{ guiState.stateControls.showGetServerInformationCheckbox.updateState(false) }} >close
+
+
+
+ ) + const content = ( +
+