@whitesev/pops 3.2.1 → 3.3.0

package/dist/index.umd.js

@@ -181,272 +181,55 @@
      */
     const SymbolEvents = Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1));
 
-    const PopsCoreDefaultEnv = {
+    const OriginPrototype = {
+        Object: {
+            defineProperty: Object.defineProperty,
+        },
+    };
+    const PopsCoreDefaultApi = {
         document: document,
         window: window,
         globalThis: globalThis,
         self: self,
+        setTimeout: globalThis.setTimeout.bind(globalThis),
+        setInterval: globalThis.setInterval.bind(globalThis),
+        clearTimeout: globalThis.clearTimeout.bind(globalThis),
+        clearInterval: globalThis.clearInterval.bind(globalThis),
     };
-    const PopsCoreEnv = Object.assign({}, PopsCoreDefaultEnv);
+    const PopsCoreApi = Object.assign({}, PopsCoreDefaultApi);
     const PopsCore = {
+        init(option) {
+            if (!option) {
+                option = Object.assign({}, PopsCoreDefaultApi);
+            }
+            Object.assign(PopsCoreApi, option);
+        },
         get document() {
-            return PopsCoreEnv.document;
+            return PopsCoreApi.document;
         },
         get window() {
-            return PopsCoreEnv.window;
+            return PopsCoreApi.window;
         },
         get globalThis() {
-            return PopsCoreEnv.globalThis;
+            return PopsCoreApi.globalThis;
         },
         get self() {
-            return PopsCoreEnv.self;
+            return PopsCoreApi.self;
         },
-    };
-    const OriginPrototype = {
-        Object: {
-            defineProperty: Object.defineProperty,
+        get setTimeout() {
+            return PopsCoreApi.setTimeout;
         },
-    };
-
-    const createCache = (lastNumberWeakMap) => {
-        return (collection, nextNumber) => {
-            lastNumberWeakMap.set(collection, nextNumber);
-            return nextNumber;
-        };
-    };
-
-    /*
-     * The value of the constant Number.MAX_SAFE_INTEGER equals (2 ** 53 - 1) but it
-     * is fairly new.
-     */
-    const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER === undefined ? 9007199254740991 : Number.MAX_SAFE_INTEGER;
-    const TWO_TO_THE_POWER_OF_TWENTY_NINE = 536870912;
-    const TWO_TO_THE_POWER_OF_THIRTY = TWO_TO_THE_POWER_OF_TWENTY_NINE * 2;
-    const createGenerateUniqueNumber = (cache, lastNumberWeakMap) => {
-        return (collection) => {
-            const lastNumber = lastNumberWeakMap.get(collection);
-            /*
-             * Let's try the cheapest algorithm first. It might fail to produce a new
-             * number, but it is so cheap that it is okay to take the risk. Just
-             * increase the last number by one or reset it to 0 if we reached the upper
-             * bound of SMIs (which stands for small integers). When the last number is
-             * unknown it is assumed that the collection contains zero based consecutive
-             * numbers.
-             */
-            let nextNumber = lastNumber === undefined ? collection.size : lastNumber < TWO_TO_THE_POWER_OF_THIRTY ? lastNumber + 1 : 0;
-            if (!collection.has(nextNumber)) {
-                return cache(collection, nextNumber);
-            }
-            /*
-             * If there are less than half of 2 ** 30 numbers stored in the collection,
-             * the chance to generate a new random number in the range from 0 to 2 ** 30
-             * is at least 50%. It's benifitial to use only SMIs because they perform
-             * much better in any environment based on V8.
-             */
-            if (collection.size < TWO_TO_THE_POWER_OF_TWENTY_NINE) {
-                while (collection.has(nextNumber)) {
-                    nextNumber = Math.floor(Math.random() * TWO_TO_THE_POWER_OF_THIRTY);
-                }
-                return cache(collection, nextNumber);
-            }
-            // Quickly check if there is a theoretical chance to generate a new number.
-            if (collection.size > MAX_SAFE_INTEGER) {
-                throw new Error('Congratulations, you created a collection of unique numbers which uses all available integers!');
-            }
-            // Otherwise use the full scale of safely usable integers.
-            while (collection.has(nextNumber)) {
-                nextNumber = Math.floor(Math.random() * MAX_SAFE_INTEGER);
-            }
-            return cache(collection, nextNumber);
-        };
-    };
-
-    const LAST_NUMBER_WEAK_MAP = new WeakMap();
-    const cache = createCache(LAST_NUMBER_WEAK_MAP);
-    const generateUniqueNumber = createGenerateUniqueNumber(cache, LAST_NUMBER_WEAK_MAP);
-
-    const createBrokerFactory = (createOrGetOngoingRequests, extendBrokerImplementation, generateUniqueNumber, isMessagePort) => (brokerImplementation) => {
-        const fullBrokerImplementation = extendBrokerImplementation(brokerImplementation);
-        return (sender) => {
-            const ongoingRequests = createOrGetOngoingRequests(sender);
-            sender.addEventListener('message', (({ data: message }) => {
-                const { id } = message;
-                if (id !== null && ongoingRequests.has(id)) {
-                    const { reject, resolve } = ongoingRequests.get(id);
-                    ongoingRequests.delete(id);
-                    if (message.error === undefined) {
-                        resolve(message.result);
-                    }
-                    else {
-                        reject(new Error(message.error.message));
-                    }
-                }
-            }));
-            if (isMessagePort(sender)) {
-                sender.start();
-            }
-            const call = (method, params = null, transferables = []) => {
-                return new Promise((resolve, reject) => {
-                    const id = generateUniqueNumber(ongoingRequests);
-                    ongoingRequests.set(id, { reject, resolve });
-                    if (params === null) {
-                        sender.postMessage({ id, method }, transferables);
-                    }
-                    else {
-                        sender.postMessage({ id, method, params }, transferables);
-                    }
-                });
-            };
-            const notify = (method, params, transferables = []) => {
-                sender.postMessage({ id: null, method, params }, transferables);
-            };
-            let functions = {};
-            for (const [key, handler] of Object.entries(fullBrokerImplementation)) {
-                functions = { ...functions, [key]: handler({ call, notify }) };
-            }
-            return { ...functions };
-        };
-    };
-
-    const createCreateOrGetOngoingRequests = (ongoingRequestsMap) => (sender) => {
-        if (ongoingRequestsMap.has(sender)) {
-            // @todo TypeScript needs to be convinced that has() works as expected.
-            return ongoingRequestsMap.get(sender);
-        }
-        const ongoingRequests = new Map();
-        ongoingRequestsMap.set(sender, ongoingRequests);
-        return ongoingRequests;
-    };
-
-    const createExtendBrokerImplementation = (portMap) => (partialBrokerImplementation) => ({
-        ...partialBrokerImplementation,
-        connect: ({ call }) => {
-            return async () => {
-                const { port1, port2 } = new MessageChannel();
-                const portId = await call('connect', { port: port1 }, [port1]);
-                portMap.set(port2, portId);
-                return port2;
-            };
+        get setInterval() {
+            return PopsCoreApi.setInterval;
         },
-        disconnect: ({ call }) => {
-            return async (port) => {
-                const portId = portMap.get(port);
-                if (portId === undefined) {
-                    throw new Error('The given port is not connected.');
-                }
-                await call('disconnect', { portId });
-            };
+        get clearTimeout() {
+            return PopsCoreApi.clearTimeout;
+        },
+        get clearInterval() {
+            return PopsCoreApi.clearInterval;
         },
-        isSupported: ({ call }) => {
-            return () => call('isSupported');
-        }
-    });
-
-    const isMessagePort = (sender) => {
-        return typeof sender.start === 'function';
-    };
-
-    const createBroker = createBrokerFactory(createCreateOrGetOngoingRequests(new WeakMap()), createExtendBrokerImplementation(new WeakMap()), generateUniqueNumber, isMessagePort);
-
-    const createClearIntervalFactory = (scheduledIntervalsState) => (clear) => (timerId) => {
-        if (typeof scheduledIntervalsState.get(timerId) === 'symbol') {
-            scheduledIntervalsState.set(timerId, null);
-            clear(timerId).then(() => {
-                scheduledIntervalsState.delete(timerId);
-            });
-        }
-    };
-
-    const createClearTimeoutFactory = (scheduledTimeoutsState) => (clear) => (timerId) => {
-        if (typeof scheduledTimeoutsState.get(timerId) === 'symbol') {
-            scheduledTimeoutsState.set(timerId, null);
-            clear(timerId).then(() => {
-                scheduledTimeoutsState.delete(timerId);
-            });
-        }
-    };
-
-    const createSetIntervalFactory = (generateUniqueNumber, scheduledIntervalsState) => (set) => (func, delay = 0, ...args) => {
-        const symbol = Symbol();
-        const timerId = generateUniqueNumber(scheduledIntervalsState);
-        scheduledIntervalsState.set(timerId, symbol);
-        const schedule = () => set(delay, timerId).then(() => {
-            const state = scheduledIntervalsState.get(timerId);
-            if (state === undefined) {
-                throw new Error('The timer is in an undefined state.');
-            }
-            if (state === symbol) {
-                func(...args);
-                // Doublecheck if the interval should still be rescheduled because it could have been cleared inside of func().
-                if (scheduledIntervalsState.get(timerId) === symbol) {
-                    schedule();
-                }
-            }
-        });
-        schedule();
-        return timerId;
-    };
-
-    const createSetTimeoutFactory = (generateUniqueNumber, scheduledTimeoutsState) => (set) => (func, delay = 0, ...args) => {
-        const symbol = Symbol();
-        const timerId = generateUniqueNumber(scheduledTimeoutsState);
-        scheduledTimeoutsState.set(timerId, symbol);
-        set(delay, timerId).then(() => {
-            const state = scheduledTimeoutsState.get(timerId);
-            if (state === undefined) {
-                throw new Error('The timer is in an undefined state.');
-            }
-            if (state === symbol) {
-                // A timeout can be savely deleted because it is only called once.
-                scheduledTimeoutsState.delete(timerId);
-                func(...args);
-            }
-        });
-        return timerId;
-    };
-
-    // Prefilling the Maps with a function indexed by zero is necessary to be compliant with the specification.
-    const scheduledIntervalsState = new Map([[0, null]]); // tslint:disable-line no-empty
-    const scheduledTimeoutsState = new Map([[0, null]]); // tslint:disable-line no-empty
-    const createClearInterval = createClearIntervalFactory(scheduledIntervalsState);
-    const createClearTimeout = createClearTimeoutFactory(scheduledTimeoutsState);
-    const createSetInterval = createSetIntervalFactory(generateUniqueNumber, scheduledIntervalsState);
-    const createSetTimeout = createSetTimeoutFactory(generateUniqueNumber, scheduledTimeoutsState);
-    const wrap = createBroker({
-        clearInterval: ({ call }) => createClearInterval((timerId) => call('clear', { timerId, timerType: 'interval' })),
-        clearTimeout: ({ call }) => createClearTimeout((timerId) => call('clear', { timerId, timerType: 'timeout' })),
-        setInterval: ({ call }) => createSetInterval((delay, timerId) => call('set', { delay, now: performance.timeOrigin + performance.now(), timerId, timerType: 'interval' })),
-        setTimeout: ({ call }) => createSetTimeout((delay, timerId) => call('set', { delay, now: performance.timeOrigin + performance.now(), timerId, timerType: 'timeout' }))
-    });
-    const load = (url) => {
-        const worker = new Worker(url);
-        return wrap(worker);
-    };
-
-    const createLoadOrReturnBroker = (loadBroker, worker) => {
-        let broker = null;
-        return () => {
-            if (broker !== null) {
-                return broker;
-            }
-            const blob = new Blob([worker], { type: 'application/javascript; charset=utf-8' });
-            const url = URL.createObjectURL(blob);
-            broker = loadBroker(url);
-            // Bug #1: Edge up until v18 didn't like the URL to be revoked directly.
-            setTimeout(() => URL.revokeObjectURL(url));
-            return broker;
-        };
     };
 
-    // This is the minified and stringified code of the worker-timers-worker package.
-    const worker = `(()=>{var e={455(e,t){!function(e){"use strict";var t=function(e){return function(t){var r=e(t);return t.add(r),r}},r=function(e){return function(t,r){return e.set(t,r),r}},n=void 0===Number.MAX_SAFE_INTEGER?9007199254740991:Number.MAX_SAFE_INTEGER,o=536870912,s=2*o,a=function(e,t){return function(r){var a=t.get(r),i=void 0===a?r.size:a<s?a+1:0;if(!r.has(i))return e(r,i);if(r.size<o){for(;r.has(i);)i=Math.floor(Math.random()*s);return e(r,i)}if(r.size>n)throw new Error("Congratulations, you created a collection of unique numbers which uses all available integers!");for(;r.has(i);)i=Math.floor(Math.random()*n);return e(r,i)}},i=new WeakMap,u=r(i),c=a(u,i),l=t(c);e.addUniqueNumber=l,e.generateUniqueNumber=c}(t)}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n].call(s.exports,s,s.exports,r),s.exports}(()=>{"use strict";const e=-32603,t=-32602,n=-32601,o=(e,t)=>Object.assign(new Error(e),{status:t}),s=t=>o('The handler of the method called "'.concat(t,'" returned an unexpected result.'),e),a=(t,r)=>async({data:{id:a,method:i,params:u}})=>{const c=r[i];try{if(void 0===c)throw(e=>o('The requested method called "'.concat(e,'" is not supported.'),n))(i);const r=void 0===u?c():c(u);if(void 0===r)throw(t=>o('The handler of the method called "'.concat(t,'" returned no required result.'),e))(i);const l=r instanceof Promise?await r:r;if(null===a){if(void 0!==l.result)throw s(i)}else{if(void 0===l.result)throw s(i);const{result:e,transferables:r=[]}=l;t.postMessage({id:a,result:e},r)}}catch(e){const{message:r,status:n=-32603}=e;t.postMessage({error:{code:n,message:r},id:a})}};var i=r(455);const u=new Map,c=(e,r,n)=>({...r,connect:({port:t})=>{t.start();const n=e(t,r),o=(0,i.generateUniqueNumber)(u);return u.set(o,()=>{n(),t.close(),u.delete(o)}),{result:o}},disconnect:({portId:e})=>{const r=u.get(e);if(void 0===r)throw(e=>o('The specified parameter called "portId" with the given value "'.concat(e,'" does not identify a port connected to this worker.'),t))(e);return r(),{result:null}},isSupported:async()=>{if(await new Promise(e=>{const t=new ArrayBuffer(0),{port1:r,port2:n}=new MessageChannel;r.onmessage=({data:t})=>e(null!==t),n.postMessage(t,[t])})){const e=n();return{result:e instanceof Promise?await e:e}}return{result:!1}}}),l=(e,t,r=()=>!0)=>{const n=c(l,t,r),o=a(e,n);return e.addEventListener("message",o),()=>e.removeEventListener("message",o)},d=(e,t)=>r=>{const n=t.get(r);if(void 0===n)return Promise.resolve(!1);const[o,s]=n;return e(o),t.delete(r),s(!1),Promise.resolve(!0)},m=(e,t,r,n)=>(o,s,a)=>{const i=o+s-t.timeOrigin,u=i-t.now();return new Promise(t=>{e.set(a,[r(n,u,i,e,t,a),t])})},f=new Map,h=d(globalThis.clearTimeout,f),p=new Map,v=d(globalThis.clearTimeout,p),w=((e,t)=>{const r=(n,o,s,a)=>{const i=n-e.now();i>0?o.set(a,[t(r,i,n,o,s,a),s]):(o.delete(a),s(!0))};return r})(performance,globalThis.setTimeout),g=m(f,performance,globalThis.setTimeout,w),T=m(p,performance,globalThis.setTimeout,w);l(self,{clear:async({timerId:e,timerType:t})=>({result:await("interval"===t?h(e):v(e))}),set:async({delay:e,now:t,timerId:r,timerType:n})=>({result:await("interval"===n?g:T)(e,t,r)})})})()})();`; // tslint:disable-line:max-line-length
-
-    const loadOrReturnBroker = createLoadOrReturnBroker(load, worker);
-    const clearInterval$1 = (timerId) => loadOrReturnBroker().clearInterval(timerId);
-    const clearTimeout$1 = (timerId) => loadOrReturnBroker().clearTimeout(timerId);
-    const setInterval$1 = (...args) => loadOrReturnBroker().setInterval(...args);
-    const setTimeout$1 = (...args) => loadOrReturnBroker().setTimeout(...args);
-
     let t$1 = class t{constructor(){this.__map={};}beforeEach(t){this.__interceptor=t;}on(t,i){const s=Array.isArray(t)?t:[t];for(const t of s){this.__map[t]=this.__map[t]||[];const s=this.__map[t];s&&s.push(i);}return this}emit(t,i,s){ void 0!==this.__interceptor?this.__interceptor(t,(()=>{this.__emit(t,i),s&&s();})):(this.__emit(t,i),s&&s());}__emit(t,i){const s=this.__map[t];if(Array.isArray(s)&&(null==s?void 0:s.length))for(const _ of s)_(i,t);this.event=i;}off(t,i){const s=this.__map[t];if(void 0!==s)if(void 0===i)delete this.__map[t];else {const t=s.findIndex((t=>t===i));s.splice(t,1);}}destroy(){this.__map={};}};
 
     const n$1="clientX",e$2="clientY",t=16,c$3="start",o$1="move",s$1="cancel",u$3="end",a$2="left",i$3="right",r$4="up",d$1="down",m$2={4:"start",5:"move",1:"end",3:"cancel"};function v$1(n){return m$2[n]}function b(n,e,t){const c={1:{0:{move:4},4:{move:5,end:1,cancel:3},5:{move:5,end:1,cancel:3}},0:{4:{move:2,end:1,cancel:3},5:{start:2,move:2,end:1,cancel:3}}}[Number(n)][e];return void 0!==c&&c[t]||0}function g$1(n){[1,3,2].includes(n.state)&&(n.state=0);}function h$3(n){return [5,1,3].includes(n)}function j(n){if(n.disabled)return n.state=0,true}function O(n,e){return Object.assign(Object.assign(Object.assign({},n),e),{state:0,disabled:false})}function p$3(n){return Math.round(100*n)/100}
@@ -712,55 +495,25 @@
          * 自动使用 Worker 执行 setTimeout
          */
         setTimeout(callback, timeout = 0) {
-            try {
-                return setTimeout$1(callback, timeout);
-            }
-            catch {
-                return setTimeout(callback, timeout);
-            }
+            return PopsCore.setTimeout(callback, timeout);
         }
         /**
          * 配合 .setTimeout 使用
          */
         clearTimeout(timeId) {
-            try {
-                if (timeId != null) {
-                    clearTimeout$1(timeId);
-                }
-            }
-            catch {
-                // TODO
-            }
-            finally {
-                clearTimeout(timeId);
-            }
+            return PopsCore.clearTimeout(timeId);
         }
         /**
          * 自动使用 Worker 执行 setInterval
          */
         setInterval(callback, timeout = 0) {
-            try {
-                return setInterval$1(callback, timeout);
-            }
-            catch {
-                return setInterval(callback, timeout);
-            }
+            return PopsCore.setInterval(callback, timeout);
         }
         /**
          * 配合 .setInterval 使用
          */
         clearInterval(timeId) {
-            try {
-                if (timeId != null) {
-                    clearInterval$1(timeId);
-                }
-            }
-            catch {
-                // 忽略
-            }
-            finally {
-                clearInterval(timeId);
-            }
+            return PopsCore.clearInterval(timeId);
         }
         /**
          * 覆盖对象中的数组新值
@@ -2649,9 +2402,9 @@
                 popsStyle += `height: ${__config.height};`;
             }
             const hasBottomBtn = bottomBtnHTML.trim() === "" ? false : true;
-            return /*html*/ `
-		<div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""}
-			<div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
+            return /*html*/ `
+		<div class="pops-anim" anim="${__config.animation || ""}" style="${popsAnimStyle}" data-guid="${guid}">${config.style != null ? `<style tyle="text/css">${config.style}</style>` : ""}
+			<div class="pops ${config.class || ""}" data-bottom-btn="${hasBottomBtn}" type-value="${type}" style="${popsStyle}" position="${popsPosition}" data-guid="${guid}">${html}</div>
 		</div>`;
         },
         /**
@@ -2677,22 +2430,22 @@
                 iframe_config.topRightButton.split("|").forEach((item) => {
                     // 最小化、最大化、窗口化、关闭按钮
                     item = item.toLowerCase();
-                    topRightButtonHTML += /*html*/ `
-                <button class="pops-header-control" type="button" data-type="${item}">
-                    <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
+                    topRightButtonHTML += /*html*/ `
+                <button class="pops-header-control" type="button" data-type="${item}">
+                    <i class="pops-icon">${PopsIcon.getIcon(item)}</i>
                 </button>`;
                 });
-                resultHTML = /*html*/ `
+                resultHTML = /*html*/ `
             <div class="pops-header-controls" data-margin>${topRightButtonHTML}</div>`;
             }
             else {
                 if (confirm_config.btn?.close?.enable) {
                     // 关闭按钮
-                    closeHTML = /*html*/ `
-                <div class="pops-header-controls">
-                    <button class="pops-header-control" type="button" data-type="close" data-header>
-                    	<i class="pops-icon">${PopsIcon.getIcon("close")}</i>
-                    </button>
+                    closeHTML = /*html*/ `
+                <div class="pops-header-controls">
+                    <button class="pops-header-control" type="button" data-type="close" data-header>
+                    	<i class="pops-icon">${PopsIcon.getIcon("close")}</i>
+                    </button>
                 </div>`;
                 }
                 resultHTML = closeHTML;
@@ -2759,14 +2512,14 @@
                     iconHTML = iconHTML || "";
                     okIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${config.btn.ok.iconIsLoading}">${iconHTML}</i>`;
                 }
-                okHTML = /*html*/ `
-            <button 
-				class="pops-${type}-btn-ok ${okButtonSizeClassName}"
-				type="button"
-				data-type="${confirm_config.btn.ok?.type}"
-				data-has-icon="${(confirm_config.btn.ok.icon || "") !== ""}"
-				data-rightIcon="${confirm_config.btn.ok?.rightIcon}"
-            >${okIconHTML}<span>${config.btn.ok.text}</span>
+                okHTML = /*html*/ `
+            <button 
+				class="pops-${type}-btn-ok ${okButtonSizeClassName}"
+				type="button"
+				data-type="${confirm_config.btn.ok?.type}"
+				data-has-icon="${(confirm_config.btn.ok.icon || "") !== ""}"
+				data-rightIcon="${confirm_config.btn.ok?.rightIcon}"
+            >${okIconHTML}<span>${config.btn.ok.text}</span>
             </button>`;
             }
             if (confirm_config.btn?.cancel?.enable) {
@@ -2792,14 +2545,14 @@
                     iconHTML = iconHTML || "";
                     cancelIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.cancel.iconIsLoading}">${iconHTML}</i>`;
                 }
-                cancelHTML = /*html*/ `
-            <button
-				class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
-				type="button"
-				data-type="${confirm_config.btn.cancel.type}"
-				data-has-icon="${(confirm_config.btn.cancel.icon || "") !== ""}"
-				data-rightIcon="${confirm_config.btn.cancel.rightIcon}"
-            >${cancelIconHTML}<span>${confirm_config.btn.cancel.text}</span>
+                cancelHTML = /*html*/ `
+            <button
+				class="pops-${type}-btn-cancel ${cancelButtonSizeClassName}"
+				type="button"
+				data-type="${confirm_config.btn.cancel.type}"
+				data-has-icon="${(confirm_config.btn.cancel.icon || "") !== ""}"
+				data-rightIcon="${confirm_config.btn.cancel.rightIcon}"
+            >${cancelIconHTML}<span>${confirm_config.btn.cancel.text}</span>
             </button>`;
             }
             if (confirm_config.btn?.other?.enable) {
@@ -2822,14 +2575,14 @@
                     iconHTML = iconHTML || "";
                     otherIconHTML = /*html*/ `<i class="pops-bottom-icon" is-loading="${confirm_config.btn.other.iconIsLoading}">${iconHTML}</i>`;
                 }
-                ohterHTML = /*html*/ `
-            <button
-				class="pops-${type}-btn-other ${otherButtonSizeClassName}"
-				type="button"
-				data-type="${confirm_config.btn.other.type}"
-				data-has-icon="${(confirm_config.btn.other.icon || "") !== ""}"
-				data-rightIcon="${confirm_config.btn.other.rightIcon}"
-            >${otherIconHTML}<span>${confirm_config.btn.other.text}</span>
+                ohterHTML = /*html*/ `
+            <button
+				class="pops-${type}-btn-other ${otherButtonSizeClassName}"
+				type="button"
+				data-type="${confirm_config.btn.other.type}"
+				data-has-icon="${(confirm_config.btn.other.icon || "") !== ""}"
+				data-rightIcon="${confirm_config.btn.other.rightIcon}"
+            >${otherIconHTML}<span>${confirm_config.btn.other.text}</span>
             </button>`;
             }
             if (confirm_config.btn.merge) {
@@ -2840,11 +2593,11 @@
                 else {
                     flexStyle += "flex-direction: row;";
                 }
-                resultHTML = /*html*/ `
-            <div class="pops-botttom-btn-controls pops-${type}-btn" style="${btnStyle}">${ohterHTML}<div 
-                    class="pops-${type}-btn-merge"
-                    style="${flexStyle}">${okHTML}${cancelHTML}</div>
-            </div>
+                resultHTML = /*html*/ `
+            <div class="pops-botttom-btn-controls pops-${type}-btn" style="${btnStyle}">${ohterHTML}<div 
+                    class="pops-${type}-btn-merge"
+                    style="${flexStyle}">${okHTML}${cancelHTML}</div>
+            </div>
             `;
             }
             else {
@@ -2872,39 +2625,39 @@
         },
     };
 
-    var indexCSS = "@charset \"utf-8\";\r\n.pops * {\r\n  -webkit-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n  -webkit-tap-highlight-color: transparent;\r\n  /* 代替::-webkit-scrollbar */\r\n  scrollbar-width: thin;\r\n}\r\n.pops {\r\n  --pops-bg-opacity: 1;\r\n  --pops-bd-opacity: 1;\r\n  --pops-font-size: 16px;\r\n  interpolate-size: allow-keywords;\r\n  --pops-color: #000000;\r\n  --pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  --pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\r\n  --pops-box-shadow-color: rgba(0, 0, 0, 0.12);\r\n  --pops-title-color: #000000;\r\n  --pops-title-border-color: var(--pops-bd-color);\r\n  --pops-content-color: #000000;\r\n  --pops-bottom-btn-controls-border-color: var(--pops-bd-color);\r\n  --pops-components-is-disabled-text-color: #a8abb2;\r\n  --pops-components-is-disabled-bg-color: #f5f7fa;\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n  .pops {\r\n    --pops-mask-bg-opacity: 0.8;\r\n    --pops-color: #ffffff;\r\n    --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));\r\n    --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));\r\n    --pops-box-shadow-color: rgba(81, 81, 81, 0.12);\r\n    --pops-title-color: #e8e8e8;\r\n    --pops-title-border-color: var(--pops-bd-color);\r\n    --pops-content-color: #e5e5e5;\r\n    --pops-components-is-disabled-text-color: #a8abb2;\r\n    --pops-components-is-disabled-bg-color: #262727;\r\n  }\r\n}\r\n.pops {\r\n  color: var(--pops-color);\r\n  background-color: var(--pops-bg-color);\r\n  border: 1px solid var(--pops-bd-color);\r\n  border-radius: 4px;\r\n  font-size: var(--pops-font-size);\r\n  line-height: normal;\r\n  box-shadow: 0 0 12px var(--pops-box-shadow-color);\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n  transition: all 0.35s;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.pops-anim {\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n.pops-anim[anim=\"\"] {\r\n  top: unset;\r\n  right: unset;\r\n  bottom: unset;\r\n  left: unset;\r\n  width: unset;\r\n  height: unset;\r\n  transition: none;\r\n}\r\n/* 底部图标动画和样式 */\r\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\r\n  animation: rotating 2s linear infinite;\r\n}\r\n.pops i.pops-bottom-icon {\r\n  height: 1em;\r\n  width: 1em;\r\n  line-height: normal;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  fill: currentColor;\r\n  color: inherit;\r\n  font-size: inherit;\r\n}\r\n\r\n/* 遮罩层样式 */\r\n.pops-mask {\r\n  --pops-mask-bg-opacity: 0.4;\r\n  --pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\r\n}\r\n.pops-mask {\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  border: 0;\r\n  border-radius: 0;\r\n  background-color: var(--pops-mask-bg-color);\r\n  box-shadow: none;\r\n  transition: none;\r\n}\r\n\r\n.pops-header-controls button.pops-header-control[type][data-header] {\r\n  float: right;\r\n  margin: 0 0;\r\n  outline: 0;\r\n  border: 0;\r\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n  background-color: transparent;\r\n  color: #888;\r\n  cursor: pointer;\r\n}\r\n.pops-header-controls button.pops-header-control[data-type=\"max\"],\r\n.pops-header-controls button.pops-header-control[data-type=\"mise\"],\r\n.pops-header-controls button.pops-header-control[data-type=\"min\"] {\r\n  outline: 0 !important;\r\n  border: 0;\r\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n  background-color: transparent;\r\n  color: rgb(136, 136, 136);\r\n  cursor: pointer;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\nbutton.pops-header-control i {\r\n  color: rgb(144, 147, 153);\r\n  font-size: inherit;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  fill: currentColor;\r\n}\r\nbutton.pops-header-control svg {\r\n  height: 1.25em;\r\n  width: 1.25em;\r\n}\r\nbutton.pops-header-control {\r\n  right: 15px;\r\n  padding: 0;\r\n  border: none;\r\n  outline: 0;\r\n  background: 0 0;\r\n  cursor: pointer;\r\n  position: unset;\r\n  line-height: normal;\r\n}\r\nbutton.pops-header-control i:hover {\r\n  color: rgb(64, 158, 255);\r\n}\r\n.pops-header-controls[data-margin] button.pops-header-control {\r\n  margin: 0 6px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.pops[type-value] .pops-header-controls {\r\n  display: flex;\r\n  gap: 6px;\r\n}\r\n\r\n/* 代码块 <code> */\r\n.pops code {\r\n  font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\r\n  font-size: 0.85em;\r\n  color: #000;\r\n  background-color: #f0f0f0;\r\n  border-radius: 3px;\r\n  border: 0;\r\n  padding: 0.2em 0;\r\n  white-space: normal;\r\n  background: #f5f5f5;\r\n  text-wrap: wrap;\r\n  text-align: left;\r\n  word-spacing: normal;\r\n  word-break: normal;\r\n  word-wrap: normal;\r\n  line-height: 1.4;\r\n  -moz-tab-size: 8;\r\n  -o-tab-size: 8;\r\n  tab-size: 8;\r\n  -webkit-hyphens: none;\r\n  -moz-hyphens: none;\r\n  -ms-hyphens: none;\r\n  hyphens: none;\r\n  direction: ltr;\r\n}\r\n\r\n.pops code::before,\r\n.pops code::after {\r\n  letter-spacing: -0.2em;\r\n  content: \"\\00a0\";\r\n}\r\n\r\n/* 标题 */\r\n.pops .pops-title {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  border-bottom: 1px solid var(--pops-title-border-color);\r\n  width: 100%;\r\n  height: var(--container-title-height);\r\n}\r\n/* 标题-普通文本 */\r\n.pops .pops-title p[pops] {\r\n  color: var(--pops-title-color);\r\n  width: 100%;\r\n  overflow: hidden;\r\n  text-indent: 15px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  font-weight: 500;\r\n  line-height: normal;\r\n}\r\n\r\n/* 内容 */\r\n.pops .pops-content {\r\n  width: 100%;\r\n  /*height: calc(\r\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n\t);*/\r\n  flex: 1;\r\n  overflow: auto;\r\n  word-break: break-word;\r\n}\r\n/* 内容-普通文本 */\r\n.pops .pops-content p[pops] {\r\n  color: var(--pops-content-color);\r\n  padding: 5px 10px;\r\n  text-indent: 15px;\r\n}\r\n\r\n/* 底部-按钮组 */\r\n.pops .pops-botttom-btn-controls {\r\n  display: flex;\r\n  padding: 10px 10px 10px 10px;\r\n  width: 100%;\r\n  height: var(--container-bottom-btn-height);\r\n  max-height: var(--container-bottom-btn-height);\r\n  line-height: normal;\r\n  border-top: 1px solid var(--pops-bottom-btn-controls-border-color);\r\n  text-align: right;\r\n  align-items: center;\r\n}\r\n";
+    var indexCSS = "@charset \"utf-8\";\n.pops * {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  -webkit-tap-highlight-color: transparent;\n  /* 代替::-webkit-scrollbar */\n  scrollbar-width: thin;\n}\n.pops {\n  --pops-bg-opacity: 1;\n  --pops-bd-opacity: 1;\n  --pops-font-size: 16px;\n  interpolate-size: allow-keywords;\n  --pops-color: #000000;\n  --pops-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --pops-bd-color: rgb(235, 238, 245, var(--pops-bd-opacity));\n  --pops-box-shadow-color: rgba(0, 0, 0, 0.12);\n  --pops-title-color: #000000;\n  --pops-title-border-color: var(--pops-bd-color);\n  --pops-content-color: #000000;\n  --pops-bottom-btn-controls-border-color: var(--pops-bd-color);\n  --pops-components-is-disabled-text-color: #a8abb2;\n  --pops-components-is-disabled-bg-color: #f5f7fa;\n}\n@media (prefers-color-scheme: dark) {\n  .pops {\n    --pops-mask-bg-opacity: 0.8;\n    --pops-color: #ffffff;\n    --pops-bg-color: rgb(17, 17, 17, var(--pops-bg-opacity));\n    --pops-bd-color: rgb(55, 55, 55, var(--pops-bd-opacity));\n    --pops-box-shadow-color: rgba(81, 81, 81, 0.12);\n    --pops-title-color: #e8e8e8;\n    --pops-title-border-color: var(--pops-bd-color);\n    --pops-content-color: #e5e5e5;\n    --pops-components-is-disabled-text-color: #a8abb2;\n    --pops-components-is-disabled-bg-color: #262727;\n  }\n}\n.pops {\n  color: var(--pops-color);\n  background-color: var(--pops-bg-color);\n  border: 1px solid var(--pops-bd-color);\n  border-radius: 4px;\n  font-size: var(--pops-font-size);\n  line-height: normal;\n  box-shadow: 0 0 12px var(--pops-box-shadow-color);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: all 0.35s;\n  display: flex;\n  flex-direction: column;\n}\n.pops-anim {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.pops-anim[anim=\"\"] {\n  top: unset;\n  right: unset;\n  bottom: unset;\n  left: unset;\n  width: unset;\n  height: unset;\n  transition: none;\n}\n/* 底部图标动画和样式 */\n.pops i.pops-bottom-icon[is-loading=\"true\"] {\n  animation: rotating 2s linear infinite;\n}\n.pops i.pops-bottom-icon {\n  height: 1em;\n  width: 1em;\n  line-height: normal;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n  color: inherit;\n  font-size: inherit;\n}\n\n/* 遮罩层样式 */\n.pops-mask {\n  --pops-mask-bg-opacity: 0.4;\n  --pops-mask-bg-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\n}\n.pops-mask {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  border-radius: 0;\n  background-color: var(--pops-mask-bg-color);\n  box-shadow: none;\n  transition: none;\n}\n\n.pops-header-controls button.pops-header-control[type][data-header] {\n  float: right;\n  margin: 0 0;\n  outline: 0;\n  border: 0;\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n  background-color: transparent;\n  color: #888;\n  cursor: pointer;\n}\n.pops-header-controls button.pops-header-control[data-type=\"max\"],\n.pops-header-controls button.pops-header-control[data-type=\"mise\"],\n.pops-header-controls button.pops-header-control[data-type=\"min\"] {\n  outline: 0 !important;\n  border: 0;\n  border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\n  background-color: transparent;\n  color: rgb(136, 136, 136);\n  cursor: pointer;\n  transition: all 0.3s ease-in-out;\n}\nbutton.pops-header-control i {\n  color: rgb(144, 147, 153);\n  font-size: inherit;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n}\nbutton.pops-header-control svg {\n  height: 1.25em;\n  width: 1.25em;\n}\nbutton.pops-header-control {\n  right: 15px;\n  padding: 0;\n  border: none;\n  outline: 0;\n  background: 0 0;\n  cursor: pointer;\n  position: unset;\n  line-height: normal;\n}\nbutton.pops-header-control i:hover {\n  color: rgb(64, 158, 255);\n}\n.pops-header-controls[data-margin] button.pops-header-control {\n  margin: 0 6px;\n  display: flex;\n  align-items: center;\n}\n.pops[type-value] .pops-header-controls {\n  display: flex;\n  gap: 6px;\n}\n\n/* 代码块 <code> */\n.pops code {\n  font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n  font-size: 0.85em;\n  color: #000;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n  border: 0;\n  padding: 0.2em 0;\n  white-space: normal;\n  background: #f5f5f5;\n  text-wrap: wrap;\n  text-align: left;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  line-height: 1.4;\n  -moz-tab-size: 8;\n  -o-tab-size: 8;\n  tab-size: 8;\n  -webkit-hyphens: none;\n  -moz-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none;\n  direction: ltr;\n}\n\n.pops code::before,\n.pops code::after {\n  letter-spacing: -0.2em;\n  content: \"\\00a0\";\n}\n\n/* 标题 */\n.pops .pops-title {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--pops-title-border-color);\n  width: 100%;\n  height: var(--container-title-height);\n}\n/* 标题-普通文本 */\n.pops .pops-title p[pops] {\n  color: var(--pops-title-color);\n  width: 100%;\n  overflow: hidden;\n  text-indent: 15px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n  line-height: normal;\n}\n\n/* 内容 */\n.pops .pops-content {\n  width: 100%;\n  /*height: calc(\n\t\t100% - var(--container-title-height) - var(--container-bottom-btn-height)\n\t);*/\n  flex: 1;\n  overflow: auto;\n  word-break: break-word;\n}\n/* 内容-普通文本 */\n.pops .pops-content p[pops] {\n  color: var(--pops-content-color);\n  padding: 5px 10px;\n  text-indent: 15px;\n}\n\n/* 底部-按钮组 */\n.pops .pops-botttom-btn-controls {\n  display: flex;\n  padding: 10px 10px 10px 10px;\n  width: 100%;\n  height: var(--container-bottom-btn-height);\n  max-height: var(--container-bottom-btn-height);\n  line-height: normal;\n  border-top: 1px solid var(--pops-bottom-btn-controls-border-color);\n  text-align: right;\n  align-items: center;\n}\n";
 
-    var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n}\r\n.pops[position=\"top\"] {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n}\r\n.pops[position=\"top_right\"] {\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n}\r\n.pops[position=\"center_left\"] {\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 0;\r\n  transform: translateY(-50%);\r\n}\r\n.pops[position=\"center\"] {\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n}\r\n.pops[position=\"center_right\"] {\r\n  position: fixed;\r\n  top: 50%;\r\n  right: 0;\r\n  transform: translateY(-50%);\r\n}\r\n.pops[position=\"bottom_left\"] {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n}\r\n.pops[position=\"bottom\"] {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 50%;\r\n  transform: translate(-50%, 0);\r\n}\r\n.pops[position=\"bottom_right\"] {\r\n  position: fixed;\r\n  right: 0;\r\n  bottom: 0;\r\n}\r\n";
+    var ninePalaceGridPositionCSS = ".pops[position=\"top_left\"] {\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n.pops[position=\"top\"] {\n  position: fixed;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.pops[position=\"top_right\"] {\n  position: fixed;\n  top: 0;\n  right: 0;\n}\n.pops[position=\"center_left\"] {\n  position: fixed;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n.pops[position=\"center\"] {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.pops[position=\"center_right\"] {\n  position: fixed;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n.pops[position=\"bottom_left\"] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n}\n.pops[position=\"bottom\"] {\n  position: fixed;\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 0);\n}\n.pops[position=\"bottom_right\"] {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n}\n";
 
-    var scrollbarCSS = "/* ::-webkit-scrollbar 是非标准的css */\r\n/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */\r\n.pops ::-webkit-scrollbar {\r\n  width: 6px;\r\n  height: 0;\r\n}\r\n\r\n/* 滚动条轨道 */\r\n.pops ::-webkit-scrollbar-track {\r\n  width: 0;\r\n}\r\n/* 滚动条滑块 */\r\n.pops ::-webkit-scrollbar-thumb {\r\n  min-height: 28px;\r\n  border-radius: 2em;\r\n  background: rgb(204, 204, 204, var(--pops-bg-opacity, 1));\r\n  background-clip: padding-box;\r\n}\r\n/* 滚动条滑块 */\r\n.pops ::-webkit-scrollbar-thumb:hover {\r\n  background: rgb(178, 178, 178, var(--pops-bg-opacity, 1));\r\n}\r\n";
+    var scrollbarCSS = "/* ::-webkit-scrollbar 是非标准的css */\n/* https://caniuse.com/?search=%20%3A%3A-webkit-scrollbar */\n.pops ::-webkit-scrollbar {\n  width: 6px;\n  height: 0;\n}\n\n/* 滚动条轨道 */\n.pops ::-webkit-scrollbar-track {\n  width: 0;\n}\n/* 滚动条滑块 */\n.pops ::-webkit-scrollbar-thumb {\n  min-height: 28px;\n  border-radius: 2em;\n  background: rgb(204, 204, 204, var(--pops-bg-opacity, 1));\n  background-clip: padding-box;\n}\n/* 滚动条滑块 */\n.pops ::-webkit-scrollbar-thumb:hover {\n  background: rgb(178, 178, 178, var(--pops-bg-opacity, 1));\n}\n";
 
-    var buttonCSS = ".pops {\r\n  --button-font-size: 14px;\r\n  --button-height: 32px;\r\n  --button-color: rgb(51, 51, 51);\r\n  --button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n  --button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n  --button-margin-top: 0px;\r\n  --button-margin-bottom: 0px;\r\n  --button-margin-left: 5px;\r\n  --button-margin-right: 5px;\r\n  --button-padding-top: 6px;\r\n  --button-padding-bottom: 6px;\r\n  --button-padding-left: 12px;\r\n  --button-padding-right: 12px;\r\n  --button-radius: 4px;\r\n\r\n  --container-title-height: 55px;\r\n  --container-bottom-btn-height: 55px;\r\n\r\n  /* default按钮 */\r\n  --button-default-color: #333333;\r\n  --button-default-bd-color: #dcdfe6;\r\n  --button-default-bg-color: #ffffff;\r\n  --button-default-active-color: #409eff;\r\n  --button-default-active-bd-color: #409eff;\r\n  --button-default-active-bg-color: #ecf5ff;\r\n  --button-default-hover-color: #409eff;\r\n  --button-default-hover-bd-color: #c6e2ff;\r\n  --button-default-hover-bg-color: #ecf5ff;\r\n  --button-default-focus-visible-outline-color: #a0cfff;\r\n  --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\r\n  --button-default-focus-visible-outline-offset: 1px;\r\n  --button-default-disabled-color: #a8abb2;\r\n  --button-default-disabled-bd-color: #ffffff;\r\n  --button-default-disabled-bg-color: #e4e7ed;\r\n\r\n  /* primary按钮 */\r\n  --button-primary-color: #ffffff;\r\n  --button-primary-bd-color: #409eff;\r\n  --button-primary-bg-color: #409eff;\r\n  --button-primary-active-color: #ffffff;\r\n  --button-primary-active-bd-color: #337ecc;\r\n  --button-primary-active-bg-color: #337ecc;\r\n  --button-primary-hover-color: #ffffff;\r\n  --button-primary-hover-bd-color: #79bbff;\r\n  --button-primary-hover-bg-color: #79bbff;\r\n  --button-primary-focus-visible-outline-color: #a0cfff;\r\n  --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\r\n  --button-primary-focus-visible-outline-offset: 1px;\r\n  --button-primary-disabled-color: #ffffff80;\r\n  --button-primary-disabled-bd-color: #a0cfff;\r\n  --button-primary-disabled-bg-color: #a0cfff;\r\n\r\n  /* success按钮 */\r\n  --button-success-color: #ffffff;\r\n  --button-success-bd-color: #4cae4c;\r\n  --button-success-bg-color: #5cb85c;\r\n  --button-success-active-color: #ffffff;\r\n  --button-success-active-bd-color: #529b2e;\r\n  --button-success-active-bg-color: #529b2e;\r\n  --button-success-hover-color: #ffffff;\r\n  --button-success-hover-bd-color: #95d475;\r\n  --button-success-hover-bg-color: #95d475;\r\n  --button-success-focus-visible-outline-color: #b3e19d;\r\n  --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\r\n  --button-success-focus-visible-outline-offset: 1px;\r\n  --button-success-disabled-color: #ffffff80;\r\n  --button-success-disabled-bd-color: #b3e19d;\r\n  --button-success-disabled-bg-color: #b3e19d;\r\n\r\n  /* info按钮 */\r\n  --button-info-color: #ffffff;\r\n  --button-info-bd-color: #909399;\r\n  --button-info-bg-color: #909399;\r\n  --button-info-active-color: #ffffff;\r\n  --button-info-active-bd-color: #73767a;\r\n  --button-info-active-bg-color: #73767a;\r\n  --button-info-hover-color: #ffffff;\r\n  --button-info-hover-bd-color: #b1b3b8;\r\n  --button-info-hover-bg-color: #b1b3b8;\r\n  --button-info-focus-visible-outline-color: #c8c9cc;\r\n  --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\r\n  --button-info-focus-visible-outline-offset: 1px;\r\n  --button-info-disabled-color: #ffffff80;\r\n  --button-info-disabled-bd-color: #c8c9cc;\r\n  --button-info-disabled-bg-color: #c8c9cc;\r\n\r\n  /* warning按钮 */\r\n  --button-warning-color: #ffffff;\r\n  --button-warning-bd-color: #e6a23c;\r\n  --button-warning-bg-color: #e6a23c;\r\n  --button-warning-active-color: #ffffff;\r\n  --button-warning-active-bd-color: #b88230;\r\n  --button-warning-active-bg-color: #b88230;\r\n  --button-warning-hover-color: #ffffff80;\r\n  --button-warning-hover-bd-color: #eebe77;\r\n  --button-warning-hover-bg-color: #eebe77;\r\n  --button-warning-focus-visible-outline-color: #f3d19e;\r\n  --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\r\n  --button-warning-focus-visible-outline-offset: 1px;\r\n  --button-warning-disabled-color: #ffffff80;\r\n  --button-warning-disabled-bd-color: #f3d19e;\r\n  --button-warning-disabled-bg-color: #f3d19e;\r\n\r\n  /* danger按钮 */\r\n  --button-danger-color: #ffffff;\r\n  --button-danger-bd-color: #f56c6c;\r\n  --button-danger-bg-color: #f56c6c;\r\n  --button-danger-active-color: #ffffff;\r\n  --button-danger-active-bd-color: #c45656;\r\n  --button-danger-active-bg-color: #c45656;\r\n  --button-danger-hover-color: #ffffff;\r\n  --button-danger-hover-bd-color: #f89898;\r\n  --button-danger-hover-bg-color: #f89898;\r\n  --button-danger-focus-visible-outline-color: #fab6b6;\r\n  --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\r\n  --button-danger-focus-visible-outline-offset: 1px;\r\n  --button-danger-disabled-color: #ffffff80;\r\n  --button-danger-disabled-bd-color: #fab6b6;\r\n  --button-danger-disabled-bg-color: #fab6b6;\r\n\r\n  /* xiaomi-primary按钮 */\r\n  --button-xiaomi-primary-color: #ffffff;\r\n  --button-xiaomi-primary-bd-color: #ff5c00;\r\n  --button-xiaomi-primary-bg-color: #ff5c00;\r\n  --button-xiaomi-primary-active-color: #ffffff;\r\n  --button-xiaomi-primary-active-bd-color: #da4f00;\r\n  --button-xiaomi-primary-active-bg-color: #da4f00;\r\n  --button-xiaomi-primary-hover-color: #ffffff;\r\n  --button-xiaomi-primary-hover-bd-color: #ff7e29;\r\n  --button-xiaomi-primary-hover-bg-color: #ff7e29;\r\n  --button-xiaomi-primary-focus-visible-outline-color: #ffa061;\r\n  --button-xiaomi-primary-focus-visible-outline: 2px solid var(--button-xiaomi-primary-focus-visible-outline-color);\r\n  --button-xiaomi-primary-focus-visible-outline-offset: 1px;\r\n  --button-xiaomi-primary-disabled-color: #ffffff80;\r\n  --button-xiaomi-primary-disabled-bd-color: #fad5b6;\r\n  --button-xiaomi-primary-disabled-bg-color: #fad5b6;\r\n\r\n  /* violet按钮 */\r\n  --button-violet-color: #ffffff;\r\n  --button-violet-bd-color: #626aef;\r\n  --button-violet-bg-color: #626aef;\r\n  --button-violet-active-color: #ffffff;\r\n  --button-violet-active-bd-color: #8188f2;\r\n  --button-violet-active-bg-color: #8188f2;\r\n  --button-violet-hover-color: #ffffff;\r\n  --button-violet-hover-bd-color: #4b50ad;\r\n  --button-violet-hover-bg-color: #4b50ad;\r\n  --button-violet-focus-visible-outline-color: #2a598a;\r\n  --button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);\r\n  --button-violet-focus-visible-outline-offset: 1px;\r\n  --button-violet-disabled-color: #ffffff80;\r\n  --button-violet-disabled-bd-color: #3b3f82;\r\n  --button-violet-disabled-bg-color: #3b3f82;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .pops {\r\n    /* default按钮 */\r\n    --button-default-color: #cfd3dc;\r\n    --button-default-bd-color: #4c4d4f;\r\n    --button-default-bg-color: transparent;\r\n    --button-default-active-color: #409eff;\r\n    --button-default-active-bd-color: #409eff;\r\n    --button-default-active-bg-color: #18222c;\r\n    --button-default-hover-color: #409eff;\r\n    --button-default-hover-bd-color: #213d5b;\r\n    --button-default-hover-bg-color: #18222c;\r\n    --button-default-focus-visible-outline-color: #2a598a;\r\n    --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\r\n    --button-default-focus-visible-outline-offset: 1px;\r\n    --button-default-disabled-color: #ffffff80;\r\n    --button-default-disabled-bd-color: #414243;\r\n    --button-default-disabled-bg-color: transparent;\r\n\r\n    /* primary按钮 */\r\n    --button-primary-color: #ffffff;\r\n    --button-primary-bd-color: #409eff;\r\n    --button-primary-bg-color: #409eff;\r\n    --button-primary-active-color: #ffffff;\r\n    --button-primary-active-bd-color: #66b1ff;\r\n    --button-primary-active-bg-color: #66b1ff;\r\n    --button-primary-hover-color: #ffffff;\r\n    --button-primary-hover-bd-color: #3375b9;\r\n    --button-primary-hover-bg-color: #3375b9;\r\n    --button-primary-focus-visible-outline-color: #2a598a;\r\n    --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\r\n    --button-primary-focus-visible-outline-offset: 1px;\r\n    --button-primary-disabled-color: #ffffff80;\r\n    --button-primary-disabled-bd-color: #2a598a;\r\n    --button-primary-disabled-bg-color: #2a598a;\r\n\r\n    /* success按钮 */\r\n    --button-success-color: #ffffff;\r\n    --button-success-bd-color: #67c23a;\r\n    --button-success-bg-color: #67c23a;\r\n    --button-success-active-color: #ffffff;\r\n    --button-success-active-bd-color: #85ce61;\r\n    --button-success-active-bg-color: #85ce61;\r\n    --button-success-hover-color: #ffffff;\r\n    --button-success-hover-bd-color: #4e8e2f;\r\n    --button-success-hover-bg-color: #4e8e2f;\r\n    --button-success-focus-visible-outline-color: #3e6b27;\r\n    --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\r\n    --button-success-focus-visible-outline-offset: 1px;\r\n    --button-success-disabled-color: #ffffff80;\r\n    --button-success-disabled-bd-color: #3e6b27;\r\n    --button-success-disabled-bg-color: #3e6b27;\r\n\r\n    /* info按钮 */\r\n    --button-info-color: #ffffff;\r\n    --button-info-bd-color: #909399;\r\n    --button-info-bg-color: #909399;\r\n    --button-info-active-color: #ffffff;\r\n    --button-info-active-bd-color: #a6a9ad;\r\n    --button-info-active-bg-color: #a6a9ad;\r\n    --button-info-hover-color: #ffffff;\r\n    --button-info-hover-bd-color: #6b6d71;\r\n    --button-info-hover-bg-color: #6b6d71;\r\n    --button-info-focus-visible-outline-color: #525457;\r\n    --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\r\n    --button-info-focus-visible-outline-offset: 1px;\r\n    --button-info-disabled-color: #ffffff80;\r\n    --button-info-disabled-bd-color: #525457;\r\n    --button-info-disabled-bg-color: #525457;\r\n\r\n    /* warning按钮 */\r\n    --button-warning-color: #ffffff;\r\n    --button-warning-bd-color: #e6a23c;\r\n    --button-warning-bg-color: #e6a23c;\r\n    --button-warning-active-color: #ffffff;\r\n    --button-warning-active-bd-color: #ebb563;\r\n    --button-warning-active-bg-color: #ebb563;\r\n    --button-warning-hover-color: #ffffff80;\r\n    --button-warning-hover-bd-color: #a77730;\r\n    --button-warning-hover-bg-color: #a77730;\r\n    --button-warning-focus-visible-outline-color: #7d5b28;\r\n    --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\r\n    --button-warning-focus-visible-outline-offset: 1px;\r\n    --button-warning-disabled-color: #ffffff80;\r\n    --button-warning-disabled-bd-color: #7d5b28;\r\n    --button-warning-disabled-bg-color: #7d5b28;\r\n\r\n    /* danger按钮 */\r\n    --button-danger-color: #ffffff;\r\n    --button-danger-bd-color: #f56c6c;\r\n    --button-danger-bg-color: #f56c6c;\r\n    --button-danger-active-color: #ffffff;\r\n    --button-danger-active-bd-color: #f78989;\r\n    --button-danger-active-bg-color: #f78989;\r\n    --button-danger-hover-color: #ffffff;\r\n    --button-danger-hover-bd-color: #b25252;\r\n    --button-danger-hover-bg-color: #b25252;\r\n    --button-danger-focus-visible-outline-color: #854040;\r\n    --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\r\n    --button-danger-focus-visible-outline-offset: 1px;\r\n    --button-danger-disabled-color: #ffffff80;\r\n    --button-danger-disabled-bd-color: #854040;\r\n    --button-danger-disabled-bg-color: #854040;\r\n  }\r\n}\r\n.pops[data-bottom-btn=\"false\"] {\r\n  --container-bottom-btn-height: 0px;\r\n}\r\n.pops button {\r\n  white-space: nowrap;\r\n  float: right;\r\n  display: inline-block;\r\n  margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);\r\n  padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);\r\n  outline: 0;\r\n}\r\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\r\n  display: none;\r\n}\r\n.pops button {\r\n  border-radius: var(--button-radius);\r\n  box-shadow: none;\r\n  font-weight: 400;\r\n  font-size: var(--button-font-size);\r\n  cursor: pointer;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\n.pops button {\r\n  display: flex;\r\n  align-items: center;\r\n  height: var(--button-height);\r\n  line-height: normal;\r\n  box-sizing: border-box;\r\n  border: 1px solid var(--button-bd-color);\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops button {\r\n  color: var(--button-color);\r\n  border-color: var(--button-bd-color);\r\n  background-color: var(--button-bg-color);\r\n}\r\n.pops button:active {\r\n  color: var(--button-color);\r\n  border-color: var(--button-bd-color);\r\n  background-color: var(--button-bg-color);\r\n  outline: 0;\r\n}\r\n.pops button:hover {\r\n  color: var(--button-color);\r\n  border-color: var(--button-bd-color);\r\n  background-color: var(--button-bg-color);\r\n}\r\n.pops button:focus-visible {\r\n  color: var(--button-color);\r\n  border-color: var(--button-bd-color);\r\n  background-color: var(--button-bg-color);\r\n}\r\n.pops button:disabled {\r\n  cursor: not-allowed;\r\n  color: var(--button-color);\r\n  border-color: var(--button-bd-color);\r\n  background-color: var(--button-bg-color);\r\n}\r\n.pops button.pops-button-large {\r\n  --button-height: 32px;\r\n  --button-padding-top: 12px;\r\n  --button-padding-bottom: 12px;\r\n  --button-padding-left: 19px;\r\n  --button-padding-right: 19px;\r\n  --button-font-size: 14px;\r\n  --button-border-radius: 4px;\r\n}\r\n\r\n.pops button.pops-button-small {\r\n  --button-height: 24px;\r\n  --button-padding-top: 5px;\r\n  --button-padding-bottom: 5px;\r\n  --button-padding-left: 11px;\r\n  --button-padding-right: 11px;\r\n  --button-font-size: 12px;\r\n  --button-border-radius: 4px;\r\n}\r\n.pops-panel-button-no-icon .pops-panel-button_inner i {\r\n  display: none;\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner {\r\n  flex-direction: row-reverse;\r\n}\r\n.pops-panel-button .pops-panel-button_inner i:has(svg),\r\n.pops-panel-button-right-icon .pops-panel-button-text {\r\n  margin-right: 6px;\r\n}\r\n\r\n.pops button[data-type=\"default\"] {\r\n  --button-color: var(--button-default-color);\r\n  --button-bd-color: var(--button-default-bd-color);\r\n  --button-bg-color: var(--button-default-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:active {\r\n  --button-color: var(--button-default-active-color);\r\n  --button-bd-color: var(--button-default-active-bd-color);\r\n  --button-bg-color: var(--button-default-active-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:hover {\r\n  --button-color: var(--button-default-hover-color);\r\n  --button-bd-color: var(--button-default-hover-bd-color);\r\n  --button-bg-color: var(--button-default-hover-bg-color);\r\n}\r\n.pops button[data-type=\"default\"]:focus-visible {\r\n  outline: var(--button-default-focus-visible-outline);\r\n  outline-offset: var(--button-default-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"default\"]:disabled {\r\n  --button-color: var(--button-default-disabled-color);\r\n  --button-bd-color: var(--button-default-disabled-bd-color);\r\n  --button-bg-color: var(--button-default-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"primary\"] {\r\n  --button-color: var(--button-primary-color);\r\n  --button-bd-color: var(--button-primary-bd-color);\r\n  --button-bg-color: var(--button-primary-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:active {\r\n  --button-color: var(--button-primary-active-color);\r\n  --button-bd-color: var(--button-primary-active-bd-color);\r\n  --button-bg-color: var(--button-primary-active-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:hover {\r\n  --button-color: var(--button-primary-hover-color);\r\n  --button-bd-color: var(--button-primary-hover-bd-color);\r\n  --button-bg-color: var(--button-primary-hover-bg-color);\r\n}\r\n.pops button[data-type=\"primary\"]:focus-visible {\r\n  outline: var(--button-primary-focus-visible-outline);\r\n  outline-offset: var(--button-primary-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"primary\"]:disabled {\r\n  --button-color: var(--button-primary-disabled-color);\r\n  --button-bd-color: var(--button-primary-disabled-bd-color);\r\n  --button-bg-color: var(--button-primary-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"success\"] {\r\n  --button-color: var(--button-success-color);\r\n  --button-bd-color: var(--button-success-bd-color);\r\n  --button-bg-color: var(--button-success-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:active {\r\n  --button-color: var(--button-success-active-color);\r\n  --button-bd-color: var(--button-success-active-bd-color);\r\n  --button-bg-color: var(--button-success-active-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:hover {\r\n  --button-color: var(--button-success-hover-color);\r\n  --button-bd-color: var(--button-success-hover-bd-color);\r\n  --button-bg-color: var(--button-success-hover-bg-color);\r\n}\r\n.pops button[data-type=\"success\"]:focus-visible {\r\n  outline: var(--button-success-focus-visible-outline);\r\n  outline-offset: var(--button-success-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"success\"]:disabled {\r\n  --button-color: var(--button-success-disabled-color);\r\n  --button-bd-color: var(--button-success-disabled-bd-color);\r\n  --button-bg-color: var(--button-success-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"info\"] {\r\n  --button-color: var(--button-info-color);\r\n  --button-bd-color: var(--button-info-bd-color);\r\n  --button-bg-color: var(--button-info-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:active {\r\n  --button-color: var(--button-info-active-color);\r\n  --button-bd-color: var(--button-info-active-bd-color);\r\n  --button-bg-color: var(--button-info-active-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:hover {\r\n  --button-color: var(--button-info-hover-color);\r\n  --button-bd-color: var(--button-info-hover-bd-color);\r\n  --button-bg-color: var(--button-info-hover-bg-color);\r\n}\r\n.pops button[data-type=\"info\"]:focus-visible {\r\n  outline: var(--button-info-focus-visible-outline);\r\n  outline-offset: var(--button-info-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"info\"]:disabled {\r\n  --button-color: var(--button-info-disabled-color);\r\n  --button-bd-color: var(--button-info-disabled-bd-color);\r\n  --button-bg-color: var(--button-info-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"warning\"] {\r\n  --button-color: var(--button-warning-color);\r\n  --button-bd-color: var(--button-warning-bd-color);\r\n  --button-bg-color: var(--button-warning-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:active {\r\n  --button-color: var(--button-warning-active-color);\r\n  --button-bd-color: var(--button-warning-active-bd-color);\r\n  --button-bg-color: var(--button-warning-active-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:hover {\r\n  --button-color: var(--button-warning-hover-color);\r\n  --button-bd-color: var(--button-warning-hover-bd-color);\r\n  --button-bg-color: var(--button-warning-hover-bg-color);\r\n}\r\n.pops button[data-type=\"warning\"]:focus-visible {\r\n  outline: var(--button-warning-focus-visible-outline);\r\n  outline-offset: var(--button-warning-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"warning\"]:disabled {\r\n  --button-color: var(--button-warning-disabled-color);\r\n  --button-bd-color: var(--button-warning-disabled-bd-color);\r\n  --button-bg-color: var(--button-warning-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"danger\"] {\r\n  --button-color: var(--button-danger-color);\r\n  --button-bd-color: var(--button-danger-bd-color);\r\n  --button-bg-color: var(--button-danger-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:active {\r\n  --button-color: var(--button-danger-active-color);\r\n  --button-bd-color: var(--button-danger-active-bd-color);\r\n  --button-bg-color: var(--button-danger-active-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:hover {\r\n  --button-color: var(--button-danger-hover-color);\r\n  --button-bd-color: var(--button-danger-hover-bd-color);\r\n  --button-bg-color: var(--button-danger-hover-bg-color);\r\n}\r\n.pops button[data-type=\"danger\"]:focus-visible {\r\n  outline: var(--button-danger-focus-visible-outline);\r\n  outline-offset: var(--button-danger-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"danger\"]:disabled {\r\n  --button-color: var(--button-danger-disabled-color);\r\n  --button-bd-color: var(--button-danger-disabled-bd-color);\r\n  --button-bg-color: var(--button-danger-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"xiaomi-primary\"] {\r\n  --button-color: var(--button-xiaomi-primary-color);\r\n  --button-bd-color: var(--button-xiaomi-primary-bd-color);\r\n  --button-bg-color: var(--button-xiaomi-primary-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:active {\r\n  --button-color: var(--button-xiaomi-primary-active-color);\r\n  --button-bd-color: var(--button-xiaomi-primary-active-bd-color);\r\n  --button-bg-color: var(--button-xiaomi-primary-active-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:hover {\r\n  --button-color: var(--button-xiaomi-primary-hover-color);\r\n  --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\r\n  --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:focus-visible {\r\n  outline: var(--button-xiaomi-primary-focus-visible-outline);\r\n  outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"xiaomi-primary\"]:disabled {\r\n  --button-color: var(--button-xiaomi-primary-disabled-color);\r\n  --button-bd-color: var(--button-xiaomi-primary-disabled-bd-color);\r\n  --button-bg-color: var(--button-xiaomi-primary-disabled-bg-color);\r\n}\r\n\r\n.pops button[data-type=\"violet\"] {\r\n  --button-color: var(--button-violet-color);\r\n  --button-bd-color: var(--button-violet-bd-color);\r\n  --button-bg-color: var(--button-violet-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:active {\r\n  --button-color: var(--button-violet-active-color);\r\n  --button-bd-color: var(--button-violet-active-bd-color);\r\n  --button-bg-color: var(--button-violet-active-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:hover {\r\n  --button-color: var(--button-violet-hover-color);\r\n  --button-bd-color: var(--button-violet-hover-bd-color);\r\n  --button-bg-color: var(--button-violet-hover-bg-color);\r\n}\r\n.pops button[data-type=\"violet\"]:focus-visible {\r\n  outline: var(--button-violet-focus-visible-outline);\r\n  outline-offset: var(--button-violet-focus-visible-outline-offset);\r\n}\r\n.pops button[data-type=\"violet\"]:disabled {\r\n  --button-color: var(--button-violet-disabled-color);\r\n  --button-bd-color: var(--button-violet-disabled-bd-color);\r\n  --button-bg-color: var(--button-violet-disabled-bg-color);\r\n}\r\n";
+    var buttonCSS = ".pops {\n  --button-font-size: 14px;\n  --button-height: 32px;\n  --button-color: rgb(51, 51, 51);\n  --button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n  --button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n  --button-margin-top: 0px;\n  --button-margin-bottom: 0px;\n  --button-margin-left: 5px;\n  --button-margin-right: 5px;\n  --button-padding-top: 6px;\n  --button-padding-bottom: 6px;\n  --button-padding-left: 12px;\n  --button-padding-right: 12px;\n  --button-radius: 4px;\n\n  --container-title-height: 55px;\n  --container-bottom-btn-height: 55px;\n\n  /* default按钮 */\n  --button-default-color: #333333;\n  --button-default-bd-color: #dcdfe6;\n  --button-default-bg-color: #ffffff;\n  --button-default-active-color: #409eff;\n  --button-default-active-bd-color: #409eff;\n  --button-default-active-bg-color: #ecf5ff;\n  --button-default-hover-color: #409eff;\n  --button-default-hover-bd-color: #c6e2ff;\n  --button-default-hover-bg-color: #ecf5ff;\n  --button-default-focus-visible-outline-color: #a0cfff;\n  --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n  --button-default-focus-visible-outline-offset: 1px;\n  --button-default-disabled-color: #a8abb2;\n  --button-default-disabled-bd-color: #ffffff;\n  --button-default-disabled-bg-color: #e4e7ed;\n\n  /* primary按钮 */\n  --button-primary-color: #ffffff;\n  --button-primary-bd-color: #409eff;\n  --button-primary-bg-color: #409eff;\n  --button-primary-active-color: #ffffff;\n  --button-primary-active-bd-color: #337ecc;\n  --button-primary-active-bg-color: #337ecc;\n  --button-primary-hover-color: #ffffff;\n  --button-primary-hover-bd-color: #79bbff;\n  --button-primary-hover-bg-color: #79bbff;\n  --button-primary-focus-visible-outline-color: #a0cfff;\n  --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n  --button-primary-focus-visible-outline-offset: 1px;\n  --button-primary-disabled-color: #ffffff80;\n  --button-primary-disabled-bd-color: #a0cfff;\n  --button-primary-disabled-bg-color: #a0cfff;\n\n  /* success按钮 */\n  --button-success-color: #ffffff;\n  --button-success-bd-color: #4cae4c;\n  --button-success-bg-color: #5cb85c;\n  --button-success-active-color: #ffffff;\n  --button-success-active-bd-color: #529b2e;\n  --button-success-active-bg-color: #529b2e;\n  --button-success-hover-color: #ffffff;\n  --button-success-hover-bd-color: #95d475;\n  --button-success-hover-bg-color: #95d475;\n  --button-success-focus-visible-outline-color: #b3e19d;\n  --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n  --button-success-focus-visible-outline-offset: 1px;\n  --button-success-disabled-color: #ffffff80;\n  --button-success-disabled-bd-color: #b3e19d;\n  --button-success-disabled-bg-color: #b3e19d;\n\n  /* info按钮 */\n  --button-info-color: #ffffff;\n  --button-info-bd-color: #909399;\n  --button-info-bg-color: #909399;\n  --button-info-active-color: #ffffff;\n  --button-info-active-bd-color: #73767a;\n  --button-info-active-bg-color: #73767a;\n  --button-info-hover-color: #ffffff;\n  --button-info-hover-bd-color: #b1b3b8;\n  --button-info-hover-bg-color: #b1b3b8;\n  --button-info-focus-visible-outline-color: #c8c9cc;\n  --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n  --button-info-focus-visible-outline-offset: 1px;\n  --button-info-disabled-color: #ffffff80;\n  --button-info-disabled-bd-color: #c8c9cc;\n  --button-info-disabled-bg-color: #c8c9cc;\n\n  /* warning按钮 */\n  --button-warning-color: #ffffff;\n  --button-warning-bd-color: #e6a23c;\n  --button-warning-bg-color: #e6a23c;\n  --button-warning-active-color: #ffffff;\n  --button-warning-active-bd-color: #b88230;\n  --button-warning-active-bg-color: #b88230;\n  --button-warning-hover-color: #ffffff80;\n  --button-warning-hover-bd-color: #eebe77;\n  --button-warning-hover-bg-color: #eebe77;\n  --button-warning-focus-visible-outline-color: #f3d19e;\n  --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n  --button-warning-focus-visible-outline-offset: 1px;\n  --button-warning-disabled-color: #ffffff80;\n  --button-warning-disabled-bd-color: #f3d19e;\n  --button-warning-disabled-bg-color: #f3d19e;\n\n  /* danger按钮 */\n  --button-danger-color: #ffffff;\n  --button-danger-bd-color: #f56c6c;\n  --button-danger-bg-color: #f56c6c;\n  --button-danger-active-color: #ffffff;\n  --button-danger-active-bd-color: #c45656;\n  --button-danger-active-bg-color: #c45656;\n  --button-danger-hover-color: #ffffff;\n  --button-danger-hover-bd-color: #f89898;\n  --button-danger-hover-bg-color: #f89898;\n  --button-danger-focus-visible-outline-color: #fab6b6;\n  --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n  --button-danger-focus-visible-outline-offset: 1px;\n  --button-danger-disabled-color: #ffffff80;\n  --button-danger-disabled-bd-color: #fab6b6;\n  --button-danger-disabled-bg-color: #fab6b6;\n\n  /* xiaomi-primary按钮 */\n  --button-xiaomi-primary-color: #ffffff;\n  --button-xiaomi-primary-bd-color: #ff5c00;\n  --button-xiaomi-primary-bg-color: #ff5c00;\n  --button-xiaomi-primary-active-color: #ffffff;\n  --button-xiaomi-primary-active-bd-color: #da4f00;\n  --button-xiaomi-primary-active-bg-color: #da4f00;\n  --button-xiaomi-primary-hover-color: #ffffff;\n  --button-xiaomi-primary-hover-bd-color: #ff7e29;\n  --button-xiaomi-primary-hover-bg-color: #ff7e29;\n  --button-xiaomi-primary-focus-visible-outline-color: #ffa061;\n  --button-xiaomi-primary-focus-visible-outline: 2px solid var(--button-xiaomi-primary-focus-visible-outline-color);\n  --button-xiaomi-primary-focus-visible-outline-offset: 1px;\n  --button-xiaomi-primary-disabled-color: #ffffff80;\n  --button-xiaomi-primary-disabled-bd-color: #fad5b6;\n  --button-xiaomi-primary-disabled-bg-color: #fad5b6;\n\n  /* violet按钮 */\n  --button-violet-color: #ffffff;\n  --button-violet-bd-color: #626aef;\n  --button-violet-bg-color: #626aef;\n  --button-violet-active-color: #ffffff;\n  --button-violet-active-bd-color: #8188f2;\n  --button-violet-active-bg-color: #8188f2;\n  --button-violet-hover-color: #ffffff;\n  --button-violet-hover-bd-color: #4b50ad;\n  --button-violet-hover-bg-color: #4b50ad;\n  --button-violet-focus-visible-outline-color: #2a598a;\n  --button-violet-focus-visible-outline: 2px solid var(--button-violet-focus-visible-outline-color);\n  --button-violet-focus-visible-outline-offset: 1px;\n  --button-violet-disabled-color: #ffffff80;\n  --button-violet-disabled-bd-color: #3b3f82;\n  --button-violet-disabled-bg-color: #3b3f82;\n}\n\n@media (prefers-color-scheme: dark) {\n  .pops {\n    /* default按钮 */\n    --button-default-color: #cfd3dc;\n    --button-default-bd-color: #4c4d4f;\n    --button-default-bg-color: transparent;\n    --button-default-active-color: #409eff;\n    --button-default-active-bd-color: #409eff;\n    --button-default-active-bg-color: #18222c;\n    --button-default-hover-color: #409eff;\n    --button-default-hover-bd-color: #213d5b;\n    --button-default-hover-bg-color: #18222c;\n    --button-default-focus-visible-outline-color: #2a598a;\n    --button-default-focus-visible-outline: 2px solid var(--button-default-focus-visible-outline-color);\n    --button-default-focus-visible-outline-offset: 1px;\n    --button-default-disabled-color: #ffffff80;\n    --button-default-disabled-bd-color: #414243;\n    --button-default-disabled-bg-color: transparent;\n\n    /* primary按钮 */\n    --button-primary-color: #ffffff;\n    --button-primary-bd-color: #409eff;\n    --button-primary-bg-color: #409eff;\n    --button-primary-active-color: #ffffff;\n    --button-primary-active-bd-color: #66b1ff;\n    --button-primary-active-bg-color: #66b1ff;\n    --button-primary-hover-color: #ffffff;\n    --button-primary-hover-bd-color: #3375b9;\n    --button-primary-hover-bg-color: #3375b9;\n    --button-primary-focus-visible-outline-color: #2a598a;\n    --button-primary-focus-visible-outline: 2px solid var(--button-primary-focus-visible-outline-color);\n    --button-primary-focus-visible-outline-offset: 1px;\n    --button-primary-disabled-color: #ffffff80;\n    --button-primary-disabled-bd-color: #2a598a;\n    --button-primary-disabled-bg-color: #2a598a;\n\n    /* success按钮 */\n    --button-success-color: #ffffff;\n    --button-success-bd-color: #67c23a;\n    --button-success-bg-color: #67c23a;\n    --button-success-active-color: #ffffff;\n    --button-success-active-bd-color: #85ce61;\n    --button-success-active-bg-color: #85ce61;\n    --button-success-hover-color: #ffffff;\n    --button-success-hover-bd-color: #4e8e2f;\n    --button-success-hover-bg-color: #4e8e2f;\n    --button-success-focus-visible-outline-color: #3e6b27;\n    --button-success-focus-visible-outline: 2px solid var(--button-success-focus-visible-outline-color);\n    --button-success-focus-visible-outline-offset: 1px;\n    --button-success-disabled-color: #ffffff80;\n    --button-success-disabled-bd-color: #3e6b27;\n    --button-success-disabled-bg-color: #3e6b27;\n\n    /* info按钮 */\n    --button-info-color: #ffffff;\n    --button-info-bd-color: #909399;\n    --button-info-bg-color: #909399;\n    --button-info-active-color: #ffffff;\n    --button-info-active-bd-color: #a6a9ad;\n    --button-info-active-bg-color: #a6a9ad;\n    --button-info-hover-color: #ffffff;\n    --button-info-hover-bd-color: #6b6d71;\n    --button-info-hover-bg-color: #6b6d71;\n    --button-info-focus-visible-outline-color: #525457;\n    --button-info-focus-visible-outline: 2px solid var(--button-info-focus-visible-outline-color);\n    --button-info-focus-visible-outline-offset: 1px;\n    --button-info-disabled-color: #ffffff80;\n    --button-info-disabled-bd-color: #525457;\n    --button-info-disabled-bg-color: #525457;\n\n    /* warning按钮 */\n    --button-warning-color: #ffffff;\n    --button-warning-bd-color: #e6a23c;\n    --button-warning-bg-color: #e6a23c;\n    --button-warning-active-color: #ffffff;\n    --button-warning-active-bd-color: #ebb563;\n    --button-warning-active-bg-color: #ebb563;\n    --button-warning-hover-color: #ffffff80;\n    --button-warning-hover-bd-color: #a77730;\n    --button-warning-hover-bg-color: #a77730;\n    --button-warning-focus-visible-outline-color: #7d5b28;\n    --button-warning-focus-visible-outline: 2px solid var(--button-warning-focus-visible-outline-color);\n    --button-warning-focus-visible-outline-offset: 1px;\n    --button-warning-disabled-color: #ffffff80;\n    --button-warning-disabled-bd-color: #7d5b28;\n    --button-warning-disabled-bg-color: #7d5b28;\n\n    /* danger按钮 */\n    --button-danger-color: #ffffff;\n    --button-danger-bd-color: #f56c6c;\n    --button-danger-bg-color: #f56c6c;\n    --button-danger-active-color: #ffffff;\n    --button-danger-active-bd-color: #f78989;\n    --button-danger-active-bg-color: #f78989;\n    --button-danger-hover-color: #ffffff;\n    --button-danger-hover-bd-color: #b25252;\n    --button-danger-hover-bg-color: #b25252;\n    --button-danger-focus-visible-outline-color: #854040;\n    --button-danger-focus-visible-outline: 2px solid var(--button-danger-focus-visible-outline-color);\n    --button-danger-focus-visible-outline-offset: 1px;\n    --button-danger-disabled-color: #ffffff80;\n    --button-danger-disabled-bd-color: #854040;\n    --button-danger-disabled-bg-color: #854040;\n  }\n}\n.pops[data-bottom-btn=\"false\"] {\n  --container-bottom-btn-height: 0px;\n}\n.pops button {\n  white-space: nowrap;\n  float: right;\n  display: inline-block;\n  margin: var(--button-margin-top) var(--button-margin-right) var(--button-margin-bottom) var(--button-margin-left);\n  padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);\n  outline: 0;\n}\n.pops button[data-has-icon=\"false\"] .pops-bottom-icon {\n  display: none;\n}\n.pops button {\n  border-radius: var(--button-radius);\n  box-shadow: none;\n  font-weight: 400;\n  font-size: var(--button-font-size);\n  cursor: pointer;\n  transition: all 0.3s ease-in-out;\n}\n.pops button {\n  display: flex;\n  align-items: center;\n  height: var(--button-height);\n  line-height: normal;\n  box-sizing: border-box;\n  border: 1px solid var(--button-bd-color);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops button {\n  color: var(--button-color);\n  border-color: var(--button-bd-color);\n  background-color: var(--button-bg-color);\n}\n.pops button:active {\n  color: var(--button-color);\n  border-color: var(--button-bd-color);\n  background-color: var(--button-bg-color);\n  outline: 0;\n}\n.pops button:hover {\n  color: var(--button-color);\n  border-color: var(--button-bd-color);\n  background-color: var(--button-bg-color);\n}\n.pops button:focus-visible {\n  color: var(--button-color);\n  border-color: var(--button-bd-color);\n  background-color: var(--button-bg-color);\n}\n.pops button:disabled {\n  cursor: not-allowed;\n  color: var(--button-color);\n  border-color: var(--button-bd-color);\n  background-color: var(--button-bg-color);\n}\n.pops button.pops-button-large {\n  --button-height: 32px;\n  --button-padding-top: 12px;\n  --button-padding-bottom: 12px;\n  --button-padding-left: 19px;\n  --button-padding-right: 19px;\n  --button-font-size: 14px;\n  --button-border-radius: 4px;\n}\n\n.pops button.pops-button-small {\n  --button-height: 24px;\n  --button-padding-top: 5px;\n  --button-padding-bottom: 5px;\n  --button-padding-left: 11px;\n  --button-padding-right: 11px;\n  --button-font-size: 12px;\n  --button-border-radius: 4px;\n}\n.pops-panel-button-no-icon .pops-panel-button_inner i {\n  display: none;\n}\n.pops-panel-button-right-icon .pops-panel-button_inner {\n  flex-direction: row-reverse;\n}\n.pops-panel-button .pops-panel-button_inner i:has(svg),\n.pops-panel-button-right-icon .pops-panel-button-text {\n  margin-right: 6px;\n}\n\n.pops button[data-type=\"default\"] {\n  --button-color: var(--button-default-color);\n  --button-bd-color: var(--button-default-bd-color);\n  --button-bg-color: var(--button-default-bg-color);\n}\n.pops button[data-type=\"default\"]:active {\n  --button-color: var(--button-default-active-color);\n  --button-bd-color: var(--button-default-active-bd-color);\n  --button-bg-color: var(--button-default-active-bg-color);\n}\n.pops button[data-type=\"default\"]:hover {\n  --button-color: var(--button-default-hover-color);\n  --button-bd-color: var(--button-default-hover-bd-color);\n  --button-bg-color: var(--button-default-hover-bg-color);\n}\n.pops button[data-type=\"default\"]:focus-visible {\n  outline: var(--button-default-focus-visible-outline);\n  outline-offset: var(--button-default-focus-visible-outline-offset);\n}\n.pops button[data-type=\"default\"]:disabled {\n  --button-color: var(--button-default-disabled-color);\n  --button-bd-color: var(--button-default-disabled-bd-color);\n  --button-bg-color: var(--button-default-disabled-bg-color);\n}\n\n.pops button[data-type=\"primary\"] {\n  --button-color: var(--button-primary-color);\n  --button-bd-color: var(--button-primary-bd-color);\n  --button-bg-color: var(--button-primary-bg-color);\n}\n.pops button[data-type=\"primary\"]:active {\n  --button-color: var(--button-primary-active-color);\n  --button-bd-color: var(--button-primary-active-bd-color);\n  --button-bg-color: var(--button-primary-active-bg-color);\n}\n.pops button[data-type=\"primary\"]:hover {\n  --button-color: var(--button-primary-hover-color);\n  --button-bd-color: var(--button-primary-hover-bd-color);\n  --button-bg-color: var(--button-primary-hover-bg-color);\n}\n.pops button[data-type=\"primary\"]:focus-visible {\n  outline: var(--button-primary-focus-visible-outline);\n  outline-offset: var(--button-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"primary\"]:disabled {\n  --button-color: var(--button-primary-disabled-color);\n  --button-bd-color: var(--button-primary-disabled-bd-color);\n  --button-bg-color: var(--button-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"success\"] {\n  --button-color: var(--button-success-color);\n  --button-bd-color: var(--button-success-bd-color);\n  --button-bg-color: var(--button-success-bg-color);\n}\n.pops button[data-type=\"success\"]:active {\n  --button-color: var(--button-success-active-color);\n  --button-bd-color: var(--button-success-active-bd-color);\n  --button-bg-color: var(--button-success-active-bg-color);\n}\n.pops button[data-type=\"success\"]:hover {\n  --button-color: var(--button-success-hover-color);\n  --button-bd-color: var(--button-success-hover-bd-color);\n  --button-bg-color: var(--button-success-hover-bg-color);\n}\n.pops button[data-type=\"success\"]:focus-visible {\n  outline: var(--button-success-focus-visible-outline);\n  outline-offset: var(--button-success-focus-visible-outline-offset);\n}\n.pops button[data-type=\"success\"]:disabled {\n  --button-color: var(--button-success-disabled-color);\n  --button-bd-color: var(--button-success-disabled-bd-color);\n  --button-bg-color: var(--button-success-disabled-bg-color);\n}\n\n.pops button[data-type=\"info\"] {\n  --button-color: var(--button-info-color);\n  --button-bd-color: var(--button-info-bd-color);\n  --button-bg-color: var(--button-info-bg-color);\n}\n.pops button[data-type=\"info\"]:active {\n  --button-color: var(--button-info-active-color);\n  --button-bd-color: var(--button-info-active-bd-color);\n  --button-bg-color: var(--button-info-active-bg-color);\n}\n.pops button[data-type=\"info\"]:hover {\n  --button-color: var(--button-info-hover-color);\n  --button-bd-color: var(--button-info-hover-bd-color);\n  --button-bg-color: var(--button-info-hover-bg-color);\n}\n.pops button[data-type=\"info\"]:focus-visible {\n  outline: var(--button-info-focus-visible-outline);\n  outline-offset: var(--button-info-focus-visible-outline-offset);\n}\n.pops button[data-type=\"info\"]:disabled {\n  --button-color: var(--button-info-disabled-color);\n  --button-bd-color: var(--button-info-disabled-bd-color);\n  --button-bg-color: var(--button-info-disabled-bg-color);\n}\n\n.pops button[data-type=\"warning\"] {\n  --button-color: var(--button-warning-color);\n  --button-bd-color: var(--button-warning-bd-color);\n  --button-bg-color: var(--button-warning-bg-color);\n}\n.pops button[data-type=\"warning\"]:active {\n  --button-color: var(--button-warning-active-color);\n  --button-bd-color: var(--button-warning-active-bd-color);\n  --button-bg-color: var(--button-warning-active-bg-color);\n}\n.pops button[data-type=\"warning\"]:hover {\n  --button-color: var(--button-warning-hover-color);\n  --button-bd-color: var(--button-warning-hover-bd-color);\n  --button-bg-color: var(--button-warning-hover-bg-color);\n}\n.pops button[data-type=\"warning\"]:focus-visible {\n  outline: var(--button-warning-focus-visible-outline);\n  outline-offset: var(--button-warning-focus-visible-outline-offset);\n}\n.pops button[data-type=\"warning\"]:disabled {\n  --button-color: var(--button-warning-disabled-color);\n  --button-bd-color: var(--button-warning-disabled-bd-color);\n  --button-bg-color: var(--button-warning-disabled-bg-color);\n}\n\n.pops button[data-type=\"danger\"] {\n  --button-color: var(--button-danger-color);\n  --button-bd-color: var(--button-danger-bd-color);\n  --button-bg-color: var(--button-danger-bg-color);\n}\n.pops button[data-type=\"danger\"]:active {\n  --button-color: var(--button-danger-active-color);\n  --button-bd-color: var(--button-danger-active-bd-color);\n  --button-bg-color: var(--button-danger-active-bg-color);\n}\n.pops button[data-type=\"danger\"]:hover {\n  --button-color: var(--button-danger-hover-color);\n  --button-bd-color: var(--button-danger-hover-bd-color);\n  --button-bg-color: var(--button-danger-hover-bg-color);\n}\n.pops button[data-type=\"danger\"]:focus-visible {\n  outline: var(--button-danger-focus-visible-outline);\n  outline-offset: var(--button-danger-focus-visible-outline-offset);\n}\n.pops button[data-type=\"danger\"]:disabled {\n  --button-color: var(--button-danger-disabled-color);\n  --button-bd-color: var(--button-danger-disabled-bd-color);\n  --button-bg-color: var(--button-danger-disabled-bg-color);\n}\n\n.pops button[data-type=\"xiaomi-primary\"] {\n  --button-color: var(--button-xiaomi-primary-color);\n  --button-bd-color: var(--button-xiaomi-primary-bd-color);\n  --button-bg-color: var(--button-xiaomi-primary-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:active {\n  --button-color: var(--button-xiaomi-primary-active-color);\n  --button-bd-color: var(--button-xiaomi-primary-active-bd-color);\n  --button-bg-color: var(--button-xiaomi-primary-active-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:hover {\n  --button-color: var(--button-xiaomi-primary-hover-color);\n  --button-bd-color: var(--button-xiaomi-primary-hover-bd-color);\n  --button-bg-color: var(--button-xiaomi-primary-hover-bg-color);\n}\n.pops button[data-type=\"xiaomi-primary\"]:focus-visible {\n  outline: var(--button-xiaomi-primary-focus-visible-outline);\n  outline-offset: var(--button-xiaomi-primary-focus-visible-outline-offset);\n}\n.pops button[data-type=\"xiaomi-primary\"]:disabled {\n  --button-color: var(--button-xiaomi-primary-disabled-color);\n  --button-bd-color: var(--button-xiaomi-primary-disabled-bd-color);\n  --button-bg-color: var(--button-xiaomi-primary-disabled-bg-color);\n}\n\n.pops button[data-type=\"violet\"] {\n  --button-color: var(--button-violet-color);\n  --button-bd-color: var(--button-violet-bd-color);\n  --button-bg-color: var(--button-violet-bg-color);\n}\n.pops button[data-type=\"violet\"]:active {\n  --button-color: var(--button-violet-active-color);\n  --button-bd-color: var(--button-violet-active-bd-color);\n  --button-bg-color: var(--button-violet-active-bg-color);\n}\n.pops button[data-type=\"violet\"]:hover {\n  --button-color: var(--button-violet-hover-color);\n  --button-bd-color: var(--button-violet-hover-bd-color);\n  --button-bg-color: var(--button-violet-hover-bg-color);\n}\n.pops button[data-type=\"violet\"]:focus-visible {\n  outline: var(--button-violet-focus-visible-outline);\n  outline-offset: var(--button-violet-focus-visible-outline-offset);\n}\n.pops button[data-type=\"violet\"]:disabled {\n  --button-color: var(--button-violet-disabled-color);\n  --button-bd-color: var(--button-violet-disabled-bd-color);\n  --button-bg-color: var(--button-violet-disabled-bg-color);\n}\n";
 
-    var commonCSS = ".pops-flex-items-center {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.pops-flex-y-center {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n.pops-flex-x-center {\r\n  display: flex;\r\n  align-content: center;\r\n}\r\n.pops-hide {\r\n  display: none;\r\n}\r\n.pops-hide-important {\r\n  display: none !important;\r\n}\r\n.pops-no-border {\r\n  border: 0;\r\n}\r\n.pops-no-border-important {\r\n  border: 0 !important;\r\n}\r\n.pops-user-select-none {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-line-height-center {\r\n  line-height: normal;\r\n  align-content: center;\r\n}\r\n.pops-width-fill {\r\n  width: 100%;\r\n  width: -moz-available;\r\n  width: -webkit-fill-available;\r\n}\r\n.pops-height-fill {\r\n  height: 100%;\r\n  height: -moz-available;\r\n  height: -webkit-fill-available;\r\n}\r\n.pops-text-is-disabled {\r\n  --pops-text-is-disabled-color: #a8abb2;\r\n  --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);\r\n  color: var(--pops-text-is-disabled-color);\r\n}\r\n.pops-text-is-disabled-important {\r\n  --pops-text-is-disabled-color: #a8abb2;\r\n  --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;\r\n  color: var(--pops-text-is-disabled-color) !important;\r\n}\r\n";
+    var commonCSS = ".pops-flex-items-center {\n  display: flex;\n  align-items: center;\n}\n.pops-flex-y-center {\n  display: flex;\n  justify-content: space-between;\n}\n.pops-flex-x-center {\n  display: flex;\n  align-content: center;\n}\n.pops-hide {\n  display: none;\n}\n.pops-hide-important {\n  display: none !important;\n}\n.pops-no-border {\n  border: 0;\n}\n.pops-no-border-important {\n  border: 0 !important;\n}\n.pops-user-select-none {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-line-height-center {\n  line-height: normal;\n  align-content: center;\n}\n.pops-width-fill {\n  width: 100%;\n  width: -moz-available;\n  width: -webkit-fill-available;\n}\n.pops-height-fill {\n  height: 100%;\n  height: -moz-available;\n  height: -webkit-fill-available;\n}\n.pops-text-is-disabled {\n  --pops-text-is-disabled-color: #a8abb2;\n  --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color);\n  color: var(--pops-text-is-disabled-color);\n}\n.pops-text-is-disabled-important {\n  --pops-text-is-disabled-color: #a8abb2;\n  --pops-panel-forms-container-item-left-desc-text-color: var(--pops-text-is-disabled-color) !important;\n  color: var(--pops-text-is-disabled-color) !important;\n}\n";
 
-    var animCSS = "@keyframes rotating {\r\n  0% {\r\n    transform: rotate(0);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n@keyframes iframeLoadingChange_85 {\r\n  0% {\r\n    background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n  }\r\n  20% {\r\n    background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n  }\r\n  40% {\r\n    background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n  }\r\n  60% {\r\n    background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n  }\r\n  80% {\r\n    background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n  }\r\n  100% {\r\n    background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n  }\r\n  from {\r\n    width: 75%;\r\n  }\r\n  to {\r\n    width: 100%;\r\n  }\r\n}\r\n@keyframes iframeLoadingChange {\r\n  0% {\r\n    background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n  }\r\n  20% {\r\n    background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n  }\r\n  40% {\r\n    background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n  }\r\n  60% {\r\n    background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n  }\r\n  80% {\r\n    background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n  }\r\n  100% {\r\n    background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n  }\r\n  from {\r\n    width: 0;\r\n  }\r\n  to {\r\n    width: 75%;\r\n  }\r\n}\r\n\r\n@keyframes searchSelectFalIn {\r\n  from {\r\n    opacity: 0;\r\n    display: none;\r\n  }\r\n  to {\r\n    display: block;\r\n    opacity: 1;\r\n  }\r\n}\r\n@keyframes searchSelectFalOut {\r\n  from {\r\n    display: block;\r\n    opacity: 1;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    display: none;\r\n  }\r\n}\r\n\r\n@keyframes pops-anim-wait-rotate {\r\n  form {\r\n    transform: rotate(0);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n@keyframes pops-anim-spread {\r\n  0% {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: scaleX(1);\r\n  }\r\n}\r\n@keyframes pops-anim-shake {\r\n  0%,\r\n  100% {\r\n    transform: translateX(0);\r\n  }\r\n  10%,\r\n  30%,\r\n  50%,\r\n  70%,\r\n  90% {\r\n    transform: translateX(-10px);\r\n  }\r\n  20%,\r\n  40%,\r\n  60%,\r\n  80% {\r\n    transform: translateX(10px);\r\n  }\r\n}\r\n@keyframes pops-anim-rolling-left {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(-100%) rotate(-120deg);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateX(0) rotate(0);\r\n  }\r\n}\r\n@keyframes pops-anim-rolling-right {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(100%) rotate(120deg);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateX(0) rotate(0);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-top {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-200%);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-bottom {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(200%);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-left {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(-200%);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-right {\r\n  0% {\r\n    transform: translateX(200%);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-anim-fadein {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n@keyframes pops-anim-fadein-zoom {\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale(0.5);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n  }\r\n}\r\n@keyframes pops-anim-fadein-alert {\r\n  0% {\r\n    transform: scale(0.5);\r\n  }\r\n  45% {\r\n    transform: scale(1.05);\r\n  }\r\n  80% {\r\n    transform: scale(0.95);\r\n  }\r\n  100% {\r\n    transform: scale(1);\r\n  }\r\n}\r\n@keyframes pops-anim-don {\r\n  0% {\r\n    opacity: 0;\r\n    transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  2.08333% {\r\n    transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  4.16667% {\r\n    transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  6.25% {\r\n    transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  8.33333% {\r\n    transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  10.4167% {\r\n    transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  12.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  14.5833% {\r\n    transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  16.6667% {\r\n    transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  18.75% {\r\n    transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  20.8333% {\r\n    transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  22.9167% {\r\n    transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  25% {\r\n    transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  27.0833% {\r\n    transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  29.1667% {\r\n    transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  31.25% {\r\n    transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  33.3333% {\r\n    transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  35.4167% {\r\n    transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  37.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  39.5833% {\r\n    transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  41.6667% {\r\n    transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  43.75% {\r\n    transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  45.8333% {\r\n    transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  47.9167% {\r\n    transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  50% {\r\n    opacity: 1;\r\n    transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  52.0833% {\r\n    transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  54.1667% {\r\n    transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  56.25% {\r\n    transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  58.3333% {\r\n    transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  60.4167% {\r\n    transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  62.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  64.5833% {\r\n    transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  66.6667% {\r\n    transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  68.75% {\r\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  70.8333% {\r\n    transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  72.9167% {\r\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  75% {\r\n    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  77.0833% {\r\n    transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  79.1667% {\r\n    transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  81.25% {\r\n    transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  83.3333% {\r\n    transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  85.4167% {\r\n    transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  87.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  89.5833% {\r\n    transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  91.6667% {\r\n    transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  93.75% {\r\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  95.8333% {\r\n    transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  97.9167% {\r\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n}\r\n@keyframes pops-anim-roll {\r\n  0% {\r\n    transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n  }\r\n  100% {\r\n    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n  }\r\n}\r\n@keyframes pops-anim-sandra {\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale3d(1.1, 1.1, 1);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: scale3d(1, 1, 1);\r\n  }\r\n}\r\n@keyframes pops-anim-gather {\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale(5, 0);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: scale(1, 1);\r\n  }\r\n}\r\n@keyframes pops-anim-spread-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: scaleX(1);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n}\r\n@keyframes pops-anim-shake-reverse {\r\n  0%,\r\n  100% {\r\n    transform: translateX(10px);\r\n  }\r\n  10%,\r\n  30%,\r\n  50%,\r\n  70%,\r\n  90% {\r\n    transform: translateX(-10px);\r\n  }\r\n  20%,\r\n  40%,\r\n  60%,\r\n  80% {\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-anim-rolling-left-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0) rotate(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateX(-100%) rotate(-120deg);\r\n  }\r\n}\r\n@keyframes pops-anim-rolling-right-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0) rotate(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateX(100%) rotate(120deg);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-top-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateY(-200%);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-bottom-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateY(200%);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-left-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateX(-200%);\r\n  }\r\n}\r\n@keyframes pops-anim-slide-right-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    transform: translateX(200%);\r\n  }\r\n}\r\n@keyframes pops-anim-fadein-reverse {\r\n  0% {\r\n    opacity: 1;\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n  }\r\n}\r\n@keyframes pops-anim-fadein-zoom-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: scale(0.5);\r\n  }\r\n}\r\n@keyframes pops-anim-fadein-alert-reverse {\r\n  0% {\r\n    transform: scale(1);\r\n  }\r\n  45% {\r\n    transform: scale(0.95);\r\n  }\r\n  80% {\r\n    transform: scale(1.05);\r\n  }\r\n  100% {\r\n    transform: scale(0.5);\r\n  }\r\n}\r\n@keyframes pops-anim-don-reverse {\r\n  100% {\r\n    opacity: 0;\r\n    transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  97.9167% {\r\n    transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  95.8333% {\r\n    transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  93.75% {\r\n    transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  91.6667% {\r\n    transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  89.5833% {\r\n    transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  87.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  85.4167% {\r\n    transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  83.3333% {\r\n    transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  81.25% {\r\n    transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  79.1667% {\r\n    transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  77.0833% {\r\n    transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  75% {\r\n    transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  72.9167% {\r\n    transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  70.8333% {\r\n    transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  68.75% {\r\n    transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  66.6667% {\r\n    transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  64.5833% {\r\n    transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  62.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  60.4167% {\r\n    transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  58.3333% {\r\n    transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  56.25% {\r\n    transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  54.1667% {\r\n    transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  52.0833% {\r\n    transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  50% {\r\n    opacity: 1;\r\n    transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  47.9167% {\r\n    transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  45.8333% {\r\n    transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  43.75% {\r\n    transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  41.6667% {\r\n    transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  39.5833% {\r\n    transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  37.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  35.4167% {\r\n    transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  33.3333% {\r\n    transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  31.25% {\r\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  29.1667% {\r\n    transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  27.0833% {\r\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  25% {\r\n    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  22.9167% {\r\n    transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  20.8333% {\r\n    transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  18.75% {\r\n    transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  16.6667% {\r\n    transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  14.5833% {\r\n    transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  12.5% {\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  10.4167% {\r\n    transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  8.33333% {\r\n    transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  6.25% {\r\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  4.16667% {\r\n    transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  2.08333% {\r\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n  0% {\r\n    opacity: 1;\r\n    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n  }\r\n}\r\n@keyframes pops-anim-roll-reverse {\r\n  0% {\r\n    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n  }\r\n  100% {\r\n    transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n  }\r\n}\r\n@keyframes pops-anim-sandra-reverse {\r\n  0% {\r\n    opacity: 1;\r\n    transform: scale3d(1, 1, 1);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: scale3d(1.1, 1.1, 1);\r\n  }\r\n}\r\n@keyframes pops-anim-gather-reverse {\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale(5, 0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: scale(5, 0);\r\n  }\r\n}\r\n\r\n@-webkit-keyframes pops-motion-fadeInTop {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(-30px);\r\n    transform: translateY(-30px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeInTop {\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-30px);\r\n    -ms-transform: translateY(-30px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    -ms-transform: translateX(0);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutTop {\r\n  0% {\r\n    opacity: 10;\r\n    -webkit-transform: translateY(0);\r\n    transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(-30px);\r\n    transform: translateY(-30px);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeOutTop {\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    -ms-transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    transform: translateY(-30px);\r\n    -ms-transform: translateY(-30px);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInBottom {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(20px);\r\n    transform: translateY(20px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateY(0);\r\n    transform: translateY(0);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeInBottom {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(20px);\r\n    transform: translateY(20px);\r\n    -ms-transform: translateY(20px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateY(0);\r\n    transform: translateY(0);\r\n    -ms-transform: translateY(0);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutBottom {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateY(0);\r\n    transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(20px);\r\n    transform: translateY(20px);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeOutBottom {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateY(0);\r\n    transform: translateY(0);\r\n    -ms-transform: translateY(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateY(20px);\r\n    transform: translateY(20px);\r\n    -ms-transform: translateY(20px);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInLeft {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-20px);\r\n    transform: translateX(-20px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeInLeft {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-30px);\r\n    transform: translateX(-30px);\r\n    -ms-transform: translateX(-30px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n    -ms-transform: translateX(0);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutLeft {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-30px);\r\n    transform: translateX(-30px);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeOutLeft {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n    -ms-transform: translateX(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(-20px);\r\n    transform: translateX(-20px);\r\n    -ms-transform: translateX(-20px);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInRight {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(20px);\r\n    transform: translateX(20px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeInRight {\r\n  0% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(20px);\r\n    transform: translateX(20px);\r\n    -ms-transform: translateX(20px);\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n    -ms-transform: translateX(0);\r\n  }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutRight {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(20px);\r\n    transform: translateX(20px);\r\n  }\r\n}\r\n@keyframes pops-motion-fadeOutRight {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-transform: translateX(0);\r\n    transform: translateX(0);\r\n    -ms-transform: translateX(0);\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    -webkit-transform: translateX(20px);\r\n    transform: translateX(20px);\r\n    -ms-transform: translateX(20px);\r\n  }\r\n}\r\n\r\n/* 动画 */\r\n.pops-anim[anim=\"pops-anim-spread\"] {\r\n  animation: pops-anim-spread 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake\"] {\r\n  animation: pops-anim-shake 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left\"] {\r\n  animation: pops-anim-rolling-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right\"] {\r\n  animation: pops-anim-rolling-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top\"] {\r\n  animation: pops-anim-slide-top 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom\"] {\r\n  animation: pops-anim-slide-bottom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left\"] {\r\n  animation: pops-anim-slide-left 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right\"] {\r\n  animation: pops-anim-slide-right 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein\"] {\r\n  animation: pops-anim-fadein 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom\"] {\r\n  animation: pops-anim-fadein-zoom 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert\"] {\r\n  animation: pops-anim-fadein-alert 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don\"] {\r\n  animation: pops-anim-don 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll\"] {\r\n  animation: pops-anim-roll 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra\"] {\r\n  animation: pops-anim-sandra 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather\"] {\r\n  animation: pops-anim-gather 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-spread-reverse\"] {\r\n  animation: pops-anim-spread-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-shake-reverse\"] {\r\n  animation: pops-anim-shake-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-left-reverse\"] {\r\n  animation: pops-anim-rolling-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-rolling-right-reverse\"] {\r\n  animation: pops-anim-rolling-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-top-reverse\"] {\r\n  animation: pops-anim-slide-top-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-bottom-reverse\"] {\r\n  animation: pops-anim-slide-bottom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-left-reverse\"] {\r\n  animation: pops-anim-slide-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-slide-right-reverse\"] {\r\n  animation: pops-anim-slide-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-reverse\"] {\r\n  animation: pops-anim-fadein-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-zoom-reverse\"] {\r\n  animation: pops-anim-fadein-zoom-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-fadein-alert-reverse\"] {\r\n  animation: pops-anim-fadein-alert-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-don-reverse\"] {\r\n  animation: pops-anim-don-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-roll-reverse\"] {\r\n  animation: pops-anim-roll-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-sandra-reverse\"] {\r\n  animation: pops-anim-sandra-reverse 0.3s;\r\n}\r\n.pops-anim[anim=\"pops-anim-gather-reverse\"] {\r\n  animation: pops-anim-gather-reverse 0.3s;\r\n}\r\n";
+    var animCSS = "@keyframes rotating {\n  0% {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes iframeLoadingChange_85 {\n  0% {\n    background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n  }\n  20% {\n    background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\n  }\n  40% {\n    background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\n  }\n  60% {\n    background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\n  }\n  80% {\n    background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\n  }\n  100% {\n    background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\n  }\n  from {\n    width: 75%;\n  }\n  to {\n    width: 100%;\n  }\n}\n@keyframes iframeLoadingChange {\n  0% {\n    background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n  }\n  20% {\n    background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\n  }\n  40% {\n    background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\n  }\n  60% {\n    background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\n  }\n  80% {\n    background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\n  }\n  100% {\n    background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\n  }\n  from {\n    width: 0;\n  }\n  to {\n    width: 75%;\n  }\n}\n\n@keyframes searchSelectFalIn {\n  from {\n    opacity: 0;\n    display: none;\n  }\n  to {\n    display: block;\n    opacity: 1;\n  }\n}\n@keyframes searchSelectFalOut {\n  from {\n    display: block;\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n    display: none;\n  }\n}\n\n@keyframes pops-anim-wait-rotate {\n  form {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pops-anim-spread {\n  0% {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n  100% {\n    opacity: 1;\n    transform: scaleX(1);\n  }\n}\n@keyframes pops-anim-shake {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  10%,\n  30%,\n  50%,\n  70%,\n  90% {\n    transform: translateX(-10px);\n  }\n  20%,\n  40%,\n  60%,\n  80% {\n    transform: translateX(10px);\n  }\n}\n@keyframes pops-anim-rolling-left {\n  0% {\n    opacity: 0;\n    transform: translateX(-100%) rotate(-120deg);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0) rotate(0);\n  }\n}\n@keyframes pops-anim-rolling-right {\n  0% {\n    opacity: 0;\n    transform: translateX(100%) rotate(120deg);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0) rotate(0);\n  }\n}\n@keyframes pops-anim-slide-top {\n  0% {\n    opacity: 0;\n    transform: translateY(-200%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes pops-anim-slide-bottom {\n  0% {\n    opacity: 0;\n    transform: translateY(200%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes pops-anim-slide-left {\n  0% {\n    opacity: 0;\n    transform: translateX(-200%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes pops-anim-slide-right {\n  0% {\n    transform: translateX(200%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes pops-anim-fadein {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes pops-anim-fadein-zoom {\n  0% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes pops-anim-fadein-alert {\n  0% {\n    transform: scale(0.5);\n  }\n  45% {\n    transform: scale(1.05);\n  }\n  80% {\n    transform: scale(0.95);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes pops-anim-don {\n  0% {\n    opacity: 0;\n    transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  2.08333% {\n    transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  4.16667% {\n    transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  6.25% {\n    transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  8.33333% {\n    transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  10.4167% {\n    transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  12.5% {\n    transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  14.5833% {\n    transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  16.6667% {\n    transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  18.75% {\n    transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  20.8333% {\n    transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  22.9167% {\n    transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  25% {\n    transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  27.0833% {\n    transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  29.1667% {\n    transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  31.25% {\n    transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  33.3333% {\n    transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  35.4167% {\n    transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  37.5% {\n    transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  39.5833% {\n    transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  41.6667% {\n    transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  43.75% {\n    transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  45.8333% {\n    transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  47.9167% {\n    transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  50% {\n    opacity: 1;\n    transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  52.0833% {\n    transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  54.1667% {\n    transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  56.25% {\n    transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  58.3333% {\n    transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  60.4167% {\n    transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  62.5% {\n    transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  64.5833% {\n    transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  66.6667% {\n    transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  68.75% {\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  70.8333% {\n    transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  72.9167% {\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  75% {\n    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  77.0833% {\n    transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  79.1667% {\n    transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  81.25% {\n    transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  83.3333% {\n    transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  85.4167% {\n    transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  87.5% {\n    transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  89.5833% {\n    transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  91.6667% {\n    transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  93.75% {\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  95.8333% {\n    transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  97.9167% {\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  100% {\n    opacity: 1;\n    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n}\n@keyframes pops-anim-roll {\n  0% {\n    transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\n  }\n  100% {\n    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\n  }\n}\n@keyframes pops-anim-sandra {\n  0% {\n    opacity: 0;\n    transform: scale3d(1.1, 1.1, 1);\n  }\n  100% {\n    opacity: 1;\n    transform: scale3d(1, 1, 1);\n  }\n}\n@keyframes pops-anim-gather {\n  0% {\n    opacity: 0;\n    transform: scale(5, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1, 1);\n  }\n}\n@keyframes pops-anim-spread-reverse {\n  0% {\n    opacity: 1;\n    transform: scaleX(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n}\n@keyframes pops-anim-shake-reverse {\n  0%,\n  100% {\n    transform: translateX(10px);\n  }\n  10%,\n  30%,\n  50%,\n  70%,\n  90% {\n    transform: translateX(-10px);\n  }\n  20%,\n  40%,\n  60%,\n  80% {\n    transform: translateX(0);\n  }\n}\n@keyframes pops-anim-rolling-left-reverse {\n  0% {\n    opacity: 1;\n    transform: translateX(0) rotate(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(-100%) rotate(-120deg);\n  }\n}\n@keyframes pops-anim-rolling-right-reverse {\n  0% {\n    opacity: 1;\n    transform: translateX(0) rotate(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(100%) rotate(120deg);\n  }\n}\n@keyframes pops-anim-slide-top-reverse {\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-200%);\n  }\n}\n@keyframes pops-anim-slide-bottom-reverse {\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(200%);\n  }\n}\n@keyframes pops-anim-slide-left-reverse {\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(-200%);\n  }\n}\n@keyframes pops-anim-slide-right-reverse {\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(200%);\n  }\n}\n@keyframes pops-anim-fadein-reverse {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes pops-anim-fadein-zoom-reverse {\n  0% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n}\n@keyframes pops-anim-fadein-alert-reverse {\n  0% {\n    transform: scale(1);\n  }\n  45% {\n    transform: scale(0.95);\n  }\n  80% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(0.5);\n  }\n}\n@keyframes pops-anim-don-reverse {\n  100% {\n    opacity: 0;\n    transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  97.9167% {\n    transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  95.8333% {\n    transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  93.75% {\n    transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  91.6667% {\n    transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  89.5833% {\n    transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  87.5% {\n    transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  85.4167% {\n    transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  83.3333% {\n    transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  81.25% {\n    transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  79.1667% {\n    transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  77.0833% {\n    transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  75% {\n    transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  72.9167% {\n    transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  70.8333% {\n    transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  68.75% {\n    transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  66.6667% {\n    transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  64.5833% {\n    transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  62.5% {\n    transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  60.4167% {\n    transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  58.3333% {\n    transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  56.25% {\n    transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  54.1667% {\n    transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  52.0833% {\n    transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  50% {\n    opacity: 1;\n    transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  47.9167% {\n    transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  45.8333% {\n    transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  43.75% {\n    transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  41.6667% {\n    transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  39.5833% {\n    transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  37.5% {\n    transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  35.4167% {\n    transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  33.3333% {\n    transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  31.25% {\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  29.1667% {\n    transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  27.0833% {\n    transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  25% {\n    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  22.9167% {\n    transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  20.8333% {\n    transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  18.75% {\n    transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  16.6667% {\n    transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  14.5833% {\n    transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  12.5% {\n    transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  10.4167% {\n    transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  8.33333% {\n    transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  6.25% {\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  4.16667% {\n    transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  2.08333% {\n    transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n  0% {\n    opacity: 1;\n    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\n  }\n}\n@keyframes pops-anim-roll-reverse {\n  0% {\n    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\n  }\n  100% {\n    transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\n  }\n}\n@keyframes pops-anim-sandra-reverse {\n  0% {\n    opacity: 1;\n    transform: scale3d(1, 1, 1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale3d(1.1, 1.1, 1);\n  }\n}\n@keyframes pops-anim-gather-reverse {\n  0% {\n    opacity: 0;\n    transform: scale(5, 0);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(5, 0);\n  }\n}\n\n@-webkit-keyframes pops-motion-fadeInTop {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateY(-30px);\n    transform: translateY(-30px);\n  }\n  100% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n  }\n}\n@keyframes pops-motion-fadeInTop {\n  0% {\n    opacity: 0;\n    transform: translateY(-30px);\n    -ms-transform: translateY(-30px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n    -ms-transform: translateX(0);\n  }\n}\n@-webkit-keyframes pops-motion-fadeOutTop {\n  0% {\n    opacity: 10;\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    -webkit-transform: translateY(-30px);\n    transform: translateY(-30px);\n  }\n}\n@keyframes pops-motion-fadeOutTop {\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n    -ms-transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-30px);\n    -ms-transform: translateY(-30px);\n  }\n}\n@-webkit-keyframes pops-motion-fadeInBottom {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateY(20px);\n    transform: translateY(20px);\n  }\n  100% {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n  }\n}\n@keyframes pops-motion-fadeInBottom {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateY(20px);\n    transform: translateY(20px);\n    -ms-transform: translateY(20px);\n  }\n  100% {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n    -ms-transform: translateY(0);\n  }\n}\n@-webkit-keyframes pops-motion-fadeOutBottom {\n  0% {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    -webkit-transform: translateY(20px);\n    transform: translateY(20px);\n  }\n}\n@keyframes pops-motion-fadeOutBottom {\n  0% {\n    opacity: 1;\n    -webkit-transform: translateY(0);\n    transform: translateY(0);\n    -ms-transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    -webkit-transform: translateY(20px);\n    transform: translateY(20px);\n    -ms-transform: translateY(20px);\n  }\n}\n@-webkit-keyframes pops-motion-fadeInLeft {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateX(-20px);\n    transform: translateX(-20px);\n  }\n  100% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n  }\n}\n@keyframes pops-motion-fadeInLeft {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateX(-30px);\n    transform: translateX(-30px);\n    -ms-transform: translateX(-30px);\n  }\n  100% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n    -ms-transform: translateX(0);\n  }\n}\n@-webkit-keyframes pops-motion-fadeOutLeft {\n  0% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n  }\n  100% {\n    opacity: 0;\n    -webkit-transform: translateX(-30px);\n    transform: translateX(-30px);\n  }\n}\n@keyframes pops-motion-fadeOutLeft {\n  0% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n    -ms-transform: translateX(0);\n  }\n  100% {\n    opacity: 0;\n    -webkit-transform: translateX(-20px);\n    transform: translateX(-20px);\n    -ms-transform: translateX(-20px);\n  }\n}\n@-webkit-keyframes pops-motion-fadeInRight {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateX(20px);\n    transform: translateX(20px);\n  }\n  100% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n  }\n}\n@keyframes pops-motion-fadeInRight {\n  0% {\n    opacity: 0;\n    -webkit-transform: translateX(20px);\n    transform: translateX(20px);\n    -ms-transform: translateX(20px);\n  }\n  100% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n    -ms-transform: translateX(0);\n  }\n}\n@-webkit-keyframes pops-motion-fadeOutRight {\n  0% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n  }\n  100% {\n    opacity: 0;\n    -webkit-transform: translateX(20px);\n    transform: translateX(20px);\n  }\n}\n@keyframes pops-motion-fadeOutRight {\n  0% {\n    opacity: 1;\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n    -ms-transform: translateX(0);\n  }\n  100% {\n    opacity: 0;\n    -webkit-transform: translateX(20px);\n    transform: translateX(20px);\n    -ms-transform: translateX(20px);\n  }\n}\n\n/* 动画 */\n.pops-anim[anim=\"pops-anim-spread\"] {\n  animation: pops-anim-spread 0.3s;\n}\n.pops-anim[anim=\"pops-anim-shake\"] {\n  animation: pops-anim-shake 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-left\"] {\n  animation: pops-anim-rolling-left 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-right\"] {\n  animation: pops-anim-rolling-right 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-top\"] {\n  animation: pops-anim-slide-top 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-bottom\"] {\n  animation: pops-anim-slide-bottom 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-left\"] {\n  animation: pops-anim-slide-left 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-right\"] {\n  animation: pops-anim-slide-right 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein\"] {\n  animation: pops-anim-fadein 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-zoom\"] {\n  animation: pops-anim-fadein-zoom 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-alert\"] {\n  animation: pops-anim-fadein-alert 0.3s;\n}\n.pops-anim[anim=\"pops-anim-don\"] {\n  animation: pops-anim-don 0.3s;\n}\n.pops-anim[anim=\"pops-anim-roll\"] {\n  animation: pops-anim-roll 0.3s;\n}\n.pops-anim[anim=\"pops-anim-sandra\"] {\n  animation: pops-anim-sandra 0.3s;\n}\n.pops-anim[anim=\"pops-anim-gather\"] {\n  animation: pops-anim-gather 0.3s;\n}\n.pops-anim[anim=\"pops-anim-spread-reverse\"] {\n  animation: pops-anim-spread-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-shake-reverse\"] {\n  animation: pops-anim-shake-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-left-reverse\"] {\n  animation: pops-anim-rolling-left-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-rolling-right-reverse\"] {\n  animation: pops-anim-rolling-right-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-top-reverse\"] {\n  animation: pops-anim-slide-top-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-bottom-reverse\"] {\n  animation: pops-anim-slide-bottom-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-left-reverse\"] {\n  animation: pops-anim-slide-left-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-slide-right-reverse\"] {\n  animation: pops-anim-slide-right-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-reverse\"] {\n  animation: pops-anim-fadein-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-zoom-reverse\"] {\n  animation: pops-anim-fadein-zoom-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-fadein-alert-reverse\"] {\n  animation: pops-anim-fadein-alert-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-don-reverse\"] {\n  animation: pops-anim-don-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-roll-reverse\"] {\n  animation: pops-anim-roll-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-sandra-reverse\"] {\n  animation: pops-anim-sandra-reverse 0.3s;\n}\n.pops-anim[anim=\"pops-anim-gather-reverse\"] {\n  animation: pops-anim-gather-reverse 0.3s;\n}\n";
 
     var alertCSS = "";
 
     var confirmCSS = "";
 
-    var promptCSS = ".pops[type-value=\"prompt\"] {\r\n  --input-color: #000000;\r\n  --input-bg-color: none;\r\n  --input-placeholder-color: #a1a4ac;\r\n}\r\n.pops[type-value=\"prompt\"] input[pops],\r\n.pops[type-value=\"prompt\"] textarea[pops] {\r\n  width: 100%;\r\n  height: 100%;\r\n  outline: 0;\r\n  border: 0;\r\n  color: var(--input-color);\r\n  background-color: var(--input-bg-color);\r\n}\r\n\r\n.pops[type-value=\"prompt\"] input[pops] {\r\n  padding: 5px 10px;\r\n}\r\n.pops[type-value=\"prompt\"] textarea[pops] {\r\n  padding: 5px 10px;\r\n  resize: none;\r\n}\r\n\r\n.pops[type-value=\"prompt\"] input[pops]::placeholder,\r\n.pops[type-value=\"prompt\"] textarea[pops]::placeholder {\r\n  color: var(--input-placeholder-color);\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n  .pops[type-value=\"prompt\"] {\r\n    --input-color: #ffffff;\r\n    --input-bg-color: #333333;\r\n    --input-placeholder-color: #8d9095;\r\n  }\r\n}\r\n";
+    var promptCSS = ".pops[type-value=\"prompt\"] {\n  --input-color: #000000;\n  --input-bg-color: none;\n  --input-placeholder-color: #a1a4ac;\n}\n.pops[type-value=\"prompt\"] input[pops],\n.pops[type-value=\"prompt\"] textarea[pops] {\n  width: 100%;\n  height: 100%;\n  outline: 0;\n  border: 0;\n  color: var(--input-color);\n  background-color: var(--input-bg-color);\n}\n\n.pops[type-value=\"prompt\"] input[pops] {\n  padding: 5px 10px;\n}\n.pops[type-value=\"prompt\"] textarea[pops] {\n  padding: 5px 10px;\n  resize: none;\n}\n\n.pops[type-value=\"prompt\"] input[pops]::placeholder,\n.pops[type-value=\"prompt\"] textarea[pops]::placeholder {\n  color: var(--input-placeholder-color);\n}\n@media (prefers-color-scheme: dark) {\n  .pops[type-value=\"prompt\"] {\n    --input-color: #ffffff;\n    --input-bg-color: #333333;\n    --input-placeholder-color: #8d9095;\n  }\n}\n";
 
-    var loadingCSS = ".pops[type-value=\"loading\"] {\r\n  --loading-bd-color: rgba(0, 0, 0, 0.2);\r\n  --loading-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  --loading-box-shadow-color: rgb(0 0 0 / 50%);\r\n  --loading-icon-color: rgba(100, 149, 237, 0.1);\r\n  --loading-icon-bd-top-color: rgb(100, 149, 237, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"loading\"] {\r\n  position: absolute;\r\n  top: 272.5px;\r\n  top: 50%;\r\n  left: 26px;\r\n  left: 50%;\r\n  display: flex;\r\n  overflow: hidden;\r\n  padding: 10px 15px;\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  min-width: 0;\r\n  min-height: 0;\r\n  border: 1px solid var(--loading-bd-color);\r\n  border-radius: 5px;\r\n  background-color: var(--loading-bg-color);\r\n  box-shadow: 0 0 5px var(--loading-box-shadow-color);\r\n  vertical-align: middle;\r\n  transition: all 0.35s;\r\n  transform: translate(-50%, -50%);\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  align-content: center;\r\n}\r\n.pops[type-value=\"loading\"]:before {\r\n  float: left;\r\n  display: inline-block;\r\n  width: 2em;\r\n  height: 2em;\r\n  border: 0.3em solid var(--loading-icon-color);\r\n  border-top: 0.3em solid var(--loading-icon-bd-top-color);\r\n  border-radius: 50%;\r\n  content: \" \";\r\n  vertical-align: middle;\r\n  font-size: inherit;\r\n  animation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"loading\"] .pops-loading-content {\r\n  position: static;\r\n  top: 0;\r\n  bottom: 0;\r\n  float: left;\r\n  overflow: hidden;\r\n  width: auto;\r\n  font-size: inherit;\r\n  line-height: normal;\r\n  align-content: center;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .pops[type-value=\"loading\"] {\r\n    --loading-bg-color: #222222;\r\n  }\r\n}\r\n";
+    var loadingCSS = ".pops[type-value=\"loading\"] {\n  --loading-bd-color: rgba(0, 0, 0, 0.2);\n  --loading-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --loading-box-shadow-color: rgb(0 0 0 / 50%);\n  --loading-icon-color: rgba(100, 149, 237, 0.1);\n  --loading-icon-bd-top-color: rgb(100, 149, 237, var(--pops-bd-opacity));\n}\n.pops[type-value=\"loading\"] {\n  position: absolute;\n  top: 272.5px;\n  top: 50%;\n  left: 26px;\n  left: 50%;\n  display: flex;\n  overflow: hidden;\n  padding: 10px 15px;\n  max-width: 100%;\n  max-height: 100%;\n  min-width: 0;\n  min-height: 0;\n  border: 1px solid var(--loading-bd-color);\n  border-radius: 5px;\n  background-color: var(--loading-bg-color);\n  box-shadow: 0 0 5px var(--loading-box-shadow-color);\n  vertical-align: middle;\n  transition: all 0.35s;\n  transform: translate(-50%, -50%);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n}\n.pops[type-value=\"loading\"]:before {\n  float: left;\n  display: inline-block;\n  width: 2em;\n  height: 2em;\n  border: 0.3em solid var(--loading-icon-color);\n  border-top: 0.3em solid var(--loading-icon-bd-top-color);\n  border-radius: 50%;\n  content: \" \";\n  vertical-align: middle;\n  font-size: inherit;\n  animation: pops-anim-wait-rotate 1.2s linear infinite;\n}\n.pops[type-value=\"loading\"] .pops-loading-content {\n  position: static;\n  top: 0;\n  bottom: 0;\n  float: left;\n  overflow: hidden;\n  width: auto;\n  font-size: inherit;\n  line-height: normal;\n  align-content: center;\n}\n\n@media (prefers-color-scheme: dark) {\n  .pops[type-value=\"loading\"] {\n    --loading-bg-color: #222222;\n  }\n}\n";
 
-    var iframeCSS = ".pops[type-value=\"iframe\"] {\r\n  --container-title-height: 55px;\r\n  transition:\r\n    width 0.35s ease,\r\n    height 0.35s ease;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-content {\r\n  overflow: hidden;\r\n}\r\n.pops-loading {\r\n  position: absolute;\r\n  top: 40px;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  z-index: 5;\r\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-loading:before {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  z-index: 3;\r\n  display: block;\r\n  margin: -20px 0 0 -20px;\r\n  padding: 20px;\r\n  border: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\r\n  border-radius: 50%;\r\n  content: \"\";\r\n  border-top-color: transparent;\r\n  animation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] {\r\n  bottom: 0;\r\n  max-width: 200px;\r\n  max-height: 53px;\r\n  position: unset;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] .pops-header-control[data-type=\"min\"] {\r\n  display: none;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-top {\r\n  top: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-left {\r\n  left: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transform {\r\n  transform: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transition {\r\n  transition: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"max\"] {\r\n  width: 100% !important;\r\n  height: 100% !important;\r\n}\r\n.pops[type-value=\"iframe\"] iframe[pops] {\r\n  width: 100%;\r\n  height: 100%;\r\n  border: 0;\r\n}\r\n.pops-iframe-content-global-loading {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  z-index: 999999;\r\n  width: 0;\r\n  height: 4px;\r\n  background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n  animation: iframeLoadingChange 2s forwards;\r\n}\r\n\r\n.pops-anim:has(.pops[type-value=\"iframe\"].pops[type-module=\"min\"]) {\r\n  position: unset;\r\n}\r\n";
+    var iframeCSS = ".pops[type-value=\"iframe\"] {\n  --container-title-height: 55px;\n  transition:\n    width 0.35s ease,\n    height 0.35s ease;\n}\n.pops[type-value=\"iframe\"] .pops-content {\n  overflow: hidden;\n}\n.pops-loading {\n  position: absolute;\n  top: 40px;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 5;\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n}\n.pops-loading:before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 3;\n  display: block;\n  margin: -20px 0 0 -20px;\n  padding: 20px;\n  border: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\n  border-radius: 50%;\n  content: \"\";\n  border-top-color: transparent;\n  animation: pops-anim-wait-rotate 1.2s linear infinite;\n}\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] {\n  bottom: 0;\n  max-width: 200px;\n  max-height: 53px;\n  position: unset;\n}\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] .pops-header-control[data-type=\"min\"] {\n  display: none;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-top {\n  top: unset !important;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-left {\n  left: unset !important;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-transform {\n  transform: none !important;\n}\n.pops[type-value=\"iframe\"].pops-iframe-unset-transition {\n  transition: none !important;\n}\n.pops[type-value=\"iframe\"].pops[type-module=\"max\"] {\n  width: 100% !important;\n  height: 100% !important;\n}\n.pops[type-value=\"iframe\"] iframe[pops] {\n  width: 100%;\n  height: 100%;\n  border: 0;\n}\n.pops-iframe-content-global-loading {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 999999;\n  width: 0;\n  height: 4px;\n  background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\n  animation: iframeLoadingChange 2s forwards;\n}\n\n.pops-anim:has(.pops[type-value=\"iframe\"].pops[type-module=\"min\"]) {\n  position: unset;\n}\n";
 
-    var tooltipCSS = ".pops-tip {\r\n  --pops-bg-opacity: 1;\r\n  --tooltip-color: #4e4e4e;\r\n  --tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  --tooltip-bd-radius: 2px;\r\n  --tooltip-box-shadow-left-color: rgba(0, 0, 0, 0.24);\r\n  --tooltip-box-shadow-right-color: rgba(0, 0, 0, 0.12);\r\n  --tooltip-font-size: 14px;\r\n  --tooltip-padding-top: 13px;\r\n  --tooltip-padding-right: 13px;\r\n  --tooltip-padding-bottom: 13px;\r\n  --tooltip-padding-left: 13px;\r\n\r\n  --tooltip-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);\r\n  --tooltip-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);\r\n  --tooltip-arrow--after-color: rgb(78, 78, 78);\r\n  --tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  --tooltip-arrow--after-width: 12px;\r\n  --tooltip-arrow--after-height: 12px;\r\n}\r\n.pops-tip {\r\n  padding: var(--tooltip-padding-top) var(--tooltip-padding-right) var(--tooltip-padding-bottom)\r\n    var(--tooltip-padding-left);\r\n  max-width: 400px;\r\n  max-height: 300px;\r\n  border-radius: var(--tooltip-bd-radius);\r\n  background-color: var(--tooltip-bg-color);\r\n  box-shadow:\r\n    0 1.5px 4px var(--tooltip-box-shadow-left-color),\r\n    0 1.5px 6px var(--tooltip-box-shadow-right-color);\r\n  color: var(--tooltip-color);\r\n  font-size: var(--tooltip-font-size);\r\n}\r\n.pops-tip[data-position=\"absolute\"] {\r\n  position: absolute;\r\n}\r\n.pops-tip[data-position=\"fixed\"] {\r\n  position: fixed;\r\n}\r\n\r\n.pops-tip .pops-tip-arrow {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 50%;\r\n  overflow: hidden;\r\n  width: 100%;\r\n  height: 12.5px;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow::after {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 50%;\r\n  width: var(--tooltip-arrow--after-width);\r\n  height: var(--tooltip-arrow--after-height);\r\n  background: var(--tooltip-arrow--after-bg-color);\r\n  color: var(--tooltip-arrow--after-color);\r\n  box-shadow:\r\n    0 1px 7px var(--tooltip-arrow-box-shadow-left-color),\r\n    0 1px 7px var(--tooltip-arrow-box-shadow-right-color);\r\n  content: \"\";\r\n  transform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 50%;\r\n  overflow: hidden;\r\n  width: 100%;\r\n  height: 12.5px;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 50%;\r\n  width: var(--tooltip-arrow--after-width);\r\n  height: var(--tooltip-arrow--after-height);\r\n  background: var(--tooltip-arrow--after-bg-color);\r\n  box-shadow:\r\n    0 1px 7px var(--tooltip-arrow-box-shadow-left-color),\r\n    0 1px 7px var(--tooltip-arrow-box-shadow-right-color);\r\n  content: \"\";\r\n  transform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\r\n  top: 50%;\r\n  left: -12.5px;\r\n  width: 12.5px;\r\n  height: 50px;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 100%;\r\n  content: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\r\n  top: 50%;\r\n  right: -12.5px;\r\n  left: auto;\r\n  width: 12.5px;\r\n  height: 50px;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0;\r\n  content: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\r\n  top: -12.5px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 50%;\r\n  content: \"\";\r\n}\r\n\r\n.pops-tip[data-motion] {\r\n  -webkit-animation-duration: 0.25s;\r\n  animation-duration: 0.25s;\r\n  -webkit-animation-fill-mode: forwards;\r\n  animation-fill-mode: forwards;\r\n}\r\n.pops-tip[data-motion=\"fadeOutRight\"] {\r\n  -webkit-animation-name: pops-motion-fadeOutRight;\r\n  animation-name: pops-motion-fadeOutRight;\r\n}\r\n.pops-tip[data-motion=\"fadeInTop\"] {\r\n  -webkit-animation-name: pops-motion-fadeInTop;\r\n  animation-name: pops-motion-fadeInTop;\r\n  animation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\r\n}\r\n.pops-tip[data-motion=\"fadeOutTop\"] {\r\n  -webkit-animation-name: pops-motion-fadeOutTop;\r\n  animation-name: pops-motion-fadeOutTop;\r\n  animation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\r\n}\r\n.pops-tip[data-motion=\"fadeInBottom\"] {\r\n  -webkit-animation-name: pops-motion-fadeInBottom;\r\n  animation-name: pops-motion-fadeInBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeOutBottom\"] {\r\n  -webkit-animation-name: pops-motion-fadeOutBottom;\r\n  animation-name: pops-motion-fadeOutBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeInLeft\"] {\r\n  -webkit-animation-name: pops-motion-fadeInLeft;\r\n  animation-name: pops-motion-fadeInLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeOutLeft\"] {\r\n  -webkit-animation-name: pops-motion-fadeOutLeft;\r\n  animation-name: pops-motion-fadeOutLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeInRight\"] {\r\n  -webkit-animation-name: pops-motion-fadeInRight;\r\n  animation-name: pops-motion-fadeInRight;\r\n}\r\n\r\n/* github的样式 */\r\n.pops-tip.github-tooltip {\r\n  --tooltip-bg-opacity: 1;\r\n  --tooltip-color: #ffffff;\r\n  --tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n  --tooltip-bd-radius: 6px;\r\n  --tooltip-padding-top: 6px;\r\n  --tooltip-padding-right: 8px;\r\n  --tooltip-padding-bottom: 6px;\r\n  --tooltip-padding-left: 8px;\r\n\r\n  --tooltip-arrow--after-color: rgb(255, 255, 255);\r\n  --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n  --tooltip-arrow--after-width: 8px;\r\n  --tooltip-arrow--after-height: 8px;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .pops-tip {\r\n    --tooltip-color: #ffffff;\r\n    --tooltip-bg-color: #fafafa;\r\n    --tooltip-arrow--after-color: #fafafa;\r\n    --tooltip-arrow--after-bg-color: rgb(250, 250, 250, var(--pops-bg-opacity));\r\n  }\r\n}\r\n";
+    var tooltipCSS = ".pops-tip {\n  --pops-bg-opacity: 1;\n  --tooltip-color: #4e4e4e;\n  --tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --tooltip-bd-radius: 2px;\n  --tooltip-box-shadow-left-color: rgba(0, 0, 0, 0.24);\n  --tooltip-box-shadow-right-color: rgba(0, 0, 0, 0.12);\n  --tooltip-font-size: 14px;\n  --tooltip-padding-top: 13px;\n  --tooltip-padding-right: 13px;\n  --tooltip-padding-bottom: 13px;\n  --tooltip-padding-left: 13px;\n\n  --tooltip-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);\n  --tooltip-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);\n  --tooltip-arrow--after-color: rgb(78, 78, 78);\n  --tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --tooltip-arrow--after-width: 12px;\n  --tooltip-arrow--after-height: 12px;\n}\n.pops-tip {\n  padding: var(--tooltip-padding-top) var(--tooltip-padding-right) var(--tooltip-padding-bottom)\n    var(--tooltip-padding-left);\n  max-width: 400px;\n  max-height: 300px;\n  border-radius: var(--tooltip-bd-radius);\n  background-color: var(--tooltip-bg-color);\n  box-shadow:\n    0 1.5px 4px var(--tooltip-box-shadow-left-color),\n    0 1.5px 6px var(--tooltip-box-shadow-right-color);\n  color: var(--tooltip-color);\n  font-size: var(--tooltip-font-size);\n}\n.pops-tip[data-position=\"absolute\"] {\n  position: absolute;\n}\n.pops-tip[data-position=\"fixed\"] {\n  position: fixed;\n}\n\n.pops-tip .pops-tip-arrow {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  overflow: hidden;\n  width: 100%;\n  height: 12.5px;\n  transform: translateX(-50%);\n}\n\n.pops-tip .pops-tip-arrow::after {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: var(--tooltip-arrow--after-width);\n  height: var(--tooltip-arrow--after-height);\n  background: var(--tooltip-arrow--after-bg-color);\n  color: var(--tooltip-arrow--after-color);\n  box-shadow:\n    0 1px 7px var(--tooltip-arrow-box-shadow-left-color),\n    0 1px 7px var(--tooltip-arrow-box-shadow-right-color);\n  content: \"\";\n  transform: translateX(-50%) translateY(-50%) rotate(45deg);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  overflow: hidden;\n  width: 100%;\n  height: 12.5px;\n  transform: translateX(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: var(--tooltip-arrow--after-width);\n  height: var(--tooltip-arrow--after-height);\n  background: var(--tooltip-arrow--after-bg-color);\n  box-shadow:\n    0 1px 7px var(--tooltip-arrow-box-shadow-left-color),\n    0 1px 7px var(--tooltip-arrow-box-shadow-right-color);\n  content: \"\";\n  transform: translateX(-50%) translateY(-50%) rotate(45deg);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\n  top: 50%;\n  left: -12.5px;\n  width: 12.5px;\n  height: 50px;\n  transform: translateY(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\n  position: absolute;\n  top: 50%;\n  left: 100%;\n  content: \"\";\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\n  top: 50%;\n  right: -12.5px;\n  left: auto;\n  width: 12.5px;\n  height: 50px;\n  transform: translateY(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  content: \"\";\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\n  top: -12.5px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  content: \"\";\n}\n\n.pops-tip[data-motion] {\n  -webkit-animation-duration: 0.25s;\n  animation-duration: 0.25s;\n  -webkit-animation-fill-mode: forwards;\n  animation-fill-mode: forwards;\n}\n.pops-tip[data-motion=\"fadeOutRight\"] {\n  -webkit-animation-name: pops-motion-fadeOutRight;\n  animation-name: pops-motion-fadeOutRight;\n}\n.pops-tip[data-motion=\"fadeInTop\"] {\n  -webkit-animation-name: pops-motion-fadeInTop;\n  animation-name: pops-motion-fadeInTop;\n  animation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\n}\n.pops-tip[data-motion=\"fadeOutTop\"] {\n  -webkit-animation-name: pops-motion-fadeOutTop;\n  animation-name: pops-motion-fadeOutTop;\n  animation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\n}\n.pops-tip[data-motion=\"fadeInBottom\"] {\n  -webkit-animation-name: pops-motion-fadeInBottom;\n  animation-name: pops-motion-fadeInBottom;\n}\n.pops-tip[data-motion=\"fadeOutBottom\"] {\n  -webkit-animation-name: pops-motion-fadeOutBottom;\n  animation-name: pops-motion-fadeOutBottom;\n}\n.pops-tip[data-motion=\"fadeInLeft\"] {\n  -webkit-animation-name: pops-motion-fadeInLeft;\n  animation-name: pops-motion-fadeInLeft;\n}\n.pops-tip[data-motion=\"fadeOutLeft\"] {\n  -webkit-animation-name: pops-motion-fadeOutLeft;\n  animation-name: pops-motion-fadeOutLeft;\n}\n.pops-tip[data-motion=\"fadeInRight\"] {\n  -webkit-animation-name: pops-motion-fadeInRight;\n  animation-name: pops-motion-fadeInRight;\n}\n\n/* github的样式 */\n.pops-tip.github-tooltip {\n  --tooltip-bg-opacity: 1;\n  --tooltip-color: #ffffff;\n  --tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\n  --tooltip-bd-radius: 6px;\n  --tooltip-padding-top: 6px;\n  --tooltip-padding-right: 8px;\n  --tooltip-padding-bottom: 6px;\n  --tooltip-padding-left: 8px;\n\n  --tooltip-arrow--after-color: rgb(255, 255, 255);\n  --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\n  --tooltip-arrow--after-width: 8px;\n  --tooltip-arrow--after-height: 8px;\n}\n\n@media (prefers-color-scheme: dark) {\n  .pops-tip {\n    --tooltip-color: #ffffff;\n    --tooltip-bg-color: #fafafa;\n    --tooltip-arrow--after-color: #fafafa;\n    --tooltip-arrow--after-bg-color: rgb(250, 250, 250, var(--pops-bg-opacity));\n  }\n}\n";
 
-    var drawerCSS = ".pops[type-value=\"drawer\"] {\r\n  position: fixed;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-shadow:\r\n    0px 16px 48px 16px rgba(0, 0, 0, 0.08),\r\n    0px 12px 32px rgba(0, 0, 0, 0.12),\r\n    0px 8px 16px -8px rgba(0, 0, 0, 0.16);\r\n  overflow: hidden;\r\n  transition: all 0.3s;\r\n}\r\n\r\n.pops[type-value=\"drawer\"][direction=\"top\"] {\r\n  width: 100%;\r\n  left: 0;\r\n  right: 0;\r\n  top: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\r\n  width: 100%;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"left\"] {\r\n  height: 100%;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"right\"] {\r\n  height: 100%;\r\n  top: 0;\r\n  bottom: 0;\r\n  right: 0;\r\n}\r\n";
+    var drawerCSS = ".pops[type-value=\"drawer\"] {\n  position: fixed;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  box-shadow:\n    0px 16px 48px 16px rgba(0, 0, 0, 0.08),\n    0px 12px 32px rgba(0, 0, 0, 0.12),\n    0px 8px 16px -8px rgba(0, 0, 0, 0.16);\n  overflow: hidden;\n  transition: all 0.3s;\n}\n\n.pops[type-value=\"drawer\"][direction=\"top\"] {\n  width: 100%;\n  left: 0;\n  right: 0;\n  top: 0;\n}\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\n  width: 100%;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n.pops[type-value=\"drawer\"][direction=\"left\"] {\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  left: 0;\n}\n.pops[type-value=\"drawer\"][direction=\"right\"] {\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  right: 0;\n}\n";
 
-    var folderCSS = ".pops-folder-list {\r\n  --folder-arrow-fill-color: #d4d7de;\r\n  --folder-arrow-active-fill-color: #06a7ff;\r\n  --header-breadcrumb-text-color: #06a7ff;\r\n  --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n  --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\r\n  --header-breadcrumb-all-files-last-text-color: #999999;\r\n  --table-header-row-text-color: #818999;\r\n  --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n  --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\r\n  --table-body-row-text-color: #05082c;\r\n  --table-body-row-file-name-text-color: #05082c;\r\n  --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n  --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n  --table-body-row-file-name-hover-text-color: #06a7ff;\r\n  --table-body-row-content-text-color: #818999;\r\n}\r\n.pops-folder-list .cursor-p {\r\n  cursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n  background: 0 0;\r\n  text-decoration: none;\r\n  -webkit-tap-highlight-color: transparent;\r\n  color: var(--header-breadcrumb-text-color);\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n  width: 100%;\r\n  table-layout: fixed;\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n  padding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n  height: 100%;\r\n  background: 0 0;\r\n  overflow: hidden;\r\n  display: -webkit-box;\r\n  display: -ms-flexbox;\r\n  -ms-flex-direction: column;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n  height: 100%;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n  line-height: normal;\r\n  align-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n  height: 50px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  color: var(--table-header-row-text-color);\r\n  text-align: left;\r\n  font-size: 12px;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n  height: 50px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  color: var(--table-body-row-text-color);\r\n  font-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n  background-color: var(--table-body-row-hover-bg-color);\r\n  border-color: var(--table-body-row-hover-bd-color);\r\n  border: 0;\r\n  outline: none;\r\n}\r\n.pops-folder-list table th {\r\n  border: 0;\r\n  border-bottom: 1px solid var(--table-body-th-text-color);\r\n}\r\n.pops-folder-list table td {\r\n  border: 0;\r\n  border-bottom: 1px solid var(--table-body-td-text-color);\r\n  position: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n  display: inline-block;\r\n  padding-left: 12px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  max-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: flex-start;\r\n  align-items: flex-start;\r\n  padding: 6px 0px;\r\n  flex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n  width: 45px;\r\n  height: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n  padding-left: unset;\r\n  max-width: 250px;\r\n  overflow-x: hidden;\r\n  font-weight: 400;\r\n  line-height: unset;\r\n  margin-bottom: 4px;\r\n  white-space: normal;\r\n  text-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n  overflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n  height: 100%;\r\n  flex: 1 auto;\r\n  overflow: auto;\r\n  padding-bottom: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n  height: 100%;\r\n  flex: 1 auto;\r\n  overflow: auto;\r\n  padding-bottom: 0;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n  overflow: auto;\r\n}\r\n.pops-folder-content .pops-folder-list-table__header-div {\r\n  flex: 0;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n  display: none;\r\n}\r\n\r\n.pops-folder-list .pops-folder-list-file-name-title-text {\r\n  color: var(--table-body-row-file-name-text-color);\r\n}\r\n.pops-folder-list .pops-folder-list-file-name-title-text:hover {\r\n  text-decoration: none;\r\n  color: var(--table-body-row-file-name-hover-text-color);\r\n}\r\n.pops-folder-list .text-ellip {\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n  color: var(--table-body-row-content-text-color);\r\n  position: relative;\r\n  width: 100%;\r\n  text-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n  width: 32px;\r\n  height: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n  line-height: normal;\r\n  align-content: center;\r\n  position: relative;\r\n  vertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n  flex: 1;\r\n  display: -webkit-box;\r\n  display: -webkit-flex;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-align: center;\r\n  -webkit-align-items: center;\r\n  -ms-flex-align: center;\r\n  align-items: center;\r\n  -webkit-box-orient: horizontal;\r\n  -webkit-box-direction: normal;\r\n  -webkit-flex-direction: row;\r\n  -ms-flex-direction: row;\r\n  flex-direction: row;\r\n  min-height: 17px;\r\n  flex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n  display: inline-flex;\r\n  margin-left: 4px;\r\n  flex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n  width: 10px;\r\n  height: 10px;\r\n  fill: var(--folder-arrow-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n  fill: var(--folder-arrow-active-fill-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n  padding: 4px 20px;\r\n  -webkit-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  display: -webkit-box;\r\n  display: -webkit-flex;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-align: center;\r\n  -webkit-align-items: center;\r\n  -ms-flex-align: center;\r\n  align-items: center;\r\n  -webkit-box-orient: horizontal;\r\n  -webkit-box-direction: normal;\r\n  -webkit-flex-direction: row;\r\n  -ms-flex-direction: row;\r\n  flex-direction: row;\r\n  -webkit-box-pack: start;\r\n  -webkit-justify-content: start;\r\n  -ms-flex-pack: start;\r\n  justify-content: flex-start;\r\n  min-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n  font-size: 12px;\r\n  color: var(--header-breadcrumb-all-files-text-color);\r\n  line-height: normal;\r\n  align-content: center;\r\n  font-weight: 700;\r\n  display: inline-block;\r\n  max-width: 140px;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  word-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n  color: var(--header-breadcrumb-all-files-last-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n  font-size: 14px;\r\n  color: var(--header-breadcrumb-all-files-first-text-color);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n    55% 50%/6px 9px no-repeat;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .pops[type-value=\"folder\"] {\r\n    --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n    --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n  }\r\n  .pops-folder-list {\r\n    --header-breadcrumb-text-color: #06a7ff;\r\n    --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\r\n    --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\r\n    --header-breadcrumb-all-files-last-text-color: #818999;\r\n    --table-body-row-text-color: #f7f8fa;\r\n    --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n    --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\r\n    --table-body-td-text-color: #495366;\r\n    --table-body-row-hover-bd-color: #1f2022;\r\n    --table-body-row-hover-bg-color: #1f2022;\r\n    --table-body-row-file-name-text-color: #f7f8fa;\r\n  }\r\n}\r\n";
+    var folderCSS = ".pops-folder-list {\n  --folder-arrow-fill-color: #d4d7de;\n  --folder-arrow-active-fill-color: #06a7ff;\n  --header-breadcrumb-text-color: #06a7ff;\n  --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\n  --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\n  --header-breadcrumb-all-files-last-text-color: #999999;\n  --table-header-row-text-color: #818999;\n  --table-body-td-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\n  --table-body-th-text-color: rgb(247, 248, 250, var(--pops-bg-opacity));\n  --table-body-row-text-color: #05082c;\n  --table-body-row-file-name-text-color: #05082c;\n  --table-body-row-hover-bd-color: rgb(245, 246, 247, var(--pops-bg-opacity));\n  --table-body-row-hover-bg-color: rgb(245, 246, 247, var(--pops-bg-opacity));\n  --table-body-row-file-name-hover-text-color: #06a7ff;\n  --table-body-row-content-text-color: #818999;\n}\n.pops-folder-list .cursor-p {\n  cursor: pointer;\n}\n.pops-folder-list a {\n  background: 0 0;\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n  color: var(--header-breadcrumb-text-color);\n}\ntable.pops-folder-list-table__body,\ntable.pops-folder-list-table__header {\n  width: 100%;\n  table-layout: fixed;\n  border-collapse: collapse;\n  border-spacing: 0;\n  padding: 0 20px;\n}\ntable.pops-folder-list-table__body,\ntable.pops-folder-list-table__header {\n  height: 100%;\n  background: 0 0;\n  overflow: hidden;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  -ms-flex-direction: column;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n}\ntable.pops-folder-list-table__body {\n  height: 100%;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-folder-list table tr {\n  line-height: normal;\n  align-content: center;\n}\n.pops-folder-list-table__header-row {\n  height: 50px;\n  line-height: normal;\n  align-content: center;\n  color: var(--table-header-row-text-color);\n  text-align: left;\n  font-size: 12px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-folder-list-table__body-row {\n  height: 50px;\n  line-height: normal;\n  align-content: center;\n  color: var(--table-body-row-text-color);\n  font-size: 12px;\n}\n.pops-folder-list-table__body-row:hover {\n  background-color: var(--table-body-row-hover-bg-color);\n  border-color: var(--table-body-row-hover-bd-color);\n  border: 0;\n  outline: none;\n}\n.pops-folder-list table th {\n  border: 0;\n  border-bottom: 1px solid var(--table-body-th-text-color);\n}\n.pops-folder-list table td {\n  border: 0;\n  border-bottom: 1px solid var(--table-body-td-text-color);\n  position: relative;\n}\n.pops-folder-list .list-name-text {\n  display: inline-block;\n  padding-left: 12px;\n  line-height: normal;\n  align-content: center;\n  max-width: 176px;\n}\n.pops-folder-list-file-name > div {\n  display: flex;\n  align-items: center;\n}\n\n.pops-mobile-folder-list-file-name {\n  display: flex;\n  align-items: center;\n}\n.pops-mobile-folder-list-file-name > div {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding: 6px 0px;\n  flex-direction: column;\n}\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\n  width: 45px;\n  height: 45px;\n}\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\n  padding-left: unset;\n  max-width: 250px;\n  overflow-x: hidden;\n  font-weight: 400;\n  line-height: unset;\n  margin-bottom: 4px;\n  white-space: normal;\n  text-overflow: unset;\n}\n\n/* 修改滚动 */\n.pops-folder-content {\n  overflow: hidden !important;\n}\n.pops-folder-content .pops-folder-list {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.pops-folder-content .pops-folder-list-table__body-div {\n  height: 100%;\n  flex: 1 auto;\n  overflow: auto;\n  padding-bottom: 0;\n}\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\n  height: 100%;\n  flex: 1 auto;\n  overflow: auto;\n  padding-bottom: 0;\n}\n.pops-folder-content table.pops-folder-list-table__body {\n  overflow: auto;\n}\n.pops-folder-content .pops-folder-list-table__header-div {\n  flex: 0;\n}\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\n  display: none;\n}\n\n.pops-folder-list .pops-folder-list-file-name-title-text {\n  color: var(--table-body-row-file-name-text-color);\n}\n.pops-folder-list .pops-folder-list-file-name-title-text:hover {\n  text-decoration: none;\n  color: var(--table-body-row-file-name-hover-text-color);\n}\n.pops-folder-list .text-ellip {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.pops-folder-list .content {\n  color: var(--table-body-row-content-text-color);\n  position: relative;\n  width: 100%;\n  text-align: left;\n}\n.pops-folder-list .inline-block-v-middle {\n  display: inline-block;\n  vertical-align: middle;\n}\n.pops-folder-list .flex-a-i-center {\n  display: flex;\n  align-items: center;\n}\n.pops-folder-list .u-file-icon {\n  display: inline-block;\n  vertical-align: middle;\n}\n.pops-folder-list .u-file-icon--list {\n  width: 32px;\n  height: 32px;\n}\n.pops-folder-list .pops-folder-list-file-icon {\n  line-height: normal;\n  align-content: center;\n  position: relative;\n  vertical-align: middle;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\n  flex: 1;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  -ms-flex-direction: row;\n  flex-direction: row;\n  min-height: 17px;\n  flex-wrap: wrap;\n}\n.pops-folder-list .pops-folder-list-table__sort {\n  display: inline-flex;\n  margin-left: 4px;\n  flex-direction: column;\n}\n\n.pops-folder-list .pops-folder-icon-arrow {\n  width: 10px;\n  height: 10px;\n  fill: var(--folder-arrow-fill-color);\n}\n.pops-folder-list .pops-folder-icon-active {\n  fill: var(--folder-arrow-active-fill-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb {\n  padding: 4px 20px;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  -ms-flex-direction: row;\n  flex-direction: row;\n  -webkit-box-pack: start;\n  -webkit-justify-content: start;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n  min-height: 35px;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\n  font-size: 12px;\n  color: var(--header-breadcrumb-all-files-text-color);\n  line-height: normal;\n  align-content: center;\n  font-weight: 700;\n  display: inline-block;\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-wrap: normal;\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\n  color: var(--header-breadcrumb-all-files-last-text-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\n  font-size: 14px;\n  color: var(--header-breadcrumb-all-files-first-text-color);\n}\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\n  width: 16px;\n  height: 16px;\n}\n.pops-folder-list .iconArrow {\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\n    55% 50%/6px 9px no-repeat;\n}\n\n@media (prefers-color-scheme: dark) {\n  .pops[type-value=\"folder\"] {\n    --pops-title-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n    --pops-bottom-btn-controls-border-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n  }\n  .pops-folder-list {\n    --header-breadcrumb-text-color: #06a7ff;\n    --header-breadcrumb-all-files-text-color: var(--header-breadcrumb-text-color);\n    --header-breadcrumb-all-files-first-text-color: var(--header-breadcrumb-text-color);\n    --header-breadcrumb-all-files-last-text-color: #818999;\n    --table-body-row-text-color: #f7f8fa;\n    --table-body-td-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n    --table-body-th-text-color: rgb(73, 83, 102, var(--pops-bg-opacity));\n    --table-body-td-text-color: #495366;\n    --table-body-row-hover-bd-color: #1f2022;\n    --table-body-row-hover-bg-color: #1f2022;\n    --table-body-row-file-name-text-color: #f7f8fa;\n  }\n}\n";
 
-    var panelCSS = ".pops[type-value=\"panel\"] {\r\n  --pops-bg-color: #f2f2f2;\r\n  --pops-color: #333333;\r\n  --panel-title-bg-color: #ffffff;\r\n\r\n  --panel-aside-bg-color: #ffffff;\r\n  --panel-aside-hover-color: rgb(64, 158, 255);\r\n  --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n  --pops-panel-forms-margin-top-bottom: 10px;\r\n  --pops-panel-forms-margin-left-right: 20px;\r\n  --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\r\n  --pops-panel-forms-header-padding-top-bottom: 15px;\r\n  --pops-panel-forms-header-padding-left-right: 10px;\r\n  --pops-panel-forms-container-item-left-text-gap: 6px;\r\n  --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\r\n  --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n  --pops-panel-forms-container-item-bg-color: #ffffff;\r\n  --pops-panel-forms-container-item-title-color: #333;\r\n  --pops-panel-forms-container-item-border-radius: 6px;\r\n  --pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n  --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\r\n  --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\r\n  --pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n  --pops-panel-forms-container-li-padding-left-right: 16px;\r\n\r\n  --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\r\n}\r\n.pops[type-value=\"panel\"] {\r\n  color: var(--pops-color);\r\n  background: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n  background: var(--panel-title-bg-color);\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\n/* 左侧的列表 */\r\naside.pops-panel-aside {\r\n  box-sizing: border-box;\r\n  flex-shrink: 0;\r\n  max-width: 200px;\r\n  min-width: 100px;\r\n  height: 100%;\r\n  background: var(--panel-aside-bg-color);\r\n  border-right: 1px solid var(--panel-aside-bg-color);\r\n  font-size: 0.9em;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n}\r\naside.pops-panel-aside .pops-panel-aside-top-container {\r\n  overflow: auto;\r\n}\r\naside.pops-panel-aside ul li {\r\n  margin: 6px 8px;\r\n  border-radius: 4px;\r\n  padding: 6px 10px;\r\n  cursor: default;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\r\n  color: var(--panel-aside-hover-color);\r\n  background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 左侧的列表 */\r\n\r\n/* 底部的容器 */\r\n.pops-panel-bottom-wrapper {\r\n  background: var(--panel-aside-bg-color);\r\n  border-top: 1px solid #ebeef5;\r\n}\r\n.pops-panel-bottom-wrapper:has(.pops-panel-bottom-left-container:empty):has(.pops-panel-bottom-right-container:empty) {\r\n  border-top: 0;\r\n}\r\n.pops-panel-bottom-container {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n  justify-content: space-between;\r\n}\r\n.pops-panel-bottom-left-container {\r\n}\r\n.pops-panel-bottom-right-container {\r\n}\r\n.pops-panel-bottom-wrapper .pops-panel-bottom-item {\r\n  list-style-type: none;\r\n  margin: 6px 8px;\r\n  border-radius: 4px;\r\n  padding: 6px 10px;\r\n  cursor: default;\r\n}\r\n.pops-panel-bottom-wrapper:not(.pops-panel-disable-bottom-item-hover-css) .pops-panel-bottom-item:hover {\r\n  color: var(--panel-aside-hover-color);\r\n  background: var(--panel-aside-hover-bg-color);\r\n}\r\n/* 底部的容器 */\r\n\r\n.pops-panel-content {\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex: 1;\r\n  overflow: auto;\r\n  flex-basis: auto;\r\n  box-sizing: border-box;\r\n  min-width: 0;\r\n  bottom: 0 !important;\r\n}\r\n\r\n.pops-panel-section-wrapper {\r\n  width: 100%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\nsection.pops-panel-container {\r\n  width: 100%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n  border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\r\n  flex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li,\r\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\r\n  display: flex;\r\n  justify-content: flex-start !important;\r\n  margin: 0px !important;\r\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\r\n  text-align: left;\r\n}\r\nsection.pops-panel-container ul.pops-panel-container-main-ul {\r\n  overflow: auto;\r\n  /*flex: 1;*/\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin: var(--pops-panel-forms-margin-top-bottom)\r\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\r\n  gap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n  margin: 10px;\r\n  margin-left: calc(\r\n    var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\r\n  );\r\n  font-size: 0.9em;\r\n  text-align: left;\r\n  color: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n  /* 去除<li>左侧的圆点 */\r\n  display: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\r\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  background: var(--pops-panel-forms-container-item-bg-color);\r\n  margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n    var(--pops-panel-forms-container-li-padding-left-right);\r\n  margin: 0px 0px;\r\n  border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n  text-align: left;\r\n}\r\n/*section.pops-panel-container\r\n\t.pops-panel-forms-container-item\r\n\tul\r\n\tli.pops-panel-deepMenu-nav-item {\r\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\r\n}*/\r\nsection.pops-panel-container\r\n  .pops-panel-forms-container-item\r\n  ul.pops-panel-forms-container-item-formlist\r\n  li:last-child {\r\n  border: 0px;\r\n}\r\n/* 左侧的文字 */\r\nsection.pops-panel-container .pops-panel-item-left-text {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--pops-panel-forms-container-item-left-text-gap);\r\n}\r\n\r\n/* 左侧的主文字 */\r\n/*section.pops-panel-container .pops-panel-item-left-main-text {\r\n\t\r\n}*/\r\n/* 左侧的描述文字 */\r\nsection.pops-panel-container .pops-panel-item-left-desc-text {\r\n  font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\r\n  color: var(--pops-panel-forms-container-item-left-desc-text-color);\r\n}\r\n\r\n/* 折叠面板 */\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  background: var(--pops-panel-forms-container-item-bg-color);\r\n  margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\r\n  display: flex;\r\n  align-items: center;\r\n  fill: #6c6c6c;\r\n  justify-content: space-between;\r\n  margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\r\n  transform: rotate(90deg);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\r\n  width: 15px;\r\n  height: 15px;\r\n  display: flex;\r\n  align-items: center;\r\n  transform: rotate(-90deg);\r\n  transition: transform 0.3s;\r\n}\r\n/* 折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\r\n  height: 0;\r\n}\r\n/* 非折叠状态 */\r\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\r\n  margin: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\r\n  transition: height 0.3s;\r\n  overflow: hidden;\r\n  border-radius: unset;\r\n  background: unset;\r\n  margin: 0;\r\n  height: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n  /* 兼容移动端CSS */\r\n  .pops[type-value=\"panel\"] {\r\n    --pops-panel-forms-margin-left-right: 10px;\r\n  }\r\n  .pops[type-value=\"panel\"] {\r\n    width: 92%;\r\n    width: 92vw;\r\n    width: 92dvw;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\r\n    max-width: 20%;\r\n    min-width: auto;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\r\n    text-align: left;\r\n    --pops-panel-forms-margin-left-right: 0px;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\r\n    margin: 0px !important;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\r\n    margin: 10px 10px;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\r\n    max-width: 55%;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-select .el-select__selected-item.el-select__placeholder {\r\n    max-width: -moz-available;\r\n    max-width: -webkit-fill-available;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {\r\n    padding: 0 4px;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\r\n    min-width: 88px !important;\r\n    width: -moz-available;\r\n    width: -webkit-fill-available;\r\n  }\r\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\r\n    font-size: 16px;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-title p[pops],\r\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\r\n  .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\r\n    font-size: 14px;\r\n  }\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n  --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n  --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n  --panel-switch-circle-color: #dcdfe6;\r\n  --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  --panel-switch-checked-circle-color: #409eff;\r\n  --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n  --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch {\r\n  display: inline-flex;\r\n  flex-direction: row-reverse;\r\n  align-items: center;\r\n  position: relative;\r\n  font-size: 14px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  height: 32px;\r\n  vertical-align: middle;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n  position: absolute;\r\n  width: 0;\r\n  height: 0;\r\n  opacity: 0;\r\n  margin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\r\n  cursor: not-allowed;\r\n  opacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n  display: inline-flex;\r\n  position: relative;\r\n  align-items: center;\r\n  min-width: 40px;\r\n  height: 20px;\r\n  border: 1px solid var(--panel-switch-core-bd-color);\r\n  outline: 0;\r\n  border-radius: 10px;\r\n  box-sizing: border-box;\r\n  background: var(--panel-switch-core-bg-color);\r\n  cursor: pointer;\r\n  transition:\r\n    border-color 0.3s,\r\n    background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n  position: absolute;\r\n  left: 1px;\r\n  border-radius: 100%;\r\n  transition: all 0.3s;\r\n  width: 16px;\r\n  height: 16px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background-color: var(--panel-switch-circle-bg-color);\r\n  color: var(--panel-switch-circle-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n  border-color: var(--panel-switch-checked-core-bd-color);\r\n  background-color: var(--panel-switch-checked-core-bg-color);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n  left: calc(100% - 17px);\r\n  color: var(--panel-switch-checked-circle-color);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\r\n  overflow: hidden;\r\n  height: 25px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\r\n  height: 6px;\r\n  background: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n  outline: 0;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  width: 100%;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  box-shadow:\r\n    0 0 2px rgba(0, 0, 0, 0.3),\r\n    0 3px 5px rgba(0, 0, 0, 0.2);\r\n  cursor: pointer;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  border-radius: 50%;\r\n  border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n  box-shadow:\r\n    0 0 2px rgba(0, 0, 0, 0.3),\r\n    0 3px 5px rgba(0, 0, 0, 0.2);\r\n  cursor: pointer;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\r\n  height: 6px;\r\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n  --pops-slider-color-white: #ffffff;\r\n  --pops-slider-color-primary: #409eff;\r\n  --pops-slider-color-info: #909399;\r\n  --pops-slider-text-color-placeholder: #a8abb2;\r\n  --pops-slider-border-color-light: #e4e7ed;\r\n  --pops-slider-border-radius-circle: 100%;\r\n  --pops-slider-transition-duration-fast: 0.2s;\r\n\r\n  --pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n  --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n  --pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n  --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n  --pops-slider-border-radius: 3px;\r\n  --pops-slider-height: 6px;\r\n  --pops-slider-button-size: 20px;\r\n  --pops-slider-button-wrapper-size: 36px;\r\n  --pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n  width: 100%;\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n  flex: 0 0 52%;\r\n  margin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n  flex: 1;\r\n  height: var(--pops-slider-height);\r\n  background-color: var(--pops-slider-runway-bg-color);\r\n  border-radius: var(--pops-slider-border-radius);\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n  margin-right: 30px;\r\n  width: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n  cursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n  background-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n  border-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n  transform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n  flex-shrink: 0;\r\n  width: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n  height: var(--pops-slider-height);\r\n  background-color: var(--pops-slider-main-bg-color);\r\n  border-top-left-radius: var(--pops-slider-border-radius);\r\n  border-bottom-left-radius: var(--pops-slider-border-radius);\r\n  position: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n  height: var(--pops-slider-button-wrapper-size);\r\n  width: var(--pops-slider-button-wrapper-size);\r\n  position: absolute;\r\n  z-index: 1;\r\n  top: var(--pops-slider-button-wrapper-offset);\r\n  transform: translate(-50%);\r\n  background-color: transparent;\r\n  text-align: center;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  line-height: normal;\r\n  outline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n  display: inline-block;\r\n  content: \"\";\r\n  height: 100%;\r\n  vertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n  cursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n  display: inline-block;\r\n  width: var(--pops-slider-button-size);\r\n  height: var(--pops-slider-button-size);\r\n  vertical-align: middle;\r\n  border: solid 2px var(--pops-slider-main-bg-color);\r\n  background-color: var(--pops-slider-color-white);\r\n  border-radius: 50%;\r\n  box-sizing: border-box;\r\n  transition: var(--pops-slider-transition-duration-fast);\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n  transform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n  cursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n  cursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n  position: absolute;\r\n  height: var(--pops-slider-height);\r\n  width: var(--pops-slider-height);\r\n  border-radius: var(--pops-slider-border-radius-circle);\r\n  background-color: var(--pops-slider-stop-bg-color);\r\n  transform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n  top: 0;\r\n  left: 12px;\r\n  width: 18px;\r\n  height: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n  position: absolute;\r\n  transform: translate(-50%);\r\n  font-size: 14px;\r\n  color: var(--pops-slider-color-info);\r\n  margin-top: 15px;\r\n  white-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n  position: relative;\r\n  display: inline-flex;\r\n  width: auto;\r\n  height: 100%;\r\n  flex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n  width: var(--pops-slider-height);\r\n  height: 100%;\r\n  margin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n  width: var(--pops-slider-height);\r\n  height: auto;\r\n  border-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n  top: auto;\r\n  left: var(--pops-slider-button-wrapper-offset);\r\n  transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n  transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n  margin-top: 0;\r\n  left: 15px;\r\n  transform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n  height: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n  height: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n  --el-disabled-text-color: #a8abb2;\r\n  --el-disabled-bg-color: #f5f7fa;\r\n  --el-disabled-border-color: #e4e7ed;\r\n  --el-color-danger: #f56c6c;\r\n\r\n  --pops-panel-components-input-border-radius: 4px;\r\n  --pops-panel-components-input-text-color: #000000;\r\n  --pops-panel-components-input-text-bg-color: transparent;\r\n  --pops-panel-components-input-text-default-padding: 8px;\r\n  --pops-panel-components-input-bd-color: #dcdfe6;\r\n  --pops-panel-components-input-bg-color: #ffffff;\r\n  --pops-panel-components-input-hover-bd-color: #c0c4cc;\r\n  --pops-panel-components-input-focus-bd-color: #409eff;\r\n  --pops-panel-components-input-suffix-color: #a8abb2;\r\n  --pops-panel-components-input-suffix-bg-color: #ffffff;\r\n}\r\n.pops-panel-input {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  position: relative;\r\n  box-shadow: none;\r\n  width: 200px;\r\n  border: 0px;\r\n}\r\n.pops-panel-input_inner {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  border: 1px solid var(--pops-panel-components-input-bd-color);\r\n  border-radius: var(--pops-panel-components-input-border-radius);\r\n  background-color: var(--pops-panel-components-input-bg-color);\r\n  box-shadow: none;\r\n}\r\n.pops-panel-input_inner:hover {\r\n  border: 1px solid var(--pops-panel-components-input-hover-bd-color);\r\n}\r\n.pops-panel-input:has(input:disabled):hover {\r\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input_inner:has(input:focus) {\r\n  outline: 0;\r\n  border: 1px solid var(--pops-panel-components-input-focus-bd-color);\r\n  border-radius: var(--pops-panel-components-input-border-radius);\r\n  box-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  text-align: start;\r\n  align-items: center;\r\n  align-content: center;\r\n  white-space: nowrap;\r\n  cursor: text;\r\n  box-sizing: border-box;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  vertical-align: middle;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  color: var(--pops-panel-components-input-text-color);\r\n  background-color: var(--pops-panel-components-input-text-bg-color);\r\n  outline: 0;\r\n  transition: 0.1s;\r\n  border: 0;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  line-height: normal;\r\n  height: 32px;\r\n  width: 100%;\r\n  flex: 1;\r\n  /*margin-right: calc(1em + 8px);*/\r\n  margin: 0px;\r\n  padding: var(--pops-panel-components-input-text-default-padding);\r\n}\r\n.pops-panel-input input[type=\"search\"]::-webkit-search-cancel-button {\r\n  -webkit-appearance: none;\r\n  display: none;\r\n}\r\n/* 颜色选择器不需要那么宽 */\r\n.pops-panel-input:has(input[type=\"color\"]) {\r\n  width: 50px;\r\n}\r\n.pops-panel-input input[type=\"color\"] {\r\n  padding: 0px;\r\n}\r\n.pops-panel-input_inner:has(input[type=\"file\"]) {\r\n  border: 0px;\r\n  background: transparent;\r\n}\r\n.pops-panel-input input[type=\"file\"] {\r\n  padding: 0px;\r\n  line-height: 32px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n  display: inline-flex;\r\n  white-space: nowrap;\r\n  flex-shrink: 0;\r\n  flex-wrap: nowrap;\r\n  height: 100%;\r\n  height: -moz-available;\r\n  height: -webkit-fill-available;\r\n  text-align: center;\r\n  color: var(--pops-panel-components-input-suffix-color);\r\n  background: var(--pops-panel-components-input-suffix-bg-color);\r\n  transition: all 0.3s;\r\n  pointer-events: none;\r\n  padding: 0 8px;\r\n  position: relative;\r\n  right: 0px;\r\n  border-top-right-radius: 4px;\r\n  border-bottom-right-radius: 4px;\r\n  border: 1px solid transparent;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n  pointer-events: all;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n/* 如果包含清空图标的按钮，则默认隐藏清空图标，当:hover、:focus、:focus-within、:active时显示清空图标 */\r\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n  display: none;\r\n}\r\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\r\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\r\n  display: inline-flex;\r\n}\r\n/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */\r\n.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"view\"]) input,\r\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"hide\"]) input {\r\n  padding-right: 0;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n  cursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n  height: inherit;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  transition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n  height: 1em;\r\n  width: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n  background-color: var(--pops-components-is-disabled-bg-color);\r\n  border-radius: 4px;\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  color: var(--el-disabled-text-color);\r\n  -webkit-text-fill-color: var(--el-disabled-text-color);\r\n  cursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n  display: none;\r\n}\r\n/* 校验样式 */\r\n.pops-panel-input:has(.pops-panel-input-valid-error) {\r\n  --pops-panel-components-input-bd-color: var(--el-color-danger) !important;\r\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\r\n  --pops-panel-components-input-focus-bd-color: var(--pops-panel-components-input-bd-color);\r\n}\r\n.pops-panel-input .pops-panel-input-valid-error {\r\n  width: 100%;\r\n  color: var(--el-color-danger);\r\n  font-weight: 500;\r\n  font-size: 0.8em;\r\n  box-sizing: border-box;\r\n  vertical-align: middle;\r\n  display: inline-flex;\r\n  position: relative;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea {\r\n  --pops-panel-components-textarea-text-color: #000000;\r\n  --pops-panel-components-textarea-text-bg-color: #ffffff;\r\n  --pops-panel-components-textarea-bd-color: #dcdfe6;\r\n  --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\r\n  --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n}\r\n.pops-panel-textarea textarea {\r\n  width: 100%;\r\n  /*vertical-align: bottom;*/\r\n  position: relative;\r\n  display: block;\r\n  resize: none;\r\n  padding: 5px 11px;\r\n  /*line-height: 1;*/\r\n  box-sizing: border-box;\r\n  font-size: inherit;\r\n  font-family: inherit;\r\n  color: var(--pops-panel-components-textarea-text-color);\r\n  background-color: var(--pops-panel-components-textarea-text-bg-color);\r\n  background-image: none;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  box-shadow: none;\r\n  border-radius: 0;\r\n  transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n  border: 1px solid var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n  border-color: var(--pops-panel-components-textarea-hover-bd-color);\r\n}\r\n.pops-panel-textarea:has(textarea:disabled):hover {\r\n  --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\r\n}\r\n.pops-panel-textarea-disable {\r\n  --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\r\n  --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-textarea-disable textarea {\r\n  cursor: not-allowed;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n  outline: 0;\r\n  border-color: var(--pops-panel-components-textarea-focus-bd-color);\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select {\r\n  --pops-panel-components-select-disabled-text-color: #a8abb2;\r\n  --pops-panel-components-select-text-color: #000000;\r\n  --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n  --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\r\n  --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-select {\r\n  border: 0;\r\n}\r\n.pops-panel-select select {\r\n  width: 100%;\r\n  height: 32px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  min-width: 200px;\r\n  border: 1px solid var(--pops-panel-components-select-bd-color);\r\n  border-radius: 5px;\r\n  text-align: center;\r\n  outline: 0;\r\n  color: var(--pops-panel-components-select-text-color);\r\n  background-color: var(--pops-panel-components-select-bg-color);\r\n  box-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n  border: 1px solid var(--pops-panel-components-select-hover-bd-color);\r\n}\r\n.pops-panel-select-disable {\r\n  --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\r\n  --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\r\n}\r\n.pops-panel-select-disable select {\r\n  cursor: not-allowed;\r\n}\r\n.pops-panel-select-disable select:hover {\r\n  box-shadow: none;\r\n  --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\r\n}\r\n.pops-panel-select select:focus {\r\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n  box-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select dialog 的CSS */\r\n.pops-panel-select[data-mode=\"dialog\"] {\r\n}\r\n/* select dialog 的CSS */\r\n\r\n/* select horizontal 的CSS */\r\n.pops-panel-select[data-mode=\"horizontal\"] {\r\n  --pops-panel-components-select-horizontal-selected-text-color: #626aef;\r\n  --pops-panel-components-select-horizontal-selected-bg-color: #eff0fd;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .el-select__wrapper {\r\n  padding: 0;\r\n  gap: 0;\r\n  border: 0;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item {\r\n  flex: 1;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  border: 1px solid var(--el-border-color);\r\n  height: -moz-available;\r\n  height: -webkit-fill-available;\r\n  border-left: 0;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:hover {\r\n  color: var(--el-color-primary);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:first-child {\r\n  border-left: 1px solid var(--el-border-color);\r\n  border-top-left-radius: var(--el-border-radius-base);\r\n  border-bottom-left-radius: var(--el-border-radius-base);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:last-child {\r\n  border-top-right-radius: var(--el-border-radius-base);\r\n  border-bottom-right-radius: var(--el-border-radius-base);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item.select__selected-item {\r\n  color: var(--pops-panel-components-select-horizontal-selected-text-color);\r\n  background-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\r\n  border-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:has(+ .select__selected-item) {\r\n  border-right: 0;\r\n}\r\n.pops-panel-select[data-mode=\"horizontal\"] .select-item[disabled] {\r\n  color: var(--pops-panel-components-select-disabled-text-color);\r\n  --pops-panel-components-select-horizontal-selected-text-color: var(\r\n    --pops-panel-components-select-disabled-text-color\r\n  );\r\n  cursor: not-allowed;\r\n  background: unset;\r\n}\r\n/* select horizontal 的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple,\r\n.pops-panel-select {\r\n  --el-border-radius-base: 4px;\r\n  --el-fill-color-blank: #ffffff;\r\n  --el-transition-duration: 0.3s;\r\n  --el-border-color: #cbcbcb;\r\n  --el-text-color-placeholder: #a8abb2;\r\n  --color: inherit;\r\n  --el-select-input-color: #a8abb2;\r\n  --el-select-input-font-size: 14px;\r\n  --el-text-color-regular: #606266;\r\n  --el-color-info: #909399;\r\n  --el-color-info-light-9: #f4f4f5;\r\n  --el-color-info-light-8: #e9e9eb;\r\n  --el-color-primary-light-9: #ecf5ff;\r\n  --el-color-primary-light-8: #d9ecff;\r\n  --el-color-primary: #409eff;\r\n  --el-color-white: #ffffff;\r\n  width: 200px;\r\n}\r\n.pops-panel-select .el-select__wrapper,\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n  text-align: left;\r\n  font-size: 14px;\r\n  padding: 4px 12px;\r\n  gap: 6px;\r\n  min-height: 32px;\r\n  line-height: normal;\r\n  align-content: center;\r\n  border-radius: var(--el-border-radius-base);\r\n  background-color: var(--el-fill-color-blank);\r\n  transition: var(--el-transition-duration);\r\n  transform: translateZ(0);\r\n  border: 1px solid var(--el-border-color);\r\n}\r\n.pops-panel-select .el-select__wrapper.is-focused,\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n  --el-border-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select .el-select__selection,\r\n.pops-panel-select-multiple .el-select__selection {\r\n  position: relative;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  flex: 1;\r\n  min-width: 0;\r\n  gap: 6px;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"left\"] {\r\n  justify-content: left;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"center\"] {\r\n  justify-content: center;\r\n}\r\n.pops-panel-select .el-select__selection[data-selected-text-align=\"right\"] {\r\n  justify-content: right;\r\n}\r\n.pops-panel-select .el-select__selected-item,\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.pops-panel-select .el-select__selected-item span {\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n}\r\n.pops-panel-select .el-select__selected-item.el-select__choose_tag .el-tag,\r\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\r\n  max-width: 200px;\r\n}\r\n.pops-panel-select .el-select__input-wrapper,\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n  max-width: 100%;\r\n}\r\n.pops-panel-select .el-select__selection.is-near,\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n  margin-left: -8px;\r\n}\r\n.pops-panel-select .el-select__placeholder,\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n  position: absolute;\r\n  display: block;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  color: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select .el-select__placeholder.is-transparent,\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n  color: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select .el-select__prefix,\r\n.pops-panel-select .el-select__suffix,\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  gap: 6px;\r\n  color: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select .el-icon,\r\n.pops-panel-select-multiple .el-icon {\r\n  --color: inherit;\r\n  height: 1em;\r\n  width: 1em;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  fill: currentColor;\r\n  color: var(--color);\r\n  font-size: inherit;\r\n}\r\n.pops-panel-select .el-icon svg,\r\n.pops-panel-select-multiple .el-icon svg {\r\n  height: 1em;\r\n  width: 1em;\r\n}\r\n.pops-panel-select .el-select__caret,\r\n.pops-panel-select-multiple .el-select__caret {\r\n  color: var(--el-select-input-color);\r\n  font-size: var(--el-select-input-font-size);\r\n  transition: transform var(--el-transition-duration);\r\n  transform: rotate(0);\r\n  cursor: pointer;\r\n}\r\n/* 把箭头旋转 */\r\n.pops-panel-select[data-show-option] .el-select__caret,\r\n.pops-panel-select-multiple[data-show-option] .el-select__caret {\r\n  transform: rotate(180deg);\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n  --el-tag-font-size: 12px;\r\n  --el-tag-border-radius: 4px;\r\n  --el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n  background-color: var(--el-tag-bg-color);\r\n  border-color: var(--el-tag-border-color);\r\n  color: var(--el-tag-text-color);\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  height: 24px;\r\n  padding: 0 9px;\r\n  font-size: var(--el-tag-font-size);\r\n  line-height: normal;\r\n  align-content: center;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  border-radius: var(--el-tag-border-radius);\r\n  box-sizing: border-box;\r\n  white-space: nowrap;\r\n  --el-icon-size: 14px;\r\n  --el-tag-bg-color: var(--el-color-primary-light-9);\r\n  --el-tag-border-color: var(--el-color-primary-light-8);\r\n  --el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n  cursor: pointer;\r\n  border-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n  --el-tag-bg-color: var(--el-color-info-light-9);\r\n  --el-tag-border-color: var(--el-color-info-light-8);\r\n  --el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n  --el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n  padding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n  min-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n  flex-shrink: 0;\r\n  color: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n  color: var(--el-color-white);\r\n  background-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  font-size: calc(var(--el-icon-size) - 2px);\r\n  height: var(--el-icon-size);\r\n  width: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n  margin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n  display: block;\r\n  line-height: normal;\r\n  align-content: center;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n/* 禁用样式 */\r\n.pops-panel-select-disable {\r\n  --el-fill-color-blank: #f5f7fa;\r\n  --color: #a8abb2;\r\n  --el-border-color: #cbcbcb;\r\n}\r\n.pops-panel-select-disable .el-tag.el-tag--info {\r\n  --el-tag-bg-color: #e7e7e7;\r\n  --el-tag-text-color: var(--pops-components-is-disabled-text-color);\r\n}\r\n.pops-panel-select-disable .el-select__selection .el-tag,\r\n.pops-panel-select-disable .el-tag .el-tag__close:hover,\r\n.pops-panel-select-disable .el-select__wrapper,\r\n.pops-panel-select-disable .el-select__caret {\r\n  cursor: not-allowed;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n  cursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n  background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\r\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n    var(--pops-panel-forms-container-li-padding-left-right);\r\n  margin: 0px;\r\n}\r\n/* 去除上个兄弟item的底部边框颜色 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\r\n  border-bottom: 1px solid transparent;\r\n}\r\n/* 第一个和最后一个跟随圆角 */\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\r\n  border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\r\n  border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\r\n  border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n  display: flex;\r\n  align-items: center;\r\n  color: #6c6c6c;\r\n  fill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n  width: 15px;\r\n  height: 15px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\r\n  display: flex;\r\n  align-items: center;\r\n  width: -moz-available;\r\n  width: -webkit-fill-available;\r\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n    calc(\r\n      var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\r\n        var(--pops-panel-forms-header-icon-size)\r\n    );\r\n  gap: 0px;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n  width: var(--pops-panel-forms-header-icon-size);\r\n  height: var(--pops-panel-forms-header-icon-size);\r\n  display: flex;\r\n  align-items: center;\r\n  cursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\r\n  width: inherit;\r\n  height: inherit;\r\n}\r\n/* deepMenu的css */\r\n\r\n/* 文字对齐 */\r\n.pops-panel-item-left-desc-text:has(code) {\r\n  display: flex;\r\n  align-items: baseline;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .pops[type-value=\"panel\"] {\r\n    --pops-bg-color: #000000;\r\n    --pops-color: #f2f2f2;\r\n    --panel-title-bg-color: #000000;\r\n    --panel-aside-bg-color: #262626;\r\n    --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\r\n    --pops-panel-forms-container-item-bg-color: #262626;\r\n    --pops-panel-forms-container-item-title-color: #c1c1c1;\r\n\r\n    --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n    --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\r\n  }\r\n  .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n    fill: #f2f2f2;\r\n  }\r\n\r\n  /* switch的CSS */\r\n  .pops-panel-switch {\r\n    --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n    --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n    --panel-switch-circle-color: #dcdfe6;\r\n    --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n    --panel-switch-checked-circle-color: #409eff;\r\n    --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n    --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n  }\r\n  /* select的CSS */\r\n  .pops-panel-select {\r\n    --pops-panel-components-select-text-color: #f2f2f2;\r\n    --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n    --pops-panel-components-select-bg-color: #141414;\r\n  }\r\n  /* select-multiple的CSS*/\r\n  .pops-panel-select-multiple {\r\n    --el-fill-color-blank: #141414;\r\n    --el-border-color: #4c4d4f;\r\n    --el-text-color-placeholder: #a8abb2;\r\n    --el-select-input-color: #a8abb2;\r\n    --el-text-color-regular: #606266;\r\n    --el-color-info: #909399;\r\n    --el-color-info-light-8: #e9e9eb;\r\n    --el-color-primary-light-9: #ecf5ff;\r\n    --el-color-primary-light-8: #d9ecff;\r\n    --el-color-primary: #409eff;\r\n    --el-color-white: #ffffff;\r\n  }\r\n  .pops-panel-select-multiple .el-tag {\r\n    --el-color-info-light-9: #202121;\r\n  }\r\n  .pops-panel-select-multiple-disable {\r\n    --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\r\n  }\r\n  .pops-panel-select-multiple-disable .el-tag.el-tag--info {\r\n    --el-tag-bg-color: #2f2f2f;\r\n  }\r\n  /* select-multiple的CSS*/\r\n  /* slider的CSS */\r\n  .pops-slider {\r\n    --pops-slider-border-color-light: #414243;\r\n  }\r\n  /* input的CSS */\r\n  .pops-panel-input {\r\n    --pops-panel-components-input-text-color: #f2f2f2;\r\n    --pops-panel-components-input-bd-color: #4f5052;\r\n    --pops-panel-components-input-bg-color: #141414;\r\n    --pops-panel-components-input-hover-bd-color: #6f7175;\r\n    --pops-panel-components-input-focus-bd-color: #409eff;\r\n    --pops-panel-components-input-suffix-color: #a8abb2;\r\n  }\r\n  /* textarea的CSS */\r\n  .pops-panel-textarea {\r\n    --pops-panel-components-textarea-text-color: #f2f2f2;\r\n    --pops-panel-components-textarea-text-bg-color: #141414;\r\n    --pops-panel-components-textarea-bd-color: #4f5052;\r\n    --pops-panel-components-textarea-hover-bd-color: #6f7175;\r\n    --pops-panel-components-textarea-focus-bd-color: #409eff;\r\n  }\r\n  .pops-panel-textarea-disable {\r\n    --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\r\n    --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\r\n  }\r\n  /* slider */\r\n  .pops-slider {\r\n    --pops-slider-text-color-placeholder: #8d9095;\r\n  }\r\n}\r\n";
+    var panelCSS = ".pops[type-value=\"panel\"] {\n  --pops-bg-color: #f2f2f2;\n  --pops-color: #333333;\n  --panel-title-bg-color: #ffffff;\n\n  --panel-aside-bg-color: #ffffff;\n  --panel-aside-hover-color: rgb(64, 158, 255);\n  --panel-aside-hover-bg-color: rgba(64, 158, 255, 0.1);\n\n  --pops-panel-forms-margin-top-bottom: 10px;\n  --pops-panel-forms-margin-left-right: 20px;\n  --pops-panel-forms-header-icon-size: calc(var(--pops-panel-forms-container-li-padding-left-right) + 1px);\n  --pops-panel-forms-header-padding-top-bottom: 15px;\n  --pops-panel-forms-header-padding-left-right: 10px;\n  --pops-panel-forms-container-item-left-text-gap: 6px;\n  --pops-panel-forms-container-item-left-desc-text-size: 0.8em;\n  --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n  --pops-panel-forms-container-item-bg-color: #ffffff;\n  --pops-panel-forms-container-item-title-color: #333;\n  --pops-panel-forms-container-item-border-radius: 6px;\n  --pops-panel-forms-container-item-margin-top-bottom: 10px;\n  --pops-panel-forms-container-item-margin-left-right: var(--pops-panel-forms-margin-left-right);\n  --pops-panel-forms-container-li-border-color: var(--pops-bd-color);\n  --pops-panel-forms-container-li-padding-top-bottom: 12px;\n  --pops-panel-forms-container-li-padding-left-right: 16px;\n\n  --pops-panel-forms-container-deepMenu-item-active-bg: #e9e9e9;\n}\n.pops[type-value=\"panel\"] {\n  color: var(--pops-color);\n  background: var(--pops-bg-color);\n}\n.pops[type-value] .pops-panel-title {\n  background: var(--panel-title-bg-color);\n}\n\n/* ↓panel的CSS↓ */\n/* 左侧的列表 */\naside.pops-panel-aside {\n  box-sizing: border-box;\n  flex-shrink: 0;\n  max-width: 200px;\n  min-width: 100px;\n  height: 100%;\n  background: var(--panel-aside-bg-color);\n  border-right: 1px solid var(--panel-aside-bg-color);\n  font-size: 0.9em;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\naside.pops-panel-aside .pops-panel-aside-top-container {\n  overflow: auto;\n}\naside.pops-panel-aside ul li {\n  margin: 6px 8px;\n  border-radius: 4px;\n  padding: 6px 10px;\n  cursor: default;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\naside.pops-panel-aside .pops-is-visited,\naside.pops-panel-aside ul li:not(.pops-panel-disabled-aside-hover-css):hover {\n  color: var(--panel-aside-hover-color);\n  background: var(--panel-aside-hover-bg-color);\n}\n/* 左侧的列表 */\n\n/* 底部的容器 */\n.pops-panel-bottom-wrapper {\n  background: var(--panel-aside-bg-color);\n  border-top: 1px solid #ebeef5;\n}\n.pops-panel-bottom-wrapper:has(.pops-panel-bottom-left-container:empty):has(.pops-panel-bottom-right-container:empty) {\n  border-top: 0;\n}\n.pops-panel-bottom-container {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n}\n.pops-panel-bottom-left-container {\n}\n.pops-panel-bottom-right-container {\n}\n.pops-panel-bottom-wrapper .pops-panel-bottom-item {\n  list-style-type: none;\n  margin: 6px 8px;\n  border-radius: 4px;\n  padding: 6px 10px;\n  cursor: default;\n}\n.pops-panel-bottom-wrapper:not(.pops-panel-disable-bottom-item-hover-css) .pops-panel-bottom-item:hover {\n  color: var(--panel-aside-hover-color);\n  background: var(--panel-aside-hover-bg-color);\n}\n/* 底部的容器 */\n\n.pops-panel-content {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  overflow: auto;\n  flex-basis: auto;\n  box-sizing: border-box;\n  min-width: 0;\n  bottom: 0 !important;\n}\n\n.pops-panel-section-wrapper {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\nsection.pops-panel-container {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\nsection.pops-panel-container .pops-panel-container-header-ul,\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\n  border-bottom: 1px solid rgba(223, 223, 223, var(--pops-bg-opacity));\n  flex: 0 auto;\n}\nsection.pops-panel-container .pops-panel-container-header-ul li,\nsection.pops-panel-container .pops-panel-container-header-ul li.pops-panel-container-header-title-text {\n  display: flex;\n  justify-content: flex-start !important;\n  margin: 0px !important;\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right));\n  text-align: left;\n}\nsection.pops-panel-container ul.pops-panel-container-main-ul {\n  overflow: auto;\n  /*flex: 1;*/\n}\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: var(--pops-panel-forms-margin-top-bottom)\n    calc(var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-margin-left-right));\n  gap: 10px;\n}\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\n  margin: 10px;\n  margin-left: calc(\n    var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right)\n  );\n  font-size: 0.9em;\n  text-align: left;\n  color: var(--pops-panel-forms-container-item-title-color);\n}\nsection.pops-panel-container li.pops-panel-forms-container-item {\n  /* 去除<li>左侧的圆点 */\n  display: block;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist {\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\n  background: var(--pops-panel-forms-container-item-bg-color);\n  margin: var(--pops-panel-forms-container-item-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul.pops-panel-forms-container-item-formlist li {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\n    var(--pops-panel-forms-container-li-padding-left-right);\n  margin: 0px 0px;\n  border-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n  text-align: left;\n}\n/*section.pops-panel-container\n\t.pops-panel-forms-container-item\n\tul\n\tli.pops-panel-deepMenu-nav-item {\n\tpadding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\n\tmargin: 0px var(--pops-panel-forms-container-li-padding-left-right);\n\tborder-bottom: 1px solid var(--pops-panel-forms-container-li-border-color);\n}*/\nsection.pops-panel-container\n  .pops-panel-forms-container-item\n  ul.pops-panel-forms-container-item-formlist\n  li:last-child {\n  border: 0px;\n}\n/* 左侧的文字 */\nsection.pops-panel-container .pops-panel-item-left-text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pops-panel-forms-container-item-left-text-gap);\n}\n\n/* 左侧的主文字 */\n/*section.pops-panel-container .pops-panel-item-left-main-text {\n\t\n}*/\n/* 左侧的描述文字 */\nsection.pops-panel-container .pops-panel-item-left-desc-text {\n  font-size: var(--pops-panel-forms-container-item-left-desc-text-size);\n  color: var(--pops-panel-forms-container-item-left-desc-text-color);\n}\n\n/* 折叠面板 */\nsection.pops-panel-container .pops-panel-forms-fold {\n  border-radius: var(--pops-panel-forms-container-item-border-radius);\n  background: var(--pops-panel-forms-container-item-bg-color);\n  margin: var(--pops-panel-forms-margin-top-bottom) var(--pops-panel-forms-margin-left-right);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container {\n  display: flex;\n  align-items: center;\n  fill: #6c6c6c;\n  justify-content: space-between;\n  margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\n}\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-fold-container-icon {\n  transform: rotate(90deg);\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-fold-container-icon {\n  width: 15px;\n  height: 15px;\n  display: flex;\n  align-items: center;\n  transform: rotate(-90deg);\n  transition: transform 0.3s;\n}\n/* 折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold[data-fold-enable] .pops-panel-forms-container-item-formlist {\n  height: 0;\n}\n/* 非折叠状态 */\nsection.pops-panel-container .pops-panel-forms-fold ul.pops-panel-forms-container-item-formlist {\n  margin: 0;\n}\nsection.pops-panel-container .pops-panel-forms-fold .pops-panel-forms-container-item-formlist {\n  transition: height 0.3s;\n  overflow: hidden;\n  border-radius: unset;\n  background: unset;\n  margin: 0;\n  height: calc-size(auto, size);\n}\n/* 折叠面板 */\n\n/* 姑且认为小于600px的屏幕为移动端 */\n@media (max-width: 600px) {\n  /* 兼容移动端CSS */\n  .pops[type-value=\"panel\"] {\n    --pops-panel-forms-margin-left-right: 10px;\n  }\n  .pops[type-value=\"panel\"] {\n    width: 92%;\n    width: 92vw;\n    width: 92dvw;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-content aside.pops-panel-aside {\n    max-width: 20%;\n    min-width: auto;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item > div {\n    text-align: left;\n    --pops-panel-forms-margin-left-right: 0px;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-forms-container-item ul {\n    margin: 0px !important;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li {\n    margin: 10px 10px;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li div:nth-child(2) {\n    max-width: 55%;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-select .el-select__selected-item.el-select__placeholder {\n    max-width: -moz-available;\n    max-width: -webkit-fill-available;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul > li .pops-panel-input span.pops-panel-input__suffix {\n    padding: 0 4px;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-select select {\n    min-width: 88px !important;\n    width: -moz-available;\n    width: -webkit-fill-available;\n  }\n  .pops[type-value=\"panel\"] section.pops-panel-container .pops-panel-container-header-ul li {\n    font-size: 16px;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-title p[pops],\n  .pops[type-value=\"panel\"] section.pops-panel-container > ul li,\n  .pops[type-value=\"panel\"] aside.pops-panel-aside ul li {\n    font-size: 14px;\n  }\n}\n/* switch的CSS */\n.pops-panel-switch {\n  --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n  --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n  --panel-switch-circle-color: #dcdfe6;\n  --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  --panel-switch-checked-circle-color: #409eff;\n  --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n  --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n}\n.pops-panel-switch {\n  display: inline-flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  position: relative;\n  font-size: 14px;\n  line-height: normal;\n  align-content: center;\n  height: 32px;\n  vertical-align: middle;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-panel-switch input.pops-panel-switch__input {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  margin: 0;\n}\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\n.pops-panel-switch[data-disabled],\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\n.pops-panel-switch input.pops-panel-switch__input:disabled + .pops-panel-switch__core {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n.pops-panel-switch span.pops-panel-switch__core {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  min-width: 40px;\n  height: 20px;\n  border: 1px solid var(--panel-switch-core-bd-color);\n  outline: 0;\n  border-radius: 10px;\n  box-sizing: border-box;\n  background: var(--panel-switch-core-bg-color);\n  cursor: pointer;\n  transition:\n    border-color 0.3s,\n    background-color 0.3s;\n}\n.pops-panel-switch .pops-panel-switch__action {\n  position: absolute;\n  left: 1px;\n  border-radius: 100%;\n  transition: all 0.3s;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--panel-switch-circle-bg-color);\n  color: var(--panel-switch-circle-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\n  border-color: var(--panel-switch-checked-core-bd-color);\n  background-color: var(--panel-switch-checked-core-bg-color);\n}\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\n  left: calc(100% - 17px);\n  color: var(--panel-switch-checked-circle-color);\n}\n/* switch的CSS */\n\n/* slider旧的CSS */\nsection.pops-panel-container .pops-panel-slider:has(> input[type=\"range\"]) {\n  overflow: hidden;\n  height: 25px;\n  line-height: normal;\n  align-content: center;\n  display: flex;\n  align-items: center;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"] {\n  height: 6px;\n  background: rgb(228, 231, 237, var(--pops-bg-opacity));\n  outline: 0;\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-webkit-slider-thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  box-shadow:\n    0 0 2px rgba(0, 0, 0, 0.3),\n    0 3px 5px rgba(0, 0, 0, 0.2);\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\n  background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n  box-shadow:\n    0 0 2px rgba(0, 0, 0, 0.3),\n    0 3px 5px rgba(0, 0, 0, 0.2);\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\nsection.pops-panel-container .pops-panel-slider input[type=\"range\"]::-moz-range-progress {\n  height: 6px;\n  border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\n}\n/* slider旧的CSS */\n\n/* slider的CSS */\n.pops-slider {\n  --pops-slider-color-white: #ffffff;\n  --pops-slider-color-primary: #409eff;\n  --pops-slider-color-info: #909399;\n  --pops-slider-text-color-placeholder: #a8abb2;\n  --pops-slider-border-color-light: #e4e7ed;\n  --pops-slider-border-radius-circle: 100%;\n  --pops-slider-transition-duration-fast: 0.2s;\n\n  --pops-slider-main-bg-color: var(--pops-slider-color-primary);\n  --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\n  --pops-slider-stop-bg-color: var(--pops-slider-color-white);\n  --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\n  --pops-slider-border-radius: 3px;\n  --pops-slider-height: 6px;\n  --pops-slider-button-size: 20px;\n  --pops-slider-button-wrapper-size: 36px;\n  --pops-slider-button-wrapper-offset: -15px;\n}\n\n.pops-slider {\n  width: 100%;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.pops-slider-width {\n  flex: 0 0 52%;\n  margin-left: 10px;\n}\n\n.pops-slider__runway {\n  flex: 1;\n  height: var(--pops-slider-height);\n  background-color: var(--pops-slider-runway-bg-color);\n  border-radius: var(--pops-slider-border-radius);\n  position: relative;\n  cursor: pointer;\n}\n\n.pops-slider__runway.show-input {\n  margin-right: 30px;\n  width: auto;\n}\n\n.pops-slider__runway.pops-slider-is-disabled {\n  cursor: default;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\n  background-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\n  border-color: var(--pops-slider-disabled-color);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n  cursor: not-allowed;\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n  transform: scale(1);\n}\n\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\n  cursor: not-allowed;\n}\n\n.pops-slider__input {\n  flex-shrink: 0;\n  width: 130px;\n}\n\n.pops-slider__bar {\n  height: var(--pops-slider-height);\n  background-color: var(--pops-slider-main-bg-color);\n  border-top-left-radius: var(--pops-slider-border-radius);\n  border-bottom-left-radius: var(--pops-slider-border-radius);\n  position: absolute;\n}\n\n.pops-slider__button-wrapper {\n  height: var(--pops-slider-button-wrapper-size);\n  width: var(--pops-slider-button-wrapper-size);\n  position: absolute;\n  z-index: 1;\n  top: var(--pops-slider-button-wrapper-offset);\n  transform: translate(-50%);\n  background-color: transparent;\n  text-align: center;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  line-height: normal;\n  outline: none;\n}\n\n.pops-slider__button-wrapper:after {\n  display: inline-block;\n  content: \"\";\n  height: 100%;\n  vertical-align: middle;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n  cursor: grab;\n}\n\n.pops-slider__button {\n  display: inline-block;\n  width: var(--pops-slider-button-size);\n  height: var(--pops-slider-button-size);\n  vertical-align: middle;\n  border: solid 2px var(--pops-slider-main-bg-color);\n  background-color: var(--pops-slider-color-white);\n  border-radius: 50%;\n  box-sizing: border-box;\n  transition: var(--pops-slider-transition-duration-fast);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover,\n.pops-slider__button.dragging {\n  transform: scale(1.2);\n}\n\n.pops-slider__button:hover,\n.pops-slider__button.hover {\n  cursor: grab;\n}\n\n.pops-slider__button.dragging {\n  cursor: grabbing;\n}\n\n.pops-slider__stop {\n  position: absolute;\n  height: var(--pops-slider-height);\n  width: var(--pops-slider-height);\n  border-radius: var(--pops-slider-border-radius-circle);\n  background-color: var(--pops-slider-stop-bg-color);\n  transform: translate(-50%);\n}\n\n.pops-slider__marks {\n  top: 0;\n  left: 12px;\n  width: 18px;\n  height: 100%;\n}\n\n.pops-slider__marks-text {\n  position: absolute;\n  transform: translate(-50%);\n  font-size: 14px;\n  color: var(--pops-slider-color-info);\n  margin-top: 15px;\n  white-space: pre;\n}\n\n.pops-slider.is-vertical {\n  position: relative;\n  display: inline-flex;\n  width: auto;\n  height: 100%;\n  flex: 0;\n}\n\n.pops-slider.is-vertical .pops-slider__runway {\n  width: var(--pops-slider-height);\n  height: 100%;\n  margin: 0 16px;\n}\n\n.pops-slider.is-vertical .pops-slider__bar {\n  width: var(--pops-slider-height);\n  height: auto;\n  border-radius: 0 0 3px 3px;\n}\n\n.pops-slider.is-vertical .pops-slider__button-wrapper {\n  top: auto;\n  left: var(--pops-slider-button-wrapper-offset);\n  transform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__stop {\n  transform: translateY(50%);\n}\n\n.pops-slider.is-vertical .pops-slider__marks-text {\n  margin-top: 0;\n  left: 15px;\n  transform: translateY(50%);\n}\n\n.pops-slider--large {\n  height: 40px;\n}\n\n.pops-slider--small {\n  height: 24px;\n}\n/* slider的CSS */\n\n/* input的CSS */\n.pops-panel-input {\n  --el-disabled-text-color: #a8abb2;\n  --el-disabled-bg-color: #f5f7fa;\n  --el-disabled-border-color: #e4e7ed;\n  --el-color-danger: #f56c6c;\n\n  --pops-panel-components-input-border-radius: 4px;\n  --pops-panel-components-input-text-color: #000000;\n  --pops-panel-components-input-text-bg-color: transparent;\n  --pops-panel-components-input-text-default-padding: 8px;\n  --pops-panel-components-input-bd-color: #dcdfe6;\n  --pops-panel-components-input-bg-color: #ffffff;\n  --pops-panel-components-input-hover-bd-color: #c0c4cc;\n  --pops-panel-components-input-focus-bd-color: #409eff;\n  --pops-panel-components-input-suffix-color: #a8abb2;\n  --pops-panel-components-input-suffix-bg-color: #ffffff;\n}\n.pops-panel-input {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n  box-shadow: none;\n  width: 200px;\n  border: 0px;\n}\n.pops-panel-input_inner {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border: 1px solid var(--pops-panel-components-input-bd-color);\n  border-radius: var(--pops-panel-components-input-border-radius);\n  background-color: var(--pops-panel-components-input-bg-color);\n  box-shadow: none;\n}\n.pops-panel-input_inner:hover {\n  border: 1px solid var(--pops-panel-components-input-hover-bd-color);\n}\n.pops-panel-input:has(input:disabled):hover {\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input_inner:has(input:focus) {\n  outline: 0;\n  border: 1px solid var(--pops-panel-components-input-focus-bd-color);\n  border-radius: var(--pops-panel-components-input-border-radius);\n  box-shadow: none;\n}\n.pops-panel-input input {\n  display: inline-flex;\n  justify-content: center;\n  text-align: start;\n  align-items: center;\n  align-content: center;\n  white-space: nowrap;\n  cursor: text;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  -webkit-appearance: none;\n  appearance: none;\n  color: var(--pops-panel-components-input-text-color);\n  background-color: var(--pops-panel-components-input-text-bg-color);\n  outline: 0;\n  transition: 0.1s;\n  border: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: normal;\n  height: 32px;\n  width: 100%;\n  flex: 1;\n  /*margin-right: calc(1em + 8px);*/\n  margin: 0px;\n  padding: var(--pops-panel-components-input-text-default-padding);\n}\n.pops-panel-input input[type=\"search\"]::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n  display: none;\n}\n/* 颜色选择器不需要那么宽 */\n.pops-panel-input:has(input[type=\"color\"]) {\n  width: 50px;\n}\n.pops-panel-input input[type=\"color\"] {\n  padding: 0px;\n}\n.pops-panel-input_inner:has(input[type=\"file\"]) {\n  border: 0px;\n  background: transparent;\n}\n.pops-panel-input input[type=\"file\"] {\n  padding: 0px;\n  line-height: 32px;\n}\n.pops-panel-input span.pops-panel-input__suffix {\n  display: inline-flex;\n  white-space: nowrap;\n  flex-shrink: 0;\n  flex-wrap: nowrap;\n  height: 100%;\n  height: -moz-available;\n  height: -webkit-fill-available;\n  text-align: center;\n  color: var(--pops-panel-components-input-suffix-color);\n  background: var(--pops-panel-components-input-suffix-bg-color);\n  transition: all 0.3s;\n  pointer-events: none;\n  padding: 0 8px;\n  position: relative;\n  right: 0px;\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border: 1px solid transparent;\n}\n.pops-panel-input span.pops-panel-input__suffix-inner {\n  pointer-events: all;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n/* 如果包含清空图标的按钮，则默认隐藏清空图标，当:hover、:focus、:focus-within、:active时显示清空图标 */\n.pops-panel-input span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n  display: none;\n}\n.pops-panel-input:hover span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:focus-within span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]),\n.pops-panel-input:active span.pops-panel-input__suffix:has(svg[data-type=\"circleClose\"]) {\n  display: inline-flex;\n}\n/* 当清空图标显示时或查看图标存在时，则隐藏输入框的padding-right */\n.pops-panel-input:hover:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:focus:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:focus-within:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:active:has(span.pops-panel-input__suffix svg[data-type=\"circleClose\"]) input,\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"view\"]) input,\n.pops-panel-input:has(span.pops-panel-input__suffix svg[data-type=\"hide\"]) input {\n  padding-right: 0;\n}\n.pops-panel-input .pops-panel-icon {\n  cursor: pointer;\n}\n.pops-panel-input .pops-panel-icon {\n  height: inherit;\n  line-height: normal;\n  align-content: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.3s;\n}\n.pops-panel-input .pops-panel-icon svg {\n  height: 1em;\n  width: 1em;\n}\n\n.pops-input-disabled {\n  background-color: var(--pops-components-is-disabled-bg-color);\n  border-radius: 4px;\n}\n.pops-panel-input.pops-input-disabled:hover {\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input input:disabled,\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  color: var(--el-disabled-text-color);\n  -webkit-text-fill-color: var(--el-disabled-text-color);\n  cursor: not-allowed;\n}\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\n  display: none;\n}\n/* 校验样式 */\n.pops-panel-input:has(.pops-panel-input-valid-error) {\n  --pops-panel-components-input-bd-color: var(--el-color-danger) !important;\n  --pops-panel-components-input-hover-bd-color: var(--pops-panel-components-input-bd-color);\n  --pops-panel-components-input-focus-bd-color: var(--pops-panel-components-input-bd-color);\n}\n.pops-panel-input .pops-panel-input-valid-error {\n  width: 100%;\n  color: var(--el-color-danger);\n  font-weight: 500;\n  font-size: 0.8em;\n  box-sizing: border-box;\n  vertical-align: middle;\n  display: inline-flex;\n  position: relative;\n}\n/* input的CSS */\n\n/* textarea的CSS */\n.pops-panel-textarea {\n  --pops-panel-components-textarea-text-color: #000000;\n  --pops-panel-components-textarea-text-bg-color: #ffffff;\n  --pops-panel-components-textarea-bd-color: #dcdfe6;\n  --pops-panel-components-textarea-hover-bd-color: #c0c4cc;\n  --pops-panel-components-textarea-focus-bd-color: #409eff;\n}\n.pops-panel-textarea textarea {\n  width: 100%;\n  /*vertical-align: bottom;*/\n  position: relative;\n  display: block;\n  resize: none;\n  padding: 5px 11px;\n  /*line-height: 1;*/\n  box-sizing: border-box;\n  font-size: inherit;\n  font-family: inherit;\n  color: var(--pops-panel-components-textarea-text-color);\n  background-color: var(--pops-panel-components-textarea-text-bg-color);\n  background-image: none;\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  border-radius: 0;\n  transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  border: 1px solid var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea textarea:hover {\n  border-color: var(--pops-panel-components-textarea-hover-bd-color);\n}\n.pops-panel-textarea:has(textarea:disabled):hover {\n  --pops-panel-components-textarea-hover-bd-color: var(--pops-panel-components-textarea-bd-color);\n}\n.pops-panel-textarea-disable {\n  --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color) !important;\n  --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-textarea-disable textarea {\n  cursor: not-allowed;\n}\n.pops-panel-textarea textarea:focus {\n  outline: 0;\n  border-color: var(--pops-panel-components-textarea-focus-bd-color);\n}\n/* textarea的CSS */\n\n/* select的CSS */\n.pops-panel-select {\n  --pops-panel-components-select-disabled-text-color: #a8abb2;\n  --pops-panel-components-select-text-color: #000000;\n  --pops-panel-components-select-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n  --pops-panel-components-select-hover-bd-color: rgb(184, 184, 184, var(--pops-bd-opacity));\n  --pops-panel-components-select-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n}\n.pops-panel-select {\n  border: 0;\n}\n.pops-panel-select select {\n  width: 100%;\n  height: 32px;\n  line-height: normal;\n  align-content: center;\n  min-width: 200px;\n  border: 1px solid var(--pops-panel-components-select-bd-color);\n  border-radius: 5px;\n  text-align: center;\n  outline: 0;\n  color: var(--pops-panel-components-select-text-color);\n  background-color: var(--pops-panel-components-select-bg-color);\n  box-shadow: none;\n}\n.pops-panel-select select:hover {\n  border: 1px solid var(--pops-panel-components-select-hover-bd-color);\n}\n.pops-panel-select-disable {\n  --pops-panel-components-select-text-color: var(--pops-components-is-disabled-text-color);\n  --pops-panel-components-select-bg-color: var(--pops-components-is-disabled-bg-color);\n}\n.pops-panel-select-disable select {\n  cursor: not-allowed;\n}\n.pops-panel-select-disable select:hover {\n  box-shadow: none;\n  --pops-panel-components-select-hover-bd-color: var(--pops-panel-components-select-bd-color);\n}\n.pops-panel-select select:focus {\n  border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\n  box-shadow: none;\n}\n/* select的CSS */\n\n/* select dialog 的CSS */\n.pops-panel-select[data-mode=\"dialog\"] {\n}\n/* select dialog 的CSS */\n\n/* select horizontal 的CSS */\n.pops-panel-select[data-mode=\"horizontal\"] {\n  --pops-panel-components-select-horizontal-selected-text-color: #626aef;\n  --pops-panel-components-select-horizontal-selected-bg-color: #eff0fd;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .el-select__wrapper {\n  padding: 0;\n  gap: 0;\n  border: 0;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid var(--el-border-color);\n  height: -moz-available;\n  height: -webkit-fill-available;\n  border-left: 0;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:hover {\n  color: var(--el-color-primary);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:first-child {\n  border-left: 1px solid var(--el-border-color);\n  border-top-left-radius: var(--el-border-radius-base);\n  border-bottom-left-radius: var(--el-border-radius-base);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:last-child {\n  border-top-right-radius: var(--el-border-radius-base);\n  border-bottom-right-radius: var(--el-border-radius-base);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item.select__selected-item {\n  color: var(--pops-panel-components-select-horizontal-selected-text-color);\n  background-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\n  border-color: var(--pops-panel-components-select-horizontal-selected-bg-color);\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item:has(+ .select__selected-item) {\n  border-right: 0;\n}\n.pops-panel-select[data-mode=\"horizontal\"] .select-item[disabled] {\n  color: var(--pops-panel-components-select-disabled-text-color);\n  --pops-panel-components-select-horizontal-selected-text-color: var(\n    --pops-panel-components-select-disabled-text-color\n  );\n  cursor: not-allowed;\n  background: unset;\n}\n/* select horizontal 的CSS */\n\n/* select-multiple的CSS*/\n.pops-panel-select-multiple,\n.pops-panel-select {\n  --el-border-radius-base: 4px;\n  --el-fill-color-blank: #ffffff;\n  --el-transition-duration: 0.3s;\n  --el-border-color: #cbcbcb;\n  --el-text-color-placeholder: #a8abb2;\n  --color: inherit;\n  --el-select-input-color: #a8abb2;\n  --el-select-input-font-size: 14px;\n  --el-text-color-regular: #606266;\n  --el-color-info: #909399;\n  --el-color-info-light-9: #f4f4f5;\n  --el-color-info-light-8: #e9e9eb;\n  --el-color-primary-light-9: #ecf5ff;\n  --el-color-primary-light-8: #d9ecff;\n  --el-color-primary: #409eff;\n  --el-color-white: #ffffff;\n  width: 200px;\n}\n.pops-panel-select .el-select__wrapper,\n.pops-panel-select-multiple .el-select__wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n  cursor: pointer;\n  text-align: left;\n  font-size: 14px;\n  padding: 4px 12px;\n  gap: 6px;\n  min-height: 32px;\n  line-height: normal;\n  align-content: center;\n  border-radius: var(--el-border-radius-base);\n  background-color: var(--el-fill-color-blank);\n  transition: var(--el-transition-duration);\n  transform: translateZ(0);\n  border: 1px solid var(--el-border-color);\n}\n.pops-panel-select .el-select__wrapper.is-focused,\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\n  --el-border-color: var(--el-color-primary);\n}\n.pops-panel-select .el-select__selection,\n.pops-panel-select-multiple .el-select__selection {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  gap: 6px;\n}\n.pops-panel-select .el-select__selection[data-selected-text-align=\"left\"] {\n  justify-content: left;\n}\n.pops-panel-select .el-select__selection[data-selected-text-align=\"center\"] {\n  justify-content: center;\n}\n.pops-panel-select .el-select__selection[data-selected-text-align=\"right\"] {\n  justify-content: right;\n}\n.pops-panel-select .el-select__selected-item,\n.pops-panel-select-multiple .el-select__selected-item {\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.pops-panel-select .el-select__selected-item span {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.pops-panel-select .el-select__selected-item.el-select__choose_tag .el-tag,\n.pops-panel-select-multiple .el-select__selected-item.el-select__choose_tag .el-tag {\n  max-width: 200px;\n}\n.pops-panel-select .el-select__input-wrapper,\n.pops-panel-select-multiple .el-select__input-wrapper {\n  max-width: 100%;\n}\n.pops-panel-select .el-select__selection.is-near,\n.pops-panel-select-multiple .el-select__selection.is-near {\n  margin-left: -8px;\n}\n.pops-panel-select .el-select__placeholder,\n.pops-panel-select-multiple .el-select__placeholder {\n  position: absolute;\n  display: block;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--el-input-text-color, var(--el-text-color-regular));\n}\n.pops-panel-select .el-select__placeholder.is-transparent,\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  color: var(--el-text-color-placeholder);\n}\n.pops-panel-select .el-select__prefix,\n.pops-panel-select .el-select__suffix,\n.pops-panel-select-multiple .el-select__prefix,\n.pops-panel-select-multiple .el-select__suffix {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: 6px;\n  color: var(--el-input-icon-color, var(--el-text-color-placeholder));\n}\n.pops-panel-select .el-icon,\n.pops-panel-select-multiple .el-icon {\n  --color: inherit;\n  height: 1em;\n  width: 1em;\n  line-height: normal;\n  align-content: center;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n  color: var(--color);\n  font-size: inherit;\n}\n.pops-panel-select .el-icon svg,\n.pops-panel-select-multiple .el-icon svg {\n  height: 1em;\n  width: 1em;\n}\n.pops-panel-select .el-select__caret,\n.pops-panel-select-multiple .el-select__caret {\n  color: var(--el-select-input-color);\n  font-size: var(--el-select-input-font-size);\n  transition: transform var(--el-transition-duration);\n  transform: rotate(0);\n  cursor: pointer;\n}\n/* 把箭头旋转 */\n.pops-panel-select[data-show-option] .el-select__caret,\n.pops-panel-select-multiple[data-show-option] .el-select__caret {\n  transform: rotate(180deg);\n}\n.pops-panel-select-multiple .el-tag {\n  --el-tag-font-size: 12px;\n  --el-tag-border-radius: 4px;\n  --el-tag-border-radius-rounded: 9999px;\n}\n.pops-panel-select-multiple .el-tag {\n  background-color: var(--el-tag-bg-color);\n  border-color: var(--el-tag-border-color);\n  color: var(--el-tag-text-color);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: middle;\n  height: 24px;\n  padding: 0 9px;\n  font-size: var(--el-tag-font-size);\n  line-height: normal;\n  align-content: center;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--el-tag-border-radius);\n  box-sizing: border-box;\n  white-space: nowrap;\n  --el-icon-size: 14px;\n  --el-tag-bg-color: var(--el-color-primary-light-9);\n  --el-tag-border-color: var(--el-color-primary-light-8);\n  --el-tag-hover-color: var(--el-color-primary);\n}\n.pops-panel-select-multiple .el-select__selection .el-tag {\n  cursor: pointer;\n  border-color: transparent;\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n  --el-tag-bg-color: var(--el-color-info-light-9);\n  --el-tag-border-color: var(--el-color-info-light-8);\n  --el-tag-hover-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.el-tag--info {\n  --el-tag-text-color: var(--el-color-info);\n}\n.pops-panel-select-multiple .el-tag.is-closable {\n  padding-right: 5px;\n}\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\n  min-width: 0;\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n  flex-shrink: 0;\n  color: var(--el-tag-text-color);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\n  color: var(--el-color-white);\n  background-color: var(--el-tag-hover-color);\n}\n.pops-panel-select-multiple .el-tag .el-icon {\n  border-radius: 50%;\n  cursor: pointer;\n  font-size: calc(var(--el-icon-size) - 2px);\n  height: var(--el-icon-size);\n  width: var(--el-icon-size);\n}\n.pops-panel-select-multiple .el-tag .el-tag__close {\n  margin-left: 6px;\n}\n.pops-panel-select-multiple .el-select__tags-text {\n  display: block;\n  line-height: normal;\n  align-content: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n/* 禁用样式 */\n.pops-panel-select-disable {\n  --el-fill-color-blank: #f5f7fa;\n  --color: #a8abb2;\n  --el-border-color: #cbcbcb;\n}\n.pops-panel-select-disable .el-tag.el-tag--info {\n  --el-tag-bg-color: #e7e7e7;\n  --el-tag-text-color: var(--pops-components-is-disabled-text-color);\n}\n.pops-panel-select-disable .el-select__selection .el-tag,\n.pops-panel-select-disable .el-tag .el-tag__close:hover,\n.pops-panel-select-disable .el-select__wrapper,\n.pops-panel-select-disable .el-select__caret {\n  cursor: not-allowed;\n}\n/* select-multiple的CSS*/\n\n/* deepMenu的css */\n.pops-panel-deepMenu-nav-item {\n  cursor: pointer;\n}\n.pops-panel-deepMenu-nav-item:active {\n  background: var(--pops-panel-forms-container-deepMenu-item-active-bg);\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:active {\n  padding: var(--pops-panel-forms-container-li-padding-top-bottom)\n    var(--pops-panel-forms-container-li-padding-left-right);\n  margin: 0px;\n}\n/* 去除上个兄弟item的底部边框颜色 */\nsection.pops-panel-container .pops-panel-forms-container-item ul li:has(+ .pops-panel-deepMenu-nav-item:active) {\n  border-bottom: 1px solid transparent;\n}\n/* 第一个和最后一个跟随圆角 */\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:first-child:active {\n  border-top-left-radius: var(--pops-panel-forms-container-item-border-radius);\n  border-top-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\nsection.pops-panel-container .pops-panel-forms-container-item ul li.pops-panel-deepMenu-nav-item:last-child:active {\n  border-bottom-left-radius: var(--pops-panel-forms-container-item-border-radius);\n  border-bottom-right-radius: var(--pops-panel-forms-container-item-border-radius);\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\n  display: flex;\n  align-items: center;\n  color: #6c6c6c;\n  fill: #6c6c6c;\n}\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\n  width: 15px;\n  height: 15px;\n  display: flex;\n  align-items: center;\n}\nsection.pops-panel-deepMenu-container .pops-panel-container-header-ul li.pops-panel-deepMenu-container-header {\n  display: flex;\n  align-items: center;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  padding: var(--pops-panel-forms-header-padding-top-bottom)\n    calc(\n      var(--pops-panel-forms-margin-left-right) + var(--pops-panel-forms-container-li-padding-left-right) -\n        var(--pops-panel-forms-header-icon-size)\n    );\n  gap: 0px;\n}\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n  width: var(--pops-panel-forms-header-icon-size);\n  height: var(--pops-panel-forms-header-icon-size);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n/* 修复safari上图标大小未正常显示 */\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon > svg {\n  width: inherit;\n  height: inherit;\n}\n/* deepMenu的css */\n\n/* 文字对齐 */\n.pops-panel-item-left-desc-text:has(code) {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n}\n\n@media (prefers-color-scheme: dark) {\n  .pops[type-value=\"panel\"] {\n    --pops-bg-color: #000000;\n    --pops-color: #f2f2f2;\n    --panel-title-bg-color: #000000;\n    --panel-aside-bg-color: #262626;\n    --pops-panel-forms-container-item-left-desc-text-color: #6c6c6c;\n    --pops-panel-forms-container-item-bg-color: #262626;\n    --pops-panel-forms-container-item-title-color: #c1c1c1;\n\n    --pops-panel-forms-container-li-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n    --pops-panel-forms-container-deepMenu-item-active-bg: #333333;\n  }\n  .pops[type-value=\"panel\"] .pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\n    fill: #f2f2f2;\n  }\n\n  /* switch的CSS */\n  .pops-panel-switch {\n    --panel-switch-core-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\n    --panel-switch-core-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\n    --panel-switch-circle-color: #dcdfe6;\n    --panel-switch-circle-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\n    --panel-switch-checked-circle-color: #409eff;\n    --panel-switch-checked-core-bd-color: rgb(64, 158, 255, var(--pops-bd-opacity));\n    --panel-switch-checked-core-bg-color: rgb(64, 158, 255, var(--pops-bg-opacity));\n  }\n  /* select的CSS */\n  .pops-panel-select {\n    --pops-panel-components-select-text-color: #f2f2f2;\n    --pops-panel-components-select-bd-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n    --pops-panel-components-select-bg-color: #141414;\n  }\n  /* select-multiple的CSS*/\n  .pops-panel-select-multiple {\n    --el-fill-color-blank: #141414;\n    --el-border-color: #4c4d4f;\n    --el-text-color-placeholder: #a8abb2;\n    --el-select-input-color: #a8abb2;\n    --el-text-color-regular: #606266;\n    --el-color-info: #909399;\n    --el-color-info-light-8: #e9e9eb;\n    --el-color-primary-light-9: #ecf5ff;\n    --el-color-primary-light-8: #d9ecff;\n    --el-color-primary: #409eff;\n    --el-color-white: #ffffff;\n  }\n  .pops-panel-select-multiple .el-tag {\n    --el-color-info-light-9: #202121;\n  }\n  .pops-panel-select-multiple-disable {\n    --el-border-color: rgb(51, 51, 51, var(--pops-bd-opacity));\n  }\n  .pops-panel-select-multiple-disable .el-tag.el-tag--info {\n    --el-tag-bg-color: #2f2f2f;\n  }\n  /* select-multiple的CSS*/\n  /* slider的CSS */\n  .pops-slider {\n    --pops-slider-border-color-light: #414243;\n  }\n  /* input的CSS */\n  .pops-panel-input {\n    --pops-panel-components-input-text-color: #f2f2f2;\n    --pops-panel-components-input-bd-color: #4f5052;\n    --pops-panel-components-input-bg-color: #141414;\n    --pops-panel-components-input-hover-bd-color: #6f7175;\n    --pops-panel-components-input-focus-bd-color: #409eff;\n    --pops-panel-components-input-suffix-color: #a8abb2;\n  }\n  /* textarea的CSS */\n  .pops-panel-textarea {\n    --pops-panel-components-textarea-text-color: #f2f2f2;\n    --pops-panel-components-textarea-text-bg-color: #141414;\n    --pops-panel-components-textarea-bd-color: #4f5052;\n    --pops-panel-components-textarea-hover-bd-color: #6f7175;\n    --pops-panel-components-textarea-focus-bd-color: #409eff;\n  }\n  .pops-panel-textarea-disable {\n    --pops-panel-components-textarea-text-color: var(--pops-components-is-disabled-text-color);\n    --pops-panel-components-textarea-text-bg-color: var(--pops-components-is-disabled-bg-color);\n  }\n  /* slider */\n  .pops-slider {\n    --pops-slider-text-color-placeholder: #8d9095;\n  }\n}\n";
 
-    var rightClickMenuCSS = ".pops-rightClickMenu {\r\n  --pops-right-context-color: #000000;\r\n  --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\r\n  --pops-right-context-backdrop-filter: blur(10px);\r\n  --pops-right-context-z-index: 10000;\r\n  --pops-right-context-bd-radius: 6px;\r\n  --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\r\n  --pops-right-context-menu-row-bd-radius: 6px;\r\n  --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\r\n  --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\r\n}\r\n.pops-rightClickMenu * {\r\n  -webkit-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n  -webkit-tap-highlight-color: transparent;\r\n  scrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n  position: fixed;\r\n  z-index: var(--pops-right-context-z-index);\r\n  text-align: center;\r\n  border-radius: var(--pops-right-context-bd-radius);\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  color: var(--pops-right-context-color);\r\n  background: var(--pops-right-context-bg-color);\r\n  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\r\n  -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n  backdrop-filter: var(--pops-right-context-backdrop-filter);\r\n}\r\n.pops-rightClickMenu[data-position=\"absolute\"] {\r\n  position: absolute;\r\n}\r\n/* scale动画 */\r\n.pops-rightClickMenu-anim-scale {\r\n  transition:\r\n    opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\r\n    transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\r\n  transform: scale(0.85);\r\n}\r\n.pops-rightClickMenu-anim-scale-open {\r\n  transform: scale(1);\r\n}\r\n.pops-rightClickMenu-anim-scale-not-open {\r\n  opacity: 0;\r\n}\r\n/* 展开动画 */\r\n.pops-rightClickMenu-anim-grid {\r\n  display: grid;\r\n  transition: 0.3s;\r\n  grid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n  grid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n  background: var(--pops-right-context-menu-row-visited-color);\r\n}\r\ni.pops-rightClickMenu-icon {\r\n  height: 1em;\r\n  width: 1em;\r\n  line-height: normal;\r\n  align-content: center;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  fill: currentColor;\r\n  color: inherit;\r\n  font-size: inherit;\r\n  margin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\r\n  animation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n  background: var(--pops-right-context-menu-row-hover-color);\r\n  cursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n  padding: 5px 10px;\r\n  margin: 5px 5px;\r\n  border-radius: var(--pops-right-context-menu-row-bd-radius);\r\n  display: flex;\r\n  width: -moz-available;\r\n  width: -webkit-fill-available;\r\n  text-align: left;\r\n  align-items: center;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  /*.pops-rightClickMenu {\r\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\r\n\t}*/\r\n}\r\n@media (hover: hover) {\r\n  .pops-rightClickMenu ul li:active {\r\n    transform: scale(0.98);\r\n  }\r\n}\r\n";
+    var rightClickMenuCSS = ".pops-rightClickMenu {\n  --pops-right-context-color: #000000;\n  --pops-right-context-bg-color: rgb(255, 255, 255, 0.733);\n  --pops-right-context-backdrop-filter: blur(10px);\n  --pops-right-context-z-index: 10000;\n  --pops-right-context-bd-radius: 6px;\n  --pops-right-context-menu-shadow-color: rgb(114, 114, 114, 0.251);\n  --pops-right-context-menu-row-bd-radius: 6px;\n  --pops-right-context-menu-row-visited-color: rgb(0, 0, 0, 0.067);\n  --pops-right-context-menu-row-hover-color: rgb(0, 0, 0, 0.067);\n}\n.pops-rightClickMenu * {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  -webkit-tap-highlight-color: transparent;\n  scrollbar-width: thin;\n}\n.pops-rightClickMenu {\n  position: fixed;\n  z-index: var(--pops-right-context-z-index);\n  text-align: center;\n  border-radius: var(--pops-right-context-bd-radius);\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--pops-right-context-color);\n  background: var(--pops-right-context-bg-color);\n  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--pops-right-context-menu-shadow-color);\n  -webkit-backdrop-filter: var(--pops-right-context-backdrop-filter);\n  backdrop-filter: var(--pops-right-context-backdrop-filter);\n}\n.pops-rightClickMenu[data-position=\"absolute\"] {\n  position: absolute;\n}\n/* scale动画 */\n.pops-rightClickMenu-anim-scale {\n  transition:\n    opacity 150ms cubic-bezier(0.2, 0, 0.2, 1),\n    transform 150ms cubic-bezier(0.2, 0, 0.2, 1);\n  transform: scale(0.85);\n}\n.pops-rightClickMenu-anim-scale-open {\n  transform: scale(1);\n}\n.pops-rightClickMenu-anim-scale-not-open {\n  opacity: 0;\n}\n/* 展开动画 */\n.pops-rightClickMenu-anim-grid {\n  display: grid;\n  transition: 0.3s;\n  grid-template-rows: 0fr;\n}\n.pops-rightClickMenu-anim-show {\n  grid-template-rows: 1fr;\n}\n.pops-rightClickMenu-is-visited {\n  background: var(--pops-right-context-menu-row-visited-color);\n}\ni.pops-rightClickMenu-icon {\n  height: 1em;\n  width: 1em;\n  line-height: normal;\n  align-content: center;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  fill: currentColor;\n  color: inherit;\n  font-size: inherit;\n  margin-right: 6px;\n}\ni.pops-rightClickMenu-icon[is-loading=\"true\"] {\n  animation: rotating 2s linear infinite;\n}\n.pops-rightClickMenu li:hover {\n  background: var(--pops-right-context-menu-row-hover-color);\n  cursor: pointer;\n}\n.pops-rightClickMenu ul {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  overflow: hidden;\n}\n.pops-rightClickMenu ul li {\n  padding: 5px 10px;\n  margin: 5px 5px;\n  border-radius: var(--pops-right-context-menu-row-bd-radius);\n  display: flex;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  text-align: left;\n  align-items: center;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  /*.pops-rightClickMenu {\n\t\t--pops-right-context-menu-shadow-color: #3c3c3c;\n\t}*/\n}\n@media (hover: hover) {\n  .pops-rightClickMenu ul li:active {\n    transform: scale(0.98);\n  }\n}\n";
 
-    var panelComponents_Select_CSS = ".pops {\r\n  max-height: 300px;\r\n}\r\n.select-container {\r\n  --el-font-size-base: 14px;\r\n  --el-text-color-regular: #606266;\r\n  --el-color-primary: #409eff;\r\n  --el-fill-color-light: #f5f7fa;\r\n  --el-disable-color: #a8abb2;\r\n}\r\n.select-item {\r\n  cursor: pointer;\r\n  font-size: var(--el-font-size-base);\r\n  padding: 0 20px 0 20px;\r\n  position: relative;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  color: var(--el-text-color-regular);\r\n  min-height: 34px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  box-sizing: border-box;\r\n}\r\n.select-item[aria-disabled],\r\n.select-item[disabled] {\r\n  cursor: not-allowed;\r\n  color: var(--el-disable-color);\r\n  background: unset;\r\n}\r\n.select-item:hover {\r\n  background-color: var(--el-fill-color-light);\r\n}\r\n.select-item.select-item-is-selected:has(.pops-panel-input input) {\r\n  background-color: #e7e7e7;\r\n}\r\n.select-item.select-item-is-selected {\r\n  color: var(--el-color-primary);\r\n  font-weight: 700;\r\n}\r\n.select-item.select-item-is-selected:not(:has(.pops-panel-input))::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 50%;\r\n  right: 12px;\r\n  border-top: none;\r\n  border-right: none;\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n  background-color: var(--el-color-primary);\r\n  mask: url(\"data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E\")\r\n    no-repeat;\r\n  mask-size: 100% 100%;\r\n  -webkit-mask: url(\"data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E\")\r\n    no-repeat;\r\n  -webkit-mask-size: 100% 100%;\r\n  transform: translateY(-50%);\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n\r\n.select-item .pops-panel-input {\r\n  width: 100%;\r\n  margin: 5px 0px;\r\n}\r\n.select-item .pops-panel-input:has(.pops-panel-input-valid-error) {\r\n  margin-bottom: 0px;\r\n}\r\n\r\n.select-item .select-item-text {\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  .select-container {\r\n    --el-text-color-regular: #f2f2f2;\r\n    --el-disable-color: #8d9095;\r\n    --el-fill-color-light: #262727;\r\n  }\r\n}\r\n";
+    var panelComponents_Select_CSS = ".pops {\n  max-height: 300px;\n}\n.select-container {\n  --el-font-size-base: 14px;\n  --el-text-color-regular: #606266;\n  --el-color-primary: #409eff;\n  --el-fill-color-light: #f5f7fa;\n  --el-disable-color: #a8abb2;\n}\n.select-item {\n  cursor: pointer;\n  font-size: var(--el-font-size-base);\n  padding: 0 20px 0 20px;\n  position: relative;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--el-text-color-regular);\n  min-height: 34px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  box-sizing: border-box;\n}\n.select-item[aria-disabled],\n.select-item[disabled] {\n  cursor: not-allowed;\n  color: var(--el-disable-color);\n  background: unset;\n}\n.select-item:hover {\n  background-color: var(--el-fill-color-light);\n}\n.select-item.select-item-is-selected:has(.pops-panel-input input) {\n  background-color: #e7e7e7;\n}\n.select-item.select-item-is-selected {\n  color: var(--el-color-primary);\n  font-weight: 700;\n}\n.select-item.select-item-is-selected:not(:has(.pops-panel-input))::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  right: 12px;\n  border-top: none;\n  border-right: none;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: var(--el-color-primary);\n  mask: url(\"data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E\")\n    no-repeat;\n  mask-size: 100% 100%;\n  -webkit-mask: url(\"data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E\")\n    no-repeat;\n  -webkit-mask-size: 100% 100%;\n  transform: translateY(-50%);\n  width: 12px;\n  height: 12px;\n}\n\n.select-item .pops-panel-input {\n  width: 100%;\n  margin: 5px 0px;\n}\n.select-item .pops-panel-input:has(.pops-panel-input-valid-error) {\n  margin-bottom: 0px;\n}\n\n.select-item .select-item-text {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n@media (prefers-color-scheme: dark) {\n  .select-container {\n    --el-text-color-regular: #f2f2f2;\n    --el-disable-color: #8d9095;\n    --el-fill-color-light: #262727;\n  }\n}\n";
 
     const PopsCSS = {
         /** 主CSS */
@@ -4209,10 +3962,10 @@
             const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
             const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
             const animHTML = PopsElementHandler.createAnim(guid, popsType, config, 
-            /*html*/ `
+            /*html*/ `
 			<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? config.title.text
-            : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
+            : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
 			<div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
             ? config.content.text
             : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
@@ -4415,10 +4168,10 @@
             const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
             const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
             const animHTML = PopsElementHandler.createAnim(guid, popsType, config, 
-            /*html*/ `
+            /*html*/ `
             <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? config.title.text
-            : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
+            : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
                         <div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
             ? config.content.text
             : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
@@ -4621,12 +4374,12 @@
             const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
             const { contentStyle, contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
             const animHTML = PopsElementHandler.createAnim(guid, popsType, config, 
-            /*html*/ `
+            /*html*/ `
             ${config.title.enable
             ? /*html*/ `<div class="pops-title pops-${popsType}-title" style="${headerStyle}">${config.title.html
                 ? config.title.text
                 : /*html*/ `<p pops class="pops-${popsType}-title-text" style="width: 100%;text-align: ${config.title.position};${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>`
-            : ""}
+            : ""}
             <div class="pops-content pops-${popsType}-content" style="${contentStyle}">${config.content.html
             ? config.content.text
             : `<p pops class="pops-${popsType}-content-text" style="${contentPStyle}">${config.content.text}</p>`}</div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
@@ -4805,19 +4558,19 @@
             const maskHTML = PopsElementHandler.createMask(guid, zIndex);
             const { contentPStyle } = PopsElementHandler.createContentStyle("loading", config);
             const animHTML = PopsElementHandler.createAnim(guid, PopsType, config, 
-            /*html*/ `
+            /*html*/ `
             <div class="pops-content pops-${PopsType}-content">${config.addIndexCSS
-            ? /*html*/ `
-                <style data-model-name="index">${PopsCSS.index}</style>
-                <style data-model-name="anim">${PopsCSS.anim}</style>
-                <style data-model-name="common">${PopsCSS.common}</style>
+            ? /*html*/ `
+                <style data-model-name="index">${PopsCSS.index}</style>
+                <style data-model-name="anim">${PopsCSS.anim}</style>
+                <style data-model-name="common">${PopsCSS.common}</style>
                 `
-            : ""}
-                <style data-model-name="loadingCSS">
-                    ${PopsCSS.loadingCSS}
-                </style>
-            ${config.style != null ? `<style>${config.style}</style>` : ""}
-            	<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
+            : ""}
+                <style data-model-name="loadingCSS">
+                    ${PopsCSS.loadingCSS}
+                </style>
+            ${config.style != null ? `<style>${config.style}</style>` : ""}
+            	<p pops class="pops-${PopsType}-content-text" style="${contentPStyle}">${config.content.text}</p>
             </div>`, "", zIndex);
             /**
              * 弹窗的主元素，包括动画层
@@ -5139,103 +4892,103 @@
             const bottomBtnHTML = PopsElementHandler.createBottom(popsType, config);
             const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
             const animHTML = PopsElementHandler.createAnim(guid, popsType, config, 
-            /*html*/ `
+            /*html*/ `
             <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? config.title.text
-            : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
-			<div class="pops-content pops-${popsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
-                <div class="pops-folder-list">
-                    <div class="pops-folder-file-list-breadcrumb">
-						<div class="pops-folder-file-list-breadcrumb-primary">
-							<span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
-								<a>全部文件</a>
-							</span>
-						</div>
-                    </div>
-                    <div class="pops-folder-list-table__header-div">
-						<table class="pops-folder-list-table__header">
-							<colgroup>
-								<col width="52%">
-								<col width="24%">
-								<col width="16%">
-							</colgroup>
-							<thead>
-								<tr class="pops-folder-list-table__header-row">
-									<th class="pops-folder-list-table__header-th cursor-p">
-										<div class="text-ellip content flex-a-i-center">
-											<span>文件名</span>
-											<div class="pops-folder-list-table__sort" data-sort="fileName">
-												<div class="pops-folder-icon-arrow" data-sort="按文件名排序">
-													<svg
-														viewBox="0 0 1024 1024"
-														xmlns="http://www.w3.org/2000/svg">
-														<path
-															d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
-															class="pops-folder-icon-arrow-up"></path>
-														<path
-															d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
-															class="pops-folder-icon-arrow-down"></path>
-													</svg>
-												</div>
-											</div>
-										</div>
-									</th>
-									<th class="pops-folder-list-table__header-th cursor-p">
-										<div class="text-ellip content flex-a-i-center">
-											<span>修改时间</span>
-											<div class="pops-folder-list-table__sort" data-sort="latestTime">
-												<div class="pops-folder-icon-arrow" title="按修改时间排序">
-													<svg
-														viewBox="0 0 1024 1024"
-														xmlns="http://www.w3.org/2000/svg">
-														<path
-															d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
-															class="pops-folder-icon-arrow-up"></path>
-														<path
-															d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
-															class="pops-folder-icon-arrow-down"></path>
-													</svg>
-												</div>
-											</div>
-										</div>
-									</th>
-									<th class="pops-folder-list-table__header-th cursor-p">
-										<div class="text-ellip content flex-a-i-center">
-											<span>大小</span>
-											<div class="pops-folder-list-table__sort" data-sort="fileSize">
-												<div class="pops-folder-icon-arrow" title="按大小排序">
-													<svg
-														viewBox="0 0 1024 1024"
-														xmlns="http://www.w3.org/2000/svg">
-														<path
-															d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
-															class="pops-folder-icon-arrow-up"></path>
-														<path
-															d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
-															class="pops-folder-icon-arrow-down"></path>
-													</svg>
-												</div>
-											</div>
-										</div>
-									</th>
-								</tr>
-							</thead>
-						</table>
-                    </div>
-                    <div class="pops-folder-list-table__body-div">
-						<table class="pops-folder-list-table__body">
-							<colgroup>
+            : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
+			<div class="pops-content pops-${popsType}-content ${popsUtils.isPhone() ? "pops-mobile-folder-content" : ""}">
+                <div class="pops-folder-list">
+                    <div class="pops-folder-file-list-breadcrumb">
+						<div class="pops-folder-file-list-breadcrumb-primary">
+							<span class="pops-folder-file-list-breadcrumb-allFiles cursor-p" title="全部文件">
+								<a>全部文件</a>
+							</span>
+						</div>
+                    </div>
+                    <div class="pops-folder-list-table__header-div">
+						<table class="pops-folder-list-table__header">
+							<colgroup>
+								<col width="52%">
+								<col width="24%">
+								<col width="16%">
+							</colgroup>
+							<thead>
+								<tr class="pops-folder-list-table__header-row">
+									<th class="pops-folder-list-table__header-th cursor-p">
+										<div class="text-ellip content flex-a-i-center">
+											<span>文件名</span>
+											<div class="pops-folder-list-table__sort" data-sort="fileName">
+												<div class="pops-folder-icon-arrow" data-sort="按文件名排序">
+													<svg
+														viewBox="0 0 1024 1024"
+														xmlns="http://www.w3.org/2000/svg">
+														<path
+															d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
+															class="pops-folder-icon-arrow-up"></path>
+														<path
+															d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
+															class="pops-folder-icon-arrow-down"></path>
+													</svg>
+												</div>
+											</div>
+										</div>
+									</th>
+									<th class="pops-folder-list-table__header-th cursor-p">
+										<div class="text-ellip content flex-a-i-center">
+											<span>修改时间</span>
+											<div class="pops-folder-list-table__sort" data-sort="latestTime">
+												<div class="pops-folder-icon-arrow" title="按修改时间排序">
+													<svg
+														viewBox="0 0 1024 1024"
+														xmlns="http://www.w3.org/2000/svg">
+														<path
+															d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
+															class="pops-folder-icon-arrow-up"></path>
+														<path
+															d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
+															class="pops-folder-icon-arrow-down"></path>
+													</svg>
+												</div>
+											</div>
+										</div>
+									</th>
+									<th class="pops-folder-list-table__header-th cursor-p">
+										<div class="text-ellip content flex-a-i-center">
+											<span>大小</span>
+											<div class="pops-folder-list-table__sort" data-sort="fileSize">
+												<div class="pops-folder-icon-arrow" title="按大小排序">
+													<svg
+														viewBox="0 0 1024 1024"
+														xmlns="http://www.w3.org/2000/svg">
+														<path
+															d="M509.624392 5.882457 57.127707 458.379143 962.121078 458.379143Z"
+															class="pops-folder-icon-arrow-up"></path>
+														<path
+															d="M509.624392 1024 962.121078 571.503314 57.127707 571.503314Z"
+															class="pops-folder-icon-arrow-down"></path>
+													</svg>
+												</div>
+											</div>
+										</div>
+									</th>
+								</tr>
+							</thead>
+						</table>
+                    </div>
+                    <div class="pops-folder-list-table__body-div">
+						<table class="pops-folder-list-table__body">
+							<colgroup>
 							${popsUtils.isPhone()
             ? `<col width="100%">`
-            : `
-								<col width="52%">
-								<col width="24%">
-								<col width="16%">`}
-							</colgroup>
-							<tbody></tbody>
-						</table>
-                    </div>
-                </div>
+            : `
+								<col width="52%">
+								<col width="24%">
+								<col width="16%">`}
+							</colgroup>
+							<tbody></tbody>
+						</table>
+                    </div>
+                </div>
             </div>${bottomBtnHTML}`, bottomBtnHTML, zIndex);
             /**
              * 弹窗的主元素，包括动画层
@@ -5328,94 +5081,126 @@
                     }
                 }
                 /**
-                 * 创建文件夹元素
-                 * @param fileName 文件名
-                 * @param latestTime 修改时间
-                 * @param [fileSize="-"] 文件大小
-                 * @param isFolder 是否是文件夹
+                 * 在创建文件|文件夹创建元素前处理东西
                  */
-                createFolderRowElement(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
-                    const origin_fileName = fileName;
-                    const origin_latestTime = latestTime;
-                    const origin_fileSize = fileSize;
-                    const folderElement = popsDOMUtils.createElement("tr");
-                    const fileNameElement = popsDOMUtils.createElement("td");
-                    const fileTimeElement = popsDOMUtils.createElement("td");
-                    const fileFormatSize = popsDOMUtils.createElement("td");
+                handlerWithBeforeCreateFileOrFolderInfoNode(folderData) {
+                    let { fileSize } = folderData;
+                    const { fileName, latestTime, isFolder = false } = folderData;
+                    folderData.latestTime = folderData.latestTime ?? "-";
+                    folderData.fileSize = folderData.fileSize ?? "-";
+                    const $folder = popsDOMUtils.createElement("tr");
+                    const $fileName = popsDOMUtils.createElement("td");
+                    const $fileTime = popsDOMUtils.createElement("td");
+                    const $fileFormatSize = popsDOMUtils.createElement("td");
+                    let show_latestTime = "";
+                    let show_fileSize = "";
                     let fileType = "";
-                    let fileIcon = Folder_ICON.folder;
+                    let fileIcon = "";
                     if (isFolder) {
                         // 文件夹
-                        latestTime = "";
+                        fileType = "";
+                        fileIcon = Folder_ICON.folder;
+                        show_latestTime = "";
                         fileSize = "";
+                        show_fileSize = "";
                     }
                     else {
                         // 文件
-                        fileIcon = "";
-                        if (typeof latestTime === "number") {
-                            latestTime = popsUtils.formatTime(latestTime);
+                        if (typeof latestTime === "function") {
+                            const timeRet = latestTime();
+                            show_latestTime = timeRet.showText;
+                        }
+                        else if (typeof latestTime === "number") {
+                            show_latestTime = popsUtils.formatTime(latestTime);
+                        }
+                        else if (typeof latestTime === "string") {
+                            show_latestTime = latestTime;
                         }
                         if (typeof fileSize === "number") {
-                            fileSize = popsUtils.formatByteToSize(fileSize);
+                            show_fileSize = popsUtils.formatByteToSize(fileSize, true);
                         }
-                        for (const keyName in Folder_ICON) {
+                        else if (typeof fileSize === "string") {
+                            show_fileSize = fileSize;
+                        }
+                        // 找到对应的图标
+                        const findIconKeyName = Object.keys(Folder_ICON).find((keyName) => {
                             if (fileName.toLowerCase().endsWith("." + keyName)) {
                                 fileType = keyName;
                                 fileIcon = Reflect.get(Folder_ICON, keyName);
-                                break;
+                                return true;
                             }
+                        });
+                        if (findIconKeyName) {
+                            fileIcon = Reflect.get(Folder_ICON, findIconKeyName);
+                            fileType = findIconKeyName;
                         }
-                        if (!fileIcon) {
+                        else {
                             fileType = "Null";
                             fileIcon = Folder_ICON.Null;
                         }
                     }
-                    folderElement.className = "pops-folder-list-table__body-row";
-                    fileNameElement.className = "pops-folder-list-table__body-td";
-                    fileTimeElement.className = "pops-folder-list-table__body-td";
-                    fileFormatSize.className = "pops-folder-list-table__body-td";
-                    PopsSafeUtils.setSafeHTML(fileNameElement, 
-                    /*html*/ `
-				<div class="pops-folder-list-file-name cursor-p">
-					<div>
-						<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
-						<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">
-						${fileName}
-						</a>
-					</div>
-				</div>
-            `);
-                    PopsSafeUtils.setSafeHTML(fileTimeElement, 
-                    /*html*/ `
-				<div class="pops-folder-list__time">
-					<span>${latestTime}</span>
-				</div>
-				`);
-                    PopsSafeUtils.setSafeHTML(fileFormatSize, 
-                    /*html*/ `
-				<div class="pops-folder-list-format-size">
-					<span>${fileSize}</span>
-				</div>
-				`);
-                    // 存储原来的值
-                    const __value__ = {
-                        fileName: origin_fileName,
-                        latestTime: origin_latestTime,
-                        fileSize: origin_fileSize,
-                        isFolder: isFolder,
+                    if (typeof folderData.fileIcon === "string") {
+                        // 强制使用自定义
+                        fileIcon = folderData.fileIcon;
+                    }
+                    $folder.className = "pops-folder-list-table__body-row";
+                    $fileName.className = "pops-folder-list-table__body-td";
+                    $fileTime.className = "pops-folder-list-table__body-td";
+                    $fileFormatSize.className = "pops-folder-list-table__body-td";
+                    return {
+                        $folder,
+                        $fileName,
+                        $fileTime,
+                        $fileFormatSize,
+                        /** 经过处理后的数据 */
+                        data: {
+                            fileType,
+                            fileIcon,
+                            show_latestTime,
+                            show_fileSize,
+                        },
                     };
-                    Reflect.set(fileNameElement, "__value__", __value__);
-                    Reflect.set(fileTimeElement, "__value__", __value__);
-                    Reflect.set(fileFormatSize, "__value__", __value__);
-                    Reflect.set(folderElement, "__value__", __value__);
-                    folderElement.appendChild(fileNameElement);
-                    folderElement.appendChild(fileTimeElement);
-                    folderElement.appendChild(fileFormatSize);
+                }
+                /**
+                 * 创建文件夹元素
+                 * @param fileName 文件名
+                 * @param latestTime 修改时间
+                 * @param [fileSize="-"] 文件大小
+                 * @param isFolder 是否是文件夹
+                 */
+                createFolderRowElement(folderData) {
+                    const { $folder, $fileName, $fileTime, $fileFormatSize, data } = this.handlerWithBeforeCreateFileOrFolderInfoNode(folderData);
+                    const { fileName } = folderData;
+                    PopsSafeUtils.setSafeHTML($fileName, 
+                    /*html*/ `
+          <div class="pops-folder-list-file-name cursor-p">
+            <div>
+              <img src="${data.fileIcon}" alt="${data.fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
+              <a href="javascript:;" title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
+            </div>
+          </div>`);
+                    PopsSafeUtils.setSafeHTML($fileTime, 
+                    /*html*/ `
+          <div class="pops-folder-list__time">
+            <span>${data.show_latestTime}</span>
+          </div>`);
+                    PopsSafeUtils.setSafeHTML($fileFormatSize, 
+                    /*html*/ `
+          <div class="pops-folder-list-format-size">
+            <span>${data.show_fileSize}</span>
+          </div>`);
+                    Reflect.set($fileName, "__value__", folderData);
+                    Reflect.set($fileTime, "__value__", folderData);
+                    Reflect.set($fileFormatSize, "__value__", folderData);
+                    Reflect.set($folder, "__value__", folderData);
+                    $folder.appendChild($fileName);
+                    $folder.appendChild($fileTime);
+                    $folder.appendChild($fileFormatSize);
                     return {
-                        folderElement,
-                        fileNameElement,
-                        fileTimeElement,
-                        fileFormatSize,
+                        folderElement: $folder,
+                        fileNameElement: $fileName,
+                        fileTimeElement: $fileTime,
+                        fileFormatSize: $fileFormatSize,
                     };
                 }
                 /**
@@ -5425,65 +5210,25 @@
                  * @param [fileSize="-"] 文件大小
                  * @param isFolder 是否是文件夹
                  */
-                createFolderRowElementByMobile(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
-                    const origin_fileName = fileName;
-                    const origin_latestTime = latestTime;
-                    const origin_fileSize = fileSize;
-                    const folderElement = popsDOMUtils.createElement("tr");
-                    const fileNameElement = popsDOMUtils.createElement("td");
-                    let fileType = "";
-                    let fileIcon = Folder_ICON.folder;
-                    if (isFolder) {
-                        // 文件夹
-                        latestTime = "";
-                        fileSize = "";
-                    }
-                    else {
-                        // 文件
-                        fileIcon = "";
-                        if (typeof latestTime === "number") {
-                            latestTime = popsUtils.formatTime(latestTime);
-                        }
-                        if (typeof fileSize === "number") {
-                            fileSize = popsUtils.formatByteToSize(fileSize);
-                        }
-                        for (const keyName in Folder_ICON) {
-                            if (fileName.toLowerCase().endsWith("." + keyName)) {
-                                fileType = keyName;
-                                fileIcon = Reflect.get(Folder_ICON, keyName);
-                                break;
-                            }
-                        }
-                        if (!fileIcon) {
-                            fileType = "Null";
-                            fileIcon = Folder_ICON.Null;
-                        }
-                    }
-                    folderElement.className = "pops-folder-list-table__body-row";
-                    fileNameElement.className = "pops-folder-list-table__body-td";
-                    PopsSafeUtils.setSafeHTML(fileNameElement, 
-                    /*html*/ `
-				<div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
-					<img src="${fileIcon}" alt="${fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
-					<div>
-						<a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
-						<span>${latestTime} ${fileSize}</span>
-					</div>
-				</div>
-			`);
+                createFolderRowElementByMobile(folderData) {
+                    const { $folder, $fileName, data } = this.handlerWithBeforeCreateFileOrFolderInfoNode(folderData);
+                    const { fileName } = folderData;
+                    PopsSafeUtils.setSafeHTML($fileName, 
+                    /*html*/ `
+          <div class="pops-folder-list-file-name pops-mobile-folder-list-file-name cursor-p">
+            <img src="${data.fileIcon}" alt="${data.fileType}" class="pops-folder-list-file-icon u-file-icon u-file-icon--list">
+            <div>
+              <a title="${fileName}" class="pops-folder-list-file-name-title-text inline-block-v-middle text-ellip list-name-text">${fileName}</a>
+              <span>${data.show_latestTime} ${data.show_fileSize}</span>
+            </div>
+          </div>`);
                     // 存储原来的值
-                    const __value__ = {
-                        fileName: origin_fileName,
-                        latestTime: origin_latestTime,
-                        fileSize: origin_fileSize,
-                        isFolder: isFolder,
-                    };
-                    Reflect.set(fileNameElement, "__value__", __value__);
-                    Reflect.set(folderElement, "__value__", __value__);
-                    folderElement.appendChild(fileNameElement);
+                    Reflect.set($fileName, "__value__", folderData);
+                    Reflect.set($folder, "folderData", folderData);
+                    $folder.appendChild($fileName);
                     return {
-                        folderElement,
-                        fileNameElement,
+                        folderElement: $folder,
+                        fileNameElement: $fileName,
                     };
                 }
                 /**
@@ -5654,14 +5399,15 @@
                  * @param isDesc 是否降序，默认false（升序）
                  */
                 sortFolderConfig(folderDataConfigList, sortName = "fileName", isDesc = false) {
+                    // 文件夹
+                    const onlyFolderDataConfigList = folderDataConfigList.filter((value) => {
+                        return value.isFolder;
+                    });
+                    // 文件
+                    const onlyFileDataConfigList = folderDataConfigList.filter((value) => {
+                        return !value.isFolder;
+                    });
                     if (sortName === "fileName") {
-                        // 如果是以文件名排序，文件夹优先放前面
-                        const onlyFolderDataConfigList = folderDataConfigList.filter((value) => {
-                            return value.isFolder;
-                        });
-                        const onlyFileDataConfigList = folderDataConfigList.filter((value) => {
-                            return !value.isFolder;
-                        });
                         // 文件夹排序
                         onlyFolderDataConfigList.sort((leftConfig, rightConfig) => {
                             const beforeVal = leftConfig[sortName].toString();
@@ -5694,19 +5440,60 @@
                             }
                             return compareVal;
                         });
-                        if (isDesc) {
-                            // 降序，文件夹在下面
-                            return [...onlyFileDataConfigList, ...onlyFolderDataConfigList];
-                        }
-                        else {
-                            // 升序，文件夹在上面
-                            return [...onlyFolderDataConfigList, ...onlyFileDataConfigList];
-                        }
                     }
                     else {
-                        folderDataConfigList.sort((beforeConfig, afterConfig) => {
+                        // 文件夹排序
+                        onlyFolderDataConfigList.sort((beforeConfig, afterConfig) => {
                             let beforeVal = beforeConfig[sortName];
                             let afterVal = afterConfig[sortName];
+                            if (typeof beforeVal === "function") {
+                                beforeVal = beforeVal().timeStamp;
+                            }
+                            if (typeof afterVal === "function") {
+                                afterVal = afterVal().timeStamp;
+                            }
+                            if (sortName === "fileSize") {
+                                // 文件大小，进行Float转换
+                                beforeVal = parseFloat(beforeVal.toString());
+                                afterVal = parseFloat(afterVal.toString());
+                            }
+                            else if (sortName === "latestTime") {
+                                // 文件时间
+                                beforeVal = new Date(beforeVal || "").getTime();
+                                afterVal = new Date(afterVal || "").getTime();
+                            }
+                            if (beforeVal > afterVal) {
+                                if (isDesc) {
+                                    // 降序
+                                    return -1;
+                                }
+                                else {
+                                    return 1;
+                                }
+                            }
+                            else if (beforeVal < afterVal) {
+                                if (isDesc) {
+                                    // 降序
+                                    return 1;
+                                }
+                                else {
+                                    return -1;
+                                }
+                            }
+                            else {
+                                return 0;
+                            }
+                        });
+                        // 文件排序
+                        onlyFileDataConfigList.sort((beforeConfig, afterConfig) => {
+                            let beforeVal = beforeConfig[sortName];
+                            let afterVal = afterConfig[sortName];
+                            if (typeof beforeVal === "function") {
+                                beforeVal = beforeVal().timeStamp;
+                            }
+                            if (typeof afterVal === "function") {
+                                afterVal = afterVal().timeStamp;
+                            }
                             if (sortName === "fileSize") {
                                 // 文件大小，进行Float转换
                                 beforeVal = parseFloat(beforeVal.toString());
@@ -5739,8 +5526,9 @@
                                 return 0;
                             }
                         });
-                        return folderDataConfigList;
                     }
+                    // 文件夹始终优先放前面
+                    return [...onlyFolderDataConfigList, ...onlyFileDataConfigList];
                 }
                 /**
                  * 添加文件夹/文件行元素
@@ -5748,12 +5536,12 @@
                  */
                 initFolderView(dataConfig) {
                     // 先对文件夹、文件进行排序
-                    this.sortFolderConfig(dataConfig, config.sort.name, config.sort.isDesc);
-                    dataConfig.forEach((item) => {
+                    const sortedConfigList = this.sortFolderConfig(dataConfig, config.sort.name, config.sort.isDesc);
+                    sortedConfigList.forEach((item) => {
                         if (item.isFolder) {
                             const { folderElement, fileNameElement } = popsUtils.isPhone()
-                                ? this.createFolderRowElementByMobile(item.fileName, "", "", true)
-                                : this.createFolderRowElement(item.fileName, "", "", true);
+                                ? this.createFolderRowElementByMobile(item)
+                                : this.createFolderRowElement(item);
                             // 文件夹 - 点击事件
                             popsDOMUtils.on(fileNameElement, "click", (event) => {
                                 // 进入文件夹
@@ -5763,8 +5551,8 @@
                         }
                         else {
                             const { folderElement, fileNameElement } = popsUtils.isPhone()
-                                ? this.createFolderRowElementByMobile(item.fileName, item.latestTime, item.fileSize, false)
-                                : this.createFolderRowElement(item.fileName, item.latestTime, item.fileSize, false);
+                                ? this.createFolderRowElementByMobile(item)
+                                : this.createFolderRowElement(item);
                             // 文件 - 点击事件
                             popsDOMUtils.on(fileNameElement, "click", (event) => {
                                 // 下载文件
@@ -5798,27 +5586,27 @@
                 }
                 /**
                  * 排序按钮的点击事件
-                 * @param target
+                 * @param $target
                  * @param event
                  * @param sortName
                  */
-                arrowToSortFolderInfoView(target, event, sortName) {
+                arrowToSortFolderInfoView($target, event, sortName) {
                     const notChangeSortRule = Reflect.get(event, "notChangeSortRule");
                     if (!notChangeSortRule) {
                         config.sort.name = sortName;
                         config.sort.isDesc = !config.sort.isDesc;
                     }
-                    const $arrowUp = target.querySelector(".pops-folder-icon-arrow-up");
-                    const $arrowDown = target.querySelector(".pops-folder-icon-arrow-down");
+                    const $arrowUp = $target.querySelector(".pops-folder-icon-arrow-up");
+                    const $arrowDown = $target.querySelector(".pops-folder-icon-arrow-down");
                     this.changeArrowActive($arrowUp, $arrowDown, config.sort.isDesc);
                     if (typeof config.sort.callback === "function" &&
-                        config.sort.callback(target, event, config.sort.name, config.sort.isDesc)) {
+                        config.sort.callback($target, event, config.sort.name, config.sort.isDesc)) {
                         return;
                     }
                     const childrenList = [];
-                    Array.from(folderListBodyElement.children).forEach((trElement) => {
-                        const __value__ = Reflect.get(trElement, "__value__");
-                        Reflect.set(__value__, "target", trElement);
+                    Array.from(folderListBodyElement.children).forEach(($tr) => {
+                        const __value__ = Reflect.get($tr, "__value__");
+                        Reflect.set(__value__, "target", $tr);
                         childrenList.push(__value__);
                     });
                     const sortedConfigList = this.sortFolderConfig(childrenList, config.sort.name, config.sort.isDesc);
@@ -5960,14 +5748,14 @@
             const titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
             const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
             const animHTML = PopsElementHandler.createAnim(guid, popsType, config, 
-            /*html*/ `
+            /*html*/ `
             <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? titleText
-            : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
-			<div class="pops-content pops-${popsType}-content">
-                <div class="pops-${popsType}-content-global-loading"></div>
-                <iframe src="${config.url}" pops ${config.sandbox ? "sandbox='allow-forms allow-same-origin allow-scripts'" : ""}>
-                </iframe>
+            : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${titleText}</p>`}${headerBtnHTML}</div>
+			<div class="pops-content pops-${popsType}-content">
+                <div class="pops-${popsType}-content-global-loading"></div>
+                <iframe src="${config.url}" pops ${config.sandbox ? "sandbox='allow-forms allow-same-origin allow-scripts'" : ""}>
+                </iframe>
 			</div>${config.loading.enable ? iframeLoadingHTML : ""}`, "", zIndex);
             /**
              * 弹窗的主元素，包括动画层
@@ -6966,8 +6754,8 @@
                 },
                 {
                     id: "whitesev-panel-bottom-config-1",
-                    title: /*html*/ `
-					<a rel="nofollow" href="https://www.npmjs.com/package/@whitesev/pops" target="_blank"><img src="https://img.shields.io/npm/v/@whitesev/pops?label=pops" alt="npm pops version"></a>
+                    title: /*html*/ `
+					<a rel="nofollow" href="https://www.npmjs.com/package/@whitesev/pops" target="_blank"><img src="https://img.shields.io/npm/v/@whitesev/pops?label=pops" alt="npm pops version"></a>
 				`,
                     isBottom: true,
                     disableAsideItemHoverCSS: true,
@@ -7188,9 +6976,9 @@
         createToolTip() {
             const $toolTipContainer = popsDOMUtils.createElement("div", {
                 className: "pops-tip",
-                innerHTML: /*html*/ `
-				<div class="pops-tip-content" style="text-align: center;"></div>
-				<div class="pops-tip-arrow"></div>
+                innerHTML: /*html*/ `
+				<div class="pops-tip-content" style="text-align: center;"></div>
+				<div class="pops-tip-arrow"></div>
 			`,
             }, {
                 "data-position": this.$data.config.isFixed ? "fixed" : "absolute",
@@ -7977,15 +7765,15 @@
                     leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
                 }
                 PopsSafeUtils.setSafeHTML($li, 
-                /*html*/ `
-				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-switch">
-					<input class="pops-panel-switch__input" type="checkbox">
-					<span class="pops-panel-switch__core">
-						<div class="pops-panel-switch__action">
-						</div>
-					</span>
+                /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
+				<div class="pops-panel-switch">
+					<input class="pops-panel-switch__input" type="checkbox">
+					<span class="pops-panel-switch__core">
+						<div class="pops-panel-switch__action">
+						</div>
+					</span>
 				</div>`);
                 const PopsPanelSwitch = {
                     [Symbol.toStringTag]: "PopsPanelSwitch",
@@ -8086,16 +7874,16 @@
                     leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
                 }
                 PopsSafeUtils.setSafeHTML($li, 
-                /*html*/ `
-				<div class="pops-panel-item-left-text" style="flex: 1;">
-					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
-				<div class="pops-slider pops-slider-width">
-					<div class="pops-slider__runway">
-						<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
-						<div class="pops-slider__button-wrapper" style="left: 0%">
-							<div class="pops-slider__button"></div>
-						</div>
-					</div>
+                /*html*/ `
+				<div class="pops-panel-item-left-text" style="flex: 1;">
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
+				<div class="pops-slider pops-slider-width">
+					<div class="pops-slider__runway">
+						<div class="pops-slider__bar" style="width: 0%; left: 0%"></div>
+						<div class="pops-slider__button-wrapper" style="left: 0%">
+							<div class="pops-slider__button"></div>
+						</div>
+					</div>
 				</div>`);
                 const PopsPanelSlider = {
                     [Symbol.toStringTag]: "PopsPanelSlider",
@@ -8676,14 +8464,14 @@
                     leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
                 }
                 PopsSafeUtils.setSafeHTML($li, 
-                /*html*/ `
-				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-input">
-          <div class="pops-panel-input_inner">
-					  <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
-          </div>
-				</div>
+                /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
+				<div class="pops-panel-input">
+          <div class="pops-panel-input_inner">
+					  <input type="${inputType}" placeholder="${viewConfig.placeholder ?? ""}">
+          </div>
+				</div>
 				`);
                 const PopsPanelInput = {
                     [Symbol.toStringTag]: "PopsPanelInput",
@@ -8747,10 +8535,10 @@
                         this.$el.input.parentElement.insertBefore(this.$el.suffix, this.$el.input.nextSibling);
                         popsDOMUtils.addClassName(this.$el.suffix, "pops-panel-input__suffix");
                         PopsSafeUtils.setSafeHTML(this.$el.suffix, 
-                        /*html*/ `
-						<span class="pops-panel-input__suffix-inner">
-							<i class="pops-panel-icon"></i>
-						</span>
+                        /*html*/ `
+						<span class="pops-panel-input__suffix-inner">
+							<i class="pops-panel-icon"></i>
+						</span>
 					`);
                         this.$el.suffixInner = this.$el.suffix.querySelector(".pops-panel-input__suffix-inner");
                         this.$el.icon = this.$el.suffix.querySelector(".pops-panel-icon");
@@ -8989,12 +8777,12 @@
                     leftDescriptionText = `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
                 }
                 PopsSafeUtils.setSafeHTML($li, 
-                /*html*/ `
-				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-textarea">
-					<textarea placeholder="${viewConfig.placeholder ?? ""}"></textarea>
-				</div>
+                /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
+				<div class="pops-panel-textarea">
+					<textarea placeholder="${viewConfig.placeholder ?? ""}"></textarea>
+				</div>
 			`);
                 const PopsPanelTextArea = {
                     [Symbol.toStringTag]: "PopsPanelTextArea",
@@ -9069,12 +8857,12 @@
                     leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
                 }
                 PopsSafeUtils.setSafeHTML($li, 
-                /*html*/ `
-				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-select">
-					<select></select>
-				</div>
+                /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
+				<div class="pops-panel-select">
+					<select></select>
+				</div>
 				`);
                 const $itemLeftContainer = $li.querySelector(".pops-panel-item-left-text");
                 const $container = $li.querySelector(".pops-panel-select");
@@ -9349,22 +9137,22 @@
                             this.$el.$container = $container;
                             this.$el.$container.setAttribute("data-mode", mode);
                             PopsSafeUtils.setSafeHTML(this.$el.$container, 
-                            /*html*/ `
-              <div class="el-select__wrapper">
-                <div class="el-select__selection">
-                  <!-- 这个是用于手动输入的，这里暂不适配 -->
-                  <div class="el-select__selected-item el-select__input-wrapper"></div>
-                  <!-- 这个是placeholder -->
-                  <div class="el-select__selected-item el-select__placeholder"></div>
-                </div>
-                <!-- 下拉箭头 -->
-                <div class="el-select__suffix">
-                  <i class="el-icon el-select__caret el-select__icon">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-                      <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
-                    </svg>
-                  </i>
-                </div>
+                            /*html*/ `
+              <div class="el-select__wrapper">
+                <div class="el-select__selection">
+                  <!-- 这个是用于手动输入的，这里暂不适配 -->
+                  <div class="el-select__selected-item el-select__input-wrapper"></div>
+                  <!-- 这个是placeholder -->
+                  <div class="el-select__selected-item el-select__placeholder"></div>
+                </div>
+                <!-- 下拉箭头 -->
+                <div class="el-select__suffix">
+                  <i class="el-icon el-select__caret el-select__icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+                      <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
+                    </svg>
+                  </i>
+                </div>
               </div>`);
                             this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
                             this.$el.$section = $li.querySelector(".el-select__selection");
@@ -9424,8 +9212,8 @@
                                 }
                                 else {
                                     PopsSafeUtils.setSafeHTML(this.$el.$selectedInputWrapper, 
-                                    /*html*/ `
-                  <span>${text}</span>
+                                    /*html*/ `
+                  <span>${text}</span>
                 `);
                                 }
                                 // 显示选中的内容
@@ -9537,12 +9325,12 @@
                                     dragLimit: true,
                                     width: "300px",
                                     height: "auto",
-                                    style: /*css*/ `
-                  ${defaultCSS}
-
-                  ${PopsCSS.panelCSS}
-
-								  ${style || ""}
+                                    style: /*css*/ `
+                  ${defaultCSS}
+
+                  ${PopsCSS.panelCSS}
+
+								  ${style || ""}
 								`,
                                 }, userConfirmConfig);
                                 const $dialog = PopsAlert.init(confirmConfig);
@@ -9942,8 +9730,8 @@
                         initEl() {
                             this.$el.$container.setAttribute("data-mode", mode);
                             PopsSafeUtils.setSafeHTML(this.$el.$container, 
-                            /*html*/ `
-              <div class="el-select__wrapper">
+                            /*html*/ `
+              <div class="el-select__wrapper">
               </div>`);
                             this.$el.$wrapper = $li.querySelector(".el-select__wrapper");
                             this.$data.data.forEach((dataItem) => {
@@ -9984,8 +9772,8 @@
                         createSelectItemElement(data) {
                             const $select = popsDOMUtils.createElement("div", {
                                 className: "select-item",
-                                innerHTML: /*html*/ `
-                <span class="select-item-text"></span>
+                                innerHTML: /*html*/ `
+                <span class="select-item-text"></span>
               `,
                             });
                             this.setSelectItemText(data, $select);
@@ -10262,30 +10050,30 @@
                     leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
                 }
                 PopsSafeUtils.setSafeHTML($li, 
-                /*html*/ `
-				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-select-multiple">
-					<div class="el-select__wrapper">
-						<div class="el-select__selection">
-							<!-- 这个是用于手动输入的，这里暂不适配 -->
-							<div class="el-select__selected-item el-select__input-wrapper">
-		
-							</div>
-							<!-- 这个是placeholder -->
-							<div class="el-select__selected-item el-select__placeholder">
-							</div>
-						</div>
-						<!-- 下拉箭头 -->
-						<div class="el-select__suffix">
-							<i class="el-icon el-select__caret el-select__icon">
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-									<path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
-								</svg>
-							</i>
-						</div>
-					</div>
-				</div>
+                /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
+				<div class="pops-panel-select-multiple">
+					<div class="el-select__wrapper">
+						<div class="el-select__selection">
+							<!-- 这个是用于手动输入的，这里暂不适配 -->
+							<div class="el-select__selected-item el-select__input-wrapper">
+		
+							</div>
+							<!-- 这个是placeholder -->
+							<div class="el-select__selected-item el-select__placeholder">
+							</div>
+						</div>
+						<!-- 下拉箭头 -->
+						<div class="el-select__suffix">
+							<i class="el-icon el-select__caret el-select__icon">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+									<path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
+								</svg>
+							</i>
+						</div>
+					</div>
+				</div>
 				`);
                 const PopsPanelSelectMultiple = {
                     [Symbol.toStringTag]: "PopsPanelSelectMultiple",
@@ -10401,18 +10189,18 @@
                     createTagItem(data) {
                         const $tag = popsDOMUtils.createElement("div", {
                             className: "el-select__selected-item el-select__choose_tag",
-                            innerHTML: /*html*/ `
-						<span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
-							<span class="el-tag__content">
-								<span class="el-select__tags-text"></span>
-							</span>
-							<!-- 关闭tag的图标 -->
-							<i class="el-icon el-tag__close">
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-									<path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
-								</svg>
-							</i>
-						</span>
+                            innerHTML: /*html*/ `
+						<span class="el-tag is-closable el-tag--info el-tag--default el-tag--light">
+							<span class="el-tag__content">
+								<span class="el-select__tags-text"></span>
+							</span>
+							<!-- 关闭tag的图标 -->
+							<i class="el-icon el-tag__close">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+									<path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
+								</svg>
+							</i>
+						</span>
 						`,
                         });
                         /** 标签 */
@@ -10618,8 +10406,8 @@
                     createSelectItemElement(data) {
                         const $select = popsDOMUtils.createElement("li", {
                             className: "select-item",
-                            innerHTML: /*html*/ `
-							<span class="select-item-text"></span>
+                            innerHTML: /*html*/ `
+							<span class="select-item-text"></span>
 						`,
                         });
                         this.setSelectItemText(data, $select);
@@ -10749,10 +10537,10 @@
                                 dragLimit: true,
                                 width: "300px",
                                 height: "auto",
-                                style: /*css*/ `
-                  ${defaultCSS}
-
-								  ${style || ""}
+                                style: /*css*/ `
+                  ${defaultCSS}
+
+								  ${style || ""}
 								`,
                             }, userConfirmConfig);
                             const $dialog = PopsAlert.init(confirmConfig);
@@ -10906,15 +10694,15 @@
                     leftDescriptionText = /*html*/ `<p class="pops-panel-item-left-desc-text">${viewConfig.description}</p>`;
                 }
                 PopsSafeUtils.setSafeHTML($li, 
-                /*html*/ `
-				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-button">
-					<button class="pops-panel-button_inner" type="button">
-						<i class="pops-bottom-icon"></i>
-						<span class="pops-panel-button-text"></span>
-					</button>
-				</div>
+                /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
+				<div class="pops-panel-button">
+					<button class="pops-panel-button_inner" type="button">
+						<i class="pops-bottom-icon"></i>
+						<span class="pops-panel-button-text"></span>
+					</button>
+				</div>
 				`);
                 const PopsPanelButton = {
                     [Symbol.toStringTag]: "PopsPanelButton",
@@ -11075,10 +10863,10 @@
                     rightText = /*html*/ `<p class="pops-panel-item-right-text">${viewConfig.rightText}</p>`;
                 }
                 PopsSafeUtils.setSafeHTML($li, 
-                /*html*/ `
-				<div class="pops-panel-item-left-text">
-					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
-				<div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
+                /*html*/ `
+				<div class="pops-panel-item-left-text">
+					<p class="pops-panel-item-left-main-text">${viewConfig.text}</p>${leftDescriptionText}</div>
+				<div class="pops-panel-deepMenu">${rightText}${arrowRightIconHTML}</div>
 				`);
                 const PopsPanelDeepMenu = {
                     [Symbol.toStringTag]: "PopsPanelDeepMenu",
@@ -11114,13 +10902,13 @@
                                 // 添加第一个
                                 // 加进容器内
                                 PopsSafeUtils.setSafeHTML(formHeaderDivElement, 
-                                /*html*/ `
-								<p>${containerViewConfig.text}</p>
-								<i class="pops-panel-forms-fold-container-icon">
-									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-										<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
-									</svg>
-								</i>
+                                /*html*/ `
+								<p>${containerViewConfig.text}</p>
+								<i class="pops-panel-forms-fold-container-icon">
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+										<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
+									</svg>
+								</i>
 							`);
                                 // 添加点击事件
                                 popsDOMUtils.on(formHeaderDivElement, "click", () => {
@@ -11394,13 +11182,13 @@
                     if (containerConfig.isFold) {
                         // 加进容器内
                         PopsSafeUtils.setSafeHTML(formHeaderDivElement, 
-                        /*html*/ `
-						<p>${containerConfig.text}</p>
-						<i class="pops-panel-forms-fold-container-icon">
-							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-								<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
-							</svg>
-						</i>
+                        /*html*/ `
+						<p>${containerConfig.text}</p>
+						<i class="pops-panel-forms-fold-container-icon">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+								<path d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
+							</svg>
+						</i>
 					`);
                         // 添加点击事件
                         popsDOMUtils.on(formHeaderDivElement, "click", () => {
@@ -11572,28 +11360,28 @@
             const headerBtnHTML = PopsElementHandler.createHeader(popsType, config);
             const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
             const animHTML = PopsElementHandler.createAnim(guid, popsType, config, 
-            /*html*/ `
+            /*html*/ `
 			<div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? config.title.text
-            : `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
-			<div class="pops-content pops-${popsType}-content">
-				<aside class="pops-${popsType}-aside pops-user-select-none">
-					<ul class="pops-${popsType}-aside-top-container"></ul>
-					<ul class="pops-${popsType}-aside-bottom-container"></ul>
-				</aside>
-				<div class="pops-${popsType}-section-wrapper">
-					<section class="pops-${popsType}-container">
-						<ul class="pops-${popsType}-container-header-ul"></ul>
-						<ul class="pops-${popsType}-container-main-ul"></ul>
-					</section>
-				</div>
-			</div>
-      <div class="pops-${popsType}-bottom-wrapper">
-        <section class="pops-${popsType}-bottom-container">
-          <ul class="pops-${popsType}-bottom-left-container"></ul>
-          <ul class="pops-${popsType}-bottom-right-container"></ul>
-        </section>
-      </div>
+            : `<p pops class="pops-${popsType}-title-text" class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
+			<div class="pops-content pops-${popsType}-content">
+				<aside class="pops-${popsType}-aside pops-user-select-none">
+					<ul class="pops-${popsType}-aside-top-container"></ul>
+					<ul class="pops-${popsType}-aside-bottom-container"></ul>
+				</aside>
+				<div class="pops-${popsType}-section-wrapper">
+					<section class="pops-${popsType}-container">
+						<ul class="pops-${popsType}-container-header-ul"></ul>
+						<ul class="pops-${popsType}-container-main-ul"></ul>
+					</section>
+				</div>
+			</div>
+      <div class="pops-${popsType}-bottom-wrapper">
+        <section class="pops-${popsType}-bottom-container">
+          <ul class="pops-${popsType}-bottom-left-container"></ul>
+          <ul class="pops-${popsType}-bottom-right-container"></ul>
+        </section>
+      </div>
       `, "", zIndex);
             /**
              * 弹窗的主元素，包括动画层
@@ -11829,10 +11617,10 @@
             const { headerStyle, headerPStyle } = PopsElementHandler.createHeaderStyle(popsType, config);
             const { contentPStyle } = PopsElementHandler.createContentStyle(popsType, config);
             const animHTML = PopsElementHandler.createAnim(guid, popsType, config, 
-            /*html*/ `
+            /*html*/ `
             <div class="pops-title pops-${popsType}-title" style="text-align: ${config.title.position};${headerStyle}">${config.title.html
             ? config.title.text
-            : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
+            : `<p pops class="pops-${popsType}-title-text" style="${headerPStyle}">${config.title.text}</p>`}${headerBtnHTML}</div>
             <div class="pops-content pops-${popsType}-content" style="${contentPStyle}">${config.content.row
             ? '<textarea name="pops-input-text" pops="" placeholder="' +
                 config.content.placeholder +
@@ -12769,111 +12557,111 @@
                 createSearchSelectElement() {
                     const $el = popsDOMUtils.createElement("div", {
                         className: `pops pops-${popsType}-search-suggestion`,
-                        innerHTML: /*html*/ `
-						<style type="text/css">
-							.pops-${popsType}-animation{
-								-moz-animation: searchSelectFalIn 0.5s 1 linear;
-								-webkit-animation: searchSelectFalIn 0.5s 1 linear;
-								-o-animation: searchSelectFalIn 0.5s 1 linear;
-								-ms-animation: searchSelectFalIn 0.5s 1 linear;
-							}
-						</style>
-						<style type="text/css">
-							.pops-${popsType}-search-suggestion-arrow{
-								--suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
-								--suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
-								--suggestion-arrow--after-color: rgb(78, 78, 78);
-								--suggestion-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
-								--suggestion-arrow--after-width: 10px;
-								--suggestion-arrow--after-height: 10px;
-							}
-							.pops-${popsType}-search-suggestion-arrow{
-								position: absolute;
-								top: 100%;
-								left: 50%;
-								overflow: hidden;
-								width: 100%;
-								height: 12.5px;
-								transform: translateX(-50%);
-							}
-							.pops-${popsType}-search-suggestion-arrow::after{
-								position: absolute;
-								top: 0;
-								left: 50%;
-								width: var(--suggestion-arrow--after-width);
-								height: var(--suggestion-arrow--after-height);
-								background: var(--suggestion-arrow--after-bg-color);
-								color: var(--suggestion-arrow--after-color);
-								box-shadow:
-									0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
-									0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
-								content: "";
-								transform: translateX(-50%) translateY(-50%) rotate(45deg);
-							}
-							.pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow{
-								position: absolute;
-								top: 100%;
-								left: 50%;
-								overflow: hidden;
-								width: 100%;
-								height: 12.5px;
-								transform: translateX(-50%);
-							}
-							.pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow::after{
-								position: absolute;
-								top: 0;
-								left: 50%;
-								width: var(--suggestion-arrow--after-width);
-								height: var(--suggestion-arrow--after-height);
-								background: var(--suggestion-arrow--after-bg-color);
-								box-shadow:
-									0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
-									0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
-								content: "";
-								transform: translateX(-50%) translateY(-50%) rotate(45deg);
-							}
-							.pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow{
-								top: -12.5px;
-								left: 50%;
-								transform: translateX(-50%);
-							}
-							.pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow::after{
-								position: absolute;
-								top: 100%;
-								left: 50%;
-								content: "";
-							}
-						</style>
-						<style type="text/css" data-dynamic="true">
-							${SearchSuggestion.getDynamicCSS()}
-						</style>
-						<style>
-							.el-zoom-in-top-animation{
-								--el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-									opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-								transition: var(--el-transition-md-fade);
-								transform-origin: center top;
-							}
-							.el-zoom-in-top-animation[data-popper-placement^="top"] {
-								transform-origin: center bottom;
-							}
-							.el-zoom-in-top-animation-hide{
-								opacity: 0;
-								transform: scaleY(0);
-							}
-							.el-zoom-in-top-animation-show{
-								opacity: 1;
-								transform: scaleY(1);
-							}
-						</style>
-						<style type="text/css" data-user-css>
-							${config.style || ""}
-						</style>
-            <div class="pops-${popsType}-search-suggestion-dropdown-wrapper">
-              <ul class="pops-${popsType}-search-suggestion-dropdown-container ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
-            </div>
-            <!-- 箭头 -->
-						${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
+                        innerHTML: /*html*/ `
+						<style type="text/css">
+							.pops-${popsType}-animation{
+								-moz-animation: searchSelectFalIn 0.5s 1 linear;
+								-webkit-animation: searchSelectFalIn 0.5s 1 linear;
+								-o-animation: searchSelectFalIn 0.5s 1 linear;
+								-ms-animation: searchSelectFalIn 0.5s 1 linear;
+							}
+						</style>
+						<style type="text/css">
+							.pops-${popsType}-search-suggestion-arrow{
+								--suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
+								--suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
+								--suggestion-arrow--after-color: rgb(78, 78, 78);
+								--suggestion-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+								--suggestion-arrow--after-width: 10px;
+								--suggestion-arrow--after-height: 10px;
+							}
+							.pops-${popsType}-search-suggestion-arrow{
+								position: absolute;
+								top: 100%;
+								left: 50%;
+								overflow: hidden;
+								width: 100%;
+								height: 12.5px;
+								transform: translateX(-50%);
+							}
+							.pops-${popsType}-search-suggestion-arrow::after{
+								position: absolute;
+								top: 0;
+								left: 50%;
+								width: var(--suggestion-arrow--after-width);
+								height: var(--suggestion-arrow--after-height);
+								background: var(--suggestion-arrow--after-bg-color);
+								color: var(--suggestion-arrow--after-color);
+								box-shadow:
+									0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
+									0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
+								content: "";
+								transform: translateX(-50%) translateY(-50%) rotate(45deg);
+							}
+							.pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow{
+								position: absolute;
+								top: 100%;
+								left: 50%;
+								overflow: hidden;
+								width: 100%;
+								height: 12.5px;
+								transform: translateX(-50%);
+							}
+							.pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow::after{
+								position: absolute;
+								top: 0;
+								left: 50%;
+								width: var(--suggestion-arrow--after-width);
+								height: var(--suggestion-arrow--after-height);
+								background: var(--suggestion-arrow--after-bg-color);
+								box-shadow:
+									0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
+									0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
+								content: "";
+								transform: translateX(-50%) translateY(-50%) rotate(45deg);
+							}
+							.pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow{
+								top: -12.5px;
+								left: 50%;
+								transform: translateX(-50%);
+							}
+							.pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow::after{
+								position: absolute;
+								top: 100%;
+								left: 50%;
+								content: "";
+							}
+						</style>
+						<style type="text/css" data-dynamic="true">
+							${SearchSuggestion.getDynamicCSS()}
+						</style>
+						<style>
+							.el-zoom-in-top-animation{
+								--el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+									opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+								transition: var(--el-transition-md-fade);
+								transform-origin: center top;
+							}
+							.el-zoom-in-top-animation[data-popper-placement^="top"] {
+								transform-origin: center bottom;
+							}
+							.el-zoom-in-top-animation-hide{
+								opacity: 0;
+								transform: scaleY(0);
+							}
+							.el-zoom-in-top-animation-show{
+								opacity: 1;
+								transform: scaleY(1);
+							}
+						</style>
+						<style type="text/css" data-user-css>
+							${config.style || ""}
+						</style>
+            <div class="pops-${popsType}-search-suggestion-dropdown-wrapper">
+              <ul class="pops-${popsType}-search-suggestion-dropdown-container ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
+            </div>
+            <!-- 箭头 -->
+						${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
          				 `,
                     }, {
                         "data-guid": guid,
@@ -12894,69 +12682,69 @@
                  * 动态获取CSS
                  */
                 getDynamicCSS() {
-                    return /*css*/ `
-				.pops-${popsType}-search-suggestion{
-					--search-suggestion-bg-color: #ffffff;
-					--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
-					--search-suggestion-item-color: #515a6e;
-					--search-suggestion-item-none-color: #8e8e8e;
-					--search-suggestion-item-is-hover-bg-color: #f5f7fa;
-					--search-suggestion-item-is-select-bg-color: #409eff;
-				}
-				.pops-${popsType}-search-suggestion{
-					border: initial;
-					overflow: initial;
-					position: ${config.isAbsolute ? "absolute" : "fixed"};
-					z-index: ${PopsHandler.handleZIndex(config.zIndex)};
-				}
-        .pops-${popsType}-search-suggestion-dropdown-wrapper{
-					max-height: ${config.maxHeight};
-					border-radius: 4px;
-					box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
-					background-color: var(--search-suggestion-bg-color);
-					padding: 5px 0;
-					overflow-x: hidden;
-					overflow-y: auto;
-        }
-				.pops-${popsType}-search-suggestion-dropdown-wrapper ul.pops-${popsType}-search-suggestion-dropdown-container{
-					box-sizing: border-box;
-				}
-				// 建议框在上面时
-				.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-dropdown-container{
-					display: flex;
-					flex-direction: column-reverse;
-				}
-				.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-dropdown-container li{
-					flex-shrink: 0;
-				}
-				ul.pops-${popsType}-search-suggestion-dropdown-container li{
-					padding: 7px;
-					margin: 0;
-					clear: both;
-					color: var(--search-suggestion-item-color);
-					font-size: 14px;
-					list-style: none;
-					cursor: pointer;
-					transition: background .2s ease-in-out;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					width: 100%;
-				}
-				ul.pops-${popsType}-search-suggestion-dropdown-container li[data-none]{
-					text-align: center;
-					font-size: 12px;
-					color: var(--search-suggestion-item-none-color);
-				}
-				ul.pops-${popsType}-search-suggestion-dropdown-container li:not([data-none]):hover{
-					background-color: var(--search-suggestion-item-is-hover-bg-color);
-				}
-				@media (prefers-color-scheme: dark){
-					.pops-${popsType}-search-suggestion{
-						--search-suggestion-bg-color: #1d1e1f;
-						--search-suggestion-item-color: #cfd3d4;
-						--search-suggestion-item-is-hover-bg-color: rgba(175, 175, 175, .1);
-					}
-				}
+                    return /*css*/ `
+				.pops-${popsType}-search-suggestion{
+					--search-suggestion-bg-color: #ffffff;
+					--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
+					--search-suggestion-item-color: #515a6e;
+					--search-suggestion-item-none-color: #8e8e8e;
+					--search-suggestion-item-is-hover-bg-color: #f5f7fa;
+					--search-suggestion-item-is-select-bg-color: #409eff;
+				}
+				.pops-${popsType}-search-suggestion{
+					border: initial;
+					overflow: initial;
+					position: ${config.isAbsolute ? "absolute" : "fixed"};
+					z-index: ${PopsHandler.handleZIndex(config.zIndex)};
+				}
+        .pops-${popsType}-search-suggestion-dropdown-wrapper{
+					max-height: ${config.maxHeight};
+					border-radius: 4px;
+					box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
+					background-color: var(--search-suggestion-bg-color);
+					padding: 5px 0;
+					overflow-x: hidden;
+					overflow-y: auto;
+        }
+				.pops-${popsType}-search-suggestion-dropdown-wrapper ul.pops-${popsType}-search-suggestion-dropdown-container{
+					box-sizing: border-box;
+				}
+				// 建议框在上面时
+				.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-dropdown-container{
+					display: flex;
+					flex-direction: column-reverse;
+				}
+				.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-dropdown-container li{
+					flex-shrink: 0;
+				}
+				ul.pops-${popsType}-search-suggestion-dropdown-container li{
+					padding: 7px;
+					margin: 0;
+					clear: both;
+					color: var(--search-suggestion-item-color);
+					font-size: 14px;
+					list-style: none;
+					cursor: pointer;
+					transition: background .2s ease-in-out;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					width: 100%;
+				}
+				ul.pops-${popsType}-search-suggestion-dropdown-container li[data-none]{
+					text-align: center;
+					font-size: 12px;
+					color: var(--search-suggestion-item-none-color);
+				}
+				ul.pops-${popsType}-search-suggestion-dropdown-container li:not([data-none]):hover{
+					background-color: var(--search-suggestion-item-is-hover-bg-color);
+				}
+				@media (prefers-color-scheme: dark){
+					.pops-${popsType}-search-suggestion{
+						--search-suggestion-bg-color: #1d1e1f;
+						--search-suggestion-item-color: #cfd3d4;
+						--search-suggestion-item-is-hover-bg-color: rgba(175, 175, 175, .1);
+					}
+				}
 				`;
                 },
                 /**
@@ -13192,11 +12980,11 @@
                  * 获取删除按钮的html
                  */
                 createItemDeleteIcon(size = 16, fill = "#bababa") {
-                    const $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
-					<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
-						<path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
-						<path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
-					</svg>
+                    const $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
+					<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
+						<path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
+						<path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
+					</svg>
         			`);
                     return $svg;
                 },
@@ -13430,7 +13218,7 @@
         },
     };
 
-    const version = "3.2.1";
+    const version = "3.3.0";
 
     class Pops {
         /** 配置 */