@ututrust/web-components 1.2.5 → 1.2.6

package/dist/index.js

@@ -42186,6 +42186,115 @@
 	  }, h$2("style", null, !excludeFonts && h$2(p$1, null, "@import \"https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap\";"), !excludeBootstrap && h$2(p$1, null, "@import \"https://getbootstrap.com/docs/5.0/dist/css/bootstrap-reboot.min.css\"; @import \"https://getbootstrap.com/docs/5.0/dist/css/bootstrap-grid.min.css\"; @import \"https://getbootstrap.com/docs/5.0/dist/css/bootstrap-utilities.min.css\";"), style), children));
 	}
 
+	var _SWITCH_CHAIN_PARAMS, _ADD_CHAIN_PARAMS, _UTT_CONTRACT_ADDRESS;
+	/**
+	 * Parameter interface definition for wallet_addEthereumChain
+	 * Copied from https://docs.metamask.io/guide/rpc-api.html#unrestricted-methods
+	 */
+
+	/**
+	 * Convers a number to a 0x-prefixed hexadecimal string
+	 * @param n
+	 */
+	function toHexString(n) {
+	  return hexStripZeros(hexlify(n));
+	}
+
+	var SWITCH_CHAIN_PARAMS = (_SWITCH_CHAIN_PARAMS = {}, _defineProperty$2(_SWITCH_CHAIN_PARAMS, NETWORK_NAME.polygon_mainnet, {
+	  chainId: toHexString(137)
+	}), _defineProperty$2(_SWITCH_CHAIN_PARAMS, NETWORK_NAME.polygon_mumbai, {
+	  chainId: toHexString(80001)
+	}), _SWITCH_CHAIN_PARAMS);
+	var ADD_CHAIN_PARAMS = (_ADD_CHAIN_PARAMS = {}, _defineProperty$2(_ADD_CHAIN_PARAMS, NETWORK_NAME.polygon_mainnet, {
+	  chainId: SWITCH_CHAIN_PARAMS[NETWORK_NAME.polygon_mainnet].chainId,
+	  chainName: "Polygon",
+	  nativeCurrency: {
+	    name: "MATIC",
+	    symbol: "MATIC",
+	    decimals: 18
+	  },
+	  rpcUrls: ["https://polygon-rpc.com"],
+	  blockExplorerUrls: ["https://polygonscan.com"]
+	}), _defineProperty$2(_ADD_CHAIN_PARAMS, NETWORK_NAME.polygon_mumbai, {
+	  chainId: SWITCH_CHAIN_PARAMS[NETWORK_NAME.polygon_mumbai].chainId,
+	  chainName: "Mumbai",
+	  nativeCurrency: {
+	    name: "MATIC",
+	    symbol: "MATIC",
+	    decimals: 18
+	  },
+	  rpcUrls: ["https://rpc-mumbai.maticvigil.com"],
+	  blockExplorerUrls: ["https://mumbai.polygonscan.com"]
+	}), _ADD_CHAIN_PARAMS);
+	var UTT_CONTRACT_ADDRESS = (_UTT_CONTRACT_ADDRESS = {}, _defineProperty$2(_UTT_CONTRACT_ADDRESS, NETWORK_NAME.polygon_mainnet, "0xbA6de5f4a98d2AEbb289d1136194D05Ee24C426f"), _defineProperty$2(_UTT_CONTRACT_ADDRESS, NETWORK_NAME.polygon_mumbai, "0x19bc90FfBDCaD53c48eF0b08A67B0D2563AEE2a8"), _UTT_CONTRACT_ADDRESS);
+	function addNetwork(_x, _x2) {
+	  return _addNetwork.apply(this, arguments);
+	}
+
+	function _addNetwork() {
+	  _addNetwork = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(provider, networkName) {
+	    var network;
+	    return _regeneratorRuntime().wrap(function _callee$(_context) {
+	      while (1) {
+	        switch (_context.prev = _context.next) {
+	          case 0:
+	            network = ADD_CHAIN_PARAMS[networkName];
+	            _context.next = 3;
+	            return provider.request({
+	              method: "wallet_addEthereumChain",
+	              params: [network]
+	            });
+
+	          case 3:
+	          case "end":
+	            return _context.stop();
+	        }
+	      }
+	    }, _callee);
+	  }));
+	  return _addNetwork.apply(this, arguments);
+	}
+
+	function requestNetworkChange(_x3, _x4) {
+	  return _requestNetworkChange.apply(this, arguments);
+	}
+
+	function _requestNetworkChange() {
+	  _requestNetworkChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(provider, networkName) {
+	    var network;
+	    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+	      while (1) {
+	        switch (_context2.prev = _context2.next) {
+	          case 0:
+	            network = SWITCH_CHAIN_PARAMS[networkName];
+	            _context2.next = 3;
+	            return provider.request({
+	              method: "wallet_switchEthereumChain",
+	              params: [network]
+	            });
+
+	          case 3:
+	          case "end":
+	            return _context2.stop();
+	        }
+	      }
+	    }, _callee2);
+	  }));
+	  return _requestNetworkChange.apply(this, arguments);
+	}
+
+	function getDefaultNetworkName() {
+	  return config.production ? NETWORK_NAME.polygon_mainnet : NETWORK_NAME.polygon_mumbai;
+	}
+	function getUTTContractAddress(networkName) {
+	  return UTT_CONTRACT_ADDRESS[networkName];
+	}
+	function getProvider() {
+	  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	  // @ts-ignore
+	  return window.utuWeb3Provider || window.ethereum;
+	}
+
 	function useAuth() {
 	  var _useState = p(getAccessTokenFromLocalStorage()),
 	      _useState2 = _slicedToArray(_useState, 2),
@@ -42213,12 +42322,11 @@
 
 	function _addressSignatureVerification() {
 	  _addressSignatureVerification = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-	    var _window;
-
 	    var overrideApiUrl,
 	        walletProvider,
 	        cookies,
 	        utuApiBase,
+	        _provider,
 	        provider,
 	        signer,
 	        address,
@@ -42234,30 +42342,31 @@
 	            overrideApiUrl = _args.length > 0 && _args[0] !== undefined ? _args[0] : null;
 	            walletProvider = _args.length > 1 && _args[1] !== undefined ? _args[1] : null;
 	            cookies = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
-	            utuApiBase = (overrideApiUrl !== null && overrideApiUrl !== void 0 ? overrideApiUrl : config.production) ? UTU_API_BASE_URL_PRODUCTION : UTU_API_BASE_URL_TEST; // @ts-ignore
+	            utuApiBase = (overrideApiUrl !== null && overrideApiUrl !== void 0 ? overrideApiUrl : config.production) ? UTU_API_BASE_URL_PRODUCTION : UTU_API_BASE_URL_TEST;
+	            _provider = getProvider(); // @ts-ignore
 
-	            if (!(!((_window = window) !== null && _window !== void 0 && _window.ethereum) && !walletProvider)) {
-	              _context.next = 6;
+	            if (!(!_provider && !walletProvider)) {
+	              _context.next = 7;
 	              break;
 	            }
 
 	            return _context.abrupt("return", null);
 
-	          case 6:
+	          case 7:
 	            // @ts-ignore
-	            provider = new Web3Provider(walletProvider || window.ethereum);
+	            provider = new Web3Provider(walletProvider || _provider);
 	            signer = provider.getSigner();
-	            _context.next = 10;
+	            _context.next = 11;
 	            return signer.getAddress();
 
-	          case 10:
+	          case 11:
 	            address = _context.sent;
-	            _context.next = 13;
+	            _context.next = 14;
 	            return signer.signMessage("Sign in at UTU");
 
-	          case 13:
+	          case 14:
 	            signature = _context.sent;
-	            _context.next = 16;
+	            _context.next = 17;
 	            return axios.post("".concat(utuApiBase).concat(API_VERIFY_ADDRESS), {
 	              address: address,
 	              signature: signature
@@ -42265,16 +42374,16 @@
 	              withCredentials: !!cookies
 	            });
 
-	          case 16:
+	          case 17:
 	            _yield$axios$post = _context.sent;
 	            data = _yield$axios$post.data;
-	            _context.next = 20;
+	            _context.next = 21;
 	            return localStorage.setItem(LOCAL_STORAGE_KEY_UTU_IDENTITY_DATA, JSON.stringify(data));
 
-	          case 20:
+	          case 21:
 	            return _context.abrupt("return", data);
 
-	          case 22:
+	          case 23:
 	          case "end":
 	            return _context.stop();
 	        }
@@ -43619,7 +43728,7 @@
 	  }
 	});
 
-	var css_248z$n = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.utu-recommendation {\n  border-radius: 20px;\n  padding-right: 1rem;\n}\n.utu-recommendation-content {\n  display: flex;\n  margin-left: 5px;\n}\n.utu-recommendation-text {\n  align-self: center;\n  margin-left: 20px;\n}\n.utu-recommendation-text-light {\n  color: #000000;\n}\n.utu-recommendation-text-dark {\n  color: #ffffff;\n}\n\n.summary-image-list {\n  display: flex;\n  justify-content: center;\n  margin: 1.5rem 0 1rem 2rem;\n  padding-left: 0;\n  list-style: none;\n}\n.summary-image-item {\n  margin-left: -15px;\n  height: 2.5rem;\n}\n.summary-image-item-light {\n  border: 2px solid rgb(252, 229, 70);\n}\n.summary-image-item-dark {\n  border: 2px solid rgb(252, 229, 70);\n}";
+	var css_248z$n = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.utu-recommendation {\n  border-radius: 5px;\n  padding-right: 1rem;\n}\n.utu-recommendation-content {\n  display: flex;\n  margin-left: 5px;\n}\n.utu-recommendation-text {\n  align-self: center;\n  margin-left: 20px;\n}\n.utu-recommendation-text-light {\n  color: #000000;\n}\n.utu-recommendation-text-dark {\n  color: #ffffff;\n}\n\n.summary-image-list {\n  display: flex;\n  justify-content: center;\n  margin: 1.5rem 0 1rem 2rem;\n  padding-left: 0;\n  list-style: none;\n}\n.summary-image-item {\n  margin-left: -15px;\n  height: 2.5rem;\n}\n.summary-image-item-light {\n  border: 2px solid rgb(252, 229, 70);\n}\n.summary-image-item-dark {\n  border: 2px solid rgb(252, 229, 70);\n}";
 	styleInject(css_248z$n);
 
 	function getRoot(ref) {
@@ -43692,7 +43801,7 @@
 	  return h$2(BaseComponent, {
 	    style: css_248z$n,
 	    forwardedRef: ref,
-	    className: "utu-recommendation utu-section utu-section-no-border-".concat(envCondition)
+	    className: "utu-recommendation x-utu-section x-utu-section-no-border-".concat(envCondition)
 	  }, rankingItem && h$2(p$1, null, h$2("div", {
 	    className: "utu-recommendation-content"
 	  }, h$2("ul", {
@@ -43716,13 +43825,13 @@
 	  }, rankingItem.summaryText))));
 	}
 
-	var css_248z$m = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.utu-feedback-form {\n  display: flex;\n  flex-direction: column;\n  width: 100vw;\n  border-bottom: 15px rgb(252, 229, 70) solid;\n  z-index: 1;\n}\n.utu-feedback-form-popup {\n  padding: 0.5rem;\n  border-radius: 15px;\n}\n\n.desktop-view {\n  display: none;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-feedback-form {\n    border-bottom: 0px;\n    z-index: 1;\n    align-items: center;\n    height: 100%;\n  }\n  .mobile-view {\n    display: none;\n  }\n  .desktop-view {\n    display: flex;\n    width: 100%;\n    flex-direction: column;\n  }\n  .desktop-view-block-1 {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    padding: 0 4.5rem 0 4.5rem;\n  }\n  .desktop-view-block-1-dark {\n    background-color: #3d3d3c;\n  }\n  .desktop-view-block-1-light {\n    background-color: #fcf8e5;\n  }\n  .desktop-view-block-2 {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n  .desktop-view-block-2-dark {\n    background-color: #3d3d3c;\n  }\n  .desktop-view-block-2-light {\n    background-color: #fcf8e5;\n  }\n  .desktop-view-block-3 {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n  .desktop-view-block-3-dark {\n    background-color: rgb(36, 35, 35);\n  }\n  .desktop-view-block-3-light {\n    background-color: rgb(253, 253, 253);\n  }\n}\n.x-utu-form-badges {\n  text-align: center;\n}\n\n.x-utu-divider {\n  background-color: rgba(189, 195, 199, 0.3);\n  height: 90px;\n  width: 3px;\n}";
+	var css_248z$m = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.x-utu-feedback-form-popup {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 0.5rem;\n  border-radius: 5px;\n}\n\n.desktop-view {\n  display: none;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-feedback-form {\n    border-bottom: 0px;\n    z-index: 1;\n    align-items: center;\n    height: 100%;\n  }\n  .mobile-view {\n    display: none;\n  }\n  .desktop-view {\n    display: flex;\n    width: 100%;\n    flex-direction: column;\n  }\n  .desktop-view-block-1 {\n    width: 65%;\n    margin: auto;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    padding: 0 4.5rem 0 4.5rem;\n  }\n  .desktop-view-block-1-dark {\n    background-color: #3d3d3c;\n  }\n  .desktop-view-block-1-light {\n    background-color: #fcf8e5;\n  }\n  .desktop-view-block-2 {\n    width: 65%;\n    margin: auto;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n  .desktop-view-block-2-dark {\n    background-color: #3d3d3c;\n  }\n  .desktop-view-block-2-light {\n    background-color: #fcf8e5;\n  }\n  .desktop-view-block-3 {\n    width: 65%;\n    margin: auto;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n  .desktop-view-block-3-dark {\n    background-color: rgb(36, 35, 35);\n  }\n  .desktop-view-block-3-light {\n    background-color: rgb(253, 253, 253);\n  }\n}\n.x-utu-form-badges {\n  text-align: center;\n}\n\n.x-utu-divider {\n  background-color: rgba(189, 195, 199, 0.3);\n  height: 90px;\n  width: 3px;\n}\n\n.x-utu-feedback-form-Badges {\n  width: 65%;\n  min-height: 8rem;\n  margin: auto;\n  background-color: #fcf8e5;\n}";
 	styleInject(css_248z$m);
 
-	var css_248z$l = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\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.badge-set-container {\n  width: 6em;\n  height: 72px;\n}\n.badge-section {\n  display: flex;\n  overflow-x: scroll;\n  white-space: nowrap;\n  padding-top: 2rem;\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n.badge-section > div {\n  padding: 1rem;\n}\n.badge-disable {\n  height: 50px;\n  width: 50px;\n  opacity: 0.6;\n}\n.badge-item-text {\n  justify-content: center;\n  align-items: center;\n  color: white;\n}\n.badge-text {\n  font-size: 0.7rem;\n}\n.badge-text-h3 {\n  text-align: center;\n}\n.badge-text-h3-light {\n  color: #000000;\n}\n.badge-text-h3-dark {\n  color: #ffffff;\n}\n.badge-img {\n  width: 4rem;\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n}\n.badge-img-container {\n  display: flex;\n  justify-content: space-around;\n  opacity: 1;\n}\n.badge-img-big {\n  width: 6rem;\n}\n.badge-img-big-section {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n}\n\n.badge-set-container {\n  padding: 1rem 1rem 1rem 0;\n}\n\n.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\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .badge-section {\n    padding-left: 2rem;\n    padding-right: 0;\n  }\n}\n@media only screen and (min-width: 1210px) {\n  .badge-section {\n    padding-top: 0;\n  }\n}";
+	var css_248z$l = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\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}\n.x-utu-badge-section > div {\n  padding: 1rem;\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}";
 	styleInject(css_248z$l);
 
-	var css_248z$k = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}";
+	var css_248z$k = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}";
 	styleInject(css_248z$k);
 
 	/* eslint max-len: 0 */
@@ -44489,11 +44598,11 @@
 	  }
 	}
 
-	var _excluded = ["id", "badges", "image"];
+	var _excluded = ["id", "value", "image"];
 	// export default function BadgeSet({ id, badges, ...props } : BadgeSetProps) {
 	function BadgeSet(_ref) {
 	  var id = _ref.id,
-	      badges = _ref.badges,
+	      value = _ref.value,
 	      image = _ref.image,
 	      props = _objectWithoutProperties(_ref, _excluded);
 
@@ -44515,6 +44624,7 @@
 	  var walletAddress = q$1(WalletAddressContext);
 
 	  if (props[ATTR_SOURCE_UUID] === "address") {
+	    // eslint-disable-next-line no-param-reassign
 	    props[ATTR_SOURCE_UUID] = walletAddress;
 	  }
 
@@ -44532,27 +44642,27 @@
 	  return h$2(BaseComponent, {
 	    style: css_248z$l
 	  }, h$2("section", {
-	    className: "px-4 py-3 badge-set-section"
+	    className: "x-utu-badge-set-section"
 	  }, h$2("div", {
-	    className: "badge-img-big-section"
+	    className: "x-utu-badge-img-big-section"
 	  }, h$2("img", {
 	    src: image,
-	    className: "badge-img-big",
+	    className: "x-utu-badge-img-big",
 	    alt: "badges"
 	  })), h$2("div", {
 	    key: id,
-	    className: "badge-set-container"
+	    className: "x-utu-badge-set-container"
 	  }, h$2("h3", {
-	    className: "text-left badge-text-h3 badge-text-h3-".concat(isDark ? "dark" : "light")
+	    className: "text-left x-utu-badge-text-h3 x-utu-badge-text-h3-".concat(isDark ? "dark" : "light")
 	  }, id), h$2(SubmitStatusView, {
 	    submitStatus: submitStatus
 	  }, h$2("div", {
-	    className: "badge-img-container"
-	  }, badges.map(function (_ref2) {
+	    className: "x-utu-badge-img-container"
+	  }, value === undefined ? h$2("div", null) : value.map(function (_ref2) {
 	    var qualifier = _ref2.qualifier,
-	        data = _ref2.data;
+	        badge = _ref2.badge;
 	    return h$2("button", {
-	      className: "icon-btn ".concat(isSelected(qualifier) ? "badge-img" : "badge-disable"),
+	      className: "x-utu-btn-icon ".concat(isSelected(qualifier) ? "x-utu-badge-img" : "x-utu-badge-disable"),
 	      type: "button",
 	      onClick: function onClick() {
 	        var qualifierToSet = isSelected(qualifier) ? "neutral" : qualifier;
@@ -44562,10 +44672,10 @@
 	        setSelectedQualifier(qualifierToSet);
 	      }
 	    }, h$2("div", {
-	      className: "badge-item-text"
+	      className: "x-utu-badge-item-text"
 	    }, h$2("img", {
-	      src: data.image,
-	      className: "badge-img",
+	      src: badge.image,
+	      className: "x-utu-badge-img",
 	      alt: "badges"
 	    })));
 	  }))))));
@@ -44589,25 +44699,23 @@
 	  }
 
 	  return h$2(BaseComponent, {
-	    className: "utu-section-no-border-".concat(isDark ? "dark" : "light"),
+	    className: "x-utu-section-no-border-".concat(isDark ? "dark" : "light"),
 	    excludeBootstrap: true,
 	    excludeFonts: true
-	  }, h$2("div", {
-	    className: "d-flex justify-content-center ml-5"
 	  }, h$2("div", null, h$2("h3", {
-	    className: "mx-5"
+	    className: "x-utu-badge-section-title px-5"
 	  }, "Award Badges"), h$2("div", {
-	    className: "badge-section"
+	    className: "x-utu-badge-section"
 	  }, badgeSets.map(function (_ref) {
 	    var id = _ref.id,
-	        badges = _ref.badges,
+	        value = _ref.value,
 	        image = _ref.image;
 	    return h$2(BadgeSet, _extends$1({}, props, {
 	      id: id,
 	      image: image,
-	      badges: badges
+	      value: value
 	    }));
-	  })))));
+	  }))));
 	}
 
 	function S(n,t){for(var e in t)n[e]=t[e];return n}function g(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function C(n){this.props=n;}(C.prototype=new d$2).isPureReactComponent=!0,C.prototype.shouldComponentUpdate=function(n,t){return g(this.props,n)||g(this.state,t)};var w=l$3.__b;l$3.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),w&&w(n);};var A=l$3.__e;l$3.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);A(n,t,e,r);};var O=l$3.unmount;function T(){this.__u=0,this.t=null,this.__b=null;}function L(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function D(){this.u=null,this.o=null;}l$3.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),O&&O(n);},(T.prototype=new d$2).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=L(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__a){var n=r.state.__a;r.__v.__k[0]=function n(t,e,r){return t&&(t.__v=null,t.__k=t.__k&&t.__k.map(function(t){return n(t,e,r)}),t.__c&&t.__c.__P===e&&(t.__e&&r.insertBefore(t.__e,t.__d),t.__c.__e=!0,t.__c.__P=r)),t}(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate();}},c=!0===t.__h;r.__u++||c||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i);},T.prototype.componentWillUnmount=function(){this.t=[];},T.prototype.render=function(n,t){if(this.__b){if(this.__v.__k){var e=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function n(t,e,r){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),t.__c.__H=null),null!=(t=S({},t)).__c&&(t.__c.__P===r&&(t.__c.__P=e),t.__c=null),t.__k=t.__k&&t.__k.map(function(t){return n(t,e,r)})),t}(this.__b,e,r.__O=r.__P);}this.__b=null;}var u=t.__a&&h$2(p$1,null,n.fallback);return u&&(u.__h=null),[h$2(p$1,null,t.__a?null:n.children),u]};var F=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};(D.prototype=new d$2).__a=function(n){var t=this,e=L(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),F(t,n,r)):u();};e?e(o):o();}},D.prototype.render=function(n){this.u=null,this.o=new Map;var t=x$1(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},D.prototype.componentDidUpdate=D.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){F(n,e,t);});};var W="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,P=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,$="undefined"!=typeof document,j$1=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/i:/fil|che|ra/i).test(n)};d$2.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(n){Object.defineProperty(d$2.prototype,n,{configurable:!0,get:function(){return this["UNSAFE_"+n]},set:function(t){Object.defineProperty(this,n,{configurable:!0,writable:!0,value:t});}});});var H=l$3.event;function Z(){}function Y(){return this.cancelBubble}function q(){return this.defaultPrevented}l$3.event=function(n){return H&&(n=H(n)),n.persist=Z,n.isPropagationStopped=Y,n.isDefaultPrevented=q,n.nativeEvent=n};var J={configurable:!0,get:function(){return this.class}},K=l$3.vnode;l$3.vnode=function(n){var t=n.type,e=n.props,r=e;if("string"==typeof t){var u=-1===t.indexOf("-");for(var o in r={},e){var i=e[o];$&&"children"===o&&"noscript"===t||"value"===o&&"defaultValue"in e&&null==i||("defaultValue"===o&&"value"in e&&null==e.value?o="value":"download"===o&&!0===i?i="":/ondoubleclick/i.test(o)?o="ondblclick":/^onchange(textarea|input)/i.test(o+t)&&!j$1(e.type)?o="oninput":/^onfocus$/i.test(o)?o="onfocusin":/^onblur$/i.test(o)?o="onfocusout":/^on(Ani|Tra|Tou|BeforeInp|Compo)/.test(o)?o=o.toLowerCase():u&&P.test(o)?o=o.replace(/[A-Z0-9]/g,"-$&").toLowerCase():null===i&&(i=void 0),/^oninput$/i.test(o)&&(o=o.toLowerCase(),r[o]&&(o="oninputCapture")),r[o]=i);}"select"==t&&r.multiple&&Array.isArray(r.value)&&(r.value=x$1(e.children).forEach(function(n){n.props.selected=-1!=r.value.indexOf(n.props.value);})),"select"==t&&null!=r.defaultValue&&(r.value=x$1(e.children).forEach(function(n){n.props.selected=r.multiple?-1!=r.defaultValue.indexOf(n.props.value):r.defaultValue==n.props.value;})),n.props=r,e.class!=e.className&&(J.enumerable="className"in e,null!=e.className&&(r.class=e.className),Object.defineProperty(r,"className",J));}n.$$typeof=W,K&&K(n);};var Q=l$3.__r;l$3.__r=function(n){Q&&Q(n),n.__c;};function en(n){return !!n&&n.$$typeof===W}
@@ -46146,7 +46254,7 @@
 	const FormContext = B(null);
 	FormContext.displayName = 'RHFContext';
 
-	var css_248z$j = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.text-area {\n  width: 100%;\n  border-radius: 10px 10px 0 0;\n}\n.text-input-section {\n  width: 100%;\n}\n.text-input-form {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem 2.5rem 2rem;\n  justify-content: center;\n  align-items: center;\n  width: 100vw;\n}\n.text-input-btn {\n  border-radius: 0 0 10px 10px;\n  width: 80vw;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .text-area {\n    width: 90%;\n  }\n  .text-input-form {\n    padding: 2rem 2.5rem;\n    width: 60vw;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .text-input-btn {\n    width: 90%;\n  }\n}\n.x-utu-feedback-text-space {\n  margin-right: 80%;\n}";
+	var css_248z$j = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.x-utu-feedback-text-space {\n  align-self: start;\n}\n.x-utu-feedback-text-area {\n  padding: 5px;\n  height: 8rem;\n  width: 100%;\n  border-radius: 10px 10px 0 0;\n  border: 0;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n.x-utu-feedback-text-input-section {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n.x-utu-feedback-text-input-form {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem 2.5rem 1rem;\n  justify-content: center;\n  align-items: center;\n  width: 100vw;\n}\n.x-utu-feedback-text-input-btn {\n  border-radius: 0 0 10px 10px;\n  width: 100%;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-feedback-text-area {\n    width: 100%;\n    min-height: 10rem;\n  }\n  .x-utu-feedback-text-input-form {\n    padding: 2rem 2.5rem;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .x-utu-feedback-text-input-btn {\n    width: 100%;\n  }\n}";
 	styleInject(css_248z$j);
 
 	/* eslint-disable no-nested-ternary */
@@ -46178,18 +46286,17 @@
 	  }
 
 	  return h$2(BaseComponent, {
-	    style: css_248z$j // className={`text-input-form utu-section-no-border-${envCondition}`} 
-	    ,
-	    className: "d-flex justify-content-center text-input-section utu-section utu-section-no-border-".concat(envCondition),
+	    style: css_248z$j,
+	    className: "x-utu-feedback-text-input-section x-utu-section x-utu-section-no-border-".concat(envCondition),
 	    excludeBootstrap: true,
 	    excludeFonts: true
 	  }, h$2("form", {
 	    onSubmit: handleSubmit(onSubmit),
-	    className: "text-input-form"
+	    className: "x-utu-feedback-text-input-form"
 	  }, h$2("h3", {
 	    className: "x-utu-feedback-text-space"
 	  }, "Text Review"), h$2("textarea", {
-	    className: "text-area text-area-".concat(envCondition),
+	    className: "x-utu-feedback-text-area x-utu-feedback-text-area-".concat(envCondition),
 	    ref: register({
 	      required: true,
 	      minLength: minLength
@@ -46204,7 +46311,7 @@
 	    style: {
 	      backgroundColor: props[ATTR_BTN_COLOR] === undefined ? null : "".concat(props[ATTR_BTN_COLOR])
 	    },
-	    className: "text-input-btn btn btn-".concat(envCondition),
+	    className: "x-utu-feedback-text-input-btn x-utu-btn x-utu-btn-".concat(envCondition),
 	    type: "submit"
 	  }, "Submit text review"))));
 	}
@@ -47329,182 +47436,78 @@
 		}
 	];
 
-	var css_248z$i = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.endor-input-form {\n  display: flex;\n  flex-direction: row;\n  justify-items: center;\n  justify-content: center;\n  align-items: center;\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n.endor-input-form-text-area {\n  height: 3rem;\n  width: 100%;\n  margin-right: 1rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.8rem;\n  align-items: center;\n  align-content: center;\n  background-color: #fcf8e5;\n  overflow: hidden;\n}\n.endor-input-section {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem 2rem;\n  width: 100%;\n}\n.endor-text {\n  font-size: 1.5rem;\n}\n.endor-text-light {\n  color: black;\n}\n.endor-text-dark {\n  color: white;\n}\n.endor-text-area {\n  display: flex;\n  flex-direction: row;\n}\n.endor-text-info {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgb(252, 229, 70);\n  width: 1rem;\n  height: 1rem;\n  margin-left: 1rem;\n  font-size: 0.8rem;\n  border-radius: 50%;\n  cursor: pointer;\n  margin-left: 0.5rem;\n  transition-timing-function: ease-in-out;\n  transition-duration: 2s;\n  transition: width 2s, height 4s;\n}\n.endor-text-body {\n  font-size: 1rem;\n}\n.endor-text-title {\n  font-size: 1rem;\n}\n.endor-btn {\n  border-radius: 10px;\n}\n\n.endor-utt-balance {\n  display: flex;\n  box-sizing: border-box;\n  width: 10rem;\n  height: 4rem;\n  border-radius: 5px 30px 30px 5px;\n  background-color: rgb(252, 229, 70);\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .endor-input-section {\n    padding-left: 0;\n    padding-right: 0;\n  }\n  .endor-input-form {\n    width: 40%;\n    padding: 2rem;\n  }\n  .endor-input-form-text-area {\n    background-color: rgb(253, 253, 253);\n    font-size: 1rem;\n  }\n  .endor-input-form-section {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n  }\n  .endor-text {\n    padding: 2rem;\n    width: 40%;\n  }\n  .endor-text-info {\n    font-size: 1rem;\n  }\n}\n@media only screen and (min-width: 830px) {\n  .endor-input-form-text-area {\n    font-size: 1rem;\n  }\n}\n.utt-balance-logo {\n  justify-items: center;\n  height: 4rem;\n  width: 4rem;\n}\n\n.x-utu-utt-heading-text {\n  margin-top: 7%;\n}";
+	var css_248z$i = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.endor-input-form {\n  display: flex;\n  flex-direction: row;\n  justify-items: center;\n  justify-content: center;\n  align-items: center;\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n.endor-input-form-text-area {\n  height: 3rem;\n  width: 100%;\n  margin-right: 1rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.8rem;\n  align-items: center;\n  align-content: center;\n  background-color: #fcf8e5;\n  overflow: hidden;\n}\n.endor-input-section {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem 2rem;\n  width: 100%;\n}\n.endor-text {\n  font-size: 1.5rem;\n}\n.endor-text-light {\n  color: black;\n}\n.endor-text-dark {\n  color: white;\n}\n.endor-text-area {\n  display: flex;\n  flex-direction: row;\n}\n.endor-text-info {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgb(252, 229, 70);\n  width: 1rem;\n  height: 1rem;\n  margin-left: 1rem;\n  font-size: 0.8rem;\n  border-radius: 50%;\n  cursor: pointer;\n  margin-left: 0.5rem;\n  transition-timing-function: ease-in-out;\n  transition-duration: 2s;\n  transition: width 2s, height 4s;\n}\n.endor-text-body {\n  font-size: 0.8rem;\n}\n.endor-text-title {\n  font-size: 0.8rem;\n}\n.endor-btn {\n  border-radius: 10px;\n}\n\n.endor-utt-balance {\n  margin-bottom: 2rem;\n  display: flex;\n  display: flex;\n  box-sizing: border-box;\n  width: 10rem;\n  height: 4rem;\n  border-radius: 5px 30px 30px 5px;\n  background-color: rgb(252, 229, 70);\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .endor-input-section {\n    padding-left: 0;\n    padding-right: 0;\n  }\n  .endor-input-form {\n    width: 40%;\n    padding: 2rem;\n  }\n  .endor-input-form-text-area {\n    background-color: rgb(253, 253, 253);\n    font-size: 1rem;\n  }\n  .endor-input-form-section {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n  }\n  .endor-text {\n    padding: 2rem;\n    width: 40%;\n  }\n  .endor-text-info {\n    font-size: 1rem;\n  }\n}\n@media only screen and (min-width: 830px) {\n  .endor-text-body {\n    font-size: 1rem;\n  }\n  .endor-text-title {\n    font-size: 1rem;\n  }\n  .endor-input-form-text-area {\n    font-size: 1rem;\n  }\n}\n.utt-balance-logo {\n  justify-items: center;\n  height: 4rem;\n  width: 4rem;\n}\n\n.x-utu-utt-heading-text {\n  margin-top: 7%;\n  text-align: center;\n}";
 	styleInject(css_248z$i);
 
-	var _SWITCH_CHAIN_PARAMS, _ADD_CHAIN_PARAMS, _UTT_CONTRACT_ADDRESS;
-	/**
-	 * Parameter interface definition for wallet_addEthereumChain
-	 * Copied from https://docs.metamask.io/guide/rpc-api.html#unrestricted-methods
-	 */
-
-	/**
-	 * Convers a number to a 0x-prefixed hexadecimal string
-	 * @param n
-	 */
-	function toHexString(n) {
-	  return hexStripZeros(hexlify(n));
-	}
-
-	var SWITCH_CHAIN_PARAMS = (_SWITCH_CHAIN_PARAMS = {}, _defineProperty$2(_SWITCH_CHAIN_PARAMS, NETWORK_NAME.polygon_mainnet, {
-	  chainId: toHexString(137)
-	}), _defineProperty$2(_SWITCH_CHAIN_PARAMS, NETWORK_NAME.polygon_mumbai, {
-	  chainId: toHexString(80001)
-	}), _SWITCH_CHAIN_PARAMS);
-	var ADD_CHAIN_PARAMS = (_ADD_CHAIN_PARAMS = {}, _defineProperty$2(_ADD_CHAIN_PARAMS, NETWORK_NAME.polygon_mainnet, {
-	  chainId: SWITCH_CHAIN_PARAMS[NETWORK_NAME.polygon_mainnet].chainId,
-	  chainName: "Polygon",
-	  nativeCurrency: {
-	    name: "MATIC",
-	    symbol: "MATIC",
-	    decimals: 18
-	  },
-	  rpcUrls: ["https://polygon-rpc.com"],
-	  blockExplorerUrls: ["https://polygonscan.com"]
-	}), _defineProperty$2(_ADD_CHAIN_PARAMS, NETWORK_NAME.polygon_mumbai, {
-	  chainId: SWITCH_CHAIN_PARAMS[NETWORK_NAME.polygon_mumbai].chainId,
-	  chainName: "Mumbai",
-	  nativeCurrency: {
-	    name: "MATIC",
-	    symbol: "MATIC",
-	    decimals: 18
-	  },
-	  rpcUrls: ["https://rpc-mumbai.maticvigil.com"],
-	  blockExplorerUrls: ["https://mumbai.polygonscan.com"]
-	}), _ADD_CHAIN_PARAMS);
-	var UTT_CONTRACT_ADDRESS = (_UTT_CONTRACT_ADDRESS = {}, _defineProperty$2(_UTT_CONTRACT_ADDRESS, NETWORK_NAME.polygon_mainnet, "0xbA6de5f4a98d2AEbb289d1136194D05Ee24C426f"), _defineProperty$2(_UTT_CONTRACT_ADDRESS, NETWORK_NAME.polygon_mumbai, "0x19bc90FfBDCaD53c48eF0b08A67B0D2563AEE2a8"), _UTT_CONTRACT_ADDRESS);
-	function addNetwork(_x, _x2) {
-	  return _addNetwork.apply(this, arguments);
-	}
-
-	function _addNetwork() {
-	  _addNetwork = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(provider, networkName) {
-	    var network;
-	    return _regeneratorRuntime().wrap(function _callee$(_context) {
-	      while (1) {
-	        switch (_context.prev = _context.next) {
-	          case 0:
-	            network = ADD_CHAIN_PARAMS[networkName];
-	            _context.next = 3;
-	            return provider.request({
-	              method: "wallet_addEthereumChain",
-	              params: [network]
-	            });
-
-	          case 3:
-	          case "end":
-	            return _context.stop();
-	        }
-	      }
-	    }, _callee);
-	  }));
-	  return _addNetwork.apply(this, arguments);
-	}
-
-	function requestNetworkChange(_x3, _x4) {
-	  return _requestNetworkChange.apply(this, arguments);
-	}
-
-	function _requestNetworkChange() {
-	  _requestNetworkChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(provider, networkName) {
-	    var network;
-	    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-	      while (1) {
-	        switch (_context2.prev = _context2.next) {
-	          case 0:
-	            network = SWITCH_CHAIN_PARAMS[networkName];
-	            _context2.next = 3;
-	            return provider.request({
-	              method: "wallet_switchEthereumChain",
-	              params: [network]
-	            });
-
-	          case 3:
-	          case "end":
-	            return _context2.stop();
-	        }
-	      }
-	    }, _callee2);
-	  }));
-	  return _requestNetworkChange.apply(this, arguments);
-	}
-
-	function getDefaultNetworkName() {
-	  return config.production ? NETWORK_NAME.polygon_mainnet : NETWORK_NAME.polygon_mumbai;
-	}
-	function getUTTContractAddress(networkName) {
-	  return UTT_CONTRACT_ADDRESS[networkName];
-	}
-
-	var css_248z$h = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.utt_balance {\n  width: 100%;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  background-color: rgb(252, 229, 70);\n}";
+	var css_248z$h = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.x-utu-utt-balance {\n  width: 100%;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  background-color: rgb(252, 229, 70);\n  margin-top: 0.25rem;\n}";
 	styleInject(css_248z$h);
 
 	function UttBalance() {
-	  var _useWalletConnectApi = useWalletConnectApi(),
-	      web3Modal = _useWalletConnectApi.web3Modal;
-
 	  var _useState = p(0),
 	      _useState2 = _slicedToArray(_useState, 2),
 	      UTTWalletState = _useState2[0],
 	      setUTTWalletState = _useState2[1];
 
-	  h$1(function () {
-	    var getProvider = /*#__PURE__*/function () {
-	      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-	        var provider, network, ethersProvider, userAddress, getContract, walletUTTBalance, UTTBalance;
-	        return _regeneratorRuntime().wrap(function _callee$(_context) {
-	          while (1) {
-	            switch (_context.prev = _context.next) {
-	              case 0:
-	                _context.next = 2;
-	                return web3Modal.connect();
-
-	              case 2:
-	                provider = _context.sent;
-	                network = getNetwork();
-	                _context.next = 6;
-	                return requestNetworkChange(provider, network);
+	  var fetchBalance = /*#__PURE__*/function () {
+	    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+	      var provider, network, ethersProvider, userAddress, getContract, walletUTTBalance, UTTBalance;
+	      return _regeneratorRuntime().wrap(function _callee$(_context) {
+	        while (1) {
+	          switch (_context.prev = _context.next) {
+	            case 0:
+	              _context.prev = 0;
+	              _context.next = 3;
+	              return getProvider();
 
-	              case 6:
-	                ethersProvider = new Web3Provider(provider);
-	                _context.next = 9;
-	                return ethersProvider.getSigner().getAddress();
+	            case 3:
+	              provider = _context.sent;
+	              network = getDefaultNetworkName();
+	              _context.next = 7;
+	              return requestNetworkChange(provider, network);
 
-	              case 9:
-	                userAddress = _context.sent;
-	                getContract = new Contract(UTT_CONTRACT_ADDRESS_TEST, abi, ethersProvider);
-	                _context.next = 13;
-	                return getContract.balanceOf(userAddress);
+	            case 7:
+	              ethersProvider = new Web3Provider(provider);
+	              _context.next = 10;
+	              return ethersProvider.getSigner().getAddress();
 
-	              case 13:
-	                walletUTTBalance = _context.sent;
-	                UTTBalance = Number(formatUnits(walletUTTBalance, 0) || 0);
-	                console.log("walletUTTBalance", UTTBalance);
-	                setUTTWalletState(UTTBalance);
+	            case 10:
+	              userAddress = _context.sent;
+	              getContract = new Contract(UTT_CONTRACT_ADDRESS_TEST, abi, ethersProvider);
+	              _context.next = 14;
+	              return getContract.balanceOf(userAddress);
 
-	              case 17:
-	              case "end":
-	                return _context.stop();
-	            }
-	          }
-	        }, _callee);
-	      }));
+	            case 14:
+	              walletUTTBalance = _context.sent;
+	              UTTBalance = Number(formatUnits(walletUTTBalance, 0) || 0);
+	              setUTTWalletState(UTTBalance);
+	              _context.next = 23;
+	              break;
 
-	      return function getProvider() {
-	        return _ref.apply(this, arguments);
-	      };
-	    }();
+	            case 19:
+	              _context.prev = 19;
+	              _context.t0 = _context["catch"](0);
+	              console.error(_context.t0);
+	              setUTTWalletState(0);
 
-	    getProvider().catch(console.error);
-	  });
+	            case 23:
+	            case "end":
+	              return _context.stop();
+	          }
+	        }
+	      }, _callee, null, [[0, 19]]);
+	    }));
 
-	  function getNetwork() {
-	    return getDefaultNetworkName();
-	  }
+	    return function fetchBalance() {
+	      return _ref.apply(this, arguments);
+	    };
+	  }();
 
+	  h$1(function () {
+	    fetchBalance();
+	  }, []);
 	  return h$2(BaseComponent, {
 	    style: css_248z$h,
-	    className: "my-1 utt_balance"
+	    className: "utt_balance"
 	  }, h$2("h3", null, UTTWalletState));
 	}
 
@@ -47807,7 +47810,7 @@
 
 	  return h$2(BaseComponent, {
 	    style: css_248z$i,
-	    className: "endor-input-section utu-section utu-section-no-border-".concat(envCondition),
+	    className: "endor-input-section x-utu-section x-utu-section-no-border-".concat(envCondition),
 	    excludeBootstrap: true,
 	    excludeFonts: true
 	  }, h$2("section", {
@@ -47854,7 +47857,7 @@
 	    style: {
 	      backgroundColor: props[ATTR_BTN_COLOR] === undefined ? null : "".concat(props[ATTR_BTN_COLOR])
 	    },
-	    className: "endor-btn btn btn-".concat(envCondition),
+	    className: "endor-btn x-utu-btn x-utu-btn-".concat(envCondition),
 	    type: "submit"
 	  }, "Endorse")))));
 	}
@@ -50303,7 +50306,7 @@
 	};
 	var _default = ReactStars;
 
-	var css_248z$g = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.star-rating-section {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n  width: 170px;\n}\n\n.utu-star-rating-text {\n  font-size: 1rem;\n  font-weight: bold;\n  color: rgb(252, 229, 70);\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .star-rating-section {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n    padding-left: 1rem;\n    width: 170px;\n  }\n}";
+	var css_248z$g = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.star-rating-section {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n  width: 170px;\n}\n\n.utu-star-rating-text {\n  font-size: 1rem;\n  font-weight: bold;\n  color: rgb(252, 229, 70);\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .star-rating-section {\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n    padding-left: 1rem;\n    width: 170px;\n  }\n}";
 	styleInject(css_248z$g);
 
 	function StarRatingInput(props) {
@@ -50344,7 +50347,7 @@
 
 	  return h$2(BaseComponent, {
 	    style: css_248z$g,
-	    className: "star-rating-section utu-section utu-section-".concat(isDark ? "dark" : "light"),
+	    className: "star-rating-section x-utu-section x-utu-section-".concat(isDark ? "dark" : "light"),
 	    excludeBootstrap: true,
 	    excludeFonts: true
 	  }, h$2(SubmitStatusView, {
@@ -58301,7 +58304,7 @@
 
 	var e=0;function t(t){return "__private_"+e+++"_"+t}function i(e,t){if(!Object.prototype.hasOwnProperty.call(e,t))throw new TypeError("attempted to use private field on non-instance");return e}var r=function(e){this.value=e;},n=t("head"),o=t("end"),u=function(){function e(){Object.defineProperty(this,n,{writable:!0,value:void 0}),Object.defineProperty(this,o,{writable:!0,value:void 0});}var t=e.prototype;return t.enqueue=function(e){var t=new r(e);i(this,o)[o]?(i(this,o)[o].next=t,i(this,o)[o]=t):i(this,n)[n]=i(this,o)[o]=t;},t.dequeue=function(){var e=i(this,n)[n];return i(this,n)[n]=null==e?void 0:e.next,i(this,n)[n]||(i(this,o)[o]=void 0),null==e?void 0:e.value},e}();function s(e){return {done:!1,value:e}}var h={done:!0},a=t("chunkQueue"),l=t("resolveQueue"),v=t("isInProgress"),c=t("isLocked"),d=function(){function e(){Object.defineProperty(this,a,{writable:!0,value:void 0}),Object.defineProperty(this,l,{writable:!0,value:void 0}),Object.defineProperty(this,v,{writable:!0,value:void 0}),Object.defineProperty(this,c,{writable:!0,value:void 0}),this.url=null,i(this,a)[a]=new u,i(this,l)[l]=new u,i(this,v)[v]=!0,i(this,c)[c]=!1;}var t=e.prototype;return t.setUrl=function(e){this.url=e;},t.setBlobProperties=function(e){this.blobProperties=e;},t.storeChunk=function(e){i(this,v)[v]=!0;var t=i(this,l)[l].dequeue();t?t(s(e)):i(this,a)[a].enqueue(e);},t.stop=function(){i(this,v)[v]=!1;},t.reset=function(){i(this,v)[v]=!0,i(this,a)[a]=new u,i(this,l)[l]=new u,i(this,c)[c]=!1;},t.getUrl=function(){return this.url},t.getBlob=function(){},t.getReader=function(){if(i(this,c)[c])throw new Error("ReadableStorage is locked.");i(this,c)[c]=!0;var e=this;return {read:function(){var t=i(e,a)[a].dequeue();return t?Promise.resolve(s(t)):i(e,v)[v]?new Promise(function(t){return i(e,l)[l].enqueue(t)}):Promise.resolve(h)}}},e}();
 
-	var css_248z$f = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.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.popup-container {\n  z-index: 1001;\n  width: 100%;\n}\n.popup-container-dark {\n  background: rgb(36, 35, 35);\n}\n.popup-container-light {\n  background: rgb(253, 253, 253);\n}\n.popup .icon-btn-popup {\n  padding: 10px;\n  font-size: 1.2em;\n  border: none;\n  background: none;\n}\n.popup .icon-btn-popup.btn-overlay {\n  z-index: 1001;\n}\n.popup .icon-btn-popup-light {\n  color: #000000;\n}\n.popup .icon-btn-popup-dark {\n  color: #ffffff;\n}\n.popup .background {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  background-color: rgba(229, 229, 229, 0.95);\n  min-width: 100%;\n  min-height: 100%;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .popup {\n    min-width: 100%;\n    min-height: 100%;\n  }\n  .popup-container {\n    align-items: center;\n    min-width: 100%;\n    min-height: 100%;\n  }\n  .popup-container-content {\n    align-items: center;\n    margin-top: 4%;\n  }\n}";
+	var css_248z$f = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\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: 100%;\n  }\n  .x-utu-popup-container-content {\n    align-items: center;\n    margin-top: 4%;\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$f);
 
 	function PopUp(_ref) {
@@ -58314,8 +58317,7 @@
 	  var _useState = p(false),
 	      _useState2 = _slicedToArray(_useState, 2),
 	      isDark = _useState2[0],
-	      setIsDark = _useState2[1]; // const [isDark, setIsDark] = useState(false);
-
+	      setIsDark = _useState2[1];
 
 	  if (themeColor === "dark") {
 	    setIsDark(true);
@@ -58325,22 +58327,22 @@
 	  var envCondition = isDark ? "dark" : "light";
 	  return h$2(BaseComponent, {
 	    style: css_248z$f,
-	    className: "popup"
+	    className: "x-utu-popup"
 	  }, h$2("div", {
-	    className: "popup-container popup-container-".concat(envCondition)
+	    className: "x-utu-popup-container x-utu-popup-container-".concat(envCondition)
 	  }, h$2("div", {
-	    className: "popup-container-content d-flex justify-content-center"
+	    className: "x-utu-popup-container-content"
 	  }, h$2("button", {
 	    type: "button",
-	    className: "icon-btn-popup icon-btn-popup-".concat(envCondition, " ").concat(closeButtonOverlay && "btn-overlay"),
+	    className: "x-utu-popup-icon-btn x-utu-popup-icon-btn-".concat(envCondition, " ").concat(closeButtonOverlay && "x-utu-popup-icon-btn-overlay"),
 	    onClick: onClose
 	  }, "\xD7")), children), h$2("div", {
 	    onClick: onClose,
-	    className: "background"
+	    className: "x-utu-popup-background"
 	  }));
 	}
 
-	var css_248z$e = "@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\n.trust-video {\n  border: none;\n  width: 100%;\n  height: auto;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-wrapper {\n  width: 100%;\n  margin-top: -80%;\n  align-items: center;\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  width: 100%;\n  margin-top: 35%;\n  transform: translate(0, -50%);\n  padding-left: 36px;\n  border-radius: 10px;\n  height: 4em;\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  font-size: 3em;\n  margin: auto;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  padding: 0;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  border-radius: 50%;\n  font: normal normal normal 18px/1 FontAwesome;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 2em;\n  height: 1.5em;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-volume:before {\n  content: \"\\f028\";\n}\n.trust-video-volume.off:before {\n  content: \"\\f026\";\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 2.5rem;\n  width: 3em;\n  border-radius: 20%;\n  height: 2.5rem;\n  margin-right: 5%;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n.trust-video-fullscreen:before {\n  content: \"\\f065\";\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .trust-video-wrapper {\n    margin-top: 20%;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .trust-video {\n    border: none;\n    width: 70%;\n  }\n}";
+	var css_248z$e = "@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\n.video-msg {\n  position: absolute;\n}\n\n.trust-video {\n  border: none;\n  width: 100%;\n  height: auto;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-wrapper {\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  align-items: center;\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  width: 100%;\n  margin-top: 35%;\n  transform: translate(0, -50%);\n  padding-left: 36px;\n  border-radius: 10px;\n  height: 4em;\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  font-size: 3em;\n  margin: auto;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  padding: 0;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  border-radius: 50%;\n  font: normal normal normal 18px/1 FontAwesome;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 2em;\n  height: 1.5em;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-volume:before {\n  content: \"\\f028\";\n}\n.trust-video-volume.off:before {\n  content: \"\\f026\";\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 2.5rem;\n  width: 3em;\n  border-radius: 20%;\n  height: 2.5rem;\n  margin-right: 5%;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n.trust-video-fullscreen:before {\n  content: \"\\f065\";\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .trust-video-wrapper {\n    margin-top: -3rem;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .trust-video {\n    border: none;\n  }\n}";
 	styleInject(css_248z$e);
 
 	var Player = (function (videoUrl, preview, previewStream) {
@@ -58502,7 +58504,7 @@
 	  };
 
 	  return h$2("div", {
-	    className: "d-flex justify-content-center mt-4 trust-video-wrapper"
+	    className: "trust-video-wrapper"
 	  }, h$2(VideoSrc, null), h$2("div", {
 	    className: "trust-video-controls ".concat(controlsVisible && "show")
 	  }, h$2("button", {
@@ -58597,7 +58599,7 @@
 	  }))));
 	}
 
-	var css_248z$c = "@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\nbody {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.trust-video {\n  border: none;\n  width: 100%;\n  height: auto;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-wrapper {\n  width: 100%;\n  margin-top: -80%;\n  align-items: center;\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  width: 100%;\n  margin-top: 35%;\n  transform: translate(0, -50%);\n  padding-left: 36px;\n  border-radius: 10px;\n  height: 4em;\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  font-size: 3em;\n  margin: auto;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  padding: 0;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  border-radius: 50%;\n  font: normal normal normal 18px/1 FontAwesome;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 2em;\n  height: 1.5em;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-volume:before {\n  content: \"\\f028\";\n}\n.trust-video-volume.off:before {\n  content: \"\\f026\";\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 2.5rem;\n  width: 3em;\n  border-radius: 20%;\n  height: 2.5rem;\n  margin-right: 5%;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n.trust-video-fullscreen:before {\n  content: \"\\f065\";\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .trust-video-wrapper {\n    margin-top: 20%;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .trust-video {\n    border: none;\n    width: 70%;\n  }\n}\n.utu-screen-recording {\n  width: 100%;\n  height: 100vh;\n  margin: 5% auto 0;\n  position: relative;\n  z-index: 1;\n  justify-content: center;\n}\n\n.btn-round {\n  border: none;\n  margin: 5px 0;\n  width: 6rem;\n  height: 6rem;\n  border: none;\n  font-size: 9px;\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  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n.btn-round-light {\n  background-color: rgb(252, 229, 70);\n}\n.btn-round-dark {\n  background-color: rgb(252, 229, 70);\n}\n.btn-round-loading {\n  position: absolute;\n  bottom: 5.5rem;\n}\n.btn-round-spinner-light {\n  fill: #000000;\n}\n.btn-round-spinner-dark {\n  fill: #000000;\n}\n.btn-round-play {\n  width: 4rem;\n  margin-left: 0.5rem;\n}\n.btn-round-play-light {\n  fill: #000000;\n}\n.btn-round-play-dark {\n  fill: #000000;\n}\n.btn-round-stop {\n  position: absolute;\n  bottom: 17rem;\n}\n.btn-round-stop-light {\n  fill: #000000;\n}\n.btn-round-stop-dark {\n  fill: #000000;\n}\n.btn-round-text-light {\n  color: #000000;\n}\n.btn-round-text-dark {\n  color: #000000;\n}\n.btn-container {\n  display: flex;\n  z-index: 0;\n  justify-content: center;\n}\n.btn-stop-icon {\n  width: 30px;\n  height: 30px;\n  border-radius: 5px;\n}\n.btn-stop-icon-light {\n  background: #000000;\n}\n.btn-stop-icon-dark {\n  background: #000000;\n}\n\n.video-recorder {\n  padding-top: 0;\n  padding-bottom: 4rem;\n  height: fit-content;\n}\n\n.video-container {\n  display: flex;\n  justify-content: center;\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.response-message {\n  height: 3rem;\n  line-height: 3rem;\n  width: 100%;\n}\n\n.x-utu-video-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .video-recorder {\n    padding-bottom: 4rem;\n    height: fit-content;\n    background-color: rgb(253, 253, 253) !important;\n  }\n  .utu-screen-recording {\n    max-height: 80rem;\n    min-width: 20rem;\n    width: 27rem;\n    height: 43rem;\n    margin: 5% auto 0;\n    z-index: 1;\n    justify-content: center;\n    border-bottom-left-radius: 2%;\n    border-bottom-right-radius: 2%;\n    border-bottom: 13px rgb(252, 229, 70) solid;\n  }\n  .btn-round-stop {\n    bottom: 2.5rem;\n  }\n  .video-container {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n}";
+	var css_248z$c = "@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\nbody {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.video-msg {\n  position: absolute;\n}\n\n.trust-video {\n  border: none;\n  width: 100%;\n  height: auto;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-wrapper {\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  align-items: center;\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  width: 100%;\n  margin-top: 35%;\n  transform: translate(0, -50%);\n  padding-left: 36px;\n  border-radius: 10px;\n  height: 4em;\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  font-size: 3em;\n  margin: auto;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  padding: 0;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  border-radius: 50%;\n  font: normal normal normal 18px/1 FontAwesome;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 2em;\n  height: 1.5em;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-volume:before {\n  content: \"\\f028\";\n}\n.trust-video-volume.off:before {\n  content: \"\\f026\";\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 2.5rem;\n  width: 3em;\n  border-radius: 20%;\n  height: 2.5rem;\n  margin-right: 5%;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n.trust-video-fullscreen:before {\n  content: \"\\f065\";\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .trust-video-wrapper {\n    margin-top: -3rem;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .trust-video {\n    border: none;\n  }\n}\n.x-utu-video {\n  display: flex;\n  justify-content: center;\n}\n.x-utu-video-btn-round {\n  border: none;\n  margin: 5px 0;\n  width: 4rem;\n  height: 4rem;\n  border: none;\n  font-size: 9px;\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  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  border-radius: 50px;\n}\n.x-utu-video-btn-round-light {\n  background-color: rgb(252, 229, 70);\n}\n.x-utu-video-btn-round-dark {\n  background-color: rgb(252, 229, 70);\n}\n.x-utu-video-btn-round-loading {\n  position: absolute;\n  bottom: 5.5rem;\n  margin-top: 0.25;\n}\n.x-utu-video-btn-round-spinner-light {\n  fill: #000000;\n}\n.x-utu-video-btn-round-spinner-dark {\n  fill: #000000;\n}\n.x-utu-video-btn-round-play {\n  width: 4rem;\n  margin-left: 0.5rem;\n}\n.x-utu-video-btn-round-play-light {\n  fill: #000000;\n}\n.x-utu-video-btn-round-play-dark {\n  fill: #000000;\n}\n.x-utu-video-btn-round-stop {\n  position: absolute;\n  bottom: 10%;\n  margin-top: 0.25;\n  background-color: rgb(252, 229, 70);\n}\n.x-utu-video-btn-round-stop-light {\n  fill: #000000;\n}\n.x-utu-video-btn-round-stop-dark {\n  fill: #000000;\n}\n.x-utu-video-btn-round-text-light {\n  color: #000000;\n}\n.x-utu-video-btn-round-text-dark {\n  color: #000000;\n}\n.x-utu-video-btn-container {\n  display: flex;\n  z-index: 0;\n  justify-content: center;\n}\n.x-utu-video-btn-stop-icon {\n  width: 20px;\n  height: 20px;\n  border-radius: 5px;\n}\n.x-utu-video-btn-stop-icon-light {\n  background: #000000;\n}\n.x-utu-video-btn-stop-icon-dark {\n  background: #000000;\n}\n.x-utu-video-screen-recording {\n  width: 100%;\n  position: relative;\n  z-index: 1;\n  justify-content: center;\n}\n.x-utu-video-recorder {\n  padding-top: 0;\n  padding-bottom: 4rem;\n  height: fit-content;\n}\n.x-utu-video-container {\n  display: flex;\n  justify-content: center;\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n.x-utu-video-response-message {\n  height: 3rem;\n  line-height: 3rem;\n  width: 100%;\n}\n.x-utu-video-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-video-recorder {\n    padding-bottom: 4rem;\n    height: fit-content;\n    background-color: rgb(253, 253, 253) !important;\n  }\n  .x-utu-video-btn-round-stop {\n    bottom: 2.5rem;\n  }\n  .x-utu-video-container {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n  .x-utu-video-screen-recording {\n    max-height: 80rem;\n    min-width: 20rem;\n    width: 27rem;\n    height: 43rem;\n    margin: 5% auto 0;\n    z-index: 1;\n    justify-content: center;\n    border-bottom-left-radius: 2%;\n    border-bottom-right-radius: 2%;\n    border-bottom: 13px rgb(252, 229, 70) solid;\n  }\n}";
 	styleInject(css_248z$c);
 
 	function RecordIcon() {
@@ -58618,9 +58620,9 @@
 	new MediaStream();
 	function Recorder(props) {
 	  /**
-	   * Holds the active reader retrieved from ReadableStorage.getReader() while a video is recording, or null while no
-	   * video is recording.
-	   */
+	     * Holds the active reader retrieved from ReadableStorage.getReader() while a video is recording, or null while no
+	     * video is recording.
+	     */
 	  var _useState = p(null),
 	      _useState2 = _slicedToArray(_useState, 2),
 	      activeReader = _useState2[0],
@@ -58708,9 +58710,9 @@
 	      stopStream = _useReactMediaRecorde.stopStream,
 	      previewStream = _useReactMediaRecorde.previewStream;
 
-	  var isLoading = loading || ['stopping', 'acquiring_media'].includes(status);
-	  var isReady = (status === 'idle' || status === 'stopped') && !isLoading;
-	  var isRecording = status === 'recording';
+	  var isLoading = loading || ["stopping", "acquiring_media"].includes(status);
+	  var isReady = (status === "idle" || status === "stopped") && !isLoading;
+	  var isRecording = status === "recording";
 
 	  var onStop = /*#__PURE__*/function () {
 	    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -58773,40 +58775,40 @@
 	    };
 	  }, []);
 	  return h$2("div", {
-	    className: "d-flex justify-content-center"
+	    className: "x-utu-video"
 	  }, h$2("div", {
 	    className: "text-center"
 	  }, h$2("div", {
-	    className: "btn-container"
+	    className: "x-utu-video-btn-container"
 	  }, h$2(PopUp, {
 	    closeButtonOverlay: true,
 	    onClose: onClose
 	  }, h$2(BaseComponent, {
 	    style: css_248z$c,
-	    className: "utu-screen-recording d-flex flex-column align-items-center justify-content-center"
+	    className: "x-utu-video-screen-recording d-flex flex-column align-items-center justify-content-center"
 	  }, VideoSrc(status, previewStream), isRecording && h$2("button", {
 	    type: "button",
-	    className: "m-1 btn-round-stop btn-round-stop-".concat(envCondition, " btn-round btn-round-").concat(envCondition),
+	    className: "x-utu-video-btn-round-stop x-utu-video-btn-round-stop-".concat(envCondition, " x-utu-video-btn-round btn-round-").concat(envCondition),
 	    onClick: onStop
 	  }, h$2("div", {
-	    className: "btn-stop-icon btn-stop-icon-".concat(envCondition)
+	    className: "x-utu-video-btn-stop-icon x-utu-video-btn-stop-icon-".concat(envCondition)
 	  })), isReady && !publishedVideoUrl && h$2("button", {
 	    type: "button",
-	    className: "m-1 btn-round-stop btn-round-stop-".concat(envCondition, " btn-round btn-round-").concat(envCondition),
+	    className: "\n                    x-utu-video-btn-round-stop x-utu-video-btn-round-stop-".concat(envCondition, " x-utu-video-btn-round x-utu-video-btn-round-").concat(envCondition, "\n                  "),
 	    onClick: function onClick() {
 	      startRecording();
 	    }
 	  }, h$2(RecordIcon, null)), isLoading && h$2("button", {
 	    type: "button",
-	    className: "m-1 btn-round-loading btn-round btn-round-".concat(envCondition)
+	    className: "x-utu-video-btn-round-loading x-utu-video-btn-round x-utu-video-btn-round-".concat(envCondition)
 	  }, h$2("div", {
-	    className: "mb-2 mr-2 btn-round-spinner btn-round-spinner-".concat(envCondition)
+	    className: "mb-2 mr-2 x-utu-video-btn-round-spinner x-utu-video-btn-round-spinner-".concat(envCondition)
 	  }, h$2(videoIcon$1, null))), h$2("div", {
 	    className: "video-msg d-flex align-items-center"
 	  }, successMessage && h$2("h3", {
-	    className: "response-message my-4 text-white bg-success"
+	    className: "x-utu-video-response-message my-4 text-white bg-success"
 	  }, " ", successMessage, " "), errorMessage && h$2("h3", {
-	    className: "response-message my-4 text-white bg-danger"
+	    className: "x-utu-video-response-message my-4 text-white bg-danger"
 	  }, " ", errorMessage, " ")), h$2("section", {
 	    className: "logo-position-video"
 	  }, h$2(Logo, null)))))));
@@ -58852,7 +58854,7 @@
 	  var envCondition = isDark ? "dark" : "light";
 	  return h$2(BaseComponent, {
 	    style: css_248z$c,
-	    className: "video-container utu-section utu-section-".concat(envCondition)
+	    className: "x-utu-video-container x-utu-section x-utu-section-".concat(envCondition)
 	  }, h$2("div", {
 	    className: "x-utu-video-wrapper"
 	  }, h$2("button", {
@@ -58860,12 +58862,12 @@
 	    style: {
 	      backgroundColor: props[ATTR_BTN_COLOR] === undefined ? null : "".concat(props[ATTR_BTN_COLOR])
 	    },
-	    className: "btn-round btn-round-".concat(envCondition),
+	    className: "x-utu-video-btn-round x-utu-video-btn-round-".concat(envCondition),
 	    onClick: function onClick() {
 	      setVideoVisible(true);
 	    }
 	  }, h$2(videoIcon, null)), h$2("p", {
-	    className: "mx-3 mt-3 btn-round-text-".concat(envCondition)
+	    className: "mx-3 mt-3 x-utu-video-btn-round-text-".concat(envCondition)
 	  }, " ", h$2("b", null, "RECORD YOUR STORY"), " "), videoVisible && h$2(Recorder, _extends$1({}, props, {
 	    onClose: function onClose() {
 	      setVideoVisible(false);
@@ -58891,9 +58893,7 @@
 	    className: "utu-feedback-form"
 	  }, h$2("div", {
 	    className: "mobile-view"
-	  }, h$2(RecordVideo, props), h$2("div", {
-	    className: "x-utu-divider"
-	  }), h$2(StarRatingInput, props), h$2(Badges, props), h$2(FeedbackTextInput, props), h$2(EndorsementForm, props), h$2("section", {
+	  }, h$2(RecordVideo, props), h$2(StarRatingInput, props), h$2(Badges, props), h$2(FeedbackTextInput, props), h$2(EndorsementForm, props), h$2("section", {
 	    className: "logo-section-mobile"
 	  }, h$2("div", {
 	    className: "logo-position-mobile"
@@ -58904,7 +58904,7 @@
 	  }, h$2(RecordVideo, props), h$2("div", {
 	    className: "x-utu-divider"
 	  }), h$2(StarRatingInput, props)), h$2("div", {
-	    className: "mb-3"
+	    className: "x-utu-feedback-form-Badges"
 	  }, h$2(Badges, props)), h$2("div", {
 	    className: "desktop-view-block-2 desktop-view-block-2-".concat(isDark ? "dark" : "light")
 	  }, h$2(FeedbackTextInput, props)), h$2("div", {
@@ -58916,7 +58916,7 @@
 	  }, h$2(Logo, null)))));
 	}
 
-	var css_248z$b = "@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\n.trust-video {\n  border: none;\n  width: 100%;\n  height: auto;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-wrapper {\n  width: 100%;\n  margin-top: -80%;\n  align-items: center;\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  width: 100%;\n  margin-top: 35%;\n  transform: translate(0, -50%);\n  padding-left: 36px;\n  border-radius: 10px;\n  height: 4em;\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  font-size: 3em;\n  margin: auto;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  padding: 0;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  border-radius: 50%;\n  font: normal normal normal 18px/1 FontAwesome;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 2em;\n  height: 1.5em;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-volume:before {\n  content: \"\\f028\";\n}\n.trust-video-volume.off:before {\n  content: \"\\f026\";\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 2.5rem;\n  width: 3em;\n  border-radius: 20%;\n  height: 2.5rem;\n  margin-right: 5%;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n.trust-video-fullscreen:before {\n  content: \"\\f065\";\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .trust-video-wrapper {\n    margin-top: 20%;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .trust-video {\n    border: none;\n    width: 70%;\n  }\n}\nbody {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.utu-feedback-details {\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  width: 100vw;\n  position: relative;\n  z-index: 1;\n  justify-content: start;\n  border-bottom: 15px rgb(252, 229, 70) solid;\n}\n.utu-feedback-details-details {\n  justify-content: start;\n  max-height: 40rem;\n}\n.utu-feedback-details-video-popup {\n  justify-content: center;\n  max-height: 80rem;\n  height: 43rem;\n}\n\n.mobile-view {\n  visibility: visible;\n}\n\n.desktop-view {\n  display: none;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-feedback-details {\n    border-bottom: 0;\n    z-index: 1;\n    align-items: center;\n  }\n  .mobile-view {\n    display: none;\n  }\n  .desktop-view {\n    display: flex;\n    width: 100%;\n    flex-direction: column;\n  }\n  .desktop-view-block-1 {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-evenly;\n    margin: 1rem 0;\n  }\n  .desktop-view-block-1-dark {\n    background-color: #3d3d3c;\n  }\n  .desktop-view-block-1-light {\n    background-color: #fcf8e5;\n  }\n  .desktop-view-block-2 {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    margin: 1rem 0;\n  }\n  .desktop-view-block-2-dark {\n    background-color: #3d3d3c;\n  }\n  .desktop-view-block-2-light {\n    background-color: #fcf8e5;\n  }\n}";
+	var css_248z$b = "@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\n.video-msg {\n  position: absolute;\n}\n\n.trust-video {\n  border: none;\n  width: 100%;\n  height: auto;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-wrapper {\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  align-items: center;\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  width: 100%;\n  margin-top: 35%;\n  transform: translate(0, -50%);\n  padding-left: 36px;\n  border-radius: 10px;\n  height: 4em;\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  font-size: 3em;\n  margin: auto;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  padding: 0;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  border-radius: 50%;\n  font: normal normal normal 18px/1 FontAwesome;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 2em;\n  height: 1.5em;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-volume:before {\n  content: \"\\f028\";\n}\n.trust-video-volume.off:before {\n  content: \"\\f026\";\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 2.5rem;\n  width: 3em;\n  border-radius: 20%;\n  height: 2.5rem;\n  margin-right: 5%;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n.trust-video-fullscreen:before {\n  content: \"\\f065\";\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .trust-video-wrapper {\n    margin-top: -3rem;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .trust-video {\n    border: none;\n  }\n}\nbody {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.utu-feedback-details {\n  min-height: 30rem;\n  width: 100%;\n  margin: auto;\n  background-color: #fcf8e5;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  position: relative;\n  z-index: 1;\n  justify-content: start;\n  border-bottom: 15px rgb(252, 229, 70) solid;\n}\n.utu-feedback-details-details {\n  justify-content: start;\n  max-height: 40rem;\n}\n.utu-feedback-details-video-popup {\n  justify-content: center;\n  max-height: 80rem;\n  height: 43rem;\n}\n\n.mobile-view {\n  visibility: visible;\n}\n\n.desktop-view {\n  display: none;\n}\n\n/* ----------- Transition screen ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-feedback-details {\n    border-bottom: 0;\n    z-index: 1;\n    align-items: center;\n    margin-bottom: 10rem;\n  }\n  .mobile-view {\n    display: none;\n  }\n  .desktop-view {\n    display: flex;\n    width: 100%;\n    flex-direction: column;\n    margin-bottom: 5rem;\n  }\n  .desktop-view-video-stars {\n    display: flex;\n    flex-direction: column;\n  }\n  .desktop-view-block-1 {\n    width: 65%;\n    margin: auto;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n  .desktop-view-block-1-dark {\n    background-color: #3d3d3c;\n  }\n  .desktop-view-block-1-light {\n    background-color: #fcf8e5;\n  }\n  .desktop-view-block-2 {\n    width: 65%;\n    margin: auto;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n  .desktop-view-block-2-dark {\n    background-color: #3d3d3c;\n  }\n  .desktop-view-block-2-light {\n    background-color: #fcf8e5;\n  }\n}\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 1481px) {\n  .utu-feedback-details {\n    border-bottom: 0;\n    z-index: 1;\n    align-items: center;\n    width: 65%;\n  }\n  .mobile-view {\n    display: none;\n  }\n  .desktop-view {\n    display: flex;\n    width: 100%;\n    flex-direction: column;\n  }\n  .desktop-view-video-stars {\n    display: flex;\n    flex-direction: column;\n  }\n  .desktop-view-block-1 {\n    min-height: 15rem;\n    width: 100%;\n    margin: auto;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-evenly;\n  }\n  .desktop-view-block-1-dark {\n    background-color: #3d3d3c;\n  }\n  .desktop-view-block-1-light {\n    background-color: #fcf8e5;\n  }\n  .desktop-view-block-2 {\n    min-height: 15rem;\n    width: 100%;\n    margin: auto;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n  .desktop-view-block-2-dark {\n    background-color: #3d3d3c;\n  }\n  .desktop-view-block-2-light {\n    background-color: #fcf8e5;\n  }\n}";
 	styleInject(css_248z$b);
 
 	var HAS_SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('slice');
@@ -58963,7 +58963,7 @@
 	  }
 	});
 
-	var css_248z$a = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.endor-avatar {\n  width: 2rem;\n}\n\n.endorsement-body {\n  display: flex;\n}\n\n.truncate-text {\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\n.endor-text {\n  justify-content: space-around;\n  padding-left: 3rem;\n  padding-right: 3rem;\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-section {\n  width: 100%;\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n  align-items: center;\n}\n.endor-text-stakes-item {\n  font-size: 1.5rem;\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: 1rem;\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: 2rem;\n  padding-right: 2rem;\n  font-size: 0.7rem;\n  width: 27em;\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: 1rem;\n  margin-top: 0.5em;\n}\n.endor-text-image-item {\n  margin-left: -15px;\n  height: 4rem;\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}";
+	var css_248z$a = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.endor-avatar {\n  width: 2rem;\n}\n.endor-text {\n  justify-content: space-around;\n  padding-left: 3rem;\n  padding-right: 3rem;\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  padding-top: 1rem;\n  padding-bottom: 1rem;\n  align-items: center;\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: 2rem;\n  padding-right: 2rem;\n  font-size: 0.7rem;\n  width: 27em;\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-left: -15px;\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-text-body {\n    padding-left: 3rem;\n    padding-right: 3rem;\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}";
 	styleInject(css_248z$a);
 
 	// const minLength = 5;
@@ -59010,7 +59010,7 @@
 	  return h$2("p", {
 	    className: "endor-text-contacts-body "
 	  }, connectionInfo.ref, "\xA0", ((_connectionInfo$name = connectionInfo.name) === null || _connectionInfo$name === void 0 ? void 0 : _connectionInfo$name.length) > 0 && h$2("span", {
-	    className: "truncate-text"
+	    className: "endor-text-truncate"
 	  }, h$2("b", null, connectionInfo.name), "\xA0"), has, " endorsed ", h$2("b", {
 	    className: "mx-1"
 	  }, (_endorsementInfo$endo = endorsementInfo.endorsement) === null || _endorsementInfo$endo === void 0 ? void 0 : _endorsementInfo$endo.value, " UTT"));
@@ -59068,14 +59068,14 @@
 	    excludeBootstrap: true,
 	    excludeFonts: true
 	  }, h$2("section", {
-	    className: "endor-text-section utu-section-".concat(envCondition)
+	    className: "endor-text-section x-utu-section-".concat(envCondition)
 	  }, h$2("div", {
 	    className: "endor-text endor-text-".concat(envCondition)
 	  }, displayEndorsements.map(function (i) {
 	    var _i$endorsement;
 
 	    return h$2("div", {
-	      className: "py-3 px-5 endorsement-body"
+	      className: "endor-text-body"
 	    }, h$2("div", {
 	      className: "endor-text-img"
 	    }, endorImg()), h$2("div", {
@@ -59090,7 +59090,7 @@
 	  }))));
 	}
 
-	var css_248z$9 = ".stars-section {\n  display: flex;\n  justify-content: center;\n}\n.stars-text {\n  font-size: 0.8rem;\n  align-self: center;\n  text-align: left;\n  width: 12rem;\n}\n.stars-align {\n  display: flex;\n  align-items: center;\n  margin-top: 1.4rem;\n  margin-bottom: 1.4rem;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .stars-section {\n    padding-top: 0;\n    padding-bottom: 0;\n    display: flex;\n    justify-content: left;\n  }\n}";
+	var css_248z$9 = ".stars-section {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  width: 100%;\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.stars-section-text {\n  display: flex;\n  align-items: center;\n  margin-top: 1rem;\n  width: 70%;\n}\n.stars-section-text-content {\n  text-align: justify;\n}\n.stars-section-align {\n  display: flex;\n  align-items: center;\n  margin-top: 1.4rem;\n  margin-bottom: 1.4rem;\n  margin-right: 1rem;\n  width: 30%;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .stars-section {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 1rem;\n    justify-content: start;\n  }\n  .stars-text {\n    width: 60%;\n  }\n  .stars-align {\n    width: 40%;\n  }\n}";
 	styleInject(css_248z$9);
 
 	function StarRatingShow(props) {
@@ -59116,17 +59116,21 @@
 	  return h$2(BaseComponent, {
 	    style: css_248z$9
 	  }, h$2("section", {
-	    className: "stars-section utu-section-".concat(envCondition)
+	    className: "stars-section x-utu-section-".concat(envCondition)
 	  }, h$2("div", {
-	    className: "stars-align"
+	    className: "stars-section-align"
 	  }, h$2(_default, {
 	    count: 5,
 	    value: stars,
 	    size: 30,
 	    color2: "#FFDD33",
 	    edit: false,
-	    className: "px-4"
-	  }))));
+	    className: "pr-4"
+	  })), h$2("div", {
+	    className: "stars-section-text"
+	  }, h$2("p", {
+	    className: "stars-section-text-content"
+	  }, "Your friends Hamad and Laura have rated the service 5 stars"))));
 	}
 
 	var FAILS_ON_PRIMITIVES = fails(function () {
@@ -59144,7 +59148,7 @@
 	  }
 	});
 
-	var css_248z$8 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.badge-section {\n  padding-left: 1rem;\n  width: 40%;\n}\n\n.badge-container {\n  display: flex;\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  box-sizing: border-box;\n}\n.badge-img {\n  border-radius: 50%;\n  height: 4rem;\n  width: 4rem;\n  margin-bottom: 0.5rem;\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.badge-counter {\n  border-radius: 50%;\n  border: 1px rgb(235, 232, 232) solid;\n  height: 1rem;\n  width: 1rem;\n  font-size: 0.6rem;\n  justify-self: center;\n}\n.badge-counter-light {\n  background-color: rgb(253, 253, 253);\n  color: #000000;\n}\n.badge-counter-dark {\n  background-color: rgb(36, 35, 35);\n  color: #ffffff;\n}\n.badge-title {\n  padding-bottom: 0.5rem;\n  font-size: 0.7rem;\n}\n.badge-title-dark {\n  color: #ffffff;\n}\n.badge-title-light {\n  color: #000000;\n}\n.badge-counter-align {\n  align-items: center;\n}\n.badge-section {\n  display: flex;\n  justify-content: center;\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  width: 100%;\n}\n.badge-spacing {\n  display: flex;\n  flex-direction: column;\n  margin-right: 0.5rem;\n  margin-left: 0.5rem;\n  padding-bottom: 3rem;\n  padding-top: 3rem;\n}\n.badge-position-child {\n  position: relative;\n  top: 2.6rem;\n  right: 1.3rem;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .badge-section {\n    width: 40%;\n  }\n}";
+	var css_248z$8 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.badge-spacing {\n  display: flex;\n  flex-direction: column;\n  padding-bottom: 3rem;\n  padding-top: 1rem;\n}\n.badge-section {\n  display: flex;\n  justify-content: center;\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n  width: 100%;\n  flex-direction: column;\n}\n.badge-section-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.badge-section-badges {\n  display: flex;\n  justify-content: center;\n}\n.badge-section-text {\n  display: flex;\n  justify-content: center;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.badge-section-text-content {\n  text-align: justify;\n  max-width: 25rem;\n}\n.badge-container {\n  position: relative;\n  margin-right: 1rem;\n  margin-left: 1rem;\n  box-sizing: border-box;\n}\n.badge-container-thumb {\n  border-radius: 50%;\n  border: 1px rgb(235, 232, 232) solid;\n  height: 1.5rem;\n  width: 1.5rem;\n  font-size: 0.6rem;\n  justify-self: center;\n}\n.badge-container-thumb-light {\n  background-color: rgb(253, 253, 253);\n  color: #000000;\n}\n.badge-container-thumb-dark {\n  background-color: rgb(36, 35, 35);\n  color: #ffffff;\n}\n.badge-container-img {\n  height: 4rem;\n  width: 4rem;\n  margin-bottom: 0.5rem;\n}\n.badge-container-profile {\n  border-radius: 50%;\n  border: 1px rgb(235, 232, 232) solid;\n  height: 1.5rem;\n  width: 1.5rem;\n  font-size: 0.6rem;\n  justify-self: center;\n  margin-left: -0.5rem;\n}\n.badge-container-profile-light {\n  background-color: rgb(253, 253, 253);\n  color: #000000;\n}\n.badge-container-profile-dark {\n  background-color: rgb(36, 35, 35);\n  color: #ffffff;\n}\n.badge-container-profile-container {\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: 2rem;\n  right: 3.5rem;\n}\n.badge-container-title {\n  padding-bottom: 0.5rem;\n  font-size: 0.7rem;\n  position: absolute;\n  top: 5.5rem;\n  left: 0.5rem;\n}\n.badge-container-title-dark {\n  color: #ffffff;\n}\n.badge-container-title-light {\n  color: #000000;\n}\n.badge-container-position-child-thumb {\n  position: absolute;\n  top: 1.3rem;\n  right: -1rem;\n}\n.badge-container-position-child-profile {\n  position: relative;\n  top: 2.5rem;\n  right: -3.3rem;\n}\n\n/* ----------- Transition screens ----------- */\n@media only screen and (min-width: 768px) {\n  .badge-section {\n    width: 100%;\n  }\n  .badge-section-badges {\n    justify-content: space-evenly;\n  }\n}\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 1481px) {\n  .badge-section {\n    width: 40%;\n  }\n  .badge-section-badges {\n    justify-content: start;\n  }\n  .badge-section-text {\n    justify-content: start;\n  }\n  .badge-badges {\n    justify-content: start;\n  }\n  .badge-spacing {\n    margin-right: 1rem;\n    margin-left: 1rem;\n    padding-top: 2rem;\n  }\n}";
 	styleInject(css_248z$8);
 
 	function BadgesShow$1(props) {
@@ -59167,7 +59171,7 @@
 
 
 	  var fbBadges = props.feedbackSummary.badges;
-	  var keys = Object.keys(fbBadges); // returns the badge with image, counter and title
+	  var keys = Object.keys(fbBadges); // returns the badge with image, thumb and title
 
 	  var badgeGroup = keys.map(function (key, i) {
 	    var badges = fbBadges[key];
@@ -59179,24 +59183,40 @@
 	      }, h$2("div", {
 	        className: "badge-container"
 	      }, h$2("img", {
-	        className: "badge-img",
+	        className: "badge-container-thumb badge-container-thumb-".concat(envCondition, " badge-container-position-child-thumb"),
 	        src: badges[badgeKey].badge.image,
 	        alt: "person face"
+	      }), h$2("img", {
+	        className: "badge-container-img",
+	        src: badges[badgeKey].badge.imageBig,
+	        alt: "person face"
 	      }), h$2("div", {
-	        className: "badge-counter badge-counter-".concat(envCondition, " badge-position-child")
-	      }, badges[badgeKey].count)), h$2("div", {
-	        className: "badge-title badge-title-".concat(envCondition)
-	      }, keys[i]));
+	        className: "badge-container-profile-container"
+	      }, badges[badgeKey].badge.profile instanceof Array ? badges[badgeKey].badge.profile.map(function (img) {
+	        return h$2("img", {
+	          className: "badge-container-profile badge-container-profile-".concat(envCondition, " badge-container-position-child-profile"),
+	          src: img,
+	          alt: "person face"
+	        });
+	      }) : ""), h$2("div", {
+	        className: "badge-container-title badge-container-title-".concat(envCondition)
+	      }, keys[i])));
 	    });
 	  });
 	  return h$2(BaseComponent, {
 	    style: css_248z$8,
-	    className: "badge-section utu-section-no-border-".concat(isDark ? "dark" : "light"),
+	    className: "badge-section x-utu-section-no-border-".concat(isDark ? "dark" : "light"),
 	    excludeBootstrap: true,
 	    excludeFonts: true
 	  }, h$2("section", {
-	    className: "badge-section utu-section utu-section-".concat(envCondition)
-	  }, badgeGroup));
+	    className: "badge-section-content x-utu-section x-utu-section-".concat(envCondition)
+	  }, h$2("div", {
+	    className: "badge-section-badges"
+	  }, badgeGroup), h$2("div", {
+	    className: "badge-section-text"
+	  }, h$2("p", {
+	    className: "badge-section-text-content"
+	  }, "Your connections Hamad and Laura have given this service Well Networked and Powerful Purpose badges"))));
 	}
 
 	var css_248z$7 = ".avatar-no-video {\n  width: 6rem;\n  height: 6rem;\n}";
@@ -59233,7 +59253,7 @@
 	  }))));
 	}
 
-	var css_248z$6 = "@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\n.trust-video {\n  border: none;\n  width: 100%;\n  height: auto;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-wrapper {\n  width: 100%;\n  margin-top: -80%;\n  align-items: center;\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  width: 100%;\n  margin-top: 35%;\n  transform: translate(0, -50%);\n  padding-left: 36px;\n  border-radius: 10px;\n  height: 4em;\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  font-size: 3em;\n  margin: auto;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  padding: 0;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  border-radius: 50%;\n  font: normal normal normal 18px/1 FontAwesome;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 2em;\n  height: 1.5em;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-volume:before {\n  content: \"\\f028\";\n}\n.trust-video-volume.off:before {\n  content: \"\\f026\";\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 2.5rem;\n  width: 3em;\n  border-radius: 20%;\n  height: 2.5rem;\n  margin-right: 5%;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n.trust-video-fullscreen:before {\n  content: \"\\f065\";\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .trust-video-wrapper {\n    margin-top: 20%;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .trust-video {\n    border: none;\n    width: 70%;\n  }\n}\nbody {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.feedback-details-profile {\n  cursor: pointer;\n}\n\n.utu-feedback {\n  position: relative;\n  width: 50%;\n  margin: auto;\n}\n\n.avatar-img {\n  border-radius: 50%;\n  height: 2rem;\n  border: 1px rgb(155, 152, 152) solid;\n}\n.avatar-img-top {\n  height: 5rem;\n  border-radius: 50%;\n  border: 4px solid rgb(252, 229, 70);\n}\n.avatar-img-top:not(:first-child) {\n  margin-left: -15px;\n}\n.avatar-img-top-video {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 2rem;\n  padding-top: 2rem;\n}\n.avatar-img-text {\n  font-size: 0.8rem;\n  text-align: left;\n  width: 19rem;\n}\n.avatar-no-img {\n  width: 6rem;\n  border-radius: 50%;\n  padding: 1.5rem;\n}\n.avatar-no-img-no-vid {\n  padding: 5px !important;\n}\n.avatar-no-img-light {\n  background-color: rgb(252, 229, 70);\n  border: 4px solid rgb(252, 229, 70);\n}\n.avatar-no-img-dark {\n  background-color: rgb(252, 229, 70);\n  border: 4px solid rgb(252, 229, 70);\n}\n.avatar-no-video-dark {\n  fill: #000000;\n}\n.avatar-no-video-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .avatar-img-top-video {\n    padding-bottom: 4rem;\n    padding-top: 4rem;\n  }\n  .avatar-no-img {\n    margin-bottom: 1rem;\n    margin-top: 0.5rem;\n  }\n}";
+	var css_248z$6 = "@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\n.video-msg {\n  position: absolute;\n}\n\n.trust-video {\n  border: none;\n  width: 100%;\n  height: auto;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-wrapper {\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  align-items: center;\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  width: 100%;\n  margin-top: 35%;\n  transform: translate(0, -50%);\n  padding-left: 36px;\n  border-radius: 10px;\n  height: 4em;\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  font-size: 3em;\n  margin: auto;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  padding: 0;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  border-radius: 50%;\n  font: normal normal normal 18px/1 FontAwesome;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 2em;\n  height: 1.5em;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-volume:before {\n  content: \"\\f028\";\n}\n.trust-video-volume.off:before {\n  content: \"\\f026\";\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 2.5rem;\n  width: 3em;\n  border-radius: 20%;\n  height: 2.5rem;\n  margin-right: 5%;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n.trust-video-fullscreen:before {\n  content: \"\\f065\";\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .trust-video-wrapper {\n    margin-top: -3rem;\n  }\n}\n@media only screen and (max-width: 768px) {\n  .trust-video {\n    border: none;\n  }\n}\nbody {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.utu-feedback {\n  position: relative;\n  width: 50%;\n  margin: auto;\n}\n\n.video-section {\n  display: flex;\n  list-style-type: none;\n}\n\n.avatar {\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n}\n.avatar-img {\n  border-radius: 50%;\n  height: 2rem;\n  border: 1px rgb(155, 152, 152) solid;\n}\n.avatar-img-top {\n  height: 4rem;\n  border-radius: 50%;\n  border: 4px solid rgb(252, 229, 70);\n}\n.avatar-img-top:not(:first-child) {\n  margin-left: -15px;\n}\n.avatar-img-top-video {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding-top: 1rem;\n  padding: 1rem;\n}\n.avatar-img-top-video-text {\n  margin-top: 2rem;\n}\n.avatar-img-top-video-container {\n  display: flex;\n  flex-direction: column;\n}\n.avatar-img-top-details {\n  display: flex;\n  height: 4rem;\n  border-radius: 50%;\n  border: 4px solid rgb(252, 229, 70);\n  margin-left: -0.6rem;\n  align-items: center;\n  padding-bottom: 0;\n}\n.avatar-img-top-details:not(:first-child) {\n  margin-left: -15px;\n}\n.avatar-img-top-list-item {\n  display: flex;\n  align-items: flex-start;\n}\n.avatar-img-top-text {\n  font-size: 0.8rem;\n  text-align: left;\n  width: 19rem;\n}\n.avatar-img-no-img {\n  width: 6rem;\n  border-radius: 50%;\n  padding: 1.5rem;\n}\n.avatar-img-no-img-no-vid {\n  padding: 5px !important;\n}\n.avatar-img-no-img-light {\n  background-color: rgb(252, 229, 70);\n  border: 4px solid rgb(252, 229, 70);\n}\n.avatar-img-no-img-dark {\n  background-color: rgb(252, 229, 70);\n  border: 4px solid rgb(252, 229, 70);\n}\n.avatar-img-no-video-dark {\n  fill: #000000;\n}\n.avatar-img-no-video-light {\n  fill: #000000;\n}\n\n/* ----------- Transition screens ----------- */\n@media only screen and (min-width: 768px) {\n  .avatar-img-top-video {\n    justify-content: center;\n  }\n}\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 1481px) {\n  .avatar {\n    justify-content: start;\n  }\n  .avatar-img-top-video {\n    padding-top: 4rem;\n    justify-content: start;\n  }\n  .avatar-no-img {\n    margin-bottom: 1rem;\n    margin-top: 0.5rem;\n  }\n}";
 	styleInject(css_248z$6);
 
 	function VideoShow(props) {
@@ -59252,12 +59272,34 @@
 
 	  if (!props.feedbackSummary) {
 	    return h$2(p$1, null);
-	  } // top image and video
+	  }
+
+	  var video = props.feedbackSummary.video; // console.log("VideoShow video", video);
+	  // console.log("VideoShow video", Object.values(video)[0]);
+	  // console.log("VideoShow video", Object.values(video)[1]);
+
+	  var profileImage = video instanceof Array ? video.map(function (img) {
+	    return img.image;
+	  }) : "";
+	  var profileUrl = video instanceof Array ? video.map(function (img) {
+	    return img.url;
+	  }) : "";
+	  var profileText = props.feedbackSummary.summary; // set of profile images 
 
+	  var videoImg = video instanceof Array ? video.map(function (img) {
+	    return h$2("li", {
+	      className: "avatar-img-top-list-item",
+	      key: img.image
+	    }, h$2("img", {
+	      className: "avatar-img-top-details rounded-circle summary-image-item summary-image-item-".concat(envCondition),
+	      src: img.image,
+	      alt: "profile"
+	    }));
+	  }) : ""; // component for everything inclusing profile images, video or undefined
 
 	  var UserImageVideo = function UserImageVideo(_ref) {
-	    var image = _ref.image,
-	        url = _ref.url;
+	    var url = _ref.url,
+	        image = _ref.image;
 
 	    var _useState3 = p(false),
 	        _useState4 = _slicedToArray(_useState3, 2),
@@ -59265,17 +59307,13 @@
 	        setVideoVisible = _useState4[1];
 
 	    return h$2("div", null, h$2("div", {
-	      className: "feedback-details-profile",
+	      className: "avatar",
 	      onClick: function onClick() {
 	        setVideoVisible(!videoVisible);
 	      }
 	    }, !image ? h$2("div", {
 	      className: "ml-5 avatar-no-img avatar-no-img-".concat(envCondition)
-	    }, h$2(Avatar, props)) : h$2("img", {
-	      className: "avatar-img-top",
-	      src: image,
-	      alt: "person face"
-	    })), videoVisible && url && h$2(PopUp, {
+	    }, h$2(Avatar, props)) : videoImg), videoVisible && url && h$2(PopUp, {
 	      closeButtonOverlay: true,
 	      onClose: function onClose() {
 	        return setVideoVisible(false);
@@ -59288,25 +59326,26 @@
 	    }, h$2(Logo, null)))));
 	  };
 
-	  var video = props.feedbackSummary.video;
 	  return h$2(BaseComponent, {
 	    style: css_248z$6,
-	    className: "video-section utu-section-no-border-".concat(isDark ? "dark" : "light"),
+	    className: "video-section x-utu-section-no-border-".concat(isDark ? "dark" : "light"),
 	    excludeBootstrap: true,
 	    excludeFonts: true
 	  }, video && h$2("section", {
-	    className: "avatar-img-top-video \n          ".concat(video.url ? "utu-section-".concat(envCondition) : "")
-	  }, !video.url ? h$2("div", {
+	    className: "avatar-img-top-video \n          ".concat(profileUrl ? "x-utu-section-".concat(envCondition) : "")
+	  }, !profileUrl ? h$2("div", {
 	    className: "ml-5 avatar-no-img avatar-no-img-".concat(envCondition)
 	  }, h$2(Avatar, props)) : h$2("div", {
-	    className: "avatar-img-top-video"
+	    className: "avatar-img-top-video-container"
 	  }, h$2(UserImageVideo, {
-	    url: video.url,
-	    image: video.image
-	  }))));
+	    url: profileImage,
+	    image: profileImage
+	  }), h$2("p", {
+	    className: "avatar-img-top-video-text"
+	  }, profileText))));
 	}
 
-	var css_248z$5 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.video-avatar {\n  width: 2rem;\n}\n\n.video-placeholder {\n  height: 2rem;\n}\n\n.review-section {\n  width: 100vw;\n  display: flex;\n  white-space: nowrap;\n  overflow-x: scroll;\n}\n.review-text {\n  display: flex;\n  flex-direction: column;\n}\n.review-text-sum {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-weight: bold;\n}\n.review-text-cont {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n.review-text-dark {\n  color: #ffffff;\n}\n.review-text-light {\n  color: #000000;\n}\n.review-card {\n  font-size: 0.7rem;\n  display: flex;\n  padding: 1.5rem;\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n  justify-content: space-around;\n}\n.review-card-group {\n  width: 30rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  align-items: center;\n}\n.review-img {\n  border-radius: 50%;\n  height: 3rem;\n  border: 1px rgb(155, 152, 152) solid;\n}\n\n.onerror-review-img {\n  border-radius: 50%;\n  height: 3rem;\n  border: 1px rgb(155, 152, 152) solid;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .review-section {\n    width: 30%;\n    display: flex;\n    white-space: nowrap;\n    overflow-x: scroll;\n  }\n  .review-text-dark {\n    color: rgb(36, 35, 35);\n  }\n  .review-text-light {\n    color: #000000;\n  }\n  .review-card {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n    display: flex;\n    justify-content: center;\n    max-width: 100%;\n    overflow: hidden;\n    word-wrap: break-word !important;\n  }\n}";
+	var css_248z$5 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.video-avatar {\n  width: 2rem;\n}\n\n.video-placeholder {\n  height: 2rem;\n}\n\n.review-section {\n  width: 100vw;\n  display: flex;\n  white-space: nowrap;\n  overflow-x: scroll;\n}\n.review-text {\n  display: flex;\n  flex-direction: column;\n}\n.review-text-sum {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-weight: bold;\n}\n.review-text-cont {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n.review-text-dark {\n  color: #ffffff;\n}\n.review-text-light {\n  color: #000000;\n}\n.review-card {\n  font-size: 0.7rem;\n  display: flex;\n  padding: 1.5rem;\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n  justify-content: space-around;\n}\n.review-card-group {\n  width: 30rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  align-items: center;\n  min-height: 10rem;\n}\n.review-img {\n  border-radius: 50%;\n  height: 3rem;\n  border: 1px rgb(155, 152, 152) solid;\n}\n\n.onerror-review-img {\n  border-radius: 50%;\n  height: 3rem;\n  border: 1px rgb(155, 152, 152) solid;\n}\n\n/* ----------- Transition screen ----------- */\n@media only screen and (min-width: 768px) {\n  .review-section {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n}\n@media only screen and (min-width: 1481px) {\n  .review-section {\n    width: 30%;\n    display: flex;\n    white-space: nowrap;\n    overflow-x: scroll;\n  }\n  .review-text-dark {\n    color: rgb(36, 35, 35);\n  }\n  .review-text-light {\n    color: #000000;\n  }\n  .review-card {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n    display: flex;\n    justify-content: center;\n    max-width: 100%;\n    overflow: hidden;\n    word-wrap: break-word !important;\n  }\n}";
 	styleInject(css_248z$5);
 
 	function BadgesShow(props) {
@@ -59326,20 +59365,18 @@
 	  if (!props.feedbackSummary) {
 	    return h$2(p$1, null);
 	  } // review
-	  // const fbReviewImg = props.feedbackSummary.review?.image;
-	  // const fbReviewContent = props.feedbackSummary.review?.content;
 
 
 	  var fbReview = props.feedbackSummary.reviews;
 	  console.log(fbReview);
 	  return h$2(BaseComponent, {
 	    style: css_248z$5,
-	    className: "review-section utu-section-no-border-".concat(isDark ? "dark" : "light"),
+	    className: "review-section x-utu-section-no-border-".concat(isDark ? "dark" : "light"),
 	    excludeBootstrap: true,
 	    excludeFonts: true
 	  }, fbReview ? fbReview.map(function (rev) {
 	    return h$2("section", null, h$2("div", {
-	      className: "review-card utu-section-no-border-mid-".concat(envCondition)
+	      className: "review-card x-utu-section-no-border-mid-".concat(envCondition)
 	    }, h$2("div", {
 	      className: "review-card-group"
 	    }, rev.image ? h$2("img", {
@@ -59407,11 +59444,13 @@
 	    className: "desktop-view"
 	  }, h$2("div", {
 	    className: "desktop-view-block-1 desktop-view-block-1-".concat(isDark ? "dark" : "light")
+	  }, h$2("div", {
+	    className: "desktop-view-video-stars"
 	  }, h$2(VideoShow, _extends$1({}, props, {
 	    feedbackSummary: feedbackSummary
 	  })), h$2(StarRatingShow, _extends$1({}, props, {
 	    feedbackSummary: feedbackSummary
-	  })), h$2(BadgesShow, _extends$1({}, props, {
+	  }))), h$2(BadgesShow, _extends$1({}, props, {
 	    feedbackSummary: feedbackSummary
 	  }))), h$2("div", {
 	    className: "desktop-view-block-2 desktop-view-block-2-".concat(isDark ? "dark" : "light")
@@ -59426,7 +59465,7 @@
 	  }, h$2(Logo, null)))));
 	}
 
-	var css_248z$4 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.utu-feedback-details-popup {\n  padding: 0.5rem;\n  border-radius: 15px;\n}\n\n.utu-feedback-form-popup {\n  padding: 0.5rem;\n}";
+	var css_248z$4 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.x-utu-feedback-details-popup {\n  padding: 0.5rem;\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n}";
 	styleInject(css_248z$4);
 
 	function FeedbackPopup(props) {
@@ -59450,13 +59489,13 @@
 
 	  return h$2(BaseComponent, {
 	    style: css_248z$4,
-	    className: "d-flex flex-column align-items-strath justify-content-center \n    utu-feedback-details-popup utu-section utu-section-no-border-".concat(envCondition)
+	    className: "x-utu-feedback-details-popup x-utu-section x-utu-section-no-border-".concat(envCondition)
 	  }, h$2("button", {
 	    type: "button",
 	    style: {
 	      backgroundColor: props[ATTR_BTN_COLOR] === undefined ? null : "".concat(props[ATTR_BTN_COLOR])
 	    },
-	    className: "btn btn-".concat(envCondition, " x-utu-border-radius"),
+	    className: "x-utu-btn x-utu-btn-".concat(envCondition, " border-radius"),
 	    onClick: function onClick() {
 	      return setPopUpVisible(true);
 	    }
@@ -59487,13 +59526,13 @@
 	  var envCondition = isDark ? "dark" : "light";
 	  return h$2(BaseComponent, {
 	    style: css_248z$m,
-	    className: "d-flex flex-column align-items-stretch justify-content-center\n      utu-feedback-form-popup utu-section utu-section-no-border-".concat(envCondition)
+	    className: "x-utu-feedback-form-popup x-utu-section x-utu-section-no-border-".concat(envCondition)
 	  }, h$2("button", {
 	    type: "button",
 	    style: {
 	      backgroundColor: props[ATTR_BTN_COLOR] === undefined ? null : "".concat(props[ATTR_BTN_COLOR])
 	    },
-	    className: "btn btn-".concat(envCondition, " x-utu-border-radius"),
+	    className: "x-utu-btn x-utu-btn-".concat(envCondition, " border-radius"),
 	    onClick: function onClick() {
 	      return setPopUpVisible(true);
 	    }
@@ -59502,41 +59541,58 @@
 	      return setPopUpVisible(false);
 	    }
 	  }, props), h$2(FeedbackForm, props)));
-	} // style={{backgroundColor: `${props[ATTR_BTN_COLOR]} || yellow ` }}
+	}
 
-	var css_248z$3 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.utu-Header {\n  width: 100vw;\n  padding: 2rem 3rem;\n  background-color: #fcf8e5;\n  display: flex;\n  justify-content: center;\n}";
+	var css_248z$3 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.x-utu-header {\n  width: 100%;\n  padding: 2rem 3rem;\n  background-color: #fcf8e5;\n  display: flex;\n  justify-content: center;\n  border-radius: 5px;\n}";
 	styleInject(css_248z$3);
 
 	function Header() {
 	  return h$2(BaseComponent, {
 	    style: css_248z$3
 	  }, h$2("section", {
-	    className: "utu-Header utu-section"
+	    className: "x-utu-header x-utu-section"
 	  }, h$2("h3", null, " Feedback From Your Network ")));
 	}
 
-	var css_248z$2 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.utu-app-link {\n  width: 100%;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  background-color: rgb(252, 229, 70);\n  border: none;\n}\n\na {\n  text-decoration: none;\n  color: black;\n}\n\na :hover {\n  color: black;\n}";
+	var css_248z$2 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.x-utu-app-link {\n  width: 100%;\n  text-align: center;\n  justify-content: center;\n  border-radius: 5px;\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  background-color: #fcf8e5;\n}\n.x-utu-app-link-btn {\n  background-color: rgb(252, 229, 70);\n  width: 100%;\n}\n.x-utu-app-link-text {\n  margin-top: 0.25rem;\n}\n\na {\n  text-decoration: none;\n  color: #000000;\n}\n\na :hover {\n  color: #000000;\n}";
 	styleInject(css_248z$2);
 
-	function UtuAppSocialLink() {
+	function UtuAppSocialLink(props) {
 	  var _getUtuSocialLink = getUtuSocialLink(),
-	      socialLinkUrl = _getUtuSocialLink.socialLinkUrl;
+	      socialLinkUrl = _getUtuSocialLink.socialLinkUrl; // environments
+
+
+	  var _useState = p(false),
+	      _useState2 = _slicedToArray(_useState, 2),
+	      isDark = _useState2[0],
+	      setIsDark = _useState2[1]; // environment conditionals
+
+
+	  var envCondition = isDark ? "dark" : "light";
+
+	  if (props[ATTR_THEME_COLOR] === "dark") {
+	    setIsDark(true);
+	  }
 
 	  return h$2(BaseComponent, {
-	    style: css_248z$2
+	    style: css_248z$2,
+	    className: "x-utu-app-link x-utu-section x-utu-section-no-border-".concat(envCondition)
 	  }, h$2("button", {
-	    className: "utu-app-link btn",
-	    type: "button"
+	    className: "x-utu-app-link-btn x-utu-btn utu-btn-light",
+	    type: "button",
+	    style: {
+	      backgroundColor: props[ATTR_BTN_COLOR] === undefined ? null : "".concat(props[ATTR_BTN_COLOR])
+	    }
 	  }, h$2("a", {
 	    href: socialLinkUrl,
 	    target: "_blank",
 	    rel: "noreferrer"
-	  }, " ", h$2("h3", {
-	    className: "mt-1"
-	  }, "Connect to earn"), " ")));
+	  }, h$2("h3", {
+	    className: "x-utu-app-link-text"
+	  }, "Connect to earn"))));
 	}
 
-	var css_248z$1 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.utu-wallet-connect {\n  width: 100%;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  background-color: #fcf8e5;\n}\n\n.text-input-btn {\n  width: 100%;\n  background-color: rgb(252, 229, 70);\n}";
+	var css_248z$1 = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.x-utu-wallet-connect {\n  width: 100%;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  background-color: #fcf8e5;\n  border-radius: 5px;\n}\n.x-utu-wallet-connect-section {\n  padding: 0.5rem;\n}\n.x-utu-wallet-text-input-btn {\n  width: 100%;\n  background-color: rgb(252, 229, 70);\n  margin-top: 1rem;\n}";
 	styleInject(css_248z$1);
 
 	function WalletConnect() {
@@ -59579,19 +59635,19 @@
 
 	  return h$2(BaseComponent, {
 	    style: css_248z$1,
-	    className: "utu-wallet-connect"
+	    className: "x-utu-wallet-connect"
 	  }, h$2("section", {
-	    className: "py-2 px-2 wallet-connect-section"
+	    className: "x-utu-wallet-connect-section"
 	  }, h$2("p", {
-	    className: "utu-wallet-connect-text"
+	    className: "x-utu-wallet-connect-text"
 	  }, "See UTU trust signals from your network"), h$2("div", null, h$2("button", {
 	    onClick: connectWallet,
-	    className: "mt-3 text-input-btn btn",
+	    className: "x-utu-wallet-text-input-btn x-utu-btn",
 	    type: "submit"
 	  }, "Connect Wallet"))));
 	}
 
-	var css_248z = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\n}\n\n.utu-section {\n  width: 100%;\n}\n.utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\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.btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.btn-round {\n  color: white !important;\n}\n.btn-round-text {\n  color: white !important;\n}\n\n.icon-btn {\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.icon-btn svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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.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\nsvg.video-icon {\n  width: 3rem;\n  height: 2.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section {\n    width: 100%;\n  }\n  .utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 15px;\n}\n\n.x-utu-Disconnect-wallet-btn {\n  width: 100%;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  background-color: #fcf8e5;\n}\n\n.text-input-btn {\n  width: 100%;\n  background-color: rgb(252, 229, 70);\n}";
+	var css_248z = "body {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.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.spinner {\n  width: 21px;\n  height: 21px;\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  margin: 12px;\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  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.x-utu-btn-icon svg {\n  width: 60px;\n  height: 60px;\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.submit-result svg, .submit-error svg, .submit-success svg {\n  width: 45px;\n  height: 45px;\n  margin: auto;\n}\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 20%;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -1.1rem;\n  right: 6rem;\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: -1rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  bottom: 0;\n  right: 10%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\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\nsvg.video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.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-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n.x-utu-disconnect-wallet-btn {\n  width: 100%;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  background-color: #fcf8e5;\n  border-radius: 5px;\n  padding: 0.5rem;\n}\n.x-utu-disconnect-text-input-btn {\n  width: 100%;\n  background-color: rgb(252, 229, 70);\n}";
 	styleInject(css_248z);
 
 	function DisconnectWallet() {
@@ -59655,10 +59711,10 @@
 	  return h$2(BaseComponent, {
 	    style: css_248z
 	  }, h$2("section", {
-	    className: "py-2 px-2 x-utu-Disconnect-wallet-btn"
+	    className: "x-utu-disconnect-wallet-btn"
 	  }, h$2("div", null, h$2("button", {
 	    onClick: disconnectWallet,
-	    className: "mt-3 text-input-btn btn",
+	    className: "x-utu-disconnect-text-input-btn x-utu-btn",
 	    type: "submit"
 	  }, "Disconnect Wallet"))));
 	}