@ututrust/web-components 1.2.2 → 1.2.4

package/dist/index.js

@@ -9595,11 +9595,11 @@
 	var ATTR_ENDORSEMENT_NETWORK = "endorsement-network";
 	var ATTR_TRANSACTION_ID = "transaction-id"; // API BASE URLs
 
-	var UTU_API_BASE_URL_PRODUCTION = "https://api.ututrust.com/";
-	var UTU_API_BASE_URL_TEST = "https://stage-api.ututrust.com/";
-	var CORE_API_BASE = "core-api";
-	var UPLOADER_API_BASE = "uploader-api";
-	var VIDEO_PUBLISHED_BASE = "published-videos"; // API resource paths
+	var UTU_API_BASE_URL_PRODUCTION = "https://api.ututrust.com";
+	var UTU_API_BASE_URL_TEST = "https://stage-api.ututrust.com";
+	var CORE_API_BASE = "/core-api";
+	var UPLOADER_API_BASE = "/uploader-api";
+	var VIDEO_PUBLISHED_BASE = "/published-videos"; // API resource paths
 
 	var API_RANKING = "/ranking";
 	var API_FEEDBACK = "/feedback";
@@ -9610,10 +9610,14 @@
 	var EVENT_UTU_CONFIG = "utuConfig";
 	var EVENT_UTU_IDENTITY_DATA_READY = "utuIdentityDataReady"; // Local Storage Keys
 
-	var LOCAL_STORAGE_KEY_UTU_IDENTITY_DATA = "utu-identity-data"; // UTT Endorsement Contracts
+	var LOCAL_STORAGE_KEY_UTU_IDENTITY_DATA = "utu-identity-data"; // Supported UTT networks
 
-	var UTT_CONTRACT_ADDRESS_TEST = "0x19bc90FfBDCaD53c48eF0b08A67B0D2563AEE2a8";
-	var UTT_CONTRACT_ADDRESS_PRODUCTION = "0xbA6de5f4a98d2AEbb289d1136194D05Ee24C426f";
+	var NETWORK_NAME;
+
+	(function (NETWORK_NAME) {
+	  NETWORK_NAME["polygon_mainnet"] = "polygon_mainnet";
+	  NETWORK_NAME["polygon_mumbai"] = "polygon_mumbai";
+	})(NETWORK_NAME || (NETWORK_NAME = {}));
 
 	function e$1(e) {
 	  this.message = e;
@@ -25001,7 +25005,7 @@
 	  _defaultProvider: etcDefaultProvider("https://www.ethercluster.com/mordor", "classicMordor")
 	}; // See: https://chainlist.org
 
-	const networks$1 = {
+	const networks = {
 	  unspecified: {
 	    chainId: 0,
 	    name: "unspecified"
@@ -25113,8 +25117,8 @@
 	  }
 
 	  if (typeof network === "number") {
-	    for (const name in networks$1) {
-	      const standard = networks$1[name];
+	    for (const name in networks) {
+	      const standard = networks[name];
 
 	      if (standard.chainId === network) {
 	        return {
@@ -25133,7 +25137,7 @@
 	  }
 
 	  if (typeof network === "string") {
-	    const standard = networks$1[network];
+	    const standard = networks[network];
 
 	    if (standard == null) {
 	      return null;
@@ -25147,7 +25151,7 @@
 	    };
 	  }
 
-	  const standard = networks$1[network.name]; // Not a standard network; check that it is a valid network in general
+	  const standard = networks[network.name]; // Not a standard network; check that it is a valid network in general
 
 	  if (!standard) {
 	    if (typeof network.chainId !== "number") {
@@ -29970,379 +29974,6 @@
 
 	}
 
-	function useAuth() {
-	  var _useState = p(getAccessTokenFromLocalStorage()),
-	      _useState2 = _slicedToArray(_useState, 2),
-	      accessToken = _useState2[0],
-	      setAccessToken = _useState2[1];
-
-	  h$1(function () {
-	    function onUtuTokensReady(event) {
-	      var access_token = event.detail.access_token;
-	      setAccessToken(access_token);
-	    }
-
-	    window.addEventListener(EVENT_UTU_IDENTITY_DATA_READY, onUtuTokensReady);
-	    return function () {
-	      window.removeEventListener(EVENT_UTU_IDENTITY_DATA_READY, onUtuTokensReady);
-	    };
-	  }, []);
-	  return {
-	    accessToken: accessToken
-	  };
-	}
-	function addressSignatureVerification(_x) {
-	  return _addressSignatureVerification.apply(this, arguments);
-	}
-
-	function _addressSignatureVerification() {
-	  _addressSignatureVerification = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(apiUrl) {
-	    var _window;
-
-	    var walletProvider,
-	        cookies,
-	        provider,
-	        signer,
-	        address,
-	        signature,
-	        _yield$axios$post,
-	        data,
-	        _args = arguments;
-
-	    return _regeneratorRuntime().wrap(function _callee$(_context) {
-	      while (1) {
-	        switch (_context.prev = _context.next) {
-	          case 0:
-	            walletProvider = _args.length > 1 && _args[1] !== undefined ? _args[1] : null;
-	            cookies = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
-
-	            if (!(!((_window = window) !== null && _window !== void 0 && _window.ethereum) && !walletProvider)) {
-	              _context.next = 4;
-	              break;
-	            }
-
-	            return _context.abrupt("return", null);
-
-	          case 4:
-	            // @ts-ignore
-	            provider = new Web3Provider(walletProvider || window.ethereum);
-	            signer = provider.getSigner();
-	            _context.next = 8;
-	            return signer.getAddress();
-
-	          case 8:
-	            address = _context.sent;
-	            _context.next = 11;
-	            return signer.signMessage("Sign in at UTU");
-
-	          case 11:
-	            signature = _context.sent;
-	            _context.next = 14;
-	            return axios.post("".concat(apiUrl).concat(API_VERIFY_ADDRESS), {
-	              address: address,
-	              signature: signature
-	            }, {
-	              withCredentials: !!cookies
-	            });
-
-	          case 14:
-	            _yield$axios$post = _context.sent;
-	            data = _yield$axios$post.data;
-	            _context.next = 18;
-	            return localStorage.setItem(LOCAL_STORAGE_KEY_UTU_IDENTITY_DATA, JSON.stringify(data));
-
-	          case 18:
-	            return _context.abrupt("return", data);
-
-	          case 20:
-	          case "end":
-	            return _context.stop();
-	        }
-	      }
-	    }, _callee);
-	  }));
-	  return _addressSignatureVerification.apply(this, arguments);
-	}
-
-	function getAccessTokenFromLocalStorage() {
-	  var item = localStorage.getItem(LOCAL_STORAGE_KEY_UTU_IDENTITY_DATA);
-
-	  if (item) {
-	    var _JSON$parse = JSON.parse(item),
-	        access_token = _JSON$parse.access_token;
-
-	    var _ref = o$1(access_token),
-	        exp = _ref.exp;
-
-	    if (isValid(exp)) {
-	      return access_token;
-	    }
-	  }
-
-	  return null;
-	}
-
-	function isValid(exp) {
-	  return Date.now() < exp * 1000;
-	}
-
-	function useRankingApi(apiUrl, sourceUuid, targetType) {
-	  var _useAuth = useAuth(),
-	      accessToken = _useAuth.accessToken;
-
-	  var _useState = p(undefined),
-	      _useState2 = _slicedToArray(_useState, 2),
-	      rankingItems = _useState2[0],
-	      setRankingItems = _useState2[1];
-
-	  var queryParams = lib.stringify({
-	    sourceCriteria: JSON.stringify(createEntityCriteria(sourceUuid)),
-	    targetType: targetType
-	  });
-	  h$1(function () {
-	    function f() {
-	      return _f.apply(this, arguments);
-	    }
-
-	    function _f() {
-	      _f = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-	        var response;
-	        return _regeneratorRuntime().wrap(function _callee$(_context) {
-	          while (1) {
-	            switch (_context.prev = _context.next) {
-	              case 0:
-	                _context.next = 2;
-	                return axios.get("".concat(apiUrl).concat(CORE_API_BASE).concat(API_RANKING, "?").concat(queryParams), withAuthorizationHeader(accessToken));
-
-	              case 2:
-	                response = _context.sent;
-	                setRankingItems(response.data.result);
-
-	              case 4:
-	              case "end":
-	                return _context.stop();
-	            }
-	          }
-	        }, _callee);
-	      }));
-	      return _f.apply(this, arguments);
-	    }
-
-	    f();
-	  }, [setRankingItems, apiUrl, queryParams, accessToken]);
-	  return {
-	    rankingItems: rankingItems
-	  };
-	}
-	function useFeedbackApi(apiUrl, sourceUuid, targetUuid, transactionId) {
-	  var _useAuth2 = useAuth(),
-	      accessToken = _useAuth2.accessToken;
-
-	  var sourceCriteria = createEntityCriteria(sourceUuid);
-	  var targetCriteria = createEntityCriteria(targetUuid);
-
-	  var sendFeedback = function sendFeedback(feedbackData) {
-	    return axios.post("".concat(apiUrl).concat(CORE_API_BASE).concat(API_FEEDBACK), {
-	      sourceCriteria: sourceCriteria,
-	      targetCriteria: targetCriteria,
-	      transactionId: transactionId,
-	      data: feedbackData
-	    }, withAuthorizationHeader(accessToken)).then(function () {
-	      console.log("successfully uploaded to utu-api");
-	    }).catch(function (err) {
-	      console.log(err);
-	    });
-	  };
-
-	  console.log("".concat(apiUrl).concat(CORE_API_BASE).concat(API_FEEDBACK));
-	  return {
-	    sendFeedback: sendFeedback
-	  };
-	}
-	function useBadgesApi(apiUrl) {
-	  var _useAuth3 = useAuth(),
-	      accessToken = _useAuth3.accessToken;
-
-	  var _useState3 = p([]),
-	      _useState4 = _slicedToArray(_useState3, 2),
-	      badgeSets = _useState4[0],
-	      setBadgeSets = _useState4[1];
-
-	  h$1(function () {
-	    function f() {
-	      return _f2.apply(this, arguments);
-	    }
-
-	    function _f2() {
-	      _f2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-	        var response;
-	        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-	          while (1) {
-	            switch (_context2.prev = _context2.next) {
-	              case 0:
-	                _context2.next = 2;
-	                return axios.get("".concat(apiUrl).concat(CORE_API_BASE).concat(API_BADGES), withAuthorizationHeader(accessToken));
-
-	              case 2:
-	                response = _context2.sent;
-	                setBadgeSets(response.data.result);
-
-	              case 4:
-	              case "end":
-	                return _context2.stop();
-	            }
-	          }
-	        }, _callee2);
-	      }));
-	      return _f2.apply(this, arguments);
-	    }
-
-	    f();
-	  }, [setBadgeSets, apiUrl, accessToken]);
-	  return {
-	    badgeSets: badgeSets
-	  };
-	}
-	function useFeedbackSummaryApi(apiUrl, targetUuid) {
-	  var _useAuth4 = useAuth(),
-	      accessToken = _useAuth4.accessToken;
-
-	  var _useState5 = p(undefined),
-	      _useState6 = _slicedToArray(_useState5, 2),
-	      feedbackSummary = _useState6[0],
-	      setFeedbackSummary = _useState6[1];
-
-	  var queryParams = lib.stringify({
-	    targetCriteria: JSON.stringify(createEntityCriteria(targetUuid))
-	  });
-	  h$1(function () {
-	    function f() {
-	      return _f3.apply(this, arguments);
-	    }
-
-	    function _f3() {
-	      _f3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-	        var response;
-	        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-	          while (1) {
-	            switch (_context3.prev = _context3.next) {
-	              case 0:
-	                _context3.next = 2;
-	                return axios.get("".concat(apiUrl).concat(CORE_API_BASE).concat(API_FEEDBACK_SUMMARY, "?").concat(queryParams), withAuthorizationHeader(accessToken));
-
-	              case 2:
-	                response = _context3.sent;
-	                setFeedbackSummary(response.data.result.data);
-
-	              case 4:
-	              case "end":
-	                return _context3.stop();
-	            }
-	          }
-	        }, _callee3);
-	      }));
-	      return _f3.apply(this, arguments);
-	    }
-
-	    f();
-	  }, [setFeedbackSummary, apiUrl, queryParams, accessToken]);
-	  return {
-	    feedbackSummary: feedbackSummary
-	  };
-	}
-	function useUploadVideoApi(apiUrl, source) {
-	  var _useAuth5 = useAuth(),
-	      accessToken = _useAuth5.accessToken;
-
-	  var _useState7 = p({
-	    uploading: false
-	  }),
-	      _useState8 = _slicedToArray(_useState7, 2),
-	      status = _useState8[0],
-	      setStatus = _useState8[1];
-
-	  h$1(function () {
-	    if (!source) return;
-	    var wrappedReader = {
-	      read: function read() {
-	        var result = source.read();
-	        return result;
-	      }
-	    };
-	    var options = {
-	      resume: false,
-	      endpoint: "".concat(apiUrl).concat(UPLOADER_API_BASE, "/upload"),
-	      headers: getAuthorizationHeader(accessToken),
-	      chunkSize: 28 * 1024,
-	      uploadLengthDeferred: true,
-	      retryDelays: [0, 3000, 5000, 10000, 20000],
-	      metadata: {
-	        filename: "webcam.webm",
-	        filetype: "video/webm"
-	      },
-	      onError: function onError() {
-	        setStatus({
-	          uploading: false,
-	          errorMessage: "video was not successfully uploaded "
-	        });
-	      },
-	      onSuccess: function onSuccess() {
-	        var publishedVideoUrl = getPublishedVideoUrl(apiUrl, upload.url);
-	        var checkVideoInterval = setInterval(function () {
-	          axios.head(publishedVideoUrl).then(function () {
-	            setStatus({
-	              uploading: false,
-	              publishedVideoUrl: publishedVideoUrl
-	            });
-	            clearInterval(checkVideoInterval);
-	          }).catch(function () {
-	            return setStatus({
-	              errorMessage: "Video not yet available."
-	            });
-	          });
-	        }, 500);
-	        setStatus({
-	          successMessage: "video was successfully uploaded"
-	        });
-	      }
-	    };
-	    var upload = new Upload(wrappedReader, options); // Start the upload
-
-	    upload.start();
-	    setStatus({
-	      uploading: true
-	    });
-	  }, [accessToken, source]);
-	  return status;
-	}
-
-	function getPublishedVideoUrl(apiUrl, uploadUrl) {
-	  var videoId = uploadUrl.split("/").pop();
-	  var publishedUrl = "".concat(apiUrl).concat(VIDEO_PUBLISHED_BASE, "/").concat(videoId);
-	  return publishedUrl;
-	}
-
-	function createEntityCriteria(uuid) {
-	  return {
-	    ids: {
-	      uuid: uuid
-	    }
-	  };
-	}
-
-	function withAuthorizationHeader(accessToken) {
-	  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-	  return _objectSpread2(_objectSpread2({}, config), {}, {
-	    headers: _objectSpread2(_objectSpread2({}, config.headers || {}), getAuthorizationHeader(accessToken))
-	  });
-	}
-
-	function getAuthorizationHeader(accessToken) {
-	  return {
-	    "Authorization": "Bearer ".concat(accessToken)
-	  };
-	}
-
 	// eslint-disable-next-line es-x/no-object-assign -- safe
 
 
@@ -30417,10 +30048,12 @@
 	});
 
 	var config = {
-	  production: false
+	  production: false,
+	  feedbackDetailsMaxEndorsements: 5
 	};
 	window.addEventListener(EVENT_UTU_CONFIG, function (event) {
-	  return Object.assign(config, event.detail);
+	  console.log("UTU SDK received config:", JSON.stringify(event.detail));
+	  Object.assign(config, event.detail);
 	});
 	function getBaseProps(props, componentName) {
 	  var apiUrlDefault = config.production ? UTU_API_BASE_URL_PRODUCTION : UTU_API_BASE_URL_TEST;
@@ -30447,6 +30080,426 @@
 	  }, 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);
 	}
 
+	function useAuth() {
+	  var _useState = p(getAccessTokenFromLocalStorage()),
+	      _useState2 = _slicedToArray(_useState, 2),
+	      accessToken = _useState2[0],
+	      setAccessToken = _useState2[1];
+
+	  h$1(function () {
+	    function onUtuTokensReady(event) {
+	      var access_token = event.detail.access_token;
+	      setAccessToken(access_token);
+	    }
+
+	    window.addEventListener(EVENT_UTU_IDENTITY_DATA_READY, onUtuTokensReady);
+	    return function () {
+	      window.removeEventListener(EVENT_UTU_IDENTITY_DATA_READY, onUtuTokensReady);
+	    };
+	  }, []);
+	  return {
+	    accessToken: accessToken
+	  };
+	}
+	function addressSignatureVerification() {
+	  return _addressSignatureVerification.apply(this, arguments);
+	}
+
+	function _addressSignatureVerification() {
+	  _addressSignatureVerification = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+	    var _window;
+
+	    var overrideApiUrl,
+	        walletProvider,
+	        cookies,
+	        utuApiBase,
+	        provider,
+	        signer,
+	        address,
+	        signature,
+	        _yield$axios$post,
+	        data,
+	        _args = arguments;
+
+	    return _regeneratorRuntime().wrap(function _callee$(_context) {
+	      while (1) {
+	        switch (_context.prev = _context.next) {
+	          case 0:
+	            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
+
+	            if (!(!((_window = window) !== null && _window !== void 0 && _window.ethereum) && !walletProvider)) {
+	              _context.next = 6;
+	              break;
+	            }
+
+	            return _context.abrupt("return", null);
+
+	          case 6:
+	            // @ts-ignore
+	            provider = new Web3Provider(walletProvider || window.ethereum);
+	            signer = provider.getSigner();
+	            _context.next = 10;
+	            return signer.getAddress();
+
+	          case 10:
+	            address = _context.sent;
+	            _context.next = 13;
+	            return signer.signMessage("Sign in at UTU");
+
+	          case 13:
+	            signature = _context.sent;
+	            _context.next = 16;
+	            return axios.post("".concat(utuApiBase).concat(API_VERIFY_ADDRESS), {
+	              address: address,
+	              signature: signature
+	            }, {
+	              withCredentials: !!cookies
+	            });
+
+	          case 16:
+	            _yield$axios$post = _context.sent;
+	            data = _yield$axios$post.data;
+	            _context.next = 20;
+	            return localStorage.setItem(LOCAL_STORAGE_KEY_UTU_IDENTITY_DATA, JSON.stringify(data));
+
+	          case 20:
+	            return _context.abrupt("return", data);
+
+	          case 22:
+	          case "end":
+	            return _context.stop();
+	        }
+	      }
+	    }, _callee);
+	  }));
+	  return _addressSignatureVerification.apply(this, arguments);
+	}
+
+	function getAccessTokenFromLocalStorage() {
+	  var item = localStorage.getItem(LOCAL_STORAGE_KEY_UTU_IDENTITY_DATA);
+
+	  if (item) {
+	    var _JSON$parse = JSON.parse(item),
+	        access_token = _JSON$parse.access_token;
+
+	    var _ref = o$1(access_token),
+	        exp = _ref.exp;
+
+	    if (isValid(exp)) {
+	      return access_token;
+	    }
+	  }
+
+	  return null;
+	}
+
+	function isValid(exp) {
+	  return Date.now() < exp * 1000;
+	}
+
+	function useRankingApi(apiUrl, sourceUuid, targetType) {
+	  var _useAuth = useAuth(),
+	      accessToken = _useAuth.accessToken;
+
+	  var _useState = p(undefined),
+	      _useState2 = _slicedToArray(_useState, 2),
+	      rankingItems = _useState2[0],
+	      setRankingItems = _useState2[1];
+
+	  var queryParams = lib.stringify({
+	    sourceCriteria: JSON.stringify(createEntityCriteria(sourceUuid)),
+	    targetType: targetType
+	  });
+	  h$1(function () {
+	    function f() {
+	      return _f.apply(this, arguments);
+	    }
+
+	    function _f() {
+	      _f = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+	        var response;
+	        return _regeneratorRuntime().wrap(function _callee$(_context) {
+	          while (1) {
+	            switch (_context.prev = _context.next) {
+	              case 0:
+	                _context.next = 2;
+	                return axios.get("".concat(apiUrl).concat(CORE_API_BASE).concat(API_RANKING, "?").concat(queryParams), withAuthorizationHeader(accessToken));
+
+	              case 2:
+	                response = _context.sent;
+	                setRankingItems(response.data.result);
+
+	              case 4:
+	              case "end":
+	                return _context.stop();
+	            }
+	          }
+	        }, _callee);
+	      }));
+	      return _f.apply(this, arguments);
+	    }
+
+	    f();
+	  }, [setRankingItems, apiUrl, queryParams, accessToken]);
+	  return {
+	    rankingItems: rankingItems
+	  };
+	}
+	var SubmitStatus;
+
+	(function (SubmitStatus) {
+	  SubmitStatus[SubmitStatus["idle"] = 0] = "idle";
+	  SubmitStatus[SubmitStatus["submitting"] = 1] = "submitting";
+	  SubmitStatus[SubmitStatus["success"] = 2] = "success";
+	  SubmitStatus[SubmitStatus["error"] = 3] = "error";
+	})(SubmitStatus || (SubmitStatus = {}));
+
+	var SUBMIT_STATUS_RESET_DELAY_MS = 3000;
+	/**
+	 * Calls the given submitStatusSetter with SubmitStatus.idle after a delay of SUBMIT_STATUS_RESET_DELAY_MS
+	 * @param submitStatusSetter
+	 */
+
+	function resetSubmitStatusDelayed(submitStatusSetter) {
+	  setTimeout(function () {
+	    return submitStatusSetter(SubmitStatus.idle);
+	  }, SUBMIT_STATUS_RESET_DELAY_MS);
+	}
+	/**
+	 * Use the UTU API to post feedback.
+	 * @param apiUrl
+	 * @param sourceUuid
+	 * @param targetUuid
+	 * @param transactionId
+	 * @return a function which takes an IFeedbackData parameter and returns a promise which will resolve with an
+	 *         unspecified value when the feedback was posted successfully, and will reject otherwise.
+	 */
+
+
+	function useFeedbackApi(apiUrl, sourceUuid, targetUuid, transactionId) {
+	  var _useAuth2 = useAuth(),
+	      accessToken = _useAuth2.accessToken;
+
+	  var _useState3 = p(SubmitStatus.idle),
+	      _useState4 = _slicedToArray(_useState3, 2),
+	      submitStatus = _useState4[0],
+	      setSubmitStatus = _useState4[1];
+
+	  var sourceCriteria = createEntityCriteria(sourceUuid);
+	  var targetCriteria = createEntityCriteria(targetUuid);
+
+	  function sendFeedback(feedbackData) {
+	    setSubmitStatus(SubmitStatus.submitting);
+	    return axios.post("".concat(apiUrl).concat(CORE_API_BASE).concat(API_FEEDBACK), {
+	      sourceCriteria: sourceCriteria,
+	      targetCriteria: targetCriteria,
+	      transactionId: transactionId,
+	      data: feedbackData
+	    }, withAuthorizationHeader(accessToken)).then(function (result) {
+	      setSubmitStatus(SubmitStatus.success);
+	      resetSubmitStatusDelayed(setSubmitStatus);
+	      return result;
+	    }).catch(function (error) {
+	      setSubmitStatus(SubmitStatus.error);
+	      resetSubmitStatusDelayed(setSubmitStatus);
+	      return error;
+	    });
+	  }
+
+	  return {
+	    sendFeedback: sendFeedback,
+	    submitStatus: submitStatus
+	  };
+	}
+	function useBadgesApi(apiUrl) {
+	  var _useAuth3 = useAuth(),
+	      accessToken = _useAuth3.accessToken;
+
+	  var _useState5 = p([]),
+	      _useState6 = _slicedToArray(_useState5, 2),
+	      badgeSets = _useState6[0],
+	      setBadgeSets = _useState6[1];
+
+	  h$1(function () {
+	    function f() {
+	      return _f2.apply(this, arguments);
+	    }
+
+	    function _f2() {
+	      _f2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+	        var response;
+	        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+	          while (1) {
+	            switch (_context2.prev = _context2.next) {
+	              case 0:
+	                _context2.next = 2;
+	                return axios.get("".concat(apiUrl).concat(CORE_API_BASE).concat(API_BADGES), withAuthorizationHeader(accessToken));
+
+	              case 2:
+	                response = _context2.sent;
+	                setBadgeSets(response.data.result);
+
+	              case 4:
+	              case "end":
+	                return _context2.stop();
+	            }
+	          }
+	        }, _callee2);
+	      }));
+	      return _f2.apply(this, arguments);
+	    }
+
+	    f();
+	  }, [setBadgeSets, apiUrl, accessToken]);
+	  return {
+	    badgeSets: badgeSets
+	  };
+	}
+	function useFeedbackSummaryApi(apiUrl, sourceUuid, targetUuid) {
+	  var _useAuth4 = useAuth(),
+	      accessToken = _useAuth4.accessToken;
+
+	  var _useState7 = p(undefined),
+	      _useState8 = _slicedToArray(_useState7, 2),
+	      feedbackSummary = _useState8[0],
+	      setFeedbackSummary = _useState8[1];
+	  var targetCriteria = createEntityCriteria(targetUuid);
+	  var queryParams = lib.stringify({
+	    // sourceCriteria, don't send for now, there's a bug in the API which then only returns feedback from that
+	    // source, but not from their connections
+	    targetCriteria: targetCriteria
+	  });
+	  h$1(function () {
+	    function f() {
+	      return _f3.apply(this, arguments);
+	    }
+
+	    function _f3() {
+	      _f3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+	        var response;
+	        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+	          while (1) {
+	            switch (_context3.prev = _context3.next) {
+	              case 0:
+	                _context3.next = 2;
+	                return axios.get("".concat(apiUrl).concat(CORE_API_BASE).concat(API_FEEDBACK_SUMMARY, "?").concat(queryParams), withAuthorizationHeader(accessToken));
+
+	              case 2:
+	                response = _context3.sent;
+	                setFeedbackSummary(response.data.result.data);
+
+	              case 4:
+	              case "end":
+	                return _context3.stop();
+	            }
+	          }
+	        }, _callee3);
+	      }));
+	      return _f3.apply(this, arguments);
+	    }
+
+	    f();
+	  }, [setFeedbackSummary, apiUrl, queryParams, accessToken]);
+	  return {
+	    feedbackSummary: feedbackSummary
+	  };
+	}
+	function useUploadVideoApi(apiUrl, source) {
+	  var _useAuth5 = useAuth(),
+	      accessToken = _useAuth5.accessToken;
+
+	  var _useState9 = p({
+	    uploading: false
+	  }),
+	      _useState10 = _slicedToArray(_useState9, 2),
+	      status = _useState10[0],
+	      setStatus = _useState10[1];
+
+	  h$1(function () {
+	    if (!source) return;
+	    var wrappedReader = {
+	      read: function read() {
+	        var result = source.read();
+	        return result;
+	      }
+	    };
+	    var options = {
+	      resume: false,
+	      endpoint: "".concat(apiUrl).concat(UPLOADER_API_BASE, "/upload"),
+	      headers: getAuthorizationHeader(accessToken),
+	      chunkSize: 28 * 1024,
+	      uploadLengthDeferred: true,
+	      retryDelays: [0, 3000, 5000, 10000, 20000],
+	      metadata: {
+	        filename: "webcam.webm",
+	        filetype: "video/webm"
+	      },
+	      onError: function onError() {
+	        setStatus({
+	          uploading: false,
+	          errorMessage: "video was not successfully uploaded "
+	        });
+	      },
+	      onSuccess: function onSuccess() {
+	        var publishedVideoUrl = getPublishedVideoUrl(apiUrl, upload.url);
+	        var checkVideoInterval = setInterval(function () {
+	          axios.head(publishedVideoUrl).then(function () {
+	            setStatus({
+	              uploading: false,
+	              publishedVideoUrl: publishedVideoUrl
+	            });
+	            clearInterval(checkVideoInterval);
+	          }).catch(function () {
+	            return setStatus({
+	              errorMessage: "Video not yet available."
+	            });
+	          });
+	        }, 500);
+	        setStatus({
+	          successMessage: "video was successfully uploaded"
+	        });
+	      }
+	    };
+	    var upload = new Upload(wrappedReader, options); // Start the upload
+
+	    upload.start();
+	    setStatus({
+	      uploading: true
+	    });
+	  }, [accessToken, source]);
+	  return status;
+	}
+
+	function getPublishedVideoUrl(apiUrl, uploadUrl) {
+	  var videoId = uploadUrl.split("/").pop();
+	  var publishedUrl = "".concat(apiUrl).concat(VIDEO_PUBLISHED_BASE, "/").concat(videoId);
+	  return publishedUrl;
+	}
+
+	function createEntityCriteria(uuid) {
+	  return {
+	    ids: {
+	      uuid: uuid
+	    }
+	  };
+	}
+
+	function withAuthorizationHeader(accessToken) {
+	  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+	  return _objectSpread2(_objectSpread2({}, config), {}, {
+	    headers: _objectSpread2(_objectSpread2({}, config.headers || {}), getAuthorizationHeader(accessToken))
+	  });
+	}
+
+	function getAuthorizationHeader(accessToken) {
+	  return {
+	    "Authorization": "Bearer ".concat(accessToken)
+	  };
+	}
+
 	function styleInject(css, ref) {
 	  if (ref === void 0) ref = {};
 	  var insertAt = ref.insertAt;
@@ -31409,7 +31462,7 @@
 	  }
 	});
 
-	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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.utu-recommendation {\n  border-top-left-radius: 2%;\n  border-top-right-radius: 2%;\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(251, 201, 61);\n}\n.summary-image-item-dark {\n  border: 2px solid rgb(251, 201, 61);\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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.utu-recommendation {\n  border-top-left-radius: 2%;\n  border-top-right-radius: 2%;\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(251, 201, 61);\n}\n.summary-image-item-dark {\n  border: 2px solid rgb(251, 201, 61);\n}";
 	styleInject(css_248z$j);
 
 	function getRoot(ref) {
@@ -31506,12 +31559,517 @@
 	  }, rankingItem.summaryText))));
 	}
 
-	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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.utu-feedback-form {\n  display: flex;\n  flex-direction: column;\n  width: 100vw;\n  border-bottom: 15px rgb(251, 201, 61) solid;\n  z-index: 1;\n}\n.utu-feedback-form-popup {\n  padding: 0.5rem;\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    width: 100%;\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: space-around;\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}";
+	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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.utu-feedback-form {\n  display: flex;\n  flex-direction: column;\n  width: 100vw;\n  border-bottom: 15px rgb(251, 201, 61) solid;\n  z-index: 1;\n}\n.utu-feedback-form-popup {\n  padding: 0.5rem;\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    width: 100%;\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: space-around;\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}";
 	styleInject(css_248z$i);
 
-	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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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-section {\n  display: flex;\n  flex-wrap: wrap !important;\n  justify-content: center;\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}\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$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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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  flex-wrap: wrap !important;\n  justify-content: center;\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}\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}";
 	styleInject(css_248z$h);
 
+	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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}";
+	styleInject(css_248z$g);
+
+	/* eslint max-len: 0 */
+	function Logo() {
+	  return h$2("svg", {
+	    style: css_248z$g,
+	    version: "1.1",
+	    id: "Capa_1",
+	    xmlns: "http://www.w3.org/2000/svg",
+	    xmlnsXlink: "http://www.w3.org/1999/xlink",
+	    x: "0px",
+	    y: "0px",
+	    className: "logo-size",
+	    viewBox: "0 0 841.89 401.471",
+	    xmlSpace: "preserve"
+	  }, h$2("g", {
+	    id: "Layer_2"
+	  }, h$2("g", {
+	    id: "Layer_1-2"
+	  }, h$2("path", {
+	    fill: "#FFFFFF",
+	    d: "M565.858,0c263.37,4.676,263.323,395.802,0,400.243C302.487,395.709,302.532,4.397,565.858,0z"
+	  }), h$2("path", {
+	    fill: "#BBBBBB",
+	    d: "M0.005,224.144v-45.228c-0.005-2.54,2.051-4.603,4.591-4.607c0.019,0,0.038,0,0.057,0 c7.535,0.416,21.79-1.872,27.35,4.176c6.247,4.983,6.239,19.43,0,24.454c-4.912,5.359-15.871,4.127-22.758,4.215v16.991 C9.443,230.176-0.14,230.119,0.005,224.144z M9.26,198.834c6.479-0.119,18.55,1.96,17.854-8.119 c0.695-10.07-11.415-7.999-17.854-8.087V198.834z"
+	  }), h$2("path", {
+	    fill: "#BBBBBB",
+	    d: "M40.041,209.985c-1.848-25.798,36.885-25.901,34.957,0C76.878,235.775,38.241,235.671,40.041,209.985z M48.84,209.985c-1.208,15.847,18.742,15.839,17.534,0c1.232-15.99-18.782-15.99-17.574,0H48.84z"
+	  }), h$2("path", {
+	    fill: "#BBBBBB",
+	    d: "M77.149,195.475c-0.192-4.712,6.936-5.911,8.399-1.479l6.64,19.646l5.352-19.334 c0.498-1.867,2.202-3.156,4.135-3.128c1.851-0.022,3.506,1.146,4.104,2.896l5.352,19.574l6.56-19.646 c0.912-2.96,5.12-3.712,7.199-1.64c4.496,2.079-9.991,30.637-10.11,33.709c-1.112,3.823-7.144,3.384-8.168-0.32l-4.959-17.534 l-4.936,17.43c-0.72,2.308-3.173,3.595-5.479,2.875c-0.419-0.13-0.815-0.322-1.176-0.57 C87.868,226.512,77.678,197.931,77.149,195.475z"
+	  }), h$2("path", {
+	    fill: "#BBBBBB",
+	    d: "M128.201,209.649c-2.473-23.021,33.517-26.27,33.356-3.199c0.288,3.399-0.896,6.831-4.911,6.559h-19.814 c0.392,11.487,13.039,8.592,19.91,4.96C174.181,225.784,126.593,242.11,128.201,209.649z M137.063,205.649h15.854 C153.502,195.499,137.048,195.698,137.063,205.649z"
+	  }), h$2("path", {
+	    fill: "#BBBBBB",
+	    d: "M167.453,224.456c0.472-1.896-1.264-31.637,1.264-31.997c2.704-2.863,7.855-0.416,7.367,3.504 c2.288-6.655,16.919-7.04,11.535,1.823c-5.88,2.776-11.199,0.801-11.535,10.096v16.614 C176.212,230.039,167.325,230.048,167.453,224.456z"
+	  }), h$2("path", {
+	    fill: "#BBBBBB",
+	    d: "M190.963,209.649c-2.464-23.021,33.524-26.27,33.356-3.199c0.296,3.399-0.896,6.831-4.903,6.559h-19.822 c0.4,11.487,13.047,8.592,19.918,4.96C236.95,225.784,189.355,242.11,190.963,209.649z M199.834,205.649h15.854 C216.272,195.499,199.818,195.698,199.834,205.649z"
+	  }), h$2("path", {
+	    fill: "#BBBBBB",
+	    d: "M228.543,209.985c-1.544-14.935,13.255-24.861,25.03-16.11v-18.398c-0.152-3.728,4.848-5.76,7.375-3.048 c2.584-0.136,0.744,39.236,1.264,40.74c0,5.157-1.506,9.116-4.52,11.879C245.75,234.767,226.888,227.248,228.543,209.985z M237.175,209.985c-1.984,13.143,15.998,16.902,16.406,3.199v-11.062C246.79,193.891,236.07,198.986,237.175,209.985 L237.175,209.985z"
+	  }), h$2("path", {
+	    fill: "#BBBBBB",
+	    d: "M287.834,213.169v-37.692c-0.16-3.735,4.84-5.751,7.367-3.048c2.479,1.32,0.8,19.158,1.264,21.446 c5.464-5.088,16.526-3.696,20.838,1.688c5.703,5.728,5.768,23.198-0.191,28.798C307.92,233.959,286.426,228.976,287.834,213.169z M296.465,213.169c-0.855,8.104,9.807,11.679,14.287,5.655c6.839-10.398-2-29.524-14.287-16.727V213.169z"
+	  }), h$2("path", {
+	    fill: "#BBBBBB",
+	    d: "M323.175,243.046c-2.584-2.399-0.681-7.199,2.951-6.983c6.151-0.296,7.447-4.799,10.151-10.631 l-12.303-28.293c-0.211-0.535-0.317-1.105-0.312-1.68c-0.2-4.656,6.848-5.855,8.319-1.601l8.791,22.19l8.8-22.182 c0.928-2.744,5.031-3.656,7.071-1.44c5.095,2.2-13.775,35.325-13.943,38.356C338.413,240.198,331.006,246.95,323.175,243.046z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M710.811,214.345v-18.67c-0.152-3.728,4.871-5.76,7.383-3.048c4.903,6.264-5.039,29.693,8.479,28.941 c4.735,0,7.105-2.399,7.111-7.199v-18.687c-0.136-5.6,8.799-5.6,8.631,0c-0.695,7.199,2.096,23.198-3.031,29.077 C730.688,234.063,708.843,229.567,710.811,214.345z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M766.469,198.259c-2.928-3.288,0.552-7.111,4.376-6.256c0.144-3.455-1.264-10.943,4.264-10.814 c5.495-0.137,4.071,7.391,4.216,10.814c2.76-0.176,7.287-0.248,7.199,3.656c0.104,3.903-4.408,3.879-7.199,3.688 c0.376,1.399-0.96,21.118,0.936,21.462c2.191,1.304,6.008,0.8,5.855,4.472c-0.488,6.151-9.679,3.392-12.143,0.655 c-5.399-3.999-2.4-20.894-3.128-26.589C769.373,199.362,767.533,199.53,766.469,198.259z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M810.137,214.345v-18.67c-0.151-3.728,4.872-5.76,7.384-3.048c4.903,6.264-5.04,29.693,8.479,28.941 c4.736,0,7.106-2.399,7.111-7.199v-18.687c-0.136-5.6,8.8-5.6,8.632,0c-0.696,7.199,2.096,23.198-3.032,29.077 C830.015,234.063,808.169,229.567,810.137,214.345z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M531.155,40.865c45.052,0.8,45.044,67.729,0,68.489C486.104,108.579,486.111,41.665,531.155,40.865z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M444.163,148.855c45.052,0.8,45.044,67.705,0,68.465C399.111,216.545,399.119,149.607,444.163,148.855z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M529.835,248.934c39.845,0.672,39.845,59.898,0,60.57C489.982,308.84,489.991,249.646,529.835,248.934z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M465.257,230.447c31.197,0.528,31.197,46.916,0,47.443C434.084,277.371,434.092,230.991,465.257,230.447z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M511.389,130.457c29.47,0.504,29.461,44.268,0,44.796C481.911,174.677,481.92,130.921,511.389,130.457z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M582.566,101.42c29.469,0.504,29.461,44.308,0,44.795C553.097,145.72,553.104,101.915,582.566,101.42z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M637.921,93.524c29.445,0.504,29.445,44.292,0,44.796C608.628,138.176,608.628,93.66,637.921,93.524z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M656.367,146.224c26.006,0.447,26.006,39.052,0,39.492C630.346,185.268,630.346,146.671,656.367,146.224z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M593.109,264.732c22.525,0.384,22.518,33.86,0,34.236C570.583,298.585,570.583,265.116,593.109,264.732z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M651.096,198.866c22.534,0.384,22.534,33.854,0,34.229C628.554,232.711,628.562,199.25,651.096,198.866z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M437.563,101.42c22.51,0.384,22.51,33.893,0,34.276C415.166,135.593,415.166,101.516,437.563,101.42z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M603.66,56.655c22.526,0.385,22.518,33.854,0,34.237C581.254,90.788,581.254,56.752,603.66,56.655z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M500.838,196.251c22.534,0.384,22.534,33.828,0,34.213C478.296,230.071,478.304,196.627,500.838,196.251z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M632.642,240.99c19.046,0.328,19.046,28.678,0,29.006C613.604,269.644,613.604,241.318,632.642,240.99z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M474.464,64.567c19.062,0.327,19.062,28.637,0,28.957C455.506,93.437,455.506,64.655,474.464,64.567z"
+	  }), h$2("path", {
+	    fill: "#2B2B2B",
+	    d: "M479.744,104.06c19.054,0.319,19.054,28.677,0,28.997C460.762,132.969,460.762,104.14,479.744,104.06z"
+	  }), h$2("rect", {
+	    x: "474.385",
+	    y: "78.803",
+	    transform: "matrix(-0.9944 0.1058 -0.1058 -0.9944 961.3718 138.2227)",
+	    fill: "#2B2B2B",
+	    width: "5.272",
+	    height: "31.605"
+	  }), h$2("rect", {
+	    x: "437.48",
+	    y: "126.203",
+	    transform: "matrix(-0.9944 0.1058 -0.1058 -0.9944 892.7841 236.662)",
+	    fill: "#2B2B2B",
+	    width: "5.272",
+	    height: "31.606"
+	  }), h$2("rect", {
+	    x: "490.251",
+	    y: "181.519",
+	    transform: "matrix(-0.0772 0.997 -0.997 -0.0772 728.7499 -306.1609)",
+	    fill: "#2B2B2B",
+	    width: "31.605",
+	    height: "5.272"
+	  }), h$2("rect", {
+	    x: "501.348",
+	    y: "116.825",
+	    transform: "matrix(-0.349 0.9371 -0.9371 -0.349 809.6375 -323.5298)",
+	    fill: "#2B2B2B",
+	    width: "31.702",
+	    height: "5.288"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "500.006,156.966 469.969,166.869 468.312,161.87 498.35,151.959 500.006,156.966 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "474.744,120.346 443.115,121.018 443.003,115.754 474.632,115.082 474.744,120.346 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "591.813,71.87 560.265,72.462 560.152,67.782 591.701,67.183 591.813,71.87 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "499.438,223.992 476.472,245.614 473.248,242.223 496.206,220.601 499.438,223.992 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "625.714,262.309 601.301,282.282 598.316,278.667 622.73,258.701 625.714,262.309 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "587.094,241.286 595.189,271.748 590.669,272.972 582.566,242.511 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "643.904,215.889 612.739,210.985 613.451,206.354 644.616,211.257 643.904,215.889 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "642.568,172.725 612.188,181.22 610.907,176.717 641.289,168.222 642.568,172.725 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "583.342,137.208 579.742,168.518 575.079,168.005 578.679,136.696 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "545.922,177.221 519.204,160.454 521.676,156.479 548.394,173.245 545.922,177.221 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "567.008,111.379 540.29,94.612 542.762,90.637 569.479,107.403 567.008,111.379 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "584.438,112.122 594.733,82.325 599.173,83.829 588.878,113.626 584.438,112.122 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "528.579,261.717 543.498,233.943 547.642,236.143 532.715,263.908 528.579,261.717 \t\t"
+	  }), h$2("polygon", {
+	    fill: "#2B2B2B",
+	    points: "633.905,106.683 609.972,86.141 613.012,82.573 636.945,103.115 633.905,106.683 \t\t"
+	  }), h$2("path", {
+	    fill: "#FFE535",
+	    d: "M575.951,156.759c62.394,1.063,62.394,93.759,0,94.807C513.604,250.502,513.62,157.814,575.951,156.759z"
+	  }))));
+	}
+
+	/* eslint max-len: 0 */
+	function SadPenguin() {
+	  return h$2("svg", {
+	    xmlns: "http://www.w3.org/2000/svg",
+	    id: "svg2",
+	    viewBox: "0 0 3000 3000",
+	    version: "1.1"
+	  }, h$2("defs", {
+	    id: "defs34"
+	  }), h$2("g", {
+	    id: "g3040",
+	    transform: "translate(0,-4.4063)"
+	  }, h$2("path", {
+	    id: "path7",
+	    fill: "#fff",
+	    d: "m1520.9 2457.6c-502.69 0-910.31 244.27-915.91 546.77h1832.2c-5.5781-302.51-413.58-546.77-916.24-546.77z"
+	  }), h$2("path", {
+	    id: "path9",
+	    fill: "#fff",
+	    d: "m2417.1 1351.8c0 305.39-410.34 552.96-916.5 552.96s-916.48-247.57-916.48-552.96 410.32-552.96 916.48-552.96 916.5 247.57 916.5 552.96z"
+	  }), h$2("path", {
+	    id: "path11",
+	    d: "m1813.5 897.94c14.133 1.2188 28.195 3.9609 42.844 7.7109 148.59 37.992 275.55 201.91 310.92 401.37 10.383 58.641 11.273 147.89 1.8281 200.67-23.976 133.95-93.328 232.1-190.05 269.53-39.609 15.328-98.062 19.476-140.27 9.8906-100.69-22.875-200.65-111.8-261.47-232.92-29.578-58.875-58.805-155.11-58.594-192.61-4.4063-27.047-4.8984-30.07-7.3359-69.211-3.7266-13.898 1.8984-87.75 13.547-138.07 25.453-109.66 85.148-193.43 165.16-232.17 40.547-19.641 81.047-27.773 123.42-24.188z"
+	  }), h$2("path", {
+	    id: "path13",
+	    d: "m1435.5 433.59c-191.91 3.1172-378.8 60.586-526.97 163.34-211.9 146.93-352.12 372.73-411.26 663.21-2.7188 13.359-6.1875 31.734-8.0625 40.641-1.875 8.9062-5.7188 31.594-8.0625 50.531-2.3438 18.961-6.3516 50.273-9.1406 69.211-6.5625 44.484-6.6094 206.84 0 247.2 20.203 123.49 42.117 213.66 88.617 364.76 14.133 45.914 17.414 56.93 24.891 84.961 2.0859 7.8047 9.6562 35.156 16.5 60.797 44.016 164.95 47.859 278.65 13.898 386.34-24.867 78.844-64.172 139.27-141.73 216.42-55.57 55.453-118.34 139.12-159.28 223.41h374.25c9.7734-22.594 17.602-46.219 26.367-63.727 56.18-112.08 113.13-190.88 193.73-268.08 106.08-101.62 225.54-162.59 368.04-188.23 39.141-7.0547 161.62-8.2969 200.32-1.8281 210.96 35.226 391.27 147.75 535.41 333.98 42.516 54.938 80.789 119.58 115.34 187.88h787.73c-26.555-57.562-71.719-129.66-126.23-207.28-29.93-42.633-69.656-106.95-91.289-132.56-68.719-81.445-126.59-120.8-168.21-175.9-86.508-79.945-76.219-96.539-74.227-208.99 36-179.16 46.289-513.47 36-782.72 3.7969-78.609-0.4922-119.48-4.5-161.02-14.227-146.77-42.07-234.87-99.609-349.73-45.586-90.961-102.96-169.41-178.36-244.62-84.328-84.141-166.08-142.57-275.74-196.66-133.62-65.906-260.79-99.375-416.02-109.5-27.539-1.7812-54.984-2.2734-82.406-1.8281z"
+	  }), h$2("path", {
+	    id: "path15",
+	    fill: "#333",
+	    d: "m1521.2 567.63s-51.422 1268.6-19.031 1801.8c178.76 29.836 260.58 70.336 438.7 215.7 93.234 76.055 266.2 272.65 332.91 419.32h502.43c-46.8-72.3-139.5-212-161.8-238.4-28.476-33.727-67.008-78.984-85.336-100.71-58.219-69-145.27-167.18-180.54-213.87-37.336-36.891-33.586-62.859-32.226-112.43 3.3515-132.66 16.312-651.63 26.742-868.29 3.211-66.609 3.3985-93.703 0-128.91-12.047-124.36-35.836-210.28-84.609-307.62-38.602-77.086-86.977-143.53-150.87-207.28-71.461-71.297-140.72-120.8-233.65-166.62-113.2-55.828-352.66-92.648-352.66-92.648z"
+	  }), h$2("path", {
+	    id: "path17",
+	    fill: "#ec0",
+	    d: "m1427.1 1764.9-13.922 14.812c-27.703 29.344-87.352 49.359-179.11 59.906-100.76 11.602-228.89 5.3204-290.3-14.18-30.352-9.6329-38.578-7.9922-45.844 9.4921-22.898 55.219 24.984 159.73 137.55 300.3 71.391 89.156 177.52 196.34 243.94 246.35 25.852 19.477 57.375 34.852 86.766 42.305 23.906 6.0703 165.52 4.875 198.96-1.6406 11.156-2.1797 31.922-6.1172 46.102-8.8829 77.086-14.883 142.05-52.219 255.87-146.79 102.8-85.43 228.87-226.08 262.55-292.95 24.633-48.891 34.805-122.58 20.016-145.15-8.4844-12.938-12.047-13.148-44.578-2.789-31.547 10.031-139.05 20.25-211.9 20.25-30.164 0-78.844-2.8125-108.3-6.3282-85.758-10.195-135.09-27.773-164.02-58.5l-15.188-16.219zm36.867 32.414c22.336 0 34.852 29.086 26.203 61.172-14.812 55.031-50.695 81.656-72.562 53.836-23.977-30.469 10.078-115.01 46.359-115.01zm84.844 0c24.914 0 54.844 47.391 54.844 86.766 0 33.938-25.781 49.57-50.156 30.398-20.086-15.797-37.758-62.555-33.047-87.656 3.1875-17.062 15.188-29.508 28.359-29.508z",
+	    style: "fill:#fbc93d;fill-opacity:1"
+	  }), h$2("path", {
+	    id: "path19",
+	    fill: "#fff",
+	    d: "m1214 1077.4c35.18-3 68.812 3.7734 102.49 20.062 66.375 32.133 115.8 101.77 136.88 192.54 14.274 71.226 9.3281 172.12 3.6328 189.16-7.6172 58.078-40.664 141.38-77.555 195.59-50.297 73.945-120.91 126.91-188.27 141.12-60.047 12.656-116.41 0.2812-164.84-36.188-72.891-54.914-113.13-153.02-113.16-275.25-0.0234-198.47 115.85-382.52 264.91-420.66 12.188-3.1172 24.164-5.3906 35.906-6.375z"
+	  }), h$2("path", {
+	    id: "path21",
+	    fill: "#fff",
+	    d: "m1794.7 1077.4c-35.203-3-68.836 3.7734-102.52 20.062-66.375 32.133-115.8 101.77-136.85 192.54-14.273 71.226-9.3281 172.12-3.6562 189.16 7.6406 58.078 40.688 141.38 77.555 195.59 50.297 73.945 120.94 126.91 188.27 141.12 60.07 12.656 116.44 0.2812 164.86-36.188 72.867-54.914 113.11-153.02 113.13-275.25 0.047-198.47-115.85-382.52-264.91-420.66-12.164-3.1172-24.164-5.3906-35.883-6.375z"
+	  }), h$2("path", {
+	    id: "path23",
+	    d: "m1418.5 1543.2c0 100.97-75.188 182.81-167.91 182.81-92.742 0-167.91-81.844-167.91-182.81 0-100.99 75.164-182.84 167.91-182.84 92.719 0 167.91 81.844 167.91 182.84z"
+	  }), h$2("path", {
+	    id: "path25",
+	    fill: "#fff",
+	    d: "m1379.2 1471.6c0 44.25-32.953 80.109-73.57 80.109-40.641 0-73.57-35.859-73.57-80.109s32.93-80.109 73.57-80.109c40.617 0 73.57 35.859 73.57 80.109z"
+	  }), h$2("path", {
+	    id: "path27",
+	    d: "m1922.2 1534.7c0 100.97-75.164 182.84-167.91 182.84-92.742 0-167.91-81.867-167.91-182.84s75.164-182.84 167.91-182.84c92.742 0 167.91 81.867 167.91 182.84z"
+	  }), h$2("path", {
+	    id: "path29",
+	    fill: "#fff",
+	    d: "m1885.7 1461.9c0 44.227-32.93 80.109-73.57 80.109-40.641 0-73.57-35.883-73.57-80.109 0-44.25 32.93-80.133 73.57-80.133 40.641 0 73.57 35.883 73.57 80.133z"
+	  }), h$2("path", {
+	    id: "path31",
+	    fill: "#333",
+	    d: "m988.2 966.73c37.4-23.23 78.6-34.74 125.2-35.68 91.898-1.8516 186.16 47.531 260.86 136.43 56.133 71.016 107.7 185.86 111.02 208.03-313.95 47.18-354.94 46.289-589.66 335.53-112.24-220.38-87.633-490.31 56.367-616.95 11.742-10.336 23.766-19.641 36.234-27.375z"
+	  }), h$2("path", {
+	    id: "path33",
+	    d: "m2007.8 971.6c-37.383-23.227-78.562-34.734-125.18-35.672-91.875-1.8516-186.16 47.531-260.86 136.43-56.109 71.016-107.67 185.86-111.02 208.03 313.95 47.18 354.94 46.289 589.66 335.53 112.27-220.41 87.633-490.31-56.344-616.95-11.766-10.336-23.789-19.641-36.258-27.375z"
+	  }), h$2("path", {
+	    id: "path35",
+	    d: "m1959.2 2230.3c0 109.1-44.297 197.67-98.836 197.67-54.562 0-98.836-88.57-98.836-197.67 0-109.12 81.562-234.98 102.56-466.22 4.1953 233.11 95.109 357.09 95.109 466.22z",
+	    stroke: "#0ff",
+	    fill: "#0ff"
+	  }), h$2("path", {
+	    id: "path37",
+	    fill: "#fff",
+	    d: "m1929.1 2168.9c0 50.508-21.07 98.273-46.336 98.273s-45.75-40.992-45.75-91.5c0-50.531 34.945-99.75 44.648-206.79 24.562 133.34 48 137.62 47.438 200.02z"
+	  }), h$2("path", {
+	    id: "path39",
+	    fill: "#0ff",
+	    d: "m1629.2 1674.7c50.297 73.945 120.94 126.91 188.27 141.12 60.07 12.656 116.44 0.2812 164.86-36.188 36.422-27.445 64.711-65.719 83.883-112.38-111.77 63.492-260.32 60.797-437.02 7.4532z"
+	  })));
+	} // Original from https://openclipart.org/detail/178504/sad-penguin
+
+	/*
+	 <metadata
+	 id="metadata29">
+	 <rdf:RDF>
+	 <cc:Work>
+	 <dc:format>image/svg+xml</dc:format>
+	 <dc:type
+	 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+	 <cc:license
+	 rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
+	 <dc:publisher>
+	 <cc:Agent
+	 rdf:about="http://openclipart.org/">
+	 <dc:title>Openclipart</dc:title>
+	 </cc:Agent>
+	 </dc:publisher>
+	 <dc:title>sad penguin</dc:title>
+	 <dc:date>2013-05-23T02:08:03</dc:date>
+	 <dc:description>A penguin in an outfit reminds us of tux from Linux fame.</dc:description>
+	 <dc:source>https://openclipart.org/detail/178504/sad-by-bartm-178504</dc:source>
+	 <dc:creator>
+	 <cc:Agent>
+	 <dc:title>BartM</dc:title>
+	 </cc:Agent>
+	 </dc:creator>
+	 <dc:subject>
+	 <rdf:Bag>
+	 <rdf:li>animal</rdf:li>
+	 <rdf:li>color</rdf:li>
+	 <rdf:li>linux</rdf:li>
+	 <rdf:li>penguin</rdf:li>
+	 <rdf:li>pet</rdf:li>
+	 <rdf:li>sad</rdf:li>
+	 <rdf:li>tux</rdf:li>
+	 </rdf:Bag>
+	 </dc:subject>
+	 </cc:Work>
+	 <cc:License
+	 rdf:about="http://creativecommons.org/licenses/publicdomain/">
+	 <cc:permits
+	 rdf:resource="http://creativecommons.org/ns#Reproduction" />
+	 <cc:permits
+	 rdf:resource="http://creativecommons.org/ns#Distribution" />
+	 <cc:permits
+	 rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+	 </cc:License>
+	 </rdf:RDF>
+	 </metadata>
+	 */
+
+	/* eslint max-len: 0 */
+	function FlowerPenguin() {
+	  return h$2("svg", {
+	    xmlns: "http://www.w3.org/2000/svg",
+	    viewBox: "0 0 3000 3000"
+	  }, h$2("path", {
+	    fill: "#fff",
+	    d: "M1520.9 2453.194c-502.69 0-910.31 244.27-915.91 546.77h1832.2c-5.578-302.51-413.58-546.77-916.24-546.77zM2417.1 1347.394c0 305.39-410.34 552.96-916.5 552.96s-916.48-247.57-916.48-552.96 410.32-552.96 916.48-552.96 916.5 247.57 916.5 552.96z"
+	  }), h$2("path", {
+	    d: "M1813.5 893.534c14.133 1.219 28.195 3.96 42.844 7.71 148.59 37.993 275.55 201.91 310.92 401.37 10.383 58.642 11.273 147.89 1.828 200.67-23.976 133.95-93.328 232.1-190.05 269.53-39.609 15.329-98.062 19.477-140.27 9.891-100.69-22.875-200.65-111.8-261.47-232.92-29.578-58.875-58.805-155.11-58.594-192.61-4.406-27.047-4.898-30.07-7.336-69.21-3.726-13.899 1.899-87.75 13.547-138.07 25.453-109.66 85.148-193.43 165.16-232.17 40.547-19.642 81.047-27.774 123.42-24.189z"
+	  }), h$2("path", {
+	    d: "M1435.5 429.184c-191.91 3.117-378.8 60.586-526.97 163.34-211.9 146.93-352.12 372.73-411.26 663.21-2.719 13.359-6.188 31.734-8.063 40.64-1.875 8.907-5.718 31.595-8.062 50.532-2.344 18.96-6.352 50.273-9.14 69.21-6.563 44.485-6.61 206.84 0 247.2 20.202 123.49 42.116 213.66 88.616 364.76 14.133 45.915 17.414 56.93 24.891 84.962 2.086 7.804 9.657 35.156 16.5 60.797 44.016 164.95 47.86 278.65 13.898 386.34-24.867 78.844-64.172 139.27-141.73 216.42-55.57 55.453-118.34 139.12-159.28 223.41h374.25c9.774-22.594 17.602-46.22 26.367-63.727 56.18-112.1 113.13-190.88 193.73-268.08 106.08-101.62 225.54-162.59 368.04-188.23 39.141-7.055 161.62-8.297 200.32-1.828 210.96 35.226 391.27 147.75 535.41 333.98 42.516 54.938 80.79 119.58 115.34 187.88h787.73c-26.555-57.562-71.719-129.66-126.23-207.28-29.93-42.633-69.656-106.95-91.289-132.56-68.719-81.445-126.59-120.8-168.21-175.9-86.508-79.945-76.219-96.54-74.227-208.99 36-179.16 46.29-513.47 36-782.72 3.797-78.61-.492-119.48-4.5-161.02-14.227-146.77-42.07-234.87-99.609-349.73-45.586-90.961-102.96-169.41-178.36-244.62-84.328-84.141-166.08-142.57-275.74-196.66-133.62-65.906-260.79-99.375-416.02-109.5-27.539-1.782-54.984-2.274-82.406-1.829zm-256.3 464.35c42.375-3.586 82.875 4.547 123.42 24.188 79.922 38.672 139.45 122.51 164.79 231.8 17.203 85.758 11.25 207.26 4.406 227.79-9.187 69.914-48.984 170.2-93.398 235.48-60.562 89.039-145.59 152.84-226.66 169.92-72.328 15.258-140.2.328-198.49-43.57-87.75-66.117-136.2-184.27-136.24-331.43-.023-238.97 139.5-460.57 318.98-506.46 14.648-3.75 29.086-6.492 43.195-7.711z"
+	  }), h$2("path", {
+	    fill: "#333",
+	    d: "M1521.2 563.224s-51.422 1268.6-19.031 1801.8c178.76 29.836 260.58 70.336 438.7 215.7 93.234 76.055 266.2 272.65 332.91 419.32h502.43c-46.8-72.3-139.5-212-161.8-238.4-28.476-33.727-67.008-78.984-85.336-100.71-58.219-69-145.27-167.18-180.54-213.87-37.336-36.891-33.586-62.86-32.226-112.43 3.352-132.66 16.312-651.63 26.742-868.29 3.211-66.61 3.398-93.703 0-128.91-12.047-124.36-35.836-210.28-84.609-307.62-38.602-77.086-86.977-143.53-150.87-207.28-71.461-71.297-140.72-120.8-233.65-166.62-113.2-55.828-352.66-92.648-352.66-92.648z"
+	  }), h$2("path", {
+	    fill: "#fff",
+	    d: "M1878.5 1782.294c-81.539-17.203-167.11-81.305-228.02-170.86-44.672-65.648-84.609-166.41-93.844-236.72-6.89-20.648-12.984-142.92 4.289-229.17 25.5-109.92 85.617-194.41 165.98-233.32 54.375-26.297 108.38-31.664 167.34-16.57 416.88 90.492 431.16 973.97-15.75 886.64z"
+	  }), h$2("path", {
+	    fill: "#ec0",
+	    d: "m1427.1 1764.9-13.922 14.812c-27.703 29.344-87.352 49.359-179.11 59.906-100.76 11.602-228.89 5.32-290.3-14.18-30.352-9.633-38.578-7.992-45.844 9.492-22.898 55.22 24.984 159.73 137.55 300.3 71.391 89.156 177.52 196.34 243.94 246.35 25.852 19.477 57.375 34.852 86.766 42.305 23.906 6.07 165.52 4.875 198.96-1.64 11.156-2.18 31.922-6.118 46.102-8.883 77.086-14.883 142.05-52.22 255.87-146.79 102.8-85.43 228.87-226.08 262.55-292.95 24.633-48.891 34.805-122.58 20.016-145.15-8.484-12.938-12.047-13.148-44.578-2.79-31.547 10.032-139.05 20.25-211.9 20.25-30.164 0-78.844-2.812-108.3-6.328-85.758-10.195-135.09-27.773-164.02-58.5l-15.188-16.219zm36.867 32.414c22.336 0 34.852 29.086 26.203 61.172-14.812 55.031-50.695 81.656-72.562 53.836-23.977-30.469 10.078-115.01 46.359-115.01zm84.844 0c24.914 0 54.844 47.391 54.844 86.766 0 33.938-25.781 49.57-50.156 30.398-20.086-15.797-37.758-62.555-33.047-87.656 3.188-17.062 15.188-29.508 28.359-29.508z",
+	    style: {
+	      fill: "#fbc93d",
+	      fillOpacity: 1
+	    },
+	    transform: "translate(0 -4.406)"
+	  }), h$2("path", {
+	    d: "M1400.6 1423.694c0 159.16-118.5 288.19-264.66 288.19-146.18 0-264.66-129.02-264.66-288.19 0-159.16 118.48-288.19 264.66-288.19 146.16 0 264.66 129.02 264.66 288.19z"
+	  }), h$2("path", {
+	    fill: "#fff",
+	    d: "M1338.7 1310.794c0 69.75-51.938 126.28-115.97 126.28-64.055 0-115.97-56.531-115.97-126.28 0-69.75 51.914-126.28 115.97-126.28 64.031 0 115.97 56.53 115.97 126.28z"
+	  }), h$2("path", {
+	    d: "M2158 1423.694c0 159.16-118.48 288.19-264.66 288.19-146.16 0-264.66-129.02-264.66-288.19 0-159.16 118.5-288.19 264.66-288.19 146.18 0 264.66 129.02 264.66 288.19z"
+	  }), h$2("path", {
+	    fill: "#fff",
+	    d: "M2096.1 1310.794c0 69.75-51.914 126.28-115.97 126.28-64.055 0-115.97-56.531-115.97-126.28 0-69.75 51.914-126.28 115.97-126.28 64.055 0 115.97 56.53 115.97 126.28z"
+	  }), h$2("path", {
+	    d: "M1846 841.894c-46.476-3.961-90.914 4.992-135.4 26.53-87.703 42.446-153.02 134.41-180.82 254.34-18.867 94.103-12.328 227.39-4.828 249.94 319.31-106.43 357.59-127.01 718.45 33.353.047-262.2-153.05-505.36-349.97-555.73-16.102-4.102-31.922-7.125-47.438-8.438z"
+	  }), h$2("path", {
+	    strokeLinejoin: "round",
+	    d: "M2354.1 863.624c-553.64-380.81 28.008-361.78-606.26-139.87-341.25 119.39 46.36 646.29 149.18 299.67 191.09-644.2 352.71-85.148-54.328-619.8-219-287.65-600.33 243.8-238.92 234.47 671.74-17.344 189.98 309.14 572.7-243.19 205.9-297.16-417.4-495.61-296.84-154.78 224.06 633.52-235.31 276.23 408.26 469.52 346.27 103.99 342.37-550.12 55.476-330.14-533.25 408.87-335.41-138.42-320.37 533.37 8.11 361.45 628.99 155.63 331.1-49.242z",
+	    stroke: "#f57f05",
+	    strokeWidth: 51.801,
+	    fill: "#fa9705"
+	  }), h$2("path", {
+	    strokeLinejoin: "round",
+	    d: "M2119.5 611.644c0 62.672-50.812 113.48-113.48 113.48-62.672 0-113.48-50.813-113.48-113.48 0-62.672 50.813-113.48 113.48-113.48 62.672 0 113.48 50.812 113.48 113.48z",
+	    stroke: "#f57f05",
+	    strokeWidth: 51.801,
+	    fill: "#fadc05"
+	  }), h$2("path", {
+	    fill: "#333",
+	    d: "M1154 841.894c46.476-3.961 90.914 4.992 135.4 26.53 87.703 42.446 153.02 134.41 180.82 254.34 18.867 94.103 12.328 227.39 4.828 249.94-319.31-106.43-357.59-127.01-718.45 33.353-.047-262.2 153.05-505.36 349.97-555.73 16.102-4.102 31.922-7.125 47.438-8.438z"
+	  }));
+	} // Original from https://openclipart.org/detail/178473/flower-by-bartm-178473
+
+	/*
+	 <metadata
+	 >
+	 <rdf:RDF
+	 >
+	 <cc:Work
+	 >
+	 <dc:format
+	 >image/svg+xml</dc:format
+	 >
+	 <dc:type
+	 rdf:resource="http://purl.org/dc/dcmitype/StillImage"
+	 />
+	 <cc:license
+	 rdf:resource="http://creativecommons.org/licenses/publicdomain/"
+	 />
+	 <dc:publisher
+	 >
+	 <cc:Agent
+	 rdf:about="http://openclipart.org/"
+	 >
+	 <dc:title
+	 >Openclipart</dc:title
+	 >
+	 </cc:Agent
+	 >
+	 </dc:publisher
+	 >
+	 <dc:title
+	 >flower penguin</dc:title
+	 >
+	 <dc:date
+	 >2013-05-23T01:59:09</dc:date
+	 >
+	 <dc:description
+	 >A penguin in an outfit reminds us of tux from Linux fame.</dc:description
+	 >
+	 <dc:source
+	 >https://openclipart.org/detail/178473/flower-by-bartm-178473</dc:source
+	 >
+	 <dc:creator
+	 >
+	 <cc:Agent
+	 >
+	 <dc:title
+	 >BartM</dc:title
+	 >
+	 </cc:Agent
+	 >
+	 </dc:creator
+	 >
+	 <dc:subject
+	 >
+	 <rdf:Bag
+	 >
+	 <rdf:li
+	 >animal</rdf:li
+	 >
+	 <rdf:li
+	 >color</rdf:li
+	 >
+	 <rdf:li
+	 >flower</rdf:li
+	 >
+	 <rdf:li
+	 >linux</rdf:li
+	 >
+	 <rdf:li
+	 >penguin</rdf:li
+	 >
+	 <rdf:li
+	 >pet</rdf:li
+	 >
+	 <rdf:li
+	 >tux</rdf:li
+	 >
+	 </rdf:Bag
+	 >
+	 </dc:subject
+	 >
+	 </cc:Work
+	 >
+	 <cc:License
+	 rdf:about="http://creativecommons.org/licenses/publicdomain/"
+	 >
+	 <cc:permits
+	 rdf:resource="http://creativecommons.org/ns#Reproduction"
+	 />
+	 <cc:permits
+	 rdf:resource="http://creativecommons.org/ns#Distribution"
+	 />
+	 <cc:permits
+	 rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
+	 />
+	 </cc:License
+	 >
+	 </rdf:RDF
+	 >
+	 </metadata
+	 >
+	 */
+
+	/* eslint-disable no-nested-ternary */
+
+	/**
+	 * A component which renders the given child when the provided SubmitStatus is idle, a spinner when submitting
+	 * a success message on success and error message on error.
+	 *
+	 * @param props
+	 * @constructor
+	 */
+	function SubmitStatusView(props) {
+	  var children = props.children,
+	      submitStatus = props.submitStatus;
+
+	  switch (submitStatus) {
+	    case SubmitStatus.idle:
+	      return children;
+
+	    case SubmitStatus.submitting:
+	      return h$2("div", {
+	        className: "spinner"
+	      });
+
+	    case SubmitStatus.success:
+	      return h$2("div", {
+	        className: "submit-success"
+	      }, h$2(FlowerPenguin, null), "Thank you!");
+
+	    default:
+	      return h$2("div", {
+	        className: "submit-error"
+	      }, h$2(SadPenguin, null), "Error.");
+	  }
+	}
+
 	var _excluded = ["id", "badges"];
 	function BadgeSet(_ref) {
 	  var id = _ref.id,
@@ -31541,7 +32099,8 @@
 	      apiUrl = _getBaseProps.apiUrl;
 
 	  var _useFeedbackApi = useFeedbackApi(apiUrl, props[ATTR_SOURCE_UUID], props[ATTR_TARGET_UUID], props[ATTR_TRANSACTION_ID]),
-	      sendFeedback = _useFeedbackApi.sendFeedback;
+	      sendFeedback = _useFeedbackApi.sendFeedback,
+	      submitStatus = _useFeedbackApi.submitStatus;
 
 	  return h$2(BaseComponent, {
 	    style: css_248z$h
@@ -31550,7 +32109,9 @@
 	    className: "badge-set-container"
 	  }, h$2("h3", {
 	    className: "text-left badge-text-h3 badge-text-h3-".concat(isDark ? "dark" : "light")
-	  }, id), h$2("div", {
+	  }, id), h$2(SubmitStatusView, {
+	    submitStatus: submitStatus
+	  }, h$2("div", {
 	    className: "badge-img-container"
 	  }, badges.map(function (_ref2) {
 	    var qualifier = _ref2.qualifier,
@@ -31572,7 +32133,7 @@
 	      className: "badge-img",
 	      alt: "badges"
 	    })));
-	  })))));
+	  }))))));
 	}
 
 	function Badges(props) {
@@ -33142,30 +33703,22 @@
 	const FormContext = B(null);
 	FormContext.displayName = 'RHFContext';
 
-	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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.text-area {\n  width: 100%;\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: 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}";
-	styleInject(css_248z$g);
+	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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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}";
+	styleInject(css_248z$f);
 
+	/* eslint-disable no-nested-ternary */
 	var minLength = 5;
 	function FeedbackTextInput(props) {
-	  // environments
-	  var _useState = p(false),
-	      _useState2 = _slicedToArray(_useState, 2),
-	      isDark = _useState2[0],
-	      setIsDark = _useState2[1]; // const [isDark, setIsDark] = useState(false);
+	  var _props$ATTR_THEME_COL;
 
-
-	  if (props[ATTR_THEME_COLOR] === "dark") {
-	    setIsDark(true);
-	  } // environment conditionals
-
-
-	  var envCondition = isDark ? "dark" : "light";
+	  var envCondition = (_props$ATTR_THEME_COL = props[ATTR_THEME_COLOR]) !== null && _props$ATTR_THEME_COL !== void 0 ? _props$ATTR_THEME_COL : "light";
 
 	  var _getBaseProps = getBaseProps(props, TAG_FEEDBACK_FORM),
 	      apiUrl = _getBaseProps.apiUrl;
 
 	  var _useFeedbackApi = useFeedbackApi(apiUrl, props[ATTR_SOURCE_UUID], props[ATTR_TARGET_UUID], props[ATTR_TRANSACTION_ID]),
-	      sendFeedback = _useFeedbackApi.sendFeedback;
+	      sendFeedback = _useFeedbackApi.sendFeedback,
+	      submitStatus = _useFeedbackApi.submitStatus;
 
 	  var _useForm = useForm(),
 	      register = _useForm.register,
@@ -33177,7 +33730,7 @@
 	  }
 
 	  return h$2(BaseComponent, {
-	    style: css_248z$g // className={`text-input-form utu-section-no-border-${envCondition}`} 
+	    style: css_248z$f // className={`text-input-form utu-section-no-border-${envCondition}`}
 	    ,
 	    className: "d-flex justify-content-center text-input-section utu-section-no-border-".concat(envCondition),
 	    excludeBootstrap: true,
@@ -33195,75 +33748,17 @@
 	    placeholder: "Your text review"
 	  }), errors.review && h$2("div", {
 	    className: "mt-1 error"
-	  }, "* Feedback should be at least ", minLength, " characters long"), h$2("button", {
+	  }, "* Feedback should be at least ", minLength, " characters long"), h$2(SubmitStatusView, {
+	    submitStatus: submitStatus
+	  }, h$2("button", {
 	    style: {
 	      backgroundColor: props[ATTR_BTN_COLOR] === undefined ? null : "".concat(props[ATTR_BTN_COLOR])
 	    },
-	    className: "mt-3 text-input-btn btn btn-".concat(envCondition),
+	    className: "text-input-btn btn btn-".concat(envCondition),
 	    type: "submit"
-	  }, "Submit")));
+	  }, "Submit text review"))));
 	}
 
-	// a string of all valid unicode whitespaces
-	var whitespaces = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' + '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
-
-	var replace = functionUncurryThis(''.replace);
-	var whitespace = '[' + whitespaces + ']';
-	var ltrim = RegExp('^' + whitespace + whitespace + '*');
-	var rtrim = RegExp(whitespace + whitespace + '*$'); // `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
-
-	var createMethod = function (TYPE) {
-	  return function ($this) {
-	    var string = toString$2(requireObjectCoercible($this));
-	    if (TYPE & 1) string = replace(string, ltrim, '');
-	    if (TYPE & 2) string = replace(string, rtrim, '');
-	    return string;
-	  };
-	};
-
-	var stringTrim = {
-	  // `String.prototype.{ trimLeft, trimStart }` methods
-	  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
-	  start: createMethod(1),
-	  // `String.prototype.{ trimRight, trimEnd }` methods
-	  // https://tc39.es/ecma262/#sec-string.prototype.trimend
-	  end: createMethod(2),
-	  // `String.prototype.trim` method
-	  // https://tc39.es/ecma262/#sec-string.prototype.trim
-	  trim: createMethod(3)
-	};
-
-	var PROPER_FUNCTION_NAME = functionName.PROPER;
-
-
-
-
-
-	var non = '\u200B\u0085\u180E'; // check that a method works with the correct list
-	// of whitespaces and has a correct name
-
-	var stringTrimForced = function (METHOD_NAME) {
-	  return fails(function () {
-	    return !!whitespaces[METHOD_NAME]() || non[METHOD_NAME]() !== non || PROPER_FUNCTION_NAME && whitespaces[METHOD_NAME].name !== METHOD_NAME;
-	  });
-	};
-
-	var $trim = stringTrim.trim;
-
-	 // `String.prototype.trim` method
-	// https://tc39.es/ecma262/#sec-string.prototype.trim
-
-
-	_export({
-	  target: 'String',
-	  proto: true,
-	  forced: stringTrimForced('trim')
-	}, {
-	  trim: function trim() {
-	    return $trim(this);
-	  }
-	});
-
 	var $includes = arrayIncludes.includes;
 
 
@@ -33334,6 +33829,192 @@
 	  }
 	});
 
+	var $String = String;
+	var $TypeError = TypeError;
+
+	var aPossiblePrototype = function (argument) {
+	  if (typeof argument == 'object' || isCallable(argument)) return argument;
+	  throw $TypeError("Can't set " + $String(argument) + ' as a prototype');
+	};
+
+	/* eslint-disable no-proto -- safe */
+
+	// `Object.setPrototypeOf` method
+	// https://tc39.es/ecma262/#sec-object.setprototypeof
+	// Works with __proto__ only. Old v8 can't work with null proto objects.
+	// eslint-disable-next-line es-x/no-object-setprototypeof -- safe
+
+
+	var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? function () {
+	  var CORRECT_SETTER = false;
+	  var test = {};
+	  var setter;
+
+	  try {
+	    // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
+	    setter = functionUncurryThis(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set);
+	    setter(test, []);
+	    CORRECT_SETTER = test instanceof Array;
+	  } catch (error) {
+	    /* empty */
+	  }
+
+	  return function setPrototypeOf(O, proto) {
+	    anObject(O);
+	    aPossiblePrototype(proto);
+	    if (CORRECT_SETTER) setter(O, proto);else O.__proto__ = proto;
+	    return O;
+	  };
+	}() : undefined);
+
+	// makes subclassing work correct for wrapped built-ins
+
+
+	var inheritIfRequired = function ($this, dummy, Wrapper) {
+	  var NewTarget, NewTargetPrototype;
+	  if ( // it can work only with native `setPrototypeOf`
+	  objectSetPrototypeOf && // we haven't completely correct pre-ES6 way for getting `new.target`, so use this
+	  isCallable(NewTarget = dummy.constructor) && NewTarget !== Wrapper && isObject$2(NewTargetPrototype = NewTarget.prototype) && NewTargetPrototype !== Wrapper.prototype) objectSetPrototypeOf($this, NewTargetPrototype);
+	  return $this;
+	};
+
+	// `thisNumberValue` abstract operation
+	// https://tc39.es/ecma262/#sec-thisnumbervalue
+
+
+	var thisNumberValue = functionUncurryThis(1.0.valueOf);
+
+	// a string of all valid unicode whitespaces
+	var whitespaces = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' + '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
+
+	var replace = functionUncurryThis(''.replace);
+	var whitespace = '[' + whitespaces + ']';
+	var ltrim = RegExp('^' + whitespace + whitespace + '*');
+	var rtrim = RegExp(whitespace + whitespace + '*$'); // `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
+
+	var createMethod = function (TYPE) {
+	  return function ($this) {
+	    var string = toString$2(requireObjectCoercible($this));
+	    if (TYPE & 1) string = replace(string, ltrim, '');
+	    if (TYPE & 2) string = replace(string, rtrim, '');
+	    return string;
+	  };
+	};
+
+	var stringTrim = {
+	  // `String.prototype.{ trimLeft, trimStart }` methods
+	  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
+	  start: createMethod(1),
+	  // `String.prototype.{ trimRight, trimEnd }` methods
+	  // https://tc39.es/ecma262/#sec-string.prototype.trimend
+	  end: createMethod(2),
+	  // `String.prototype.trim` method
+	  // https://tc39.es/ecma262/#sec-string.prototype.trim
+	  trim: createMethod(3)
+	};
+
+	var getOwnPropertyNames = objectGetOwnPropertyNames.f;
+
+	var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
+
+	var defineProperty = objectDefineProperty.f;
+
+
+
+	var trim = stringTrim.trim;
+
+	var NUMBER = 'Number';
+	var NativeNumber = global$1[NUMBER];
+	var NumberPrototype = NativeNumber.prototype;
+	var TypeError$1 = global$1.TypeError;
+	var arraySlice = functionUncurryThis(''.slice);
+	var charCodeAt = functionUncurryThis(''.charCodeAt); // `ToNumeric` abstract operation
+	// https://tc39.es/ecma262/#sec-tonumeric
+
+	var toNumeric = function (value) {
+	  var primValue = toPrimitive(value, 'number');
+	  return typeof primValue == 'bigint' ? primValue : toNumber(primValue);
+	}; // `ToNumber` abstract operation
+	// https://tc39.es/ecma262/#sec-tonumber
+
+
+	var toNumber = function (argument) {
+	  var it = toPrimitive(argument, 'number');
+	  var first, third, radix, maxCode, digits, length, index, code;
+	  if (isSymbol$1(it)) throw TypeError$1('Cannot convert a Symbol value to a number');
+
+	  if (typeof it == 'string' && it.length > 2) {
+	    it = trim(it);
+	    first = charCodeAt(it, 0);
+
+	    if (first === 43 || first === 45) {
+	      third = charCodeAt(it, 2);
+	      if (third === 88 || third === 120) return NaN; // Number('+0x1') should be NaN, old V8 fix
+	    } else if (first === 48) {
+	      switch (charCodeAt(it, 1)) {
+	        case 66:
+	        case 98:
+	          radix = 2;
+	          maxCode = 49;
+	          break;
+	        // fast equal of /^0b[01]+$/i
+
+	        case 79:
+	        case 111:
+	          radix = 8;
+	          maxCode = 55;
+	          break;
+	        // fast equal of /^0o[0-7]+$/i
+
+	        default:
+	          return +it;
+	      }
+
+	      digits = arraySlice(it, 2);
+	      length = digits.length;
+
+	      for (index = 0; index < length; index++) {
+	        code = charCodeAt(digits, index); // parseInt parses a string to a first unavailable symbol
+	        // but ToNumber should return NaN if a string contains unavailable symbols
+
+	        if (code < 48 || code > maxCode) return NaN;
+	      }
+
+	      return parseInt(digits, radix);
+	    }
+	  }
+
+	  return +it;
+	}; // `Number` constructor
+	// https://tc39.es/ecma262/#sec-number-constructor
+
+
+	if (isForced_1(NUMBER, !NativeNumber(' 0o1') || !NativeNumber('0b1') || NativeNumber('+0x1'))) {
+	  var NumberWrapper = function Number(value) {
+	    var n = arguments.length < 1 ? 0 : NativeNumber(toNumeric(value));
+	    var dummy = this; // check on 1..constructor(foo) case
+
+	    return objectIsPrototypeOf(NumberPrototype, dummy) && fails(function () {
+	      thisNumberValue(dummy);
+	    }) ? inheritIfRequired(Object(n), dummy, NumberWrapper) : n;
+	  };
+
+	  for (var keys = descriptors ? getOwnPropertyNames(NativeNumber) : ( // ES3:
+	  'MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,' + // ES2015 (in case, if modules with ES2015 Number statics required before):
+	  'EPSILON,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,isFinite,isInteger,isNaN,isSafeInteger,parseFloat,parseInt,' + // ESNext
+	  'fromString,range').split(','), j = 0, key; keys.length > j; j++) {
+	    if (hasOwnProperty_1(NativeNumber, key = keys[j]) && !hasOwnProperty_1(NumberWrapper, key)) {
+	      defineProperty(NumberWrapper, key, getOwnPropertyDescriptor(NativeNumber, key));
+	    }
+	  }
+
+	  NumberWrapper.prototype = NumberPrototype;
+	  NumberPrototype.constructor = NumberWrapper;
+	  defineBuiltIn(global$1, NUMBER, NumberWrapper, {
+	    constructor: true
+	  });
+	}
+
 	var abi = [
 		{
 			inputs: [
@@ -34198,49 +34879,112 @@
 		}
 	];
 
-	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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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  width: 50%;\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  width: 50%;\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(251, 201, 61);\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/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .endor-input-section {\n    padding-left: 0rem;\n    padding-right: 0rem;\n  }\n  .endor-input-form {\n    width: 45%;\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: center;\n    align-items: center;\n    width: 100%;\n  }\n  .endor-text {\n    padding: 2rem;\n    width: 45%;\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}";
-	styleInject(css_248z$f);
+	var css_248z$e = "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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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  width: 50%;\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  width: 50%;\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(251, 201, 61);\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/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .endor-input-section {\n    padding-left: 0rem;\n    padding-right: 0rem;\n  }\n  .endor-input-form {\n    width: 45%;\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: center;\n    align-items: center;\n    width: 100%;\n  }\n  .endor-text {\n    padding: 2rem;\n    width: 45%;\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}";
+	styleInject(css_248z$e);
 
-	var networks = {
-	  mainnet: {
-	    chainId: 1
-	  },
-	  matic: {
-	    chainId: 137,
-	    // 80001
-	    chainName: "Polygon",
-	    nativeCurrency: {
-	      name: "MATIC",
-	      symbol: "MATIC",
-	      decimals: 18
-	    },
-	    rpcUrls: ["https://polygon-rpc.com"],
-	    blockExplorerUrls: ["https://polygonscan.com"]
+	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
 	  },
-	  mumbai: {
-	    chainId: 80001,
-	    // 80001
-	    chainName: "Mumbai",
-	    nativeCurrency: {
-	      name: "MATIC",
-	      symbol: "MATIC",
-	      decimals: 18
-	    },
-	    rpcUrls: ["https://rpc-mumbai.maticvigil.com"],
-	    blockExplorerUrls: ["https://mumbai.polygonscan.com"]
+	  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
 	  },
-	  goerli: {
-	    chainId: 5
-	  }
-	};
-	var DEFAULT_NETWORK = "mumbai";
-	var getDefaultNetwork = function getDefaultNetwork() {
-	  return networks[config.production ? "matic" : "mumbai"];
-	};
-	var getUTTContractAddress = function getUTTContractAddress(chain) {
-	  if (chain !== "matic") return UTT_CONTRACT_ADDRESS_TEST;
-	  return UTT_CONTRACT_ADDRESS_PRODUCTION;
-	};
+	  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 EndorsementForm(props) {
 	  var _window, _window2;
@@ -34272,172 +35016,221 @@
 
 	  if (!((_window = window) !== null && _window !== void 0 && _window.ethereum || (_window2 = window) !== null && _window2 !== void 0 && _window2.web3 || window.utuWeb3Provider) || !props[ATTR_TARGET_UUID] || !isAddress(props[ATTR_TARGET_UUID]) || !props[ATTR_TRANSACTION_ID]) return null;
 
-	  var getProvider = function getProvider() {
+	  function getProvider() {
 	    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	    // @ts-ignore
 	    return window.utuWeb3Provider || window.ethereum;
-	  };
+	  }
+	  /**
+	   * Determines which network to use for endorsements.
+	   */
+
+
+	  function getEndorsementNetwork() {
+	    var _props$ATTR_ENDORSEME;
+
+	    return (_props$ATTR_ENDORSEME = props[ATTR_ENDORSEMENT_NETWORK]) !== null && _props$ATTR_ENDORSEME !== void 0 ? _props$ATTR_ENDORSEME : getDefaultNetworkName();
+	  }
+	  /**
+	   * Switches to the given network, adding it if necessary.
+	   */
+
+
+	  function switchNetwork(_x) {
+	    return _switchNetwork.apply(this, arguments);
+	  }
+	  /**
+	   * return the UTU contract instance on the given network
+	   */
 
-	  var requestNetworkChange = /*#__PURE__*/function () {
-	    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(provider, selectedNetwork) {
+
+	  function _switchNetwork() {
+	    _switchNetwork = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(network) {
+	      var provider;
 	      return _regeneratorRuntime().wrap(function _callee$(_context) {
 	        while (1) {
 	          switch (_context.prev = _context.next) {
 	            case 0:
-	              _context.next = 2;
-	              return provider.request({
-	                method: "wallet_switchEthereumChain",
-	                params: [{
-	                  chainId: hexStripZeros(hexlify(selectedNetwork.chainId))
-	                }]
-	              });
+	              provider = getProvider();
+	              _context.prev = 1;
+	              _context.next = 4;
+	              return requestNetworkChange(provider, network);
 
-	            case 2:
+	            case 4:
+	              _context.next = 14;
+	              break;
+
+	            case 6:
+	              _context.prev = 6;
+	              _context.t0 = _context["catch"](1);
+	              console.log(_context.t0, _context.t0.message);
+
+	              if (!(_context.t0.code === 4902 || _context.t0.message.toLowerCase().includes("unrecognized"))) {
+	                _context.next = 14;
+	                break;
+	              }
+
+	              _context.next = 12;
+	              return addNetwork(provider, network);
+
+	            case 12:
+	              _context.next = 14;
+	              return requestNetworkChange(provider, network);
+
+	            case 14:
 	            case "end":
 	              return _context.stop();
 	          }
 	        }
-	      }, _callee);
+	      }, _callee, null, [[1, 6]]);
 	    }));
+	    return _switchNetwork.apply(this, arguments);
+	  }
 
-	    return function requestNetworkChange(_x, _x2) {
-	      return _ref.apply(this, arguments);
-	    };
-	  }();
+	  function getContractInstance(_x2) {
+	    return _getContractInstance.apply(this, arguments);
+	  }
+	  /**
+	   * returns the current connected address
+	   */
 
-	  var addNetwork = /*#__PURE__*/function () {
-	    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(provider, selectedNetwork) {
+
+	  function _getContractInstance() {
+	    _getContractInstance = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(network) {
+	      var UTT_CONTRACT_ADDRESS, web3Provider, signer;
 	      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
 	        while (1) {
 	          switch (_context2.prev = _context2.next) {
 	            case 0:
-	              _context2.next = 2;
-	              return provider.request({
-	                method: "wallet_addEthereumChain",
-	                params: [_objectSpread2(_objectSpread2({}, selectedNetwork), {}, {
-	                  chainId: hexStripZeros(hexlify(selectedNetwork.chainId))
-	                })]
-	              });
+	              UTT_CONTRACT_ADDRESS = getUTTContractAddress(network);
+	              _context2.next = 3;
+	              return new Web3Provider(getProvider());
 
-	            case 2:
+	            case 3:
+	              web3Provider = _context2.sent;
+	              signer = web3Provider.getSigner();
+	              return _context2.abrupt("return", new Contract(UTT_CONTRACT_ADDRESS, abi, signer));
+
+	            case 6:
 	            case "end":
 	              return _context2.stop();
 	          }
 	        }
 	      }, _callee2);
 	    }));
+	    return _getContractInstance.apply(this, arguments);
+	  }
 
-	    return function addNetwork(_x3, _x4) {
-	      return _ref2.apply(this, arguments);
-	    };
-	  }();
+	  function getConnectedAddress() {
+	    return _getConnectedAddress.apply(this, arguments);
+	  }
+	  /**
+	   * Creates an endorsement transaction
+	   * @param address the target address of the endorsement
+	   * @param amount the amount of UTT to stake on the endorsement
+	   * @param transactionId the business transaction id (might or might not be an Ethereum tx id) to record with the
+	   *      endorsement, if any
+	   */
 
-	  var CURRENT_NETWORK = String(props[ATTR_ENDORSEMENT_NETWORK]).toLowerCase().trim();
 
-	  var switchNetwork = /*#__PURE__*/function () {
-	    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-	      var provider, selectedNetwork;
+	  function _getConnectedAddress() {
+	    _getConnectedAddress = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+	      var web3Provider, signer;
 	      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
 	        while (1) {
 	          switch (_context3.prev = _context3.next) {
 	            case 0:
-	              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	              // @ts-ignore
-	              provider = getProvider();
-	              selectedNetwork = networks[CURRENT_NETWORK] || getDefaultNetwork();
-	              _context3.prev = 2;
-	              _context3.next = 5;
-	              return requestNetworkChange(provider, selectedNetwork);
-
-	            case 5:
-	              _context3.next = 15;
-	              break;
-
-	            case 7:
-	              _context3.prev = 7;
-	              _context3.t0 = _context3["catch"](2);
-	              console.log(_context3.t0, _context3.t0.message);
-
-	              if (!(_context3.t0.code === 4902 || _context3.t0.message.toLowerCase().includes("unrecognized"))) {
-	                _context3.next = 15;
-	                break;
-	              }
-
-	              _context3.next = 13;
-	              return addNetwork(provider, selectedNetwork);
+	              _context3.next = 2;
+	              return new Web3Provider(getProvider());
 
-	            case 13:
-	              _context3.next = 15;
-	              return requestNetworkChange(provider, selectedNetwork);
+	            case 2:
+	              web3Provider = _context3.sent;
+	              signer = web3Provider.getSigner();
+	              return _context3.abrupt("return", signer.getAddress());
 
-	            case 15:
+	            case 5:
 	            case "end":
 	              return _context3.stop();
 	          }
 	        }
-	      }, _callee3, null, [[2, 7]]);
+	      }, _callee3);
 	    }));
+	    return _getConnectedAddress.apply(this, arguments);
+	  }
 
-	    return function switchNetwork() {
-	      return _ref3.apply(this, arguments);
-	    };
-	  }();
+	  function endorse(_x3, _x4, _x5) {
+	    return _endorse.apply(this, arguments);
+	  }
 
-	  var sendTransaction = /*#__PURE__*/function () {
-	    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(address, amount, transactionId) {
-	      var UTT_CONTRACT_ADDRESS, web3Provider, signer, contract, transaction;
+	  function _endorse() {
+	    _endorse = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(address, amount, transactionId) {
+	      var network, contract, connectedAddress, utuBalance, transaction;
 	      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
 	        while (1) {
 	          switch (_context4.prev = _context4.next) {
 	            case 0:
-	              _context4.next = 2;
-	              return switchNetwork();
+	              network = getEndorsementNetwork();
+	              _context4.next = 3;
+	              return switchNetwork(network);
 
-	            case 2:
-	              UTT_CONTRACT_ADDRESS = getUTTContractAddress(CURRENT_NETWORK || DEFAULT_NETWORK);
+	            case 3:
 	              _context4.next = 5;
-	              return new Web3Provider(getProvider());
+	              return getContractInstance(network);
 
 	            case 5:
-	              web3Provider = _context4.sent;
-	              signer = web3Provider.getSigner();
-	              contract = new Contract(UTT_CONTRACT_ADDRESS, abi, signer);
-	              _context4.next = 10;
+	              contract = _context4.sent;
+	              _context4.next = 8;
+	              return getConnectedAddress();
+
+	            case 8:
+	              connectedAddress = _context4.sent;
+	              _context4.next = 11;
+	              return contract.balanceOf(connectedAddress);
+
+	            case 11:
+	              utuBalance = _context4.sent;
+
+	              if (!(Number(utuBalance) < Number(amount))) {
+	                _context4.next = 14;
+	                break;
+	              }
+
+	              throw new Error("Insufficient UTU tokens");
+
+	            case 14:
+	              _context4.next = 16;
 	              return contract.endorse(address, String(amount), transactionId);
 
-	            case 10:
+	            case 16:
 	              transaction = _context4.sent;
-	              _context4.next = 13;
+	              _context4.next = 19;
 	              return transaction.wait();
 
-	            case 13:
+	            case 19:
 	              return _context4.abrupt("return", transaction);
 
-	            case 14:
+	            case 20:
 	            case "end":
 	              return _context4.stop();
 	          }
 	        }
 	      }, _callee4);
 	    }));
+	    return _endorse.apply(this, arguments);
+	  }
 
-	    return function sendTransaction(_x5, _x6, _x7) {
-	      return _ref4.apply(this, arguments);
-	    };
-	  }();
-
-	  function onSubmit(_x8) {
+	  function onSubmit(_x6) {
 	    return _onSubmit.apply(this, arguments);
 	  }
 
 	  function _onSubmit() {
-	    _onSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(_ref5) {
+	    _onSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(_ref) {
 	      var amount;
 	      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
 	        while (1) {
 	          switch (_context5.prev = _context5.next) {
 	            case 0:
-	              amount = _ref5.amount;
+	              amount = _ref.amount;
 
 	              if (amount) {
 	                _context5.next = 3;
@@ -34450,7 +35243,7 @@
 	              setTxError("");
 	              _context5.prev = 4;
 	              _context5.next = 7;
-	              return sendTransaction(props[ATTR_TARGET_UUID], amount, props[ATTR_TRANSACTION_ID]);
+	              return endorse(props[ATTR_TARGET_UUID], amount, props[ATTR_TRANSACTION_ID]);
 
 	            case 7:
 	              _context5.next = 13;
@@ -34472,8 +35265,8 @@
 	    return _onSubmit.apply(this, arguments);
 	  }
 
-	  var showError = function showError(_ref6) {
-	    var amount = _ref6.amount;
+	  var showError = function showError(_ref2) {
+	    var amount = _ref2.amount;
 
 	    switch (amount === null || amount === void 0 ? void 0 : amount.type) {
 	      case "required":
@@ -34491,7 +35284,7 @@
 	  };
 
 	  return h$2(BaseComponent, {
-	    style: css_248z$f,
+	    style: css_248z$e,
 	    className: "endor-input-section utu-section-no-border-".concat(envCondition),
 	    excludeBootstrap: true,
 	    excludeFonts: true
@@ -34506,7 +35299,7 @@
 	  }, "Would you like to Endorse ?"), h$2("p", {
 	    className: "endor-text-info",
 	    "data-bs-toggle": "tooltip",
-	    title: " To endorse, you need to have some UTT  in your account. Make sure you have a  sufficient balance in your account"
+	    title: " To endorse, you need to have some UTT in your account. Make sure you have a sufficient balance in your account"
 	  }, "i")), h$2("p", {
 	    className: "endor-text-body"
 	  }, "When you endorse a platform, it means you have personally had a good experience and want to back your rating by staking an amount of UTT (UTU trust token) on the platform.")), h$2("form", {
@@ -36984,15 +37777,16 @@
 	};
 	var _default = ReactStars;
 
-	var css_248z$e = "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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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}\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  }\n}";
-	styleInject(css_248z$e);
+	var css_248z$d = "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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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/* ----------- 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$d);
 
 	function StarRatingInput(props) {
 	  var _getBaseProps = getBaseProps(props, TAG_FEEDBACK_FORM),
 	      apiUrl = _getBaseProps.apiUrl;
 
 	  var _useFeedbackApi = useFeedbackApi(apiUrl, props[ATTR_SOURCE_UUID], props[ATTR_TARGET_UUID], props[ATTR_TRANSACTION_ID]),
-	      sendFeedback = _useFeedbackApi.sendFeedback; // environments
+	      sendFeedback = _useFeedbackApi.sendFeedback,
+	      submitStatus = _useFeedbackApi.submitStatus; // environments
 
 
 	  var _useState = p(false),
@@ -37011,10 +37805,12 @@
 	  };
 
 	  return h$2(BaseComponent, {
-	    style: css_248z$e,
+	    style: css_248z$d,
 	    className: "star-rating-section utu-section-".concat(isDark ? "dark" : "light"),
 	    excludeBootstrap: true,
 	    excludeFonts: true
+	  }, h$2(SubmitStatusView, {
+	    submitStatus: submitStatus
 	  }, h$2(_default, {
 	    count: 5,
 	    half: false,
@@ -37022,190 +37818,7 @@
 	    size: 30,
 	    color2: "#FFDD33" // color2= {ratingColor}
 
-	  }));
-	}
-
-	var css_248z$d = "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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\n  }\n  .logo-position-video {\n    top: 41.2rem;\n    position: absolute;\n    left: 21rem;\n  }\n  .logo-section {\n    position: relative;\n  }\n}";
-	styleInject(css_248z$d);
-
-	/* eslint max-len: 0 */
-	function Logo() {
-	  return h$2("svg", {
-	    style: css_248z$d,
-	    version: "1.1",
-	    id: "Capa_1",
-	    xmlns: "http://www.w3.org/2000/svg",
-	    xmlnsXlink: "http://www.w3.org/1999/xlink",
-	    x: "0px",
-	    y: "0px",
-	    className: "logo-size",
-	    viewBox: "0 0 841.89 401.471",
-	    xmlSpace: "preserve"
-	  }, h$2("g", {
-	    id: "Layer_2"
-	  }, h$2("g", {
-	    id: "Layer_1-2"
-	  }, h$2("path", {
-	    fill: "#FFFFFF",
-	    d: "M565.858,0c263.37,4.676,263.323,395.802,0,400.243C302.487,395.709,302.532,4.397,565.858,0z"
-	  }), h$2("path", {
-	    fill: "#BBBBBB",
-	    d: "M0.005,224.144v-45.228c-0.005-2.54,2.051-4.603,4.591-4.607c0.019,0,0.038,0,0.057,0 c7.535,0.416,21.79-1.872,27.35,4.176c6.247,4.983,6.239,19.43,0,24.454c-4.912,5.359-15.871,4.127-22.758,4.215v16.991 C9.443,230.176-0.14,230.119,0.005,224.144z M9.26,198.834c6.479-0.119,18.55,1.96,17.854-8.119 c0.695-10.07-11.415-7.999-17.854-8.087V198.834z"
-	  }), h$2("path", {
-	    fill: "#BBBBBB",
-	    d: "M40.041,209.985c-1.848-25.798,36.885-25.901,34.957,0C76.878,235.775,38.241,235.671,40.041,209.985z M48.84,209.985c-1.208,15.847,18.742,15.839,17.534,0c1.232-15.99-18.782-15.99-17.574,0H48.84z"
-	  }), h$2("path", {
-	    fill: "#BBBBBB",
-	    d: "M77.149,195.475c-0.192-4.712,6.936-5.911,8.399-1.479l6.64,19.646l5.352-19.334 c0.498-1.867,2.202-3.156,4.135-3.128c1.851-0.022,3.506,1.146,4.104,2.896l5.352,19.574l6.56-19.646 c0.912-2.96,5.12-3.712,7.199-1.64c4.496,2.079-9.991,30.637-10.11,33.709c-1.112,3.823-7.144,3.384-8.168-0.32l-4.959-17.534 l-4.936,17.43c-0.72,2.308-3.173,3.595-5.479,2.875c-0.419-0.13-0.815-0.322-1.176-0.57 C87.868,226.512,77.678,197.931,77.149,195.475z"
-	  }), h$2("path", {
-	    fill: "#BBBBBB",
-	    d: "M128.201,209.649c-2.473-23.021,33.517-26.27,33.356-3.199c0.288,3.399-0.896,6.831-4.911,6.559h-19.814 c0.392,11.487,13.039,8.592,19.91,4.96C174.181,225.784,126.593,242.11,128.201,209.649z M137.063,205.649h15.854 C153.502,195.499,137.048,195.698,137.063,205.649z"
-	  }), h$2("path", {
-	    fill: "#BBBBBB",
-	    d: "M167.453,224.456c0.472-1.896-1.264-31.637,1.264-31.997c2.704-2.863,7.855-0.416,7.367,3.504 c2.288-6.655,16.919-7.04,11.535,1.823c-5.88,2.776-11.199,0.801-11.535,10.096v16.614 C176.212,230.039,167.325,230.048,167.453,224.456z"
-	  }), h$2("path", {
-	    fill: "#BBBBBB",
-	    d: "M190.963,209.649c-2.464-23.021,33.524-26.27,33.356-3.199c0.296,3.399-0.896,6.831-4.903,6.559h-19.822 c0.4,11.487,13.047,8.592,19.918,4.96C236.95,225.784,189.355,242.11,190.963,209.649z M199.834,205.649h15.854 C216.272,195.499,199.818,195.698,199.834,205.649z"
-	  }), h$2("path", {
-	    fill: "#BBBBBB",
-	    d: "M228.543,209.985c-1.544-14.935,13.255-24.861,25.03-16.11v-18.398c-0.152-3.728,4.848-5.76,7.375-3.048 c2.584-0.136,0.744,39.236,1.264,40.74c0,5.157-1.506,9.116-4.52,11.879C245.75,234.767,226.888,227.248,228.543,209.985z M237.175,209.985c-1.984,13.143,15.998,16.902,16.406,3.199v-11.062C246.79,193.891,236.07,198.986,237.175,209.985 L237.175,209.985z"
-	  }), h$2("path", {
-	    fill: "#BBBBBB",
-	    d: "M287.834,213.169v-37.692c-0.16-3.735,4.84-5.751,7.367-3.048c2.479,1.32,0.8,19.158,1.264,21.446 c5.464-5.088,16.526-3.696,20.838,1.688c5.703,5.728,5.768,23.198-0.191,28.798C307.92,233.959,286.426,228.976,287.834,213.169z M296.465,213.169c-0.855,8.104,9.807,11.679,14.287,5.655c6.839-10.398-2-29.524-14.287-16.727V213.169z"
-	  }), h$2("path", {
-	    fill: "#BBBBBB",
-	    d: "M323.175,243.046c-2.584-2.399-0.681-7.199,2.951-6.983c6.151-0.296,7.447-4.799,10.151-10.631 l-12.303-28.293c-0.211-0.535-0.317-1.105-0.312-1.68c-0.2-4.656,6.848-5.855,8.319-1.601l8.791,22.19l8.8-22.182 c0.928-2.744,5.031-3.656,7.071-1.44c5.095,2.2-13.775,35.325-13.943,38.356C338.413,240.198,331.006,246.95,323.175,243.046z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M710.811,214.345v-18.67c-0.152-3.728,4.871-5.76,7.383-3.048c4.903,6.264-5.039,29.693,8.479,28.941 c4.735,0,7.105-2.399,7.111-7.199v-18.687c-0.136-5.6,8.799-5.6,8.631,0c-0.695,7.199,2.096,23.198-3.031,29.077 C730.688,234.063,708.843,229.567,710.811,214.345z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M766.469,198.259c-2.928-3.288,0.552-7.111,4.376-6.256c0.144-3.455-1.264-10.943,4.264-10.814 c5.495-0.137,4.071,7.391,4.216,10.814c2.76-0.176,7.287-0.248,7.199,3.656c0.104,3.903-4.408,3.879-7.199,3.688 c0.376,1.399-0.96,21.118,0.936,21.462c2.191,1.304,6.008,0.8,5.855,4.472c-0.488,6.151-9.679,3.392-12.143,0.655 c-5.399-3.999-2.4-20.894-3.128-26.589C769.373,199.362,767.533,199.53,766.469,198.259z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M810.137,214.345v-18.67c-0.151-3.728,4.872-5.76,7.384-3.048c4.903,6.264-5.04,29.693,8.479,28.941 c4.736,0,7.106-2.399,7.111-7.199v-18.687c-0.136-5.6,8.8-5.6,8.632,0c-0.696,7.199,2.096,23.198-3.032,29.077 C830.015,234.063,808.169,229.567,810.137,214.345z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M531.155,40.865c45.052,0.8,45.044,67.729,0,68.489C486.104,108.579,486.111,41.665,531.155,40.865z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M444.163,148.855c45.052,0.8,45.044,67.705,0,68.465C399.111,216.545,399.119,149.607,444.163,148.855z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M529.835,248.934c39.845,0.672,39.845,59.898,0,60.57C489.982,308.84,489.991,249.646,529.835,248.934z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M465.257,230.447c31.197,0.528,31.197,46.916,0,47.443C434.084,277.371,434.092,230.991,465.257,230.447z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M511.389,130.457c29.47,0.504,29.461,44.268,0,44.796C481.911,174.677,481.92,130.921,511.389,130.457z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M582.566,101.42c29.469,0.504,29.461,44.308,0,44.795C553.097,145.72,553.104,101.915,582.566,101.42z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M637.921,93.524c29.445,0.504,29.445,44.292,0,44.796C608.628,138.176,608.628,93.66,637.921,93.524z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M656.367,146.224c26.006,0.447,26.006,39.052,0,39.492C630.346,185.268,630.346,146.671,656.367,146.224z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M593.109,264.732c22.525,0.384,22.518,33.86,0,34.236C570.583,298.585,570.583,265.116,593.109,264.732z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M651.096,198.866c22.534,0.384,22.534,33.854,0,34.229C628.554,232.711,628.562,199.25,651.096,198.866z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M437.563,101.42c22.51,0.384,22.51,33.893,0,34.276C415.166,135.593,415.166,101.516,437.563,101.42z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M603.66,56.655c22.526,0.385,22.518,33.854,0,34.237C581.254,90.788,581.254,56.752,603.66,56.655z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M500.838,196.251c22.534,0.384,22.534,33.828,0,34.213C478.296,230.071,478.304,196.627,500.838,196.251z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M632.642,240.99c19.046,0.328,19.046,28.678,0,29.006C613.604,269.644,613.604,241.318,632.642,240.99z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M474.464,64.567c19.062,0.327,19.062,28.637,0,28.957C455.506,93.437,455.506,64.655,474.464,64.567z"
-	  }), h$2("path", {
-	    fill: "#2B2B2B",
-	    d: "M479.744,104.06c19.054,0.319,19.054,28.677,0,28.997C460.762,132.969,460.762,104.14,479.744,104.06z"
-	  }), h$2("rect", {
-	    x: "474.385",
-	    y: "78.803",
-	    transform: "matrix(-0.9944 0.1058 -0.1058 -0.9944 961.3718 138.2227)",
-	    fill: "#2B2B2B",
-	    width: "5.272",
-	    height: "31.605"
-	  }), h$2("rect", {
-	    x: "437.48",
-	    y: "126.203",
-	    transform: "matrix(-0.9944 0.1058 -0.1058 -0.9944 892.7841 236.662)",
-	    fill: "#2B2B2B",
-	    width: "5.272",
-	    height: "31.606"
-	  }), h$2("rect", {
-	    x: "490.251",
-	    y: "181.519",
-	    transform: "matrix(-0.0772 0.997 -0.997 -0.0772 728.7499 -306.1609)",
-	    fill: "#2B2B2B",
-	    width: "31.605",
-	    height: "5.272"
-	  }), h$2("rect", {
-	    x: "501.348",
-	    y: "116.825",
-	    transform: "matrix(-0.349 0.9371 -0.9371 -0.349 809.6375 -323.5298)",
-	    fill: "#2B2B2B",
-	    width: "31.702",
-	    height: "5.288"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "500.006,156.966 469.969,166.869 468.312,161.87 498.35,151.959 500.006,156.966 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "474.744,120.346 443.115,121.018 443.003,115.754 474.632,115.082 474.744,120.346 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "591.813,71.87 560.265,72.462 560.152,67.782 591.701,67.183 591.813,71.87 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "499.438,223.992 476.472,245.614 473.248,242.223 496.206,220.601 499.438,223.992 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "625.714,262.309 601.301,282.282 598.316,278.667 622.73,258.701 625.714,262.309 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "587.094,241.286 595.189,271.748 590.669,272.972 582.566,242.511 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "643.904,215.889 612.739,210.985 613.451,206.354 644.616,211.257 643.904,215.889 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "642.568,172.725 612.188,181.22 610.907,176.717 641.289,168.222 642.568,172.725 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "583.342,137.208 579.742,168.518 575.079,168.005 578.679,136.696 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "545.922,177.221 519.204,160.454 521.676,156.479 548.394,173.245 545.922,177.221 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "567.008,111.379 540.29,94.612 542.762,90.637 569.479,107.403 567.008,111.379 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "584.438,112.122 594.733,82.325 599.173,83.829 588.878,113.626 584.438,112.122 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "528.579,261.717 543.498,233.943 547.642,236.143 532.715,263.908 528.579,261.717 \t\t"
-	  }), h$2("polygon", {
-	    fill: "#2B2B2B",
-	    points: "633.905,106.683 609.972,86.141 613.012,82.573 636.945,103.115 633.905,106.683 \t\t"
-	  }), h$2("path", {
-	    fill: "#FFE535",
-	    d: "M575.951,156.759c62.394,1.063,62.394,93.759,0,94.807C513.604,250.502,513.62,157.814,575.951,156.759z"
-	  }))));
+	  })));
 	}
 
 	var bundle$3 = createCommonjsModule$1(function (module, exports) {
@@ -45148,7 +45761,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$c = "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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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$c = "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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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}";
 	styleInject(css_248z$c);
 
 	function PopUp(_ref) {
@@ -45187,163 +45800,6 @@
 	  }));
 	}
 
-	var $String = String;
-	var $TypeError = TypeError;
-
-	var aPossiblePrototype = function (argument) {
-	  if (typeof argument == 'object' || isCallable(argument)) return argument;
-	  throw $TypeError("Can't set " + $String(argument) + ' as a prototype');
-	};
-
-	/* eslint-disable no-proto -- safe */
-
-	// `Object.setPrototypeOf` method
-	// https://tc39.es/ecma262/#sec-object.setprototypeof
-	// Works with __proto__ only. Old v8 can't work with null proto objects.
-	// eslint-disable-next-line es-x/no-object-setprototypeof -- safe
-
-
-	var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? function () {
-	  var CORRECT_SETTER = false;
-	  var test = {};
-	  var setter;
-
-	  try {
-	    // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
-	    setter = functionUncurryThis(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set);
-	    setter(test, []);
-	    CORRECT_SETTER = test instanceof Array;
-	  } catch (error) {
-	    /* empty */
-	  }
-
-	  return function setPrototypeOf(O, proto) {
-	    anObject(O);
-	    aPossiblePrototype(proto);
-	    if (CORRECT_SETTER) setter(O, proto);else O.__proto__ = proto;
-	    return O;
-	  };
-	}() : undefined);
-
-	// makes subclassing work correct for wrapped built-ins
-
-
-	var inheritIfRequired = function ($this, dummy, Wrapper) {
-	  var NewTarget, NewTargetPrototype;
-	  if ( // it can work only with native `setPrototypeOf`
-	  objectSetPrototypeOf && // we haven't completely correct pre-ES6 way for getting `new.target`, so use this
-	  isCallable(NewTarget = dummy.constructor) && NewTarget !== Wrapper && isObject$2(NewTargetPrototype = NewTarget.prototype) && NewTargetPrototype !== Wrapper.prototype) objectSetPrototypeOf($this, NewTargetPrototype);
-	  return $this;
-	};
-
-	// `thisNumberValue` abstract operation
-	// https://tc39.es/ecma262/#sec-thisnumbervalue
-
-
-	var thisNumberValue = functionUncurryThis(1.0.valueOf);
-
-	var getOwnPropertyNames = objectGetOwnPropertyNames.f;
-
-	var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
-
-	var defineProperty = objectDefineProperty.f;
-
-
-
-	var trim = stringTrim.trim;
-
-	var NUMBER = 'Number';
-	var NativeNumber = global$1[NUMBER];
-	var NumberPrototype = NativeNumber.prototype;
-	var TypeError$1 = global$1.TypeError;
-	var arraySlice = functionUncurryThis(''.slice);
-	var charCodeAt = functionUncurryThis(''.charCodeAt); // `ToNumeric` abstract operation
-	// https://tc39.es/ecma262/#sec-tonumeric
-
-	var toNumeric = function (value) {
-	  var primValue = toPrimitive(value, 'number');
-	  return typeof primValue == 'bigint' ? primValue : toNumber(primValue);
-	}; // `ToNumber` abstract operation
-	// https://tc39.es/ecma262/#sec-tonumber
-
-
-	var toNumber = function (argument) {
-	  var it = toPrimitive(argument, 'number');
-	  var first, third, radix, maxCode, digits, length, index, code;
-	  if (isSymbol$1(it)) throw TypeError$1('Cannot convert a Symbol value to a number');
-
-	  if (typeof it == 'string' && it.length > 2) {
-	    it = trim(it);
-	    first = charCodeAt(it, 0);
-
-	    if (first === 43 || first === 45) {
-	      third = charCodeAt(it, 2);
-	      if (third === 88 || third === 120) return NaN; // Number('+0x1') should be NaN, old V8 fix
-	    } else if (first === 48) {
-	      switch (charCodeAt(it, 1)) {
-	        case 66:
-	        case 98:
-	          radix = 2;
-	          maxCode = 49;
-	          break;
-	        // fast equal of /^0b[01]+$/i
-
-	        case 79:
-	        case 111:
-	          radix = 8;
-	          maxCode = 55;
-	          break;
-	        // fast equal of /^0o[0-7]+$/i
-
-	        default:
-	          return +it;
-	      }
-
-	      digits = arraySlice(it, 2);
-	      length = digits.length;
-
-	      for (index = 0; index < length; index++) {
-	        code = charCodeAt(digits, index); // parseInt parses a string to a first unavailable symbol
-	        // but ToNumber should return NaN if a string contains unavailable symbols
-
-	        if (code < 48 || code > maxCode) return NaN;
-	      }
-
-	      return parseInt(digits, radix);
-	    }
-	  }
-
-	  return +it;
-	}; // `Number` constructor
-	// https://tc39.es/ecma262/#sec-number-constructor
-
-
-	if (isForced_1(NUMBER, !NativeNumber(' 0o1') || !NativeNumber('0b1') || NativeNumber('+0x1'))) {
-	  var NumberWrapper = function Number(value) {
-	    var n = arguments.length < 1 ? 0 : NativeNumber(toNumeric(value));
-	    var dummy = this; // check on 1..constructor(foo) case
-
-	    return objectIsPrototypeOf(NumberPrototype, dummy) && fails(function () {
-	      thisNumberValue(dummy);
-	    }) ? inheritIfRequired(Object(n), dummy, NumberWrapper) : n;
-	  };
-
-	  for (var keys = descriptors ? getOwnPropertyNames(NativeNumber) : ( // ES3:
-	  'MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,' + // ES2015 (in case, if modules with ES2015 Number statics required before):
-	  'EPSILON,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,isFinite,isInteger,isNaN,isSafeInteger,parseFloat,parseInt,' + // ESNext
-	  'fromString,range').split(','), j = 0, key; keys.length > j; j++) {
-	    if (hasOwnProperty_1(NativeNumber, key = keys[j]) && !hasOwnProperty_1(NumberWrapper, key)) {
-	      defineProperty(NumberWrapper, key, getOwnPropertyDescriptor(NativeNumber, key));
-	    }
-	  }
-
-	  NumberWrapper.prototype = NumberPrototype;
-	  NumberPrototype.constructor = NumberWrapper;
-	  defineBuiltIn(global$1, NUMBER, NumberWrapper, {
-	    constructor: true
-	  });
-	}
-
 	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}";
 	styleInject(css_248z$b);
 
@@ -45601,7 +46057,7 @@
 	  }))));
 	}
 
-	var css_248z$9 = "@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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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-radius: 90px;\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(251, 201, 61);\n}\n.btn-round-dark {\n  background-color: rgb(251, 201, 61);\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  padding-top: 0;\n  padding-bottom: 4rem;\n}\n\n.response-message {\n  height: 3rem;\n  line-height: 3rem;\n  width: 100%;\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(251, 201, 61) 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$9 = "@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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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-radius: 90px;\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(251, 201, 61);\n}\n.btn-round-dark {\n  background-color: rgb(251, 201, 61);\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  padding-top: 0;\n  padding-bottom: 4rem;\n}\n\n.response-message {\n  height: 3rem;\n  line-height: 3rem;\n  width: 100%;\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(251, 201, 61) solid;\n  }\n  .btn-round-stop {\n    bottom: 2.5rem;\n  }\n  .video-container {\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n  }\n}";
 	styleInject(css_248z$9);
 
 	function RecordIcon() {
@@ -45906,7 +46362,7 @@
 	  }, h$2(Logo, null)))));
 	}
 
-	var css_248z$8 = "@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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.utu-feedback-details {\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  width: 100%;\n  position: relative;\n  z-index: 1;\n  justify-content: start;\n  border-bottom: 15px rgb(251, 201, 61) 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    width: 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: 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$8 = "@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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.utu-feedback-details {\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  width: 100%;\n  position: relative;\n  z-index: 1;\n  justify-content: start;\n  border-bottom: 15px rgb(251, 201, 61) 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    width: 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: 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}";
 	styleInject(css_248z$8);
 
 	var HAS_SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('slice');
@@ -45953,10 +46409,59 @@
 	  }
 	});
 
-	var css_248z$7 = "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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.endor-avatar {\n  width: 2rem;\n}\n\n.endorsement-body {\n  display: flex;\n}\n\n.truncate-text {\n  display: inline-block;\n  width: 5rem;\n  margin: -5px 5px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.endor-text {\n  width: 100%;\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  align-items: center;\n  margin-top: 1rem;\n  padding-left: 3rem;\n  padding-right: 3rem;\n  font-size: 0.7rem;\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  text-align: start;\n  margin-bottom: 0;\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(251, 201, 61);\n}\n.endor-text-image-item-dark {\n  border: 2px solid rgb(251, 201, 61);\n}";
+	var css_248z$7 = "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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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  width: 100%;\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(251, 201, 61);\n}\n.endor-text-image-item-dark {\n  border: 2px solid rgb(251, 201, 61);\n}";
 	styleInject(css_248z$7);
 
 	// const minLength = 5;
+	var CONNECTION_TYPE_REF = {
+	  //  twitter: "Your Twitter connection",
+	  //  telegram: "Your Telegram contact"
+	  twitter: "Twitter user",
+	  telegram: "Telegram user"
+	};
+	var DEFAULT_CONNECTION_REF = "User";
+
+	function getConnectionInfo(entity) {
+	  if (!entity) return {
+	    ref: "Someone"
+	  }; // eslint-disable-next-line no-restricted-syntax
+
+	  for (var key in CONNECTION_TYPE_REF) {
+	    if (entity.properties[key]) {
+	      return {
+	        ref: CONNECTION_TYPE_REF[key],
+	        name: entity.properties[key].name
+	      };
+	    }
+	  } // No connection type was found, return default
+
+
+	  return {
+	    ref: DEFAULT_CONNECTION_REF,
+	    name: entity.name
+	  };
+	}
+
+	var SELF_INFO = {
+	  ref: "You"
+	};
+
+	function getEndorsementTextBody(userUuid, endorsementInfo) {
+	  var _connectionInfo$name, _endorsementInfo$endo;
+
+	  var endorser = endorsementInfo.source;
+	  var isSelf = endorser.uuid === userUuid;
+	  var connectionInfo = isSelf ? SELF_INFO : getConnectionInfo(endorser);
+	  var has = isSelf ? "have" : "has";
+	  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"
+	  }, 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"));
+	}
+
 	function EndorsementsList(props) {
 	  // environments
 	  var _useState = p(false),
@@ -45979,10 +46484,11 @@
 
 	  if (!endorsements) {
 	    return h$2(p$1, null);
-	  } // image
+	  }
 
+	  var displayEndorsements = endorsements.slice(0, config.feedbackDetailsMaxEndorsements); // image
 
-	  var img = endorsements.map(function (i) {
+	  var img = displayEndorsements.map(function (i) {
 	    var _i$source;
 
 	    return (_i$source = i.source) === null || _i$source === void 0 ? void 0 : _i$source.image;
@@ -46000,21 +46506,7 @@
 	        e.target.alt = "";
 	      }
 	    });
-	  }; // name
-
-
-	  var nameFirst = endorsements.map(function (i) {
-	    var _i$source2;
-
-	    return (_i$source2 = i.source) === null || _i$source2 === void 0 ? void 0 : _i$source2.name.slice(0, 3);
-	  });
-	  var nameSec = endorsements.map(function (i) {
-	    var _i$source3;
-
-	    return (_i$source3 = i.source) === null || _i$source3 === void 0 ? void 0 : _i$source3.name.slice(-3);
-	  });
-	  nameFirst === null || nameFirst === void 0 ? void 0 : nameFirst.concat(nameSec); // stake
-	  // const endorStk = endorsements.map(i => i.endorsement?.value)
+	  };
 
 	  return h$2(BaseComponent, {
 	    style: css_248z$7,
@@ -46025,8 +46517,8 @@
 	    className: "endor-text-section utu-section-".concat(envCondition)
 	  }, h$2("div", {
 	    className: "endor-text endor-text-".concat(envCondition)
-	  }, endorsements.map(function (i) {
-	    var _i$source4, _i$endorsement, _i$endorsement2;
+	  }, displayEndorsements.map(function (i) {
+	    var _i$endorsement;
 
 	    return h$2("div", {
 	      className: "py-3 px-5 endorsement-body"
@@ -46034,19 +46526,11 @@
 	      className: "endor-text-img"
 	    }, endorImg()), h$2("div", {
 	      className: "endor-text-contacts-section"
-	    }, h$2("p", {
-	      className: "endor-text-contacts-body "
-	    }, "Your connection ", h$2("span", {
-	      className: "truncate-text"
-	    }, h$2("b", {
-	      className: ""
-	    }, (_i$source4 = i.source) === null || _i$source4 === void 0 ? void 0 : _i$source4.name)), "has endorsed ", h$2("b", {
-	      className: "mx-1"
-	    }, (_i$endorsement = i.endorsement) === null || _i$endorsement === void 0 ? void 0 : _i$endorsement.value, " UTT "), " ")), h$2("div", {
+	    }, getEndorsementTextBody(props[ATTR_SOURCE_UUID], i)), h$2("div", {
 	      className: "endor-text-stakes"
 	    }, h$2("div", {
 	      className: "endor-text-stakes-item"
-	    }, " ", h$2("b", null, (_i$endorsement2 = i.endorsement) === null || _i$endorsement2 === void 0 ? void 0 : _i$endorsement2.value), " "), h$2("div", {
+	    }, h$2("b", null, (_i$endorsement = i.endorsement) === null || _i$endorsement === void 0 ? void 0 : _i$endorsement.value)), h$2("div", {
 	      className: "endor-text-stakes-item-2"
 	    }, h$2("b", null, "staked"))));
 	  }))));
@@ -46106,7 +46590,7 @@
 	  }
 	});
 
-	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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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$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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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}";
 	styleInject(css_248z$5);
 
 	function BadgesShow$1(props) {
@@ -46195,7 +46679,7 @@
 	  }))));
 	}
 
-	var css_248z$3 = "@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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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(251, 201, 61);\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: 4rem;\n  padding-top: 4rem;\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(251, 201, 61);\n  border: 4px solid rgb(251, 201, 61);\n}\n.avatar-no-img-dark {\n  background-color: rgb(251, 201, 61);\n  border: 4px solid rgb(251, 201, 61);\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$3 = "@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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.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(251, 201, 61);\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: 4rem;\n  padding-top: 4rem;\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(251, 201, 61);\n  border: 4px solid rgb(251, 201, 61);\n}\n.avatar-no-img-dark {\n  background-color: rgb(251, 201, 61);\n  border: 4px solid rgb(251, 201, 61);\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}";
 	styleInject(css_248z$3);
 
 	function VideoShow(props) {
@@ -46268,7 +46752,7 @@
 	  }))));
 	}
 
-	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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.video-avatar {\n  width: 2rem;\n}\n\n.video-placeholder {\n  height: 2rem;\n}\n\n.review-text {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0 8px;\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  padding: 2rem 1rem 2rem 1rem;\n  background-color: rgba(255, 221, 51, 0.15);\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-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  }\n  .review-card-group {\n    padding: 2rem 1rem 2rem 1rem;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.video-avatar {\n  width: 2rem;\n}\n\n.video-placeholder {\n  height: 2rem;\n}\n\n.review-text {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0 8px;\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  padding: 2rem 1rem 2rem 1rem;\n  background-color: rgba(255, 221, 51, 0.15);\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-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  }\n  .review-card-group {\n    padding: 2rem 1rem 2rem 1rem;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n}";
 	styleInject(css_248z$2);
 
 	function BadgesShow(props) {
@@ -46334,9 +46818,10 @@
 	  var _getBaseProps = getBaseProps(props, TAG_FEEDBACK_DETAILS_POPUP),
 	      apiUrl = _getBaseProps.apiUrl;
 
+	  var sourceUuid = props[ATTR_SOURCE_UUID];
 	  var targetUuid = props[ATTR_TARGET_UUID];
 
-	  var _useFeedbackSummaryAp = useFeedbackSummaryApi(apiUrl, targetUuid),
+	  var _useFeedbackSummaryAp = useFeedbackSummaryApi(apiUrl, sourceUuid, targetUuid),
 	      feedbackSummary = _useFeedbackSummaryAp.feedbackSummary;
 
 	  return h$2(BaseComponent, {
@@ -46381,7 +46866,7 @@
 	  }, h$2(Logo, null)))));
 	}
 
-	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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.utu-feedback-details-popup {\n  padding: 0.5rem;\n}\n\n.utu-feedback-form-popup {\n  padding: 0.5rem;\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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.utu-feedback-details-popup {\n  padding: 0.5rem;\n}\n\n.utu-feedback-form-popup {\n  padding: 0.5rem;\n}";
 	styleInject(css_248z$1);
 
 	function FeedbackPopup(props) {
@@ -46459,7 +46944,7 @@
 	  }, props), h$2(FeedbackForm, props)));
 	} // style={{backgroundColor: `${props[ATTR_BTN_COLOR]} || yellow ` }}
 
-	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.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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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.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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.utu-Header {\n  width: 100%;\n  padding: 2rem 3rem;\n  background-color: #fcf8e5;\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(251, 201, 61);\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(251, 201, 61);\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-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: #e5e5e5;\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(251, 201, 61);\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: rgb(251, 201, 61);\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: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\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-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\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: rgb(253, 253, 253);\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.utu-Header {\n  width: 100%;\n  padding: 2rem 3rem;\n  background-color: #fcf8e5;\n}";
 	styleInject(css_248z);
 
 	function Header() {
@@ -46491,7 +46976,7 @@
 	register$2(FeedbackPopup, TAG_FEEDBACK_DETAILS_POPUP, [ATTR_API_URL, ATTR_BTN_COLOR], {
 	  shadow: true
 	});
-	register$2(FeedbackDetails, TAG_FEEDBACK_DETAILS, [ATTR_API_URL], {
+	register$2(FeedbackDetails, TAG_FEEDBACK_DETAILS, [ATTR_API_URL, ATTR_SOURCE_UUID, ATTR_TARGET_UUID], {
 	  shadow: true
 	});