@ututrust/web-components 2.2.0 → 2.2.1

package/dist/index.js

@@ -110797,8 +110797,8 @@
       var children = _a.children;
       var network = 80001;
       var _c = useAccount(),
-        address = _c.address,
-        connector = _c.connector;
+        address = _c.address;
+        _c.connector;
       var lockAddress = "0x9ed4453b57abd4397b7f672feb769ade76dc4c8e";
       var _d = useContractRead({
           address: lockAddress,
@@ -110820,25 +110820,18 @@
       };
       var checkout = function () {
         return __awaiter$b(_this, void 0, void 0, function () {
-          var provider, paywall, _a, _b, _c;
-          return __generator(this, function (_d) {
-            switch (_d.label) {
+          var paywall;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
               case 0:
-                provider = connector === null || connector === void 0 ? void 0 : connector.getProvider();
-                console.log("provider", provider);
                 paywall = new je(src_default);
-                return [4 /*yield*/, paywall.connect(provider)];
-              // EIP 1193 provider
-              case 1:
-                _d.sent(); // EIP 1193 provider
-                _b = (_a = console).log;
-                _c = ["await paywall.connect(provider)"];
-                return [4 /*yield*/, paywall.connect(provider)];
-              case 2:
-                _b.apply(_a, _c.concat([_d.sent()]));
+                // await paywall.connect(provider) // EIP 1193 provider
+                // await paywall.connect()
                 return [4 /*yield*/, paywall.loadCheckoutModal(paywallConfig)];
-              case 3:
-                _d.sent();
+              case 1:
+                // await paywall.connect(provider) // EIP 1193 provider
+                // await paywall.connect()
+                _a.sent();
                 return [2 /*return*/];
             }
           });
@@ -110876,7 +110869,7 @@
           },
           type: "button",
           onClick: checkout
-        }, "Buy Membership"));
+        }, "Buy Membership to view feedback details"));
       }
       return y$2("div", null, children);
     }
@@ -110925,7 +110918,7 @@
         onClick: function () {
           return connect();
         }
-      }, "Connect"), " "), isConnected && y$2("div", null, y$2(UnlockGateWay, null, y$2("div", {
+      }, "Connect your wallet"), " "), isConnected && y$2("div", null, y$2(UnlockGateWay, null, y$2("div", {
         className: "x-utu-feedback-details_title"
       }, y$2("p", null, "Show Feedback For ( ", targetHumanReadableToDisplay, " )", targetType ? y$2("p", null, " Signal Type: ", targetType, " ") : "")), y$2("div", {
         className: "x-utu-feedback-details_body_1"
@@ -110968,7 +110961,7 @@
         onClick: function () {
           return disconnect();
         }
-      }, "disconnect")))));
+      }, "disconnect your wallet")))));
     }
 
     var css_248z = "p {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-error, .submit-success {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\np {\n  margin-bottom: 0;\n}\n\n.x-utu-h3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 0.9rem;\n}\n\n.x-utu-h3-balance {\n  text-transform: capitalize;\n  font-weight: bold;\n  font-size: 0.9rem;\n}\n\n.x-utu-error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n    border-top-color: rgb(252, 229, 70);\n    border-bottom-color: rgb(155, 152, 152);\n    border-right-color: transparent;\n    border-left-color: transparent;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.x-utu-spinner {\n  margin: 5px;\n  display: inline-block;\n  border: 3px solid rgb(252, 229, 70);\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-radius: 50%;\n  animation: spin 1s infinite;\n}\n\n.x-utu-spinner-default-size {\n  width: 21px;\n  height: 21px;\n}\n\n.x-utu-section {\n  width: 100%;\n}\n.x-utu-section-light {\n  border-bottom: 1px solid rgb(155, 152, 152);\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n  border-bottom: 1px solid rgb(235, 232, 232);\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n  background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n  background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.x-utu-btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.x-utu-btn-light {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-dark {\n  background-color: rgb(252, 229, 70);\n  color: #000000 !important;\n}\n.x-utu-btn-round {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-round-text {\n  color: rgb(253, 253, 253) !important;\n}\n.x-utu-btn-icon {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n\nbutton.p {\n  color: white;\n}\n\n.submit-result, .submit-success, .submit-error {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-content: center;\n  text-align: center;\n}\n.logo-position-form {\n  position: absolute;\n  bottom: 0.3rem;\n  right: 22%;\n  z-index: 0;\n}\n.logo-position-details {\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  z-index: 0;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 0;\n  display: none;\n  width: 0.5rem;\n}\n.logo-position-mobile {\n  position: absolute;\n  top: -1.5rem;\n  right: 4rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  left: 5%;\n  bottom: 3%;\n}\n.logo-section {\n  position: relative;\n}\n.logo-section-mobile {\n  position: relative;\n}\n.logo-size {\n  width: 5rem;\n}\n.logo-video-section {\n  position: relative;\n}\n.logo-video-position {\n  position: absolute;\n  z-index: 0;\n  display: none;\n  width: 5rem;\n  left: 21rem;\n  top: 35.6rem;\n}\n\n.x-utu-text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: rgba(255, 221, 51, 0.1);\n}\n\n.x-utu-video-icon {\n  width: 2rem;\n  height: 1.4rem;\n}\n.x-utu-video-icon-dark {\n  fill: #000000;\n}\n.x-utu-video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .x-utu-section {\n    width: 100%;\n  }\n  .x-utu-section-light {\n    border-bottom: 0;\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-dark {\n    border-bottom: 0;\n    background: rgb(36, 35, 35);\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .x-utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n  .x-utu-h3-balance {\n    font-size: 0.8rem;\n  }\n  .x-utu-h3 {\n    font-size: 0.8rem;\n  }\n  .x-utu-text-area {\n    background-color: rgba(255, 221, 51, 0.1);\n  }\n  .logo-section {\n    position: relative;\n  }\n  .logo-section-mobile .logo-position-video {\n    position: absolute;\n    left: 5%;\n    bottom: 5%;\n  }\n  .logo-section-mobile .logo-section {\n    position: relative;\n  }\n}\n.x-utu-border-radius {\n  border-radius: 5px;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n  .x-utu-btn {\n    padding: 10px;\n    font-size: 0.9rem;\n  }\n}\n/*\nshimmer effect animation\n*/\n.x-utu-skeleton {\n  background-color: #e2e5e7;\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\n  background-size: 40px 100%;\n  background-repeat: no-repeat;\n  background-position: left -40px top 0;\n  animation: shine 1s ease infinite;\n}\n\n@keyframes shine {\n  to {\n    background-position: right -40px top 0;\n  }\n}\n.x-utu-description {\n  background-color: #fcf8e5;\n  padding: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-basis: content;\n}\n\n.x-utu-details {\n  width: 70%;\n  display: flex;\n  flex-direction: column;\n  margin: 5px 5px;\n}\n\n.x-utu-icon {\n  width: 20%;\n  min-height: 70px;\n  border-radius: 4px;\n  margin: auto;\n}\n\n.x-utu-title {\n  width: 100%;\n  min-height: 28px;\n  border-radius: 4px;\n  margin-bottom: 5px;\n  line-height: 28px;\n}\n\n.x-utu-information {\n  min-height: 42px;\n  border-radius: 4px;\n  width: 100%;\n}\n\n.placeholder-card_wrapper {\n  margin-bottom: 0.5rem;\n}\n\n.placeholder-card {\n  width: 90%;\n  margin-left: 2rem;\n  display: flex;\n  padding: 2rem 2.5rem 2rem 1.5rem;\n  background-color: rgba(255, 221, 51, 0.15);\n  min-height: 10rem;\n  border-radius: 10px;\n}\n\n.placeholder-icon {\n  width: 3rem;\n}\n\n.placeholder-text-title {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 0.9rem;\n  align-items: center;\n  margin: 0 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n  font-style: italic;\n  font-weight: 500;\n}\n\n.placeholder-text-body {\n  display: flex;\n  text-align: left;\n  padding-left: 1rem;\n  font-size: 1rem;\n  align-items: center;\n  margin: 0.5rem 8px;\n  white-space: pre-line;\n  width: 50px;\n  inline-size: 100%;\n}\n\n.target-human-readable {\n  padding: 0.5rem;\n  text-align: left;\n  font-size: 17px;\n  text-align: left;\n  color: black;\n  font-family: sans-serif;\n  font-weight: bold;\n}\n\n.video-msg {\n  position: absolute;\n}\n\n.trust-video {\n  border: none;\n  position: absolute;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg); /* Safari and Chrome */\n  -moz-transform: rotateY(180deg); /* Firefox */\n}\n.trust-video-container {\n  width: 25rem;\n  height: 40rem;\n  position: relative;\n}\n.trust-video-btn {\n  padding: 0 !important;\n  border: none !important;\n  background: none !important;\n}\n.trust-video-wrapper {\n  width: 65%;\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  background-color: #fcf8e5;\n  overflow: hidden;\n  align-items: center;\n  padding: 2rem;\n}\n.trust-video-wrapper:hover .trust-video-controls {\n  visibility: visible;\n  opacity: 1;\n}\n.trust-video-msg {\n  display: flex;\n  align-items: center;\n}\n.trust-video-controls {\n  position: absolute;\n  bottom: 0;\n  margin-top: 35%;\n  transform: translate(0, -30%);\n  border-radius: 10px;\n  align-items: center;\n  justify-content: space-between;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.25s ease-out;\n  display: none;\n}\n.trust-video-controls.show {\n  display: flex;\n}\n.trust-video-play {\n  border-color: transparent;\n  transition: 0.3s;\n  margin: auto;\n  margin-left: 3rem;\n  margin-right: 3rem;\n  line-height: 1.5em;\n  width: 4em;\n  height: 4em;\n  padding: 0.6rem;\n  padding-right: 0.3rem;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  font-size: 0.9rem;\n  border-radius: 50%;\n  font: normal normal normal 18px/1;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-play-btn {\n  border-color: transparent;\n}\n.trust-video-pause {\n  border-color: transparent;\n  transition: 0.3s;\n  margin: auto;\n  margin-left: 3rem;\n  margin-right: 3rem;\n  line-height: 1.5em;\n  width: 4em;\n  height: 4em;\n  padding: 0.6rem;\n  padding-right: 0.4rem;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #ffdd33;\n  font-size: 0.9rem;\n  border-radius: 50%;\n  font: normal normal normal 18px/1;\n}\n.trust-video-pause:before {\n  content: \"\\f04b\";\n}\n.trust-video-pause.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-pause-btn {\n  border-color: transparent;\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 1em;\n  padding: 0.6rem;\n  border-radius: 20%;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 0.65em;\n  line-height: 2.5rem;\n  padding: 0.6rem;\n  width: 5em;\n  border-radius: 20%;\n  margin-right: 5%;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 1280px) {\n  .trust-video-play {\n    margin-left: 5rem;\n    margin-right: 5rem;\n  }\n  .trust-video-pause {\n    margin-left: 5rem;\n    margin-right: 5rem;\n  }\n  .trust-video-controls {\n    height: 10em;\n  }\n}\n@media only screen and (max-width: 526px) {\n  .trust-video-play {\n    width: 3em;\n    height: 3em;\n    padding: 0.5rem;\n    padding-right: 0.3rem;\n  }\n  .trust-video-pause {\n    width: 3em;\n    height: 3em;\n    padding: 0.5rem;\n    padding-right: 0.3rem;\n  }\n  .trust-video-volume {\n    width: 2em;\n    height: 2em;\n    padding: 0.4rem;\n  }\n  .trust-video-fullscreen {\n    width: 3em;\n    padding: 0.4rem;\n  }\n  .trust-video-controls {\n    transform: translate(0, -100%);\n  }\n}\n.x-utu-feedback-details-popup {\n  width: 100%;\n  padding: 0.5rem;\n  border-radius: 10px;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n}\n\n.x-utu-feedback-details-popup_btn {\n  padding: 12px;\n  border: none;\n  border-radius: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  background-color: rgb(252, 229, 70);\n}";