@ututrust/web-components 2.2.1 → 2.2.2

package/dist/index.js

@@ -936,7 +936,7 @@
      *
      * @returns {boolean} True if value is a plain Object, otherwise false
      */
-    const isPlainObject$3 = val => {
+    const isPlainObject$2 = val => {
       if (kindOf(val) !== 'object') {
         return false;
       }
@@ -1113,9 +1113,9 @@
       const result = {};
       const assignValue = (val, key) => {
         const targetKey = caseless && findKey(result, key) || key;
-        if (isPlainObject$3(result[targetKey]) && isPlainObject$3(val)) {
+        if (isPlainObject$2(result[targetKey]) && isPlainObject$2(val)) {
           result[targetKey] = merge$1(result[targetKey], val);
-        } else if (isPlainObject$3(val)) {
+        } else if (isPlainObject$2(val)) {
           result[targetKey] = merge$1({}, val);
         } else if (isArray$4(val)) {
           result[targetKey] = val.slice();
@@ -1375,7 +1375,7 @@
       isArray$4(arrayOrString) ? define(arrayOrString) : define(String(arrayOrString).split(delimiter));
       return obj;
     };
-    const noop$4 = () => {};
+    const noop$3 = () => {};
     const toFiniteNumber = (value, defaultValue) => {
       value = +value;
       return Number.isFinite(value) ? value : defaultValue;
@@ -1442,7 +1442,7 @@
       isNumber: isNumber$1,
       isBoolean: isBoolean$2,
       isObject: isObject$a,
-      isPlainObject: isPlainObject$3,
+      isPlainObject: isPlainObject$2,
       isUndefined: isUndefined$1,
       isDate: isDate$1,
       isFile,
@@ -1474,7 +1474,7 @@
       freezeMethods,
       toObjectSet,
       toCamelCase,
-      noop: noop$4,
+      noop: noop$3,
       toFiniteNumber,
       findKey,
       global: _global,
@@ -41692,9 +41692,9 @@
       }
 
       return {
-        persistClient: noop$3,
+        persistClient: noop$2,
         restoreClient: () => undefined,
-        removeClient: noop$3
+        removeClient: noop$2
       };
     }
 
@@ -41714,7 +41714,7 @@
     } // eslint-disable-next-line @typescript-eslint/no-empty-function
 
 
-    function noop$3() {}
+    function noop$2() {}
 
     class Subscribable {
       constructor() {
@@ -41749,7 +41749,7 @@
     // TYPES
     // UTILS
     const isServer = typeof window === 'undefined' || 'Deno' in window;
-    function noop$2() {
+    function noop$1() {
       return undefined;
     }
     function functionalUpdate(updater, input) {
@@ -41777,29 +41777,6 @@
         queryKey: arg1
       };
     }
-    function parseMutationArgs(arg1, arg2, arg3) {
-      if (isQueryKey$1(arg1)) {
-        if (typeof arg2 === 'function') {
-          return { ...arg3,
-            mutationKey: arg1,
-            mutationFn: arg2
-          };
-        }
-
-        return { ...arg2,
-          mutationKey: arg1
-        };
-      }
-
-      if (typeof arg1 === 'function') {
-        return { ...arg2,
-          mutationFn: arg1
-        };
-      }
-
-      return { ...arg1
-      };
-    }
     function parseFilterArgs(arg1, arg2, arg3) {
       return isQueryKey$1(arg1) ? [{ ...arg2,
         queryKey: arg1
@@ -41893,7 +41870,7 @@
      */
 
     function hashQueryKey(queryKey) {
-      return JSON.stringify(queryKey, (_, val) => isPlainObject$2(val) ? Object.keys(val).sort().reduce((result, key) => {
+      return JSON.stringify(queryKey, (_, val) => isPlainObject$1(val) ? Object.keys(val).sort().reduce((result, key) => {
         result[key] = val[key];
         return result;
       }, {}) : val);
@@ -41937,7 +41914,7 @@
 
       const array = isPlainArray$1(a) && isPlainArray$1(b);
 
-      if (array || isPlainObject$2(a) && isPlainObject$2(b)) {
+      if (array || isPlainObject$1(a) && isPlainObject$1(b)) {
         const aSize = array ? a.length : Object.keys(a).length;
         const bItems = array ? b : Object.keys(b);
         const bSize = bItems.length;
@@ -41979,7 +41956,7 @@
       return Array.isArray(value) && value.length === Object.keys(value).length;
     } // Copied from: https://github.com/jonschlinkert/is-plain-object
 
-    function isPlainObject$2(o) {
+    function isPlainObject$1(o) {
       if (!hasObjectPrototype(o)) {
         return false;
       } // If has modified constructor
@@ -42568,7 +42545,7 @@
 
         const promise = this.promise;
         (_this$retryer = this.retryer) == null ? void 0 : _this$retryer.cancel(options);
-        return promise ? promise.then(noop$2).catch(noop$2) : Promise.resolve();
+        return promise ? promise.then(noop$1).catch(noop$1) : Promise.resolve();
       }
 
       destroy() {
@@ -43427,7 +43404,7 @@
 
         this.resuming = ((_this$resuming = this.resuming) != null ? _this$resuming : Promise.resolve()).then(() => {
           const pausedMutations = this.mutations.filter(x => x.state.isPaused);
-          return notifyManager.batch(() => pausedMutations.reduce((promise, mutation) => promise.then(() => mutation.continue().catch(noop$2)), Promise.resolve()));
+          return notifyManager.batch(() => pausedMutations.reduce((promise, mutation) => promise.then(() => mutation.continue().catch(noop$1)), Promise.resolve()));
         }).then(() => {
           this.resuming = undefined;
         });
@@ -43693,7 +43670,7 @@
         }
 
         const promises = notifyManager.batch(() => this.queryCache.findAll(filters).map(query => query.cancel(cancelOptions)));
-        return Promise.all(promises).then(noop$2).catch(noop$2);
+        return Promise.all(promises).then(noop$1).catch(noop$1);
       }
 
       invalidateQueries(arg1, arg2, arg3) {
@@ -43728,10 +43705,10 @@
             }
           });
         }));
-        let promise = Promise.all(promises).then(noop$2);
+        let promise = Promise.all(promises).then(noop$1);
 
         if (!(options != null && options.throwOnError)) {
-          promise = promise.catch(noop$2);
+          promise = promise.catch(noop$1);
         }
 
         return promise;
@@ -43750,7 +43727,7 @@
       }
 
       prefetchQuery(arg1, arg2, arg3) {
-        return this.fetchQuery(arg1, arg2, arg3).then(noop$2).catch(noop$2);
+        return this.fetchQuery(arg1, arg2, arg3).then(noop$1).catch(noop$1);
       }
 
       fetchInfiniteQuery(arg1, arg2, arg3) {
@@ -43760,7 +43737,7 @@
       }
 
       prefetchInfiniteQuery(arg1, arg2, arg3) {
-        return this.fetchInfiniteQuery(arg1, arg2, arg3).then(noop$2).catch(noop$2);
+        return this.fetchInfiniteQuery(arg1, arg2, arg3).then(noop$1).catch(noop$1);
       }
 
       resumePausedMutations() {
@@ -44086,7 +44063,7 @@
         let promise = this.currentQuery.fetch(this.options, fetchOptions);
 
         if (!(fetchOptions != null && fetchOptions.throwOnError)) {
-          promise = promise.catch(noop$2);
+          promise = promise.catch(noop$1);
         }
 
         return promise;
@@ -44471,131 +44448,6 @@
       return false;
     }
 
-    // CLASS
-    class MutationObserver extends Subscribable {
-      constructor(client, options) {
-        super();
-        this.client = client;
-        this.setOptions(options);
-        this.bindMethods();
-        this.updateResult();
-      }
-
-      bindMethods() {
-        this.mutate = this.mutate.bind(this);
-        this.reset = this.reset.bind(this);
-      }
-
-      setOptions(options) {
-        var _this$currentMutation;
-
-        const prevOptions = this.options;
-        this.options = this.client.defaultMutationOptions(options);
-
-        if (!shallowEqualObjects(prevOptions, this.options)) {
-          this.client.getMutationCache().notify({
-            type: 'observerOptionsUpdated',
-            mutation: this.currentMutation,
-            observer: this
-          });
-        }
-
-        (_this$currentMutation = this.currentMutation) == null ? void 0 : _this$currentMutation.setOptions(this.options);
-      }
-
-      onUnsubscribe() {
-        if (!this.hasListeners()) {
-          var _this$currentMutation2;
-
-          (_this$currentMutation2 = this.currentMutation) == null ? void 0 : _this$currentMutation2.removeObserver(this);
-        }
-      }
-
-      onMutationUpdate(action) {
-        this.updateResult(); // Determine which callbacks to trigger
-
-        const notifyOptions = {
-          listeners: true
-        };
-
-        if (action.type === 'success') {
-          notifyOptions.onSuccess = true;
-        } else if (action.type === 'error') {
-          notifyOptions.onError = true;
-        }
-
-        this.notify(notifyOptions);
-      }
-
-      getCurrentResult() {
-        return this.currentResult;
-      }
-
-      reset() {
-        this.currentMutation = undefined;
-        this.updateResult();
-        this.notify({
-          listeners: true
-        });
-      }
-
-      mutate(variables, options) {
-        this.mutateOptions = options;
-
-        if (this.currentMutation) {
-          this.currentMutation.removeObserver(this);
-        }
-
-        this.currentMutation = this.client.getMutationCache().build(this.client, { ...this.options,
-          variables: typeof variables !== 'undefined' ? variables : this.options.variables
-        });
-        this.currentMutation.addObserver(this);
-        return this.currentMutation.execute();
-      }
-
-      updateResult() {
-        const state = this.currentMutation ? this.currentMutation.state : getDefaultState();
-        const result = { ...state,
-          isLoading: state.status === 'loading',
-          isSuccess: state.status === 'success',
-          isError: state.status === 'error',
-          isIdle: state.status === 'idle',
-          mutate: this.mutate,
-          reset: this.reset
-        };
-        this.currentResult = result;
-      }
-
-      notify(options) {
-        notifyManager.batch(() => {
-          // First trigger the mutate callbacks
-          if (this.mutateOptions && this.hasListeners()) {
-            if (options.onSuccess) {
-              var _this$mutateOptions$o, _this$mutateOptions, _this$mutateOptions$o2, _this$mutateOptions2;
-
-              (_this$mutateOptions$o = (_this$mutateOptions = this.mutateOptions).onSuccess) == null ? void 0 : _this$mutateOptions$o.call(_this$mutateOptions, this.currentResult.data, this.currentResult.variables, this.currentResult.context);
-              (_this$mutateOptions$o2 = (_this$mutateOptions2 = this.mutateOptions).onSettled) == null ? void 0 : _this$mutateOptions$o2.call(_this$mutateOptions2, this.currentResult.data, null, this.currentResult.variables, this.currentResult.context);
-            } else if (options.onError) {
-              var _this$mutateOptions$o3, _this$mutateOptions3, _this$mutateOptions$o4, _this$mutateOptions4;
-
-              (_this$mutateOptions$o3 = (_this$mutateOptions3 = this.mutateOptions).onError) == null ? void 0 : _this$mutateOptions$o3.call(_this$mutateOptions3, this.currentResult.error, this.currentResult.variables, this.currentResult.context);
-              (_this$mutateOptions$o4 = (_this$mutateOptions4 = this.mutateOptions).onSettled) == null ? void 0 : _this$mutateOptions$o4.call(_this$mutateOptions4, undefined, this.currentResult.error, this.currentResult.variables, this.currentResult.context);
-            }
-          } // Then trigger the listeners
-
-
-          if (options.listeners) {
-            this.listeners.forEach(({
-              listener
-            }) => {
-              listener(this.currentResult);
-            });
-          }
-        });
-      }
-
-    }
-
     // TYPES
     // FUNCTIONS
     function dehydrateMutation(mutation) {
@@ -45376,8 +45228,6 @@
 
     var shimExports = shim.exports;
 
-    const useSyncExternalStore = shimExports.useSyncExternalStore;
-
     const defaultContext = /*#__PURE__*/G$2(undefined);
     const QueryClientSharingContext = /*#__PURE__*/G$2(false); // If we are given a context, we will use it.
     // Otherwise, if contextSharing is on, we share the first and at least one
@@ -45462,41 +45312,6 @@
 
     const useQueryErrorResetBoundary = () => P$2(QueryErrorResetBoundaryContext); // COMPONENT
 
-    function shouldThrowError$1(_useErrorBoundary, params) {
-      // Allow useErrorBoundary function to override throwing behavior on a per-error basis
-      if (typeof _useErrorBoundary === 'function') {
-        return _useErrorBoundary(...params);
-      }
-
-      return !!_useErrorBoundary;
-    }
-
-    function useMutation$1(arg1, arg2, arg3) {
-      const options = parseMutationArgs(arg1, arg2, arg3);
-      const queryClient = useQueryClient({
-        context: options.context
-      });
-      const [observer] = p$1(() => new MutationObserver(queryClient, options));
-      _$1(() => {
-        observer.setOptions(options);
-      }, [observer, options]);
-      const result = useSyncExternalStore(x$3(onStoreChange => observer.subscribe(notifyManager.batchCalls(onStoreChange)), [observer]), () => observer.getCurrentResult(), () => observer.getCurrentResult());
-      const mutate = x$3((variables, mutateOptions) => {
-        observer.mutate(variables, mutateOptions).catch(noop$1);
-      }, [observer]);
-
-      if (result.error && shouldThrowError$1(observer.options.useErrorBoundary, [result.error])) {
-        throw result.error;
-      }
-
-      return { ...result,
-        mutate,
-        mutateAsync: result.mutate
-      };
-    } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-    function noop$1() {}
-
     /**
      * Checks if emitted event is about cache change and not about observers.
      * Useful for persist, where we only want to trigger save when cache is changed.
@@ -47947,54 +47762,6 @@
       }
       return client$1;
     }
-
-    // src/actions/accounts/connect.ts
-    async function connect$1({
-      chainId,
-      connector
-    }) {
-      const client2 = getClient();
-      const activeConnector = client2.connector;
-      if (activeConnector && connector.id === activeConnector.id) throw new ConnectorAlreadyConnectedError();
-      try {
-        client2.setState(x => ({
-          ...x,
-          status: "connecting"
-        }));
-        const data = await connector.connect({
-          chainId
-        });
-        client2.setLastUsedConnector(connector.id);
-        client2.setState(x => ({
-          ...x,
-          connector,
-          chains: connector?.chains,
-          data,
-          status: "connected"
-        }));
-        client2.storage.setItem("connected", true);
-        return {
-          ...data,
-          connector
-        };
-      } catch (err) {
-        client2.setState(x => {
-          return {
-            ...x,
-            status: x.connector ? "connected" : "disconnected"
-          };
-        });
-        throw err;
-      }
-    }
-
-    // src/actions/accounts/disconnect.ts
-    async function disconnect() {
-      const client2 = getClient();
-      if (client2.connector) await client2.connector.disconnect();
-      client2.clearState();
-      client2.storage.removeItem("connected");
-    }
     function getContract({
       address,
       abi,
@@ -48088,57 +47855,6 @@
       return blockNumber;
     }
 
-    // src/actions/accounts/getAccount.ts
-    function getAccount() {
-      const {
-        data,
-        connector,
-        status
-      } = getClient();
-      switch (status) {
-        case "connected":
-          return {
-            address: data?.account,
-            connector,
-            isConnected: true,
-            isConnecting: false,
-            isDisconnected: false,
-            isReconnecting: false,
-            status
-          };
-        case "reconnecting":
-          return {
-            address: data?.account,
-            connector,
-            isConnected: !!data?.account,
-            isConnecting: false,
-            isDisconnected: false,
-            isReconnecting: true,
-            status
-          };
-        case "connecting":
-          return {
-            address: data?.account,
-            connector,
-            isConnected: false,
-            isConnecting: true,
-            isDisconnected: false,
-            isReconnecting: false,
-            status
-          };
-        case "disconnected":
-          return {
-            address: void 0,
-            connector: void 0,
-            isConnected: false,
-            isConnecting: false,
-            isDisconnected: true,
-            isReconnecting: false,
-            status
-          };
-      }
-    }
-
     // src/errors.ts
     var RpcError = class extends Error {
       constructor(message, options) {
@@ -48186,13 +47902,6 @@
         this.name = "ChainNotConfigured";
       }
     };
-    var ConnectorAlreadyConnectedError = class extends Error {
-      constructor() {
-        super(...arguments);
-        this.name = "ConnectorAlreadyConnectedError";
-        this.message = "Connector already connected";
-      }
-    };
     var ConnectorNotFoundError = class extends Error {
       constructor() {
         super(...arguments);
@@ -48447,11 +48156,6 @@
         value: client
       });
     }
-    function useClient() {
-      const client = P$2(Context);
-      if (!client) throw new Error(["`useClient` must be used within `WagmiConfig`.\n", "Read more: https://wagmi.sh/react/WagmiConfig"].join("\n"));
-      return client;
-    }
     var useSyncExternalStore2 = shimExports.useSyncExternalStore;
 
     // src/hooks/utils/query/utils.ts
@@ -48561,13 +48265,6 @@
         status
       };
     }
-    function useMutation(arg1, arg2, arg3) {
-      const options = parseMutationArgs(arg1, arg2, arg3);
-      return useMutation$1({
-        context: queryClientContext,
-        ...options
-      });
-    }
     function useQuery(arg1, arg2, arg3) {
       const parsedOptions = parseQueryArgs(arg1, arg2, arg3);
       const baseQuery = useBaseQuery({
@@ -48725,155 +48422,6 @@
         scopeKey: enabled ? void 0 : "idle"
       });
     }
-    var isPlainObject$1 = obj => typeof obj === "object" && !Array.isArray(obj);
-    function useSyncExternalStoreWithTracked(subscribe, getSnapshot, getServerSnapshot = getSnapshot, isEqual = deepEqual$1) {
-      const trackedKeys = F$2([]);
-      const result = withSelectorExports.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, x => x, (a, b) => {
-        if (isPlainObject$1(a) && isPlainObject$1(b) && trackedKeys.current.length) {
-          for (const key of trackedKeys.current) {
-            const equal = isEqual(a[key], b[key]);
-            if (!equal) return false;
-          }
-          return true;
-        }
-        return isEqual(a, b);
-      });
-      if (isPlainObject$1(result)) {
-        const trackedResult = {
-          ...result
-        };
-        Object.defineProperties(trackedResult, Object.entries(trackedResult).reduce((res, [key, value]) => {
-          return {
-            ...res,
-            [key]: {
-              configurable: false,
-              enumerable: true,
-              get: () => {
-                if (!trackedKeys.current.includes(key)) {
-                  trackedKeys.current.push(key);
-                }
-                return value;
-              }
-            }
-          };
-        }, {}));
-        return trackedResult;
-      }
-      return result;
-    }
-
-    // src/hooks/accounts/useAccount.ts
-    function useAccount({
-      onConnect,
-      onDisconnect
-    } = {}) {
-      const watchAccount = x$3(callback => {
-        const client = getClient();
-        const unsubscribe = client.subscribe(state => ({
-          address: state.data?.account,
-          connector: state.connector,
-          status: state.status
-        }), (curr, prev) => {
-          if (!!onConnect && prev.status !== "connected" && curr.status === "connected") onConnect({
-            address: curr.address,
-            connector: curr.connector,
-            isReconnected: prev.status === "reconnecting"
-          });
-          if (!!onDisconnect && prev.status === "connected" && curr.status === "disconnected") onDisconnect();
-          return callback(getAccount());
-        });
-        return unsubscribe;
-      }, [onConnect, onDisconnect]);
-      const account = useSyncExternalStoreWithTracked(watchAccount, getAccount);
-      const previousStatusRef = F$2();
-      const {
-        address,
-        connector,
-        status
-      } = account;
-      _$1(() => {
-        if (!!onConnect && previousStatusRef.current === void 0 && status === "connected") onConnect({
-          address,
-          connector,
-          isReconnected: true
-        });
-        previousStatusRef.current = status;
-      }, []);
-      return account;
-    }
-    var mutationKey = args => [{
-      entity: "connect",
-      ...args
-    }];
-    var mutationFn = args => {
-      const {
-        connector,
-        chainId
-      } = args;
-      if (!connector) throw new Error("connector is required");
-      return connect$1({
-        connector,
-        chainId
-      });
-    };
-    function useConnect({
-      chainId,
-      connector,
-      onError,
-      onMutate,
-      onSettled,
-      onSuccess
-    } = {}) {
-      const client = useClient();
-      const {
-        data,
-        error,
-        isError,
-        isIdle,
-        isLoading,
-        isSuccess,
-        mutate,
-        mutateAsync,
-        reset,
-        status,
-        variables
-      } = useMutation(mutationKey({
-        connector,
-        chainId
-      }), mutationFn, {
-        onError,
-        onMutate,
-        onSettled,
-        onSuccess
-      });
-      const connect2 = x$3(args => {
-        return mutate({
-          chainId: args?.chainId ?? chainId,
-          connector: args?.connector ?? connector
-        });
-      }, [chainId, connector, mutate]);
-      const connectAsync = x$3(args => {
-        return mutateAsync({
-          chainId: args?.chainId ?? chainId,
-          connector: args?.connector ?? connector
-        });
-      }, [chainId, connector, mutateAsync]);
-      return {
-        connect: connect2,
-        connectAsync,
-        connectors: client.connectors,
-        data,
-        error,
-        isError,
-        isIdle,
-        isLoading,
-        isSuccess,
-        pendingConnector: variables?.connector,
-        reset,
-        status,
-        variables
-      };
-    }
     function queryKey6({
       address,
       args,
@@ -50128,7 +49676,7 @@
       }, rankingItem.summaryText)));
     }
 
-    var css_248z$o = "p {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-error, .submit-success {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.utu-feedback-form {\n  width: 65%;\n  margin: auto;\n}\n\n.utu-feedback-form_title {\n  text-align: center;\n  height: 3rem;\n  background-color: #fcf8e5;\n  font-weight: bold;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n.x-utu-feedback-form_body_1 {\n  display: flex;\n  justify-content: space-between;\n}\n\n.x-utu-feedback-details_divider {\n  background-color: grey;\n  height: 100px;\n  width: 3px;\n}";
+    var css_248z$o = "p {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-error, .submit-success {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.utu-feedback-form {\n  width: 100%;\n  margin: auto;\n}\n\n.utu-feedback-form_title {\n  text-align: center;\n  height: 3rem;\n  background-color: #fcf8e5;\n  font-weight: bold;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n.x-utu-feedback-form_body_1 {\n  display: flex;\n  justify-content: space-between;\n}\n\n.x-utu-feedback-details_divider {\n  background-color: grey;\n  height: 100px;\n  width: 3px;\n}";
     styleInject(css_248z$o);
 
     var css_248z$n = "p {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-error, .submit-success {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.button {\n  cursor: pointer;\n}\n.button:hover {\n  background-color: rgb(253, 253, 253);\n}\n.button:active {\n  transform: translateY(1px);\n}\n\n.x-utu-badge-set-container {\n  width: 6em;\n  height: 72px;\n  padding: 1rem 1rem 1rem 0;\n}\n.x-utu-badge-set-section {\n  display: flex;\n  flex-direction: row;\n  background-color: rgba(255, 221, 51, 0.1);\n  border-radius: 10.07px;\n}\n.x-utu-badge-section {\n  display: flex;\n  overflow-x: scroll;\n  white-space: nowrap;\n  padding-bottom: 1rem;\n  width: 95%;\n  margin: auto;\n  /* width */\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.x-utu-badge-section-container {\n  padding-top: 1rem;\n}\n.x-utu-badge-section > div {\n  padding: 1rem;\n}\n.x-utu-badge-section::-webkit-scrollbar {\n  width: 10px;\n  height: 8px;\n}\n.x-utu-badge-section::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 10px;\n}\n.x-utu-badge-section::-webkit-scrollbar-thumb {\n  background: rgb(252, 229, 70);\n  border-radius: 10px;\n}\n.x-utu-badge-section::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}\n.x-utu-badge-disable {\n  height: 50px;\n  width: 50px;\n  opacity: 0.6;\n}\n.x-utu-badge-item-text {\n  justify-content: center;\n  align-items: center;\n  color: white;\n}\n.x-utu-badge-text {\n  font-size: 0.7rem;\n}\n.x-utu-badge-text-h3 {\n  text-align: center;\n}\n.x-utu-badge-text-h3-light {\n  color: #000000;\n}\n.x-utu-badge-text-h3-dark {\n  color: #ffffff;\n}\n.x-utu-badge-img {\n  width: 2rem;\n}\n.x-utu-badge-img-container {\n  display: flex;\n  justify-content: space-around;\n  opacity: 1;\n}\n.x-utu-badge-img-big {\n  width: 4.5rem;\n}\n.x-utu-badge-img-big-section {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n\n.x-utu-badge-section-title {\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-badge-section {\n    padding-left: 0;\n    padding-right: 0;\n  }\n}\n@media only screen and (min-width: 1210px) {\n  .x-utu-badge-section {\n    padding-top: 0;\n  }\n}";
@@ -62978,7 +62526,7 @@
       }));
     }
 
-    var css_248z$e = "p {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-error, .submit-success {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.x-utu-popup {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  z-index: 2;\n  overflow: scroll;\n}\n.x-utu-popup-container {\n  z-index: 1001;\n  width: 100%;\n}\n.x-utu-popup-container-dark {\n  background: transparent;\n}\n.x-utu-popup-container-light {\n  background: transparent;\n}\n.x-utu-popup-icon-btn {\n  padding: 10px;\n  margin-right: 3%;\n  font-size: 2.8em;\n  border: none;\n  background: none;\n  transition: all ease-out 0.3s;\n}\n.x-utu-popup-icon-btn:hover {\n  transform: scale(1.3);\n  opacity: 0.6;\n}\n.x-utu-popup-icon-btn-overlay {\n  z-index: 1001;\n}\n.x-utu-popup-icon-btn-light {\n  color: #000000;\n}\n.x-utu-popup-icon-btn-dark {\n  color: #ffffff;\n}\n.x-utu-popup-container {\n  z-index: 1001;\n}\n.x-utu-popup-container-content {\n  width: 65%;\n  margin: auto;\n  display: flex;\n  justify-content: flex-end;\n  border-radius: 10px 10px 0 0;\n  background-color: #fcf8e5;\n}\n.x-utu-popup-container-dark {\n  background: transparent;\n}\n.x-utu-popup-container-light {\n  background: transparent;\n}\n.x-utu-popup-background {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  min-width: 100%;\n  min-height: 100%;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-popup {\n    min-width: 100%;\n    min-height: 100%;\n  }\n  .x-utu-popup-container {\n    align-items: center;\n    min-width: 100%;\n    min-height: 120%;\n  }\n  .x-utu-popup-container-content {\n    align-items: center;\n    margin-top: 2%;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .x-utu-popup-container-content {\n    width: 100%;\n    background-color: #ffffff;\n    justify-content: center;\n  }\n}";
+    var css_248z$e = "p {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-error, .submit-success {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.x-utu-popup {\n  width: 65%;\n  margin: auto;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  z-index: 2;\n  overflow: scroll;\n}\n.x-utu-popup-container {\n  z-index: 1001;\n  width: 100%;\n}\n.x-utu-popup-container-dark {\n  background: transparent;\n}\n.x-utu-popup-container-light {\n  background: transparent;\n}\n.x-utu-popup-icon-btn {\n  padding: 10px;\n  margin-right: 3%;\n  font-size: 2.8em;\n  border: none;\n  background: none;\n  transition: all ease-out 0.3s;\n}\n.x-utu-popup-icon-btn:hover {\n  transform: scale(1.3);\n  opacity: 0.6;\n}\n.x-utu-popup-icon-btn-overlay {\n  z-index: 1001;\n}\n.x-utu-popup-icon-btn-light {\n  color: #000000;\n}\n.x-utu-popup-icon-btn-dark {\n  color: #ffffff;\n}\n.x-utu-popup-container {\n  z-index: 1001;\n}\n.x-utu-popup-container-content {\n  width: 100%;\n  margin: auto;\n  display: flex;\n  justify-content: flex-end;\n  border-radius: 10px 10px 0 0;\n  background-color: #fcf8e5;\n}\n.x-utu-popup-container-dark {\n  background: transparent;\n}\n.x-utu-popup-container-light {\n  background: transparent;\n}\n.x-utu-popup-background {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  min-width: 100%;\n  min-height: 100%;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-popup {\n    width: 65%;\n    margin: auto;\n    min-height: 100%;\n  }\n  .x-utu-popup-container {\n    align-items: center;\n    min-width: 100%;\n    min-height: 120%;\n  }\n  .x-utu-popup-container-content {\n    align-items: center;\n    margin-top: 2%;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .x-utu-popup-container-content {\n    width: 100%;\n    background-color: #ffffff;\n    justify-content: center;\n  }\n}";
     styleInject(css_248z$e);
 
     /* eslint-disable no-nested-ternary */
@@ -63403,7 +62951,7 @@
       }, "Disconnect Wallet"))));
     }
 
-    var css_248z$8 = "p {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-error, .submit-success {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.video-msg {\n  position: absolute;\n}\n\n.trust-video {\n  border: none;\n  position: absolute;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-container {\n  width: 25rem;\n  height: 40rem;\n  position: relative;\n}\n.trust-video-btn {\n  padding: 0 !important;\n  border: none !important;\n  background: none !important;\n}\n.trust-video-wrapper {\n  width: 65%;\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  background-color: #fcf8e5;\n  overflow: hidden;\n  align-items: center;\n  padding: 2rem;\n}\n.trust-video-wrapper:hover .trust-video-controls {\n  visibility: visible;\n  opacity: 1;\n}\n.trust-video-msg {\n  display: flex;\n  align-items: center;\n}\n.trust-video-controls {\n  position: absolute;\n  bottom: 0;\n  margin-top: 35%;\n  transform: translate(0, -30%);\n  border-radius: 10px;\n  align-items: center;\n  justify-content: space-between;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.25s ease-out;\n  display: none;\n}\n.trust-video-controls.show {\n  display: flex;\n}\n.trust-video-play {\n  border-color: transparent;\n  transition: 0.3s;\n  margin: auto;\n  margin-left: 3rem;\n  margin-right: 3rem;\n  line-height: 1.5em;\n  width: 4em;\n  height: 4em;\n  padding: 0.6rem;\n  padding-right: 0.3rem;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  font-size: 0.9rem;\n  border-radius: 50%;\n  font: normal normal normal 18px/1;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-play-btn {\n  border-color: transparent;\n}\n.trust-video-pause {\n  border-color: transparent;\n  transition: 0.3s;\n  margin: auto;\n  margin-left: 3rem;\n  margin-right: 3rem;\n  line-height: 1.5em;\n  width: 4em;\n  height: 4em;\n  padding: 0.6rem;\n  padding-right: 0.4rem;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  font-size: 0.9rem;\n  border-radius: 50%;\n  font: normal normal normal 18px/1;\n}\n.trust-video-pause:before {\n  content: \"\\f04b\";\n}\n.trust-video-pause.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-pause-btn {\n  border-color: transparent;\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 1em;\n  padding: 0.6rem;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 0.65em;\n  line-height: 2.5rem;\n  padding: 0.6rem;\n  width: 5em;\n  border-radius: 20%;\n  margin-right: 5%;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 1280px) {\n  .trust-video-play {\n    margin-left: 5rem;\n    margin-right: 5rem;\n  }\n  .trust-video-pause {\n    margin-left: 5rem;\n    margin-right: 5rem;\n  }\n  .trust-video-controls {\n    height: 10em;\n  }\n}\n@media only screen and (max-width: 526px) {\n  .trust-video-play {\n    width: 3em;\n    height: 3em;\n    padding: 0.5rem;\n    padding-right: 0.3rem;\n  }\n  .trust-video-pause {\n    width: 3em;\n    height: 3em;\n    padding: 0.5rem;\n    padding-right: 0.3rem;\n  }\n  .trust-video-volume {\n    width: 2em;\n    height: 2em;\n    padding: 0.4rem;\n  }\n  .trust-video-fullscreen {\n    width: 3em;\n    padding: 0.4rem;\n  }\n  .trust-video-controls {\n    transform: translate(0, -100%);\n  }\n}\np {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-success, .submit-error {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.x-utu-feedback-details {\n  width: 65%;\n  margin: auto;\n  background-color: #fcf8e5;\n  height: 30rem;\n}\n\n.x-utu-feedback-details_title {\n  text-align: center;\n  height: 3rem;\n  background-color: #fcf8e5;\n  font-weight: bold;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n.x-utu-feedback-details_body_1 {\n  width: 100%;\n  display: flex;\n  background-color: #fcf8e5;\n  justify-content: space-around;\n}\n\n.x-utu-feedback-details_body_VideoShow {\n  width: 46%;\n}\n\n.x-utu-feedback-details_body_StarRatingShow {\n  width: 46%;\n}\n\n.x-utu-feedback-details_body_2 {\n  width: 100%;\n  margin-bottom: 2%;\n  background-color: #fcf8e5;\n}\n\n.x-utu-feedback-details_divider {\n  background-color: rgba(189, 195, 199, 0.3);\n  height: 160px;\n  width: 3px;\n}\n\n@media only screen and (max-width: 1000px) {\n  .x-utu-feedback-details_divider {\n    display: none;\n  }\n  .x-utu-feedback-details_body_1 {\n    flex-direction: column;\n  }\n}";
+    var css_248z$8 = "p {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-error, .submit-success {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.video-msg {\n  position: absolute;\n}\n\n.trust-video {\n  border: none;\n  position: absolute;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-container {\n  width: 25rem;\n  height: 40rem;\n  position: relative;\n}\n.trust-video-btn {\n  padding: 0 !important;\n  border: none !important;\n  background: none !important;\n}\n.trust-video-wrapper {\n  width: 65%;\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  background-color: #fcf8e5;\n  overflow: hidden;\n  align-items: center;\n  padding: 2rem;\n}\n.trust-video-wrapper:hover .trust-video-controls {\n  visibility: visible;\n  opacity: 1;\n}\n.trust-video-msg {\n  display: flex;\n  align-items: center;\n}\n.trust-video-controls {\n  position: absolute;\n  bottom: 0;\n  margin-top: 35%;\n  transform: translate(0, -30%);\n  border-radius: 10px;\n  align-items: center;\n  justify-content: space-between;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.25s ease-out;\n  display: none;\n}\n.trust-video-controls.show {\n  display: flex;\n}\n.trust-video-play {\n  border-color: transparent;\n  transition: 0.3s;\n  margin: auto;\n  margin-left: 3rem;\n  margin-right: 3rem;\n  line-height: 1.5em;\n  width: 4em;\n  height: 4em;\n  padding: 0.6rem;\n  padding-right: 0.3rem;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  font-size: 0.9rem;\n  border-radius: 50%;\n  font: normal normal normal 18px/1;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-play-btn {\n  border-color: transparent;\n}\n.trust-video-pause {\n  border-color: transparent;\n  transition: 0.3s;\n  margin: auto;\n  margin-left: 3rem;\n  margin-right: 3rem;\n  line-height: 1.5em;\n  width: 4em;\n  height: 4em;\n  padding: 0.6rem;\n  padding-right: 0.4rem;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  font-size: 0.9rem;\n  border-radius: 50%;\n  font: normal normal normal 18px/1;\n}\n.trust-video-pause:before {\n  content: \"\\f04b\";\n}\n.trust-video-pause.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-pause-btn {\n  border-color: transparent;\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 1em;\n  padding: 0.6rem;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 0.65em;\n  line-height: 2.5rem;\n  padding: 0.6rem;\n  width: 5em;\n  border-radius: 20%;\n  margin-right: 5%;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 1280px) {\n  .trust-video-play {\n    margin-left: 5rem;\n    margin-right: 5rem;\n  }\n  .trust-video-pause {\n    margin-left: 5rem;\n    margin-right: 5rem;\n  }\n  .trust-video-controls {\n    height: 10em;\n  }\n}\n@media only screen and (max-width: 526px) {\n  .trust-video-play {\n    width: 3em;\n    height: 3em;\n    padding: 0.5rem;\n    padding-right: 0.3rem;\n  }\n  .trust-video-pause {\n    width: 3em;\n    height: 3em;\n    padding: 0.5rem;\n    padding-right: 0.3rem;\n  }\n  .trust-video-volume {\n    width: 2em;\n    height: 2em;\n    padding: 0.4rem;\n  }\n  .trust-video-fullscreen {\n    width: 3em;\n    padding: 0.4rem;\n  }\n  .trust-video-controls {\n    transform: translate(0, -100%);\n  }\n}\np {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-success, .submit-error {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.x-utu-feedback-details {\n  width: 100%;\n  margin: auto;\n  background-color: #fcf8e5;\n  height: 30rem;\n}\n\n.x-utu-feedback-details_title {\n  text-align: center;\n  height: 3rem;\n  background-color: #fcf8e5;\n  font-weight: bold;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n.x-utu-feedback-details_body_1 {\n  width: 100%;\n  display: flex;\n  background-color: #fcf8e5;\n  justify-content: space-around;\n}\n\n.x-utu-feedback-details_body_VideoShow {\n  width: 46%;\n}\n\n.x-utu-feedback-details_body_StarRatingShow {\n  width: 46%;\n}\n\n.x-utu-feedback-details_body_2 {\n  width: 100%;\n  margin-bottom: 2%;\n  background-color: #fcf8e5;\n}\n\n.x-utu-feedback-details_divider {\n  background-color: rgba(189, 195, 199, 0.3);\n  height: 160px;\n  width: 3px;\n}\n\n@media only screen and (max-width: 1000px) {\n  .x-utu-feedback-details_divider {\n    display: none;\n  }\n  .x-utu-feedback-details_body_1 {\n    flex-direction: column;\n  }\n}";
     styleInject(css_248z$8);
 
     var css_248z$7 = "p {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-error, .submit-success {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.x-utu-feedback-details-endorsements {\n  width: 100%;\n  padding: 1rem 1.5rem;\n}\n\n.x-utu-feedback-details-endorsements-wrapper {\n  width: 100%;\n  display: flex;\n  margin: 1rem 0;\n  justify-content: start;\n  white-space: nowrap;\n  overflow-x: scroll;\n}\n\n/* width */\n.x-utu-feedback-details-endorsements-wrapper::-webkit-scrollbar {\n  width: 10px;\n  height: 8px;\n}\n\n/* Track */\n.x-utu-feedback-details-endorsements-wrapper::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 10px;\n}\n\n/* Handle */\n.x-utu-feedback-details-endorsements-wrapper::-webkit-scrollbar-thumb {\n  background: rgb(252, 229, 70);\n  border-radius: 10px;\n}\n\n/* Handle on hover */\n.x-utu-feedback-details-endorsements-wrapper::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}\n\n.x-utu-feedback-details-endorsements-body {\n  display: flex;\n  margin-right: 1rem;\n  margin-bottom: 1rem;\n  border-radius: 10px;\n  padding: 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n}\n\n.x-utu-feedback-details-endorsements-body_text {\n  margin: 1rem 0.5rem;\n}\n\n/*\n******************************************** old css\n*/\n.endor-text-section {\n  width: 50%;\n}\n\n.endor-title {\n  display: flex;\n  justify-self: center;\n  text-align: center;\n}\n.endor-avatar {\n  width: 2rem;\n}\n.endor-text {\n  justify-content: space-around;\n  padding-left: 3rem;\n  padding-right: 0;\n  font-size: 1rem;\n  align-items: center;\n}\n.endor-text-light {\n  color: black;\n}\n.endor-text-dark {\n  color: white;\n}\n.endor-text-body {\n  display: flex;\n}\n.endor-text-section {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 0;\n  padding-top: 1rem;\n  padding-bottom: 2rem;\n}\n.endor-text-section-no-data {\n  display: flex;\n  justify-content: flex-start;\n}\n.endor-text-stakes-no-data {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-top: 2rem;\n}\n.endor-text-stakes-item {\n  font-size: 1rem;\n}\n.endor-text-stakes-item-light {\n  color: black;\n}\n.endor-text-stakes-item-dark {\n  color: white;\n}\n.endor-text-stakes-item-2 {\n  font-size: 0.8rem;\n}\n.endor-text-stakes-item-2-light {\n  color: black;\n}\n.endor-text-stakes-item-2-dark {\n  color: white;\n}\n.endor-text-contacts-section {\n  padding-left: 1rem;\n  padding-right: 0;\n  margin-top: 1rem;\n  font-size: 0.7rem;\n  width: 22rem;\n  flex-wrap: wrap;\n  text-align: left;\n}\n.endor-text-contacts-section-light {\n  color: black;\n}\n.endor-text-contacts-section-dark {\n  color: white;\n}\n.endor-text-contacts-body {\n  font-size: 0.7rem;\n  margin-top: 0.5em;\n}\n.endor-text-truncate {\n  display: inline-block;\n  max-width: 5rem;\n  vertical-align: bottom;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.endor-text-image-item {\n  margin-top: 1rem;\n  height: 3rem;\n  border-radius: 50%;\n}\n.endor-text-image-item-light {\n  border: 2px solid rgb(252, 229, 70);\n}\n.endor-text-image-item-dark {\n  border: 2px solid rgb(252, 229, 70);\n}\n\n@media only screen and (min-width: 768px) {\n  .endor-title {\n    display: flex;\n    justify-self: center;\n    text-align: center;\n  }\n  .endor-text {\n    padding-left: 0;\n  }\n  .endor-text-section {\n    padding-bottom: 1rem;\n    margin-top: 0;\n  }\n  .endor-text-body {\n    padding-left: 0rem;\n    padding-right: 0rem;\n  }\n  .endor-text-contacts-body {\n    font-size: 1rem;\n  }\n  .endor-text-stakes-item {\n    font-size: 1.5rem;\n  }\n  .endor-text-stakes-item-2 {\n    font-size: 1rem;\n  }\n}\n@media only screen and (min-width: 768px) {\n  .endor-section {\n    margin-top: 4rem;\n  }\n}\n@media only screen and (min-width: 1481px) {\n  .endor-text-section {\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n}";
@@ -110794,22 +110342,21 @@
     function UnlockGateWay(_a) {
       var _b;
       var _this = this;
-      var children = _a.children;
+      var children = _a.children,
+        address = _a.address;
       var network = 80001;
-      var _c = useAccount(),
-        address = _c.address;
-        _c.connector;
+      // const {address, connector} = useAccount();
       var lockAddress = "0x9ed4453b57abd4397b7f672feb769ade76dc4c8e";
-      var _d = useContractRead({
+      var _c = useContractRead({
           address: lockAddress,
           abi: PublicLockV13.abi,
           functionName: "balanceOf",
           args: [address],
           watch: true
         }),
-        data = _d.data,
-        isError = _d.isError,
-        isLoading = _d.isLoading;
+        data = _c.data,
+        isError = _c.isError,
+        isLoading = _c.isLoading;
       var paywallConfig = {
         locks: (_b = {}, _b[lockAddress] = {
           network: network
@@ -110859,7 +110406,11 @@
             width: "100%",
             textAlign: "center"
           }
-        }, y$2("button", {
+        }, y$2("p", {
+          style: {
+            fontSize: "14px"
+          }
+        }, "At the moment you do not have a membership. Please buy a membership to be able to see signal."), y$2("button", {
           style: {
             width: "20%",
             marginTop: "5%",
@@ -110869,7 +110420,7 @@
           },
           type: "button",
           onClick: checkout
-        }, "Buy Membership to view feedback details"));
+        }, "Buy Membership to see signal"));
       }
       return y$2("div", null, children);
     }
@@ -110880,10 +110431,10 @@
       var targetHumanReadable = props[ATTR_TARGET_HUMAN_READABLE];
       var sourceUuid = props[ATTR_SOURCE_UUID];
       var targetUuid = props[ATTR_TARGET_UUID];
-      var isConnected = useAccount().isConnected;
-      var connect = useConnect({
-        connector: new InjectedConnector()
-      }).connect;
+      // const {isConnected} = useAccount();
+      // const {connect} = useConnect({
+      //   connector: new InjectedConnector()
+      // });
       var getTargetHumanReadableToDisplay = function () {
         var targetHumanReadableToReturn;
         switch (targetType) {
@@ -110901,24 +110452,9 @@
         submitStatus = _a.submitStatus;
       return y$2(BaseComponent, null, y$2("style", null, css_248z$8), y$2("div", {
         className: "x-utu-feedback-details"
-      }, !isConnected && y$2("div", {
-        style: {
-          width: "100%",
-          textAlign: "center"
-        }
-      }, y$2("button", {
-        style: {
-          width: "20%",
-          marginTop: "5%",
-          backgroundColor: "#FCE546FF",
-          padding: "10px",
-          border: "none"
-        },
-        type: "button",
-        onClick: function () {
-          return connect();
-        }
-      }, "Connect your wallet"), " "), isConnected && y$2("div", null, y$2(UnlockGateWay, null, y$2("div", {
+      }, y$2("div", null, y$2(UnlockGateWay, {
+        address: sourceUuid
+      }, y$2("div", {
         className: "x-utu-feedback-details_title"
       }, y$2("p", null, "Show Feedback For ( ", targetHumanReadableToDisplay, " )", targetType ? y$2("p", null, " Signal Type: ", targetType, " ") : "")), y$2("div", {
         className: "x-utu-feedback-details_body_1"
@@ -110944,24 +110480,7 @@
       })), y$2(EndorsementsList, __assign({}, props, {
         feedbackSummary: feedbackSummary,
         submitStatus: submitStatus
-      })))), y$2("div", {
-        style: {
-          width: "100%",
-          textAlign: "center",
-          marginTop: "2rem"
-        }
-      }, y$2("button", {
-        style: {
-          width: "20%",
-          backgroundColor: "#FCE546FF",
-          padding: "10px",
-          border: "none"
-        },
-        type: "button",
-        onClick: function () {
-          return disconnect();
-        }
-      }, "disconnect your wallet")))));
+      })))))));
     }
 
     var css_248z = "p {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-error, .submit-success {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\np {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-success, .submit-error {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.video-msg {\n  position: absolute;\n}\n\n.trust-video {\n  border: none;\n  position: absolute;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-container {\n  width: 25rem;\n  height: 40rem;\n  position: relative;\n}\n.trust-video-btn {\n  padding: 0 !important;\n  border: none !important;\n  background: none !important;\n}\n.trust-video-wrapper {\n  width: 65%;\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  background-color: #fcf8e5;\n  overflow: hidden;\n  align-items: center;\n  padding: 2rem;\n}\n.trust-video-wrapper:hover .trust-video-controls {\n  visibility: visible;\n  opacity: 1;\n}\n.trust-video-msg {\n  display: flex;\n  align-items: center;\n}\n.trust-video-controls {\n  position: absolute;\n  bottom: 0;\n  margin-top: 35%;\n  transform: translate(0, -30%);\n  border-radius: 10px;\n  align-items: center;\n  justify-content: space-between;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.25s ease-out;\n  display: none;\n}\n.trust-video-controls.show {\n  display: flex;\n}\n.trust-video-play {\n  border-color: transparent;\n  transition: 0.3s;\n  margin: auto;\n  margin-left: 3rem;\n  margin-right: 3rem;\n  line-height: 1.5em;\n  width: 4em;\n  height: 4em;\n  padding: 0.6rem;\n  padding-right: 0.3rem;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  font-size: 0.9rem;\n  border-radius: 50%;\n  font: normal normal normal 18px/1;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-play-btn {\n  border-color: transparent;\n}\n.trust-video-pause {\n  border-color: transparent;\n  transition: 0.3s;\n  margin: auto;\n  margin-left: 3rem;\n  margin-right: 3rem;\n  line-height: 1.5em;\n  width: 4em;\n  height: 4em;\n  padding: 0.6rem;\n  padding-right: 0.4rem;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  font-size: 0.9rem;\n  border-radius: 50%;\n  font: normal normal normal 18px/1;\n}\n.trust-video-pause:before {\n  content: \"\\f04b\";\n}\n.trust-video-pause.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-pause-btn {\n  border-color: transparent;\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 1em;\n  padding: 0.6rem;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 0.65em;\n  line-height: 2.5rem;\n  padding: 0.6rem;\n  width: 5em;\n  border-radius: 20%;\n  margin-right: 5%;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 1280px) {\n  .trust-video-play {\n    margin-left: 5rem;\n    margin-right: 5rem;\n  }\n  .trust-video-pause {\n    margin-left: 5rem;\n    margin-right: 5rem;\n  }\n  .trust-video-controls {\n    height: 10em;\n  }\n}\n@media only screen and (max-width: 526px) {\n  .trust-video-play {\n    width: 3em;\n    height: 3em;\n    padding: 0.5rem;\n    padding-right: 0.3rem;\n  }\n  .trust-video-pause {\n    width: 3em;\n    height: 3em;\n    padding: 0.5rem;\n    padding-right: 0.3rem;\n  }\n  .trust-video-volume {\n    width: 2em;\n    height: 2em;\n    padding: 0.4rem;\n  }\n  .trust-video-fullscreen {\n    width: 3em;\n    padding: 0.4rem;\n  }\n  .trust-video-controls {\n    transform: translate(0, -100%);\n  }\n}\n.x-utu-feedback-details-popup {\n  width: 100%;\n  padding: 0.5rem;\n  border-radius: 10px;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n}\n\n.x-utu-feedback-details-popup_btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  background-color: rgb(252, 229, 70);\n}";