@ututrust/web-components 2.0.4 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -39980,6 +39980,26 @@
39980
39980
  }));
39981
39981
  }
39982
39982
 
39983
+ /* eslint max-len: 0 */
39984
+ function Star() {
39985
+ return y$1("svg", {
39986
+ xmlns: "http://www.w3.org/2000/svg",
39987
+ viewBox: "0 0 576 512"
39988
+ }, y$1("path", {
39989
+ d: "M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
39990
+ }));
39991
+ }
39992
+
39993
+ /* eslint max-len: 0 */
39994
+ function Stamp() {
39995
+ return y$1("svg", {
39996
+ xmlns: "http://www.w3.org/2000/svg",
39997
+ viewBox: "0 0 512 512"
39998
+ }, y$1("path", {
39999
+ d: "M312 201.8c0-17.4 9.2-33.2 19.9-47C344.5 138.5 352 118.1 352 96c0-53-43-96-96-96s-96 43-96 96c0 22.1 7.5 42.5 20.1 58.8c10.7 13.8 19.9 29.6 19.9 47c0 29.9-24.3 54.2-54.2 54.2H112C50.1 256 0 306.1 0 368c0 20.9 13.4 38.7 32 45.3V464c0 26.5 21.5 48 48 48H432c26.5 0 48-21.5 48-48V413.3c18.6-6.6 32-24.4 32-45.3c0-61.9-50.1-112-112-112H366.2c-29.9 0-54.2-24.3-54.2-54.2zM416 416v32H96V416H416z"
40000
+ }));
40001
+ }
40002
+
39983
40003
  /* eslint-disable no-nested-ternary */
39984
40004
  /**
39985
40005
  * A component which renders the given child when the provided SubmitStatus is idle, a spinner when submitting
@@ -44941,40 +44961,12 @@
44941
44961
  var css_248z$7 = ".video-msg {\n position: absolute;\n}\n\n.trust-video {\n border: none;\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-btn {\n padding: 0 !important;\n border: none !important;\n background: none !important;\n}\n.trust-video-wrapper {\n display: flex;\n justify-content: center;\n width: 100%;\n align-items: center;\n}\n.trust-video-wrapper:hover .trust-video-controls {\n visibility: visible;\n opacity: 1;\n}\n.trust-video-msg {\n display: flex;\n align-items: center;\n}\n.trust-video-controls {\n position: absolute;\n bottom: 0;\n margin-top: 35%;\n transform: translate(0, -50%);\n padding-left: 36px;\n padding-right: 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 margin: auto;\n margin-left: 2rem;\n margin-right: 2rem;\n line-height: 1.5em;\n width: 3em;\n height: 3em;\n padding: 0.5rem;\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-volume {\n border-color: transparent;\n color: rgba(43, 51, 63, 0.7);\n font-size: 1em;\n padding: 0.2rem;\n border-radius: 20%;\n line-height: 1.5em;\n width: 2em;\n height: 1.5em;\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.4rem;\n width: 3em;\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: 768px) {\n .trust-video-wrapper {\n margin-top: 1%;\n }\n}\n@media only screen and (max-width: 768px) {\n .trust-video {\n border: none;\n }\n}\n.x-utu-h3 {\n text-transform: capitalize;\n font-weight: 500;\n font-size: 12px;\n}\n\n.error {\n color: #e80054;\n}\n\n:host {\n margin: 0;\n font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 14px;\n font-weight: 300;\n line-height: 1.5;\n color: #000000;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0);\n }\n 50% {\n transform: rotate(180deg);\n border-top-color: rgb(252, 229, 70);\n border-bottom-color: rgb(155, 152, 152);\n border-right-color: transparent;\n border-left-color: transparent;\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.spinner {\n width: 21px;\n height: 21px;\n display: inline-block;\n border: 3px solid rgb(252, 229, 70);\n border-top-color: transparent;\n border-bottom-color: transparent;\n border-radius: 50%;\n animation: spin 1s infinite;\n margin: 12px;\n}\n\n.x-utu-section {\n width: 100%;\n}\n.x-utu-section-light {\n border-bottom: 1px solid rgb(155, 152, 152);\n background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n border-bottom: 1px solid rgb(235, 232, 232);\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n background: #494949;\n}\n\n.x-utu-btn {\n padding: 12px;\n border: none;\n 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 {\n position: absolute;\n top: -1rem;\n right: 20%;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-details {\n position: absolute;\n top: -1.1rem;\n right: 6rem;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-player {\n position: absolute;\n bottom: -0.5rem;\n left: 22rem;\n z-index: 0;\n display: none;\n width: 0.5rem;\n}\n.logo-position-mobile {\n position: absolute;\n top: -1rem;\n right: 4rem;\n z-index: 2;\n width: 0.5rem;\n}\n.logo-position-video {\n position: absolute;\n bottom: 0;\n right: 10%;\n}\n.logo-section {\n position: relative;\n}\n.logo-section-mobile {\n position: relative;\n}\n.logo-size {\n width: 3rem;\n}\n.logo-video-section {\n position: relative;\n}\n.logo-video-position {\n position: absolute;\n z-index: 0;\n display: none;\n width: 5rem;\n left: 21rem;\n top: 35.6rem;\n}\n\n.x-utu-text-area {\n resize: vertical;\n min-height: 8rem;\n border-radius: 10px;\n border: none;\n padding: 16px;\n font-weight: 300;\n font-size: 0.9rem;\n background-color: rgba(255, 221, 51, 0.1);\n}\n\n.video-icon {\n width: 2rem;\n height: 1.4rem;\n}\n.video-icon-dark {\n fill: #000000;\n}\n.video-icon-light {\n fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n .x-utu-section {\n width: 100%;\n }\n .x-utu-section-light {\n border-bottom: 0;\n background-color: #fcf8e5;\n }\n .x-utu-section-dark {\n border-bottom: 0;\n background: rgb(36, 35, 35);\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-dark {\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-mid-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-mid-dark {\n background-color: #3d3d3c;\n }\n .x-utu-text-area {\n background-color: rgba(255, 221, 51, 0.1);\n }\n .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section {\n position: relative;\n }\n .logo-section-mobile .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section-mobile .logo-section {\n position: relative;\n }\n}\n.x-utu-border-radius {\n border-radius: 5px;\n}\n\n/*\nshimmer effect animation\n*/\n.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.description {\n display: flex;\n flex-direction: row;\n}\n\n.details {\n display: flex;\n flex-direction: column;\n margin: 5px 5px;\n}\n\n.icon {\n width: 70px;\n min-height: 70px;\n border-radius: 4px;\n margin: 5px 0;\n}\n\n.title {\n width: 500px;\n min-height: 28px;\n border-radius: 4px;\n margin-bottom: 5px;\n line-height: 28px;\n}\n\n.information {\n min-height: 42px;\n border-radius: 4px;\n width: 500px;\n}\n\n.utu-feedback-details {\n min-height: 30rem;\n width: 100%;\n margin: auto;\n background-color: #fcf8e5;\n display: flex;\n flex-direction: column;\n text-align: center;\n position: relative;\n z-index: 1;\n justify-content: start;\n border-bottom: 15px rgb(252, 229, 70) solid;\n}\n.utu-feedback-details-details {\n justify-content: start;\n max-height: 40rem;\n}\n.utu-feedback-details-video-popup {\n justify-content: center;\n max-height: 80rem;\n height: 43rem;\n}\n\n.mobile-view {\n visibility: visible;\n}\n\n.desktop-view {\n display: none;\n}\n\n/* ----------- Transition screen ----------- */\n@media only screen and (min-width: 768px) {\n .utu-feedback-details {\n width: 65%;\n border-bottom: 0;\n z-index: 1;\n align-items: center;\n margin-bottom: 10rem;\n }\n .mobile-view {\n display: none;\n }\n .desktop-view {\n display: flex;\n width: 100%;\n flex-direction: column;\n margin-bottom: 5rem;\n }\n .desktop-view-video-stars {\n display: flex;\n flex-direction: column;\n }\n .desktop-view-block-1 {\n width: 100%;\n margin: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\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 margin: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n }\n .desktop-view-block-2-dark {\n background-color: #3d3d3c;\n }\n .desktop-view-block-2-light {\n background-color: #fcf8e5;\n }\n}\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 1481px) {\n .utu-feedback-details {\n border-bottom: 0;\n z-index: 1;\n align-items: center;\n width: 65%;\n }\n .mobile-view {\n display: none;\n }\n .desktop-view {\n display: flex;\n width: 100%;\n flex-direction: column;\n }\n .desktop-view-video-stars {\n display: flex;\n flex-direction: column;\n }\n .desktop-view-block-1 {\n min-height: 15rem;\n width: 100%;\n margin: auto;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 1rem;\n justify-content: space-between;\n }\n .desktop-view-block-1-dark {\n background-color: #3d3d3c;\n }\n .desktop-view-block-1-light {\n background-color: #fcf8e5;\n }\n .desktop-view-block-2 {\n min-height: 15rem;\n width: 100%;\n margin: auto;\n display: flex;\n flex-direction: row;\n padding: 2rem 1rem;\n justify-content: space-between;\n align-items: start;\n }\n .desktop-view-block-2-dark {\n background-color: #3d3d3c;\n }\n .desktop-view-block-2-light {\n background-color: #fcf8e5;\n }\n}";
44942
44962
  styleInject(css_248z$7);
44943
44963
 
44944
- var css_248z$6 = ".avatar-no-data {\n padding: 0.35rem;\n width: 2.5rem;\n height: 2.5rem;\n}";
44964
+ var css_248z$6 = ".x-utu-h3 {\n text-transform: capitalize;\n font-weight: 500;\n font-size: 12px;\n}\n\n.error {\n color: #e80054;\n}\n\n:host {\n margin: 0;\n font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 14px;\n font-weight: 300;\n line-height: 1.5;\n color: #000000;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0);\n }\n 50% {\n transform: rotate(180deg);\n border-top-color: rgb(252, 229, 70);\n border-bottom-color: rgb(155, 152, 152);\n border-right-color: transparent;\n border-left-color: transparent;\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.spinner {\n width: 21px;\n height: 21px;\n display: inline-block;\n border: 3px solid rgb(252, 229, 70);\n border-top-color: transparent;\n border-bottom-color: transparent;\n border-radius: 50%;\n animation: spin 1s infinite;\n margin: 12px;\n}\n\n.x-utu-section {\n width: 100%;\n}\n.x-utu-section-light {\n border-bottom: 1px solid rgb(155, 152, 152);\n background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n border-bottom: 1px solid rgb(235, 232, 232);\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n background: #494949;\n}\n\n.x-utu-btn {\n padding: 12px;\n border: none;\n 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 {\n position: absolute;\n top: -1rem;\n right: 20%;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-details {\n position: absolute;\n top: -1.1rem;\n right: 6rem;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-player {\n position: absolute;\n bottom: -0.5rem;\n left: 22rem;\n z-index: 0;\n display: none;\n width: 0.5rem;\n}\n.logo-position-mobile {\n position: absolute;\n top: -1rem;\n right: 4rem;\n z-index: 2;\n width: 0.5rem;\n}\n.logo-position-video {\n position: absolute;\n bottom: 0;\n right: 10%;\n}\n.logo-section {\n position: relative;\n}\n.logo-section-mobile {\n position: relative;\n}\n.logo-size {\n width: 3rem;\n}\n.logo-video-section {\n position: relative;\n}\n.logo-video-position {\n position: absolute;\n z-index: 0;\n display: none;\n width: 5rem;\n left: 21rem;\n top: 35.6rem;\n}\n\n.x-utu-text-area {\n resize: vertical;\n min-height: 8rem;\n border-radius: 10px;\n border: none;\n padding: 16px;\n font-weight: 300;\n font-size: 0.9rem;\n background-color: rgba(255, 221, 51, 0.1);\n}\n\n.video-icon {\n width: 2rem;\n height: 1.4rem;\n}\n.video-icon-dark {\n fill: #000000;\n}\n.video-icon-light {\n fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n .x-utu-section {\n width: 100%;\n }\n .x-utu-section-light {\n border-bottom: 0;\n background-color: #fcf8e5;\n }\n .x-utu-section-dark {\n border-bottom: 0;\n background: rgb(36, 35, 35);\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-dark {\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-mid-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-mid-dark {\n background-color: #3d3d3c;\n }\n .x-utu-text-area {\n background-color: rgba(255, 221, 51, 0.1);\n }\n .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section {\n position: relative;\n }\n .logo-section-mobile .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section-mobile .logo-section {\n position: relative;\n }\n}\n.x-utu-border-radius {\n border-radius: 5px;\n}\n\n/*\nshimmer effect animation\n*/\n.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.description {\n display: flex;\n flex-direction: row;\n}\n\n.details {\n display: flex;\n flex-direction: column;\n margin: 5px 5px;\n}\n\n.icon {\n width: 70px;\n min-height: 70px;\n border-radius: 4px;\n margin: 5px 0;\n}\n\n.title {\n width: 500px;\n min-height: 28px;\n border-radius: 4px;\n margin-bottom: 5px;\n line-height: 28px;\n}\n\n.information {\n min-height: 42px;\n border-radius: 4px;\n width: 500px;\n}\n\n.endor-text-section {\n width: 50%;\n}\n\n.endor-title {\n display: flex;\n justify-self: center;\n text-align: center;\n}\n.endor-avatar {\n width: 2rem;\n}\n.endor-text {\n justify-content: space-around;\n padding-left: 3rem;\n padding-right: 3rem;\n font-size: 1rem;\n align-items: center;\n}\n.endor-text-light {\n color: black;\n}\n.endor-text-dark {\n color: white;\n}\n.endor-text-body {\n display: flex;\n}\n.endor-text-section {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-top: 0;\n padding-top: 1rem;\n padding-bottom: 2rem;\n}\n.endor-text-section-no-data {\n display: flex;\n justify-content: flex-start;\n}\n.endor-text-stakes-no-data {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: 2rem;\n}\n.endor-text-stakes-item {\n font-size: 1rem;\n}\n.endor-text-stakes-item-light {\n color: black;\n}\n.endor-text-stakes-item-dark {\n color: white;\n}\n.endor-text-stakes-item-2 {\n font-size: 0.8rem;\n}\n.endor-text-stakes-item-2-light {\n color: black;\n}\n.endor-text-stakes-item-2-dark {\n color: white;\n}\n.endor-text-contacts-section {\n padding-left: 1rem;\n padding-right: 0;\n margin-top: 1rem;\n font-size: 0.7rem;\n width: 22rem;\n flex-wrap: wrap;\n text-align: left;\n}\n.endor-text-contacts-section-light {\n color: black;\n}\n.endor-text-contacts-section-dark {\n color: white;\n}\n.endor-text-contacts-body {\n font-size: 0.7rem;\n margin-top: 0.5em;\n}\n.endor-text-truncate {\n display: inline-block;\n max-width: 5rem;\n vertical-align: bottom;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.endor-text-image-item {\n margin-top: 1rem;\n height: 3rem;\n border-radius: 50%;\n}\n.endor-text-image-item-light {\n border: 2px solid rgb(252, 229, 70);\n}\n.endor-text-image-item-dark {\n border: 2px solid rgb(252, 229, 70);\n}\n\n@media only screen and (min-width: 768px) {\n .endor-title {\n display: flex;\n justify-self: center;\n text-align: center;\n }\n .endor-text {\n padding-left: 0;\n }\n .endor-text-section {\n padding-top: 1rem;\n padding-bottom: 1rem;\n margin-top: 0;\n }\n .endor-text-body {\n padding-left: 0rem;\n padding-right: 0rem;\n }\n .endor-text-contacts-body {\n font-size: 1rem;\n }\n .endor-text-stakes-item {\n font-size: 1.5rem;\n }\n .endor-text-stakes-item-2 {\n font-size: 1rem;\n }\n}\n@media only screen and (min-width: 768px) {\n .endor-section {\n margin-top: 4rem;\n }\n}\n@media only screen and (min-width: 1481px) {\n .endor-text-section {\n align-items: flex-start;\n justify-content: flex-start;\n }\n}";
44945
44965
  styleInject(css_248z$6);
44946
44966
 
44947
- function Avatar(_ref) {
44948
- let props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
44949
- // environments
44950
- const [isDark, setIsDark] = h(false);
44951
- if (props[ATTR_THEME_COLOR] === "dark") {
44952
- setIsDark(true);
44953
- }
44954
- return y$1("svg", {
44955
- style: css_248z$6,
44956
- version: "1.1",
44957
- id: "Capa_1",
44958
- xmlns: "http://www.w3.org/2000/svg",
44959
- xmlnsXlink: "http://www.w3.org/1999/xlink",
44960
- x: "4.5rem",
44961
- y: "4.5rem",
44962
- className: "avatar-no-data avatar-no-video-".concat(isDark ? "dark" : "light"),
44963
- viewBox: "0 0 490.1 490.1",
44964
- xmlSpace: "preserve"
44965
- }, y$1("g", null, y$1("g", null, y$1("path", {
44966
- d: "M245,261.75c71.9,0,131.4-57.3,131.4-130.3S316.9,0.05,245,0.05s-131.4,57.3-131.4,130.3S173.1,261.75,245,261.75z M245,40.75c50,0,90.7,40.7,90.7,89.7s-40.7,89.6-90.7,89.6s-90.7-40.7-90.7-89.7S195,40.75,245,40.75z"
44967
- }), y$1("path", {
44968
- d: "M333.6,274.25c-8.3-2.1-16.7,0-21.9,6.3l-66.7,76.1l-66.7-76.1c-5.2-6.3-14.6-8.3-21.9-6.3C61.5,305.55,0,382.65,0,469.15 c0,11.5,9.4,20.9,20.9,20.9h448.3c11.5,0,20.9-9.4,20.9-20.9C490,382.65,428.5,305.55,333.6,274.25z M42.7,449.35 c8.4-57.3,50.1-106.3,114.7-131.3l73,83.4c7.3,9.4,22.9,9.4,30.2,0l73-83.4c63.6,25,106.4,75,114.7,131.3H42.7z"
44969
- }))));
44970
- }
44971
-
44972
- var css_248z$5 = ".x-utu-h3 {\n text-transform: capitalize;\n font-weight: 500;\n font-size: 12px;\n}\n\n.error {\n color: #e80054;\n}\n\n:host {\n margin: 0;\n font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 14px;\n font-weight: 300;\n line-height: 1.5;\n color: #000000;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0);\n }\n 50% {\n transform: rotate(180deg);\n border-top-color: rgb(252, 229, 70);\n border-bottom-color: rgb(155, 152, 152);\n border-right-color: transparent;\n border-left-color: transparent;\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.spinner {\n width: 21px;\n height: 21px;\n display: inline-block;\n border: 3px solid rgb(252, 229, 70);\n border-top-color: transparent;\n border-bottom-color: transparent;\n border-radius: 50%;\n animation: spin 1s infinite;\n margin: 12px;\n}\n\n.x-utu-section {\n width: 100%;\n}\n.x-utu-section-light {\n border-bottom: 1px solid rgb(155, 152, 152);\n background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n border-bottom: 1px solid rgb(235, 232, 232);\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n background: #494949;\n}\n\n.x-utu-btn {\n padding: 12px;\n border: none;\n 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 {\n position: absolute;\n top: -1rem;\n right: 20%;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-details {\n position: absolute;\n top: -1.1rem;\n right: 6rem;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-player {\n position: absolute;\n bottom: -0.5rem;\n left: 22rem;\n z-index: 0;\n display: none;\n width: 0.5rem;\n}\n.logo-position-mobile {\n position: absolute;\n top: -1rem;\n right: 4rem;\n z-index: 2;\n width: 0.5rem;\n}\n.logo-position-video {\n position: absolute;\n bottom: 0;\n right: 10%;\n}\n.logo-section {\n position: relative;\n}\n.logo-section-mobile {\n position: relative;\n}\n.logo-size {\n width: 3rem;\n}\n.logo-video-section {\n position: relative;\n}\n.logo-video-position {\n position: absolute;\n z-index: 0;\n display: none;\n width: 5rem;\n left: 21rem;\n top: 35.6rem;\n}\n\n.x-utu-text-area {\n resize: vertical;\n min-height: 8rem;\n border-radius: 10px;\n border: none;\n padding: 16px;\n font-weight: 300;\n font-size: 0.9rem;\n background-color: rgba(255, 221, 51, 0.1);\n}\n\n.video-icon {\n width: 2rem;\n height: 1.4rem;\n}\n.video-icon-dark {\n fill: #000000;\n}\n.video-icon-light {\n fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n .x-utu-section {\n width: 100%;\n }\n .x-utu-section-light {\n border-bottom: 0;\n background-color: #fcf8e5;\n }\n .x-utu-section-dark {\n border-bottom: 0;\n background: rgb(36, 35, 35);\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-dark {\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-mid-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-mid-dark {\n background-color: #3d3d3c;\n }\n .x-utu-text-area {\n background-color: rgba(255, 221, 51, 0.1);\n }\n .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section {\n position: relative;\n }\n .logo-section-mobile .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section-mobile .logo-section {\n position: relative;\n }\n}\n.x-utu-border-radius {\n border-radius: 5px;\n}\n\n/*\nshimmer effect animation\n*/\n.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.description {\n display: flex;\n flex-direction: row;\n}\n\n.details {\n display: flex;\n flex-direction: column;\n margin: 5px 5px;\n}\n\n.icon {\n width: 70px;\n min-height: 70px;\n border-radius: 4px;\n margin: 5px 0;\n}\n\n.title {\n width: 500px;\n min-height: 28px;\n border-radius: 4px;\n margin-bottom: 5px;\n line-height: 28px;\n}\n\n.information {\n min-height: 42px;\n border-radius: 4px;\n width: 500px;\n}\n\n.endor-text-section {\n width: 50%;\n}\n\n.endor-title {\n display: flex;\n}\n.endor-avatar {\n width: 2rem;\n}\n.endor-text {\n justify-content: space-around;\n padding-left: 3rem;\n padding-right: 3rem;\n font-size: 1rem;\n align-items: center;\n}\n.endor-text-light {\n color: black;\n}\n.endor-text-dark {\n color: white;\n}\n.endor-text-body {\n display: flex;\n}\n.endor-text-section {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-top: 0;\n padding-top: 1rem;\n padding-bottom: 2rem;\n}\n.endor-text-section-no-data {\n display: flex;\n justify-content: flex-start;\n}\n.endor-text-stakes-no-data {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: 2rem;\n}\n.endor-text-stakes-item {\n font-size: 1rem;\n}\n.endor-text-stakes-item-light {\n color: black;\n}\n.endor-text-stakes-item-dark {\n color: white;\n}\n.endor-text-stakes-item-2 {\n font-size: 0.8rem;\n}\n.endor-text-stakes-item-2-light {\n color: black;\n}\n.endor-text-stakes-item-2-dark {\n color: white;\n}\n.endor-text-contacts-section {\n padding-left: 1rem;\n padding-right: 0;\n margin-top: 1rem;\n font-size: 0.7rem;\n width: 22rem;\n flex-wrap: wrap;\n text-align: left;\n}\n.endor-text-contacts-section-light {\n color: black;\n}\n.endor-text-contacts-section-dark {\n color: white;\n}\n.endor-text-contacts-body {\n font-size: 0.7rem;\n margin-top: 0.5em;\n}\n.endor-text-truncate {\n display: inline-block;\n max-width: 5rem;\n vertical-align: bottom;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.endor-text-image-item {\n margin-top: 1rem;\n height: 3rem;\n border-radius: 50%;\n}\n.endor-text-image-item-light {\n border: 2px solid rgb(252, 229, 70);\n}\n.endor-text-image-item-dark {\n border: 2px solid rgb(252, 229, 70);\n}\n\n@media only screen and (min-width: 768px) {\n .endor-title {\n display: flex;\n justify-self: center;\n }\n .endor-text {\n padding-left: 0;\n }\n .endor-text-section {\n padding-top: 1rem;\n padding-bottom: 1rem;\n margin-top: 0;\n }\n .endor-text-body {\n padding-left: 0rem;\n padding-right: 0rem;\n }\n .endor-text-contacts-body {\n font-size: 1rem;\n }\n .endor-text-stakes-item {\n font-size: 1.5rem;\n }\n .endor-text-stakes-item-2 {\n font-size: 1rem;\n }\n}\n@media only screen and (min-width: 768px) {\n .endor-section {\n margin-top: 4rem;\n }\n}\n@media only screen and (min-width: 1481px) {\n .endor-text-section {\n align-items: flex-start;\n justify-content: flex-start;\n }\n}";
44967
+ var css_248z$5 = "";
44973
44968
  styleInject(css_248z$5);
44974
44969
 
44975
- var css_248z$4 = "";
44976
- styleInject(css_248z$4);
44977
-
44978
44970
  function FeedbackDetailsStatusView(props) {
44979
44971
  const {
44980
44972
  children,
@@ -45111,7 +45103,7 @@
45111
45103
  });
45112
45104
  };
45113
45105
  return y$1(BaseComponent, {
45114
- style: css_248z$5,
45106
+ style: css_248z$6,
45115
45107
  className: "endor-text-input-section utu-text-section-".concat(envCondition),
45116
45108
  excludeBootstrap: true,
45117
45109
  excludeFonts: true
@@ -45139,14 +45131,24 @@
45139
45131
  className: "endor-text-stakes-item-2"
45140
45132
  }, y$1("b", null, "staked"))));
45141
45133
  }) : y$1("div", {
45142
- className: "endor-text-stakes-no-data"
45134
+ className: "review-card x-utu-section-no-border-mid-".concat(envCondition)
45135
+ }, y$1("div", {
45136
+ className: "review-card-group"
45137
+ }, y$1("div", {
45138
+ className: "ml-5 video-avatar rounded-circle"
45139
+ }, y$1(Stamp, props)), y$1("div", {
45140
+ className: "review-text"
45143
45141
  }, y$1("div", {
45144
- className: "ml-5 no-data-avatar rounded-circle avatar-no-img-".concat(envCondition)
45145
- }, y$1(Avatar, props)), y$1("div", null, "there are no endorsements to show"))))));
45142
+ className: "review-text-sum review-text-".concat(envCondition)
45143
+ }, "No endorsements available"), y$1("div", {
45144
+ className: "review-text-sum review-text-".concat(envCondition)
45145
+ }), y$1("div", {
45146
+ className: "review-text-cont review-text-".concat(envCondition)
45147
+ }, "when you have been reviewed by others, you will see their endorsement reviews"))))))));
45146
45148
  }
45147
45149
 
45148
- var css_248z$3 = ".stars-section {\n display: flex;\n justify-content: center;\n flex-direction: column;\n width: 100%;\n padding-left: 2rem;\n padding-right: 2rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.stars-section-text {\n display: flex;\n align-items: center;\n margin-top: 1rem;\n justify-content: center;\n}\n.stars-section-text-content {\n text-align: justify;\n}\n.stars-section-align {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-right: 1rem;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n .stars-section {\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 1rem;\n justify-content: start;\n }\n .stars-text {\n width: 60%;\n }\n .stars-align {\n width: 40%;\n }\n}\n/* ----------- Larger screens ----------- */\n@media only screen and (min-width: 1481px) {\n .stars-section-text {\n justify-content: start;\n }\n .stars-section-align {\n align-items: start;\n }\n}";
45149
- styleInject(css_248z$3);
45150
+ var css_248z$4 = ".stars-section {\n display: flex;\n justify-content: center;\n flex-direction: column;\n width: 100%;\n padding-left: 2rem;\n padding-right: 2rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.stars-section-text {\n display: flex;\n align-items: center;\n margin-top: 1rem;\n justify-content: center;\n}\n.stars-section-text-content {\n text-align: justify;\n}\n.stars-section-align {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-right: 1rem;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n .stars-section {\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 1rem;\n justify-content: start;\n }\n .stars-text {\n width: 60%;\n }\n .stars-align {\n width: 40%;\n }\n}\n/* ----------- Larger screens ----------- */\n@media only screen and (min-width: 1481px) {\n .stars-section-text {\n justify-content: start;\n }\n .stars-section-align {\n align-items: start;\n }\n}";
45151
+ styleInject(css_248z$4);
45150
45152
 
45151
45153
  function StarRatingShow(props) {
45152
45154
  var _props$feedbackSummar, _props$feedbackSummar2;
@@ -45180,7 +45182,7 @@
45180
45182
  summaryText
45181
45183
  } = props.feedbackSummary.stars;
45182
45184
  return y$1(BaseComponent, {
45183
- style: css_248z$3
45185
+ style: css_248z$4
45184
45186
  }, stars > 0 ? y$1(FeedbackDetailsStatusView, {
45185
45187
  submitStatus: props.submitStatus
45186
45188
  }, y$1("section", {
@@ -45198,24 +45200,21 @@
45198
45200
  className: "stars-section-text"
45199
45201
  }, y$1("p", {
45200
45202
  className: "stars-section-text-content"
45201
- }, summaryText)))) : y$1(FeedbackDetailsStatusView, {
45202
- submitStatus: props.submitStatus
45203
- }, y$1("section", {
45204
- className: "stars-section x-utu-section-".concat(envCondition)
45203
+ }, summaryText)))) : y$1("div", {
45204
+ className: "review-card x-utu-section-no-border-mid-".concat(envCondition)
45205
45205
  }, y$1("div", {
45206
- className: "stars-section-align"
45207
- }, y$1(_default, {
45208
- count: 5,
45209
- value: 0,
45210
- size: 30,
45211
- color2: "#FFDD33",
45212
- edit: false,
45213
- className: "pr-4"
45214
- })), y$1("div", {
45215
- className: "stars-section-text"
45216
- }, y$1("p", {
45217
- className: "stars-section-text-content"
45218
- }, "No star ratting available")))));
45206
+ className: "review-card-group"
45207
+ }, y$1("div", {
45208
+ className: "ml-5 placeholder-avatar rounded-circle"
45209
+ }, y$1(Star, props)), y$1("div", {
45210
+ className: "review-text"
45211
+ }, y$1("div", {
45212
+ className: "review-text-sum review-text-".concat(envCondition)
45213
+ }, "No star ratting available"), y$1("div", {
45214
+ className: "review-text-sum review-text-".concat(envCondition)
45215
+ }), y$1("div", {
45216
+ className: "review-text-cont review-text-".concat(envCondition)
45217
+ }, "when you have been reviewed by others, you will see their star ratings")))));
45219
45218
  }
45220
45219
 
45221
45220
  var lodash = {exports: {}};
@@ -54698,8 +54697,8 @@
54698
54697
 
54699
54698
  var lodashExports = lodash.exports;
54700
54699
 
54701
- var css_248z$2 = ".x-utu-h3 {\n text-transform: capitalize;\n font-weight: 500;\n font-size: 12px;\n}\n\n.error {\n color: #e80054;\n}\n\n:host {\n margin: 0;\n font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 14px;\n font-weight: 300;\n line-height: 1.5;\n color: #000000;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0);\n }\n 50% {\n transform: rotate(180deg);\n border-top-color: rgb(252, 229, 70);\n border-bottom-color: rgb(155, 152, 152);\n border-right-color: transparent;\n border-left-color: transparent;\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.spinner {\n width: 21px;\n height: 21px;\n display: inline-block;\n border: 3px solid rgb(252, 229, 70);\n border-top-color: transparent;\n border-bottom-color: transparent;\n border-radius: 50%;\n animation: spin 1s infinite;\n margin: 12px;\n}\n\n.x-utu-section {\n width: 100%;\n}\n.x-utu-section-light {\n border-bottom: 1px solid rgb(155, 152, 152);\n background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n border-bottom: 1px solid rgb(235, 232, 232);\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n background: #494949;\n}\n\n.x-utu-btn {\n padding: 12px;\n border: none;\n 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 {\n position: absolute;\n top: -1rem;\n right: 20%;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-details {\n position: absolute;\n top: -1.1rem;\n right: 6rem;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-player {\n position: absolute;\n bottom: -0.5rem;\n left: 22rem;\n z-index: 0;\n display: none;\n width: 0.5rem;\n}\n.logo-position-mobile {\n position: absolute;\n top: -1rem;\n right: 4rem;\n z-index: 2;\n width: 0.5rem;\n}\n.logo-position-video {\n position: absolute;\n bottom: 0;\n right: 10%;\n}\n.logo-section {\n position: relative;\n}\n.logo-section-mobile {\n position: relative;\n}\n.logo-size {\n width: 3rem;\n}\n.logo-video-section {\n position: relative;\n}\n.logo-video-position {\n position: absolute;\n z-index: 0;\n display: none;\n width: 5rem;\n left: 21rem;\n top: 35.6rem;\n}\n\n.x-utu-text-area {\n resize: vertical;\n min-height: 8rem;\n border-radius: 10px;\n border: none;\n padding: 16px;\n font-weight: 300;\n font-size: 0.9rem;\n background-color: rgba(255, 221, 51, 0.1);\n}\n\n.video-icon {\n width: 2rem;\n height: 1.4rem;\n}\n.video-icon-dark {\n fill: #000000;\n}\n.video-icon-light {\n fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n .x-utu-section {\n width: 100%;\n }\n .x-utu-section-light {\n border-bottom: 0;\n background-color: #fcf8e5;\n }\n .x-utu-section-dark {\n border-bottom: 0;\n background: rgb(36, 35, 35);\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-dark {\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-mid-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-mid-dark {\n background-color: #3d3d3c;\n }\n .x-utu-text-area {\n background-color: rgba(255, 221, 51, 0.1);\n }\n .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section {\n position: relative;\n }\n .logo-section-mobile .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section-mobile .logo-section {\n position: relative;\n }\n}\n.x-utu-border-radius {\n border-radius: 5px;\n}\n\n/*\nshimmer effect animation\n*/\n.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.description {\n display: flex;\n flex-direction: row;\n}\n\n.details {\n display: flex;\n flex-direction: column;\n margin: 5px 5px;\n}\n\n.icon {\n width: 70px;\n min-height: 70px;\n border-radius: 4px;\n margin: 5px 0;\n}\n\n.title {\n width: 500px;\n min-height: 28px;\n border-radius: 4px;\n margin-bottom: 5px;\n line-height: 28px;\n}\n\n.information {\n min-height: 42px;\n border-radius: 4px;\n width: 500px;\n}\n\n.badge-spacing {\n display: flex;\n flex-direction: column;\n padding-top: 1rem;\n}\n.badge-spacing-no-data {\n display: flex;\n flex-direction: row;\n}\n.badge-section {\n display: flex;\n justify-content: start;\n padding-top: 1rem;\n padding-bottom: 1rem;\n width: 100%;\n flex-direction: column;\n}\n.badge-section-title {\n text-transform: none;\n}\n.badge-section-content {\n display: flex;\n flex-direction: column;\n justify-content: start;\n padding-left: 1rem;\n padding-right: 2rem;\n padding-top: 1rem;\n}\n.badge-section-badges {\n display: flex;\n justify-content: center;\n white-space: nowrap;\n overflow-x: scroll;\n /* width */\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.badge-section-badges-no-data {\n margin-top: 2rem;\n}\n.badge-section-badges::-webkit-scrollbar {\n width: 10px;\n height: 8px;\n}\n.badge-section-badges::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n.badge-section-badges::-webkit-scrollbar-thumb {\n background: rgb(252, 229, 70);\n border-radius: 10px;\n}\n.badge-section-badges::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n.badge-section-text {\n display: flex;\n justify-content: center;\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.badge-section-text-content {\n text-align: justify;\n max-width: 25rem;\n}\n.badge-container {\n position: relative;\n margin-right: 1rem;\n margin-left: 1rem;\n box-sizing: border-box;\n display: flex;\n}\n.badge-container-no-data {\n position: relative;\n width: 5rem;\n box-sizing: border-box;\n}\n.badge-container-no-data-container {\n position: relative;\n box-sizing: border-box;\n display: flex;\n margin-right: 0;\n margin-left: 0;\n padding-bottom: 2rem;\n justify-content: start;\n flex-wrap: wrap;\n}\n.badge-container-thumb {\n border-radius: 50%;\n border: 1px rgb(235, 232, 232) solid;\n height: 1.5rem;\n width: 1.5rem;\n font-size: 0.6rem;\n justify-self: center;\n}\n.badge-container-thumb-light {\n background-color: rgb(253, 253, 253);\n color: #000000;\n}\n.badge-container-thumb-dark {\n background-color: rgb(36, 35, 35);\n color: #ffffff;\n}\n.badge-container-img {\n height: 4rem;\n width: 4rem;\n margin-bottom: 4rem;\n}\n.badge-container-img-no-data {\n opacity: 0.5;\n}\n.badge-container-profile {\n border-radius: 50%;\n border: 1px rgb(235, 232, 232) solid;\n height: 1.5rem;\n width: 1.5rem;\n font-size: 0.6rem;\n justify-self: center;\n margin-left: -0.5rem;\n}\n.badge-container-profile-light {\n background-color: rgb(253, 253, 253);\n color: #000000;\n}\n.badge-container-profile-dark {\n background-color: rgb(36, 35, 35);\n color: #ffffff;\n}\n.badge-container-profile-container {\n display: flex;\n justify-content: center;\n position: absolute;\n bottom: 5.5rem;\n right: 3.5rem;\n}\n.badge-container-title {\n padding-bottom: 0.5rem;\n font-size: 0.7rem;\n position: absolute;\n top: 5.5rem;\n left: 0.5rem;\n}\n.badge-container-title-dark {\n color: #ffffff;\n}\n.badge-container-title-light {\n color: #000000;\n}\n.badge-container-position-child-thumb {\n position: absolute;\n top: 1.3rem;\n right: -1rem;\n}\n.badge-container-position-child-profile {\n position: relative;\n top: 2.5rem;\n right: -3.3rem;\n}\n\n/* ----------- Transition screens ----------- */\n@media only screen and (min-width: 768px) {\n .badge-section {\n width: 100%;\n }\n .badge-section-badges {\n justify-content: space-evenly;\n }\n}\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 1481px) {\n .badge-container-no-data-container {\n flex-wrap: unset;\n }\n .badge-section {\n width: 40%;\n }\n .badge-section-content {\n padding-top: 0;\n }\n .badge-section-badges {\n justify-content: start;\n }\n .badge-section-text {\n justify-content: start;\n }\n .badge-badges {\n justify-content: start;\n }\n .badge-spacing {\n margin-right: 1rem;\n padding-top: 2rem;\n }\n}";
54702
- styleInject(css_248z$2);
54700
+ var css_248z$3 = ".x-utu-h3 {\n text-transform: capitalize;\n font-weight: 500;\n font-size: 12px;\n}\n\n.error {\n color: #e80054;\n}\n\n:host {\n margin: 0;\n font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 14px;\n font-weight: 300;\n line-height: 1.5;\n color: #000000;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0);\n }\n 50% {\n transform: rotate(180deg);\n border-top-color: rgb(252, 229, 70);\n border-bottom-color: rgb(155, 152, 152);\n border-right-color: transparent;\n border-left-color: transparent;\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.spinner {\n width: 21px;\n height: 21px;\n display: inline-block;\n border: 3px solid rgb(252, 229, 70);\n border-top-color: transparent;\n border-bottom-color: transparent;\n border-radius: 50%;\n animation: spin 1s infinite;\n margin: 12px;\n}\n\n.x-utu-section {\n width: 100%;\n}\n.x-utu-section-light {\n border-bottom: 1px solid rgb(155, 152, 152);\n background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n border-bottom: 1px solid rgb(235, 232, 232);\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n background: #494949;\n}\n\n.x-utu-btn {\n padding: 12px;\n border: none;\n 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 {\n position: absolute;\n top: -1rem;\n right: 20%;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-details {\n position: absolute;\n top: -1.1rem;\n right: 6rem;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-player {\n position: absolute;\n bottom: -0.5rem;\n left: 22rem;\n z-index: 0;\n display: none;\n width: 0.5rem;\n}\n.logo-position-mobile {\n position: absolute;\n top: -1rem;\n right: 4rem;\n z-index: 2;\n width: 0.5rem;\n}\n.logo-position-video {\n position: absolute;\n bottom: 0;\n right: 10%;\n}\n.logo-section {\n position: relative;\n}\n.logo-section-mobile {\n position: relative;\n}\n.logo-size {\n width: 3rem;\n}\n.logo-video-section {\n position: relative;\n}\n.logo-video-position {\n position: absolute;\n z-index: 0;\n display: none;\n width: 5rem;\n left: 21rem;\n top: 35.6rem;\n}\n\n.x-utu-text-area {\n resize: vertical;\n min-height: 8rem;\n border-radius: 10px;\n border: none;\n padding: 16px;\n font-weight: 300;\n font-size: 0.9rem;\n background-color: rgba(255, 221, 51, 0.1);\n}\n\n.video-icon {\n width: 2rem;\n height: 1.4rem;\n}\n.video-icon-dark {\n fill: #000000;\n}\n.video-icon-light {\n fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n .x-utu-section {\n width: 100%;\n }\n .x-utu-section-light {\n border-bottom: 0;\n background-color: #fcf8e5;\n }\n .x-utu-section-dark {\n border-bottom: 0;\n background: rgb(36, 35, 35);\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-dark {\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-mid-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-mid-dark {\n background-color: #3d3d3c;\n }\n .x-utu-text-area {\n background-color: rgba(255, 221, 51, 0.1);\n }\n .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section {\n position: relative;\n }\n .logo-section-mobile .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section-mobile .logo-section {\n position: relative;\n }\n}\n.x-utu-border-radius {\n border-radius: 5px;\n}\n\n/*\nshimmer effect animation\n*/\n.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.description {\n display: flex;\n flex-direction: row;\n}\n\n.details {\n display: flex;\n flex-direction: column;\n margin: 5px 5px;\n}\n\n.icon {\n width: 70px;\n min-height: 70px;\n border-radius: 4px;\n margin: 5px 0;\n}\n\n.title {\n width: 500px;\n min-height: 28px;\n border-radius: 4px;\n margin-bottom: 5px;\n line-height: 28px;\n}\n\n.information {\n min-height: 42px;\n border-radius: 4px;\n width: 500px;\n}\n\n.placeholder-avatar {\n width: 5rem;\n}\n\n.badge-spacing {\n display: flex;\n flex-direction: column;\n padding-top: 1rem;\n}\n.badge-spacing-no-data {\n display: flex;\n flex-direction: row;\n}\n.badge-section {\n display: flex;\n justify-content: start;\n padding-top: 1rem;\n padding-bottom: 1rem;\n width: 100%;\n flex-direction: column;\n}\n.badge-section-title {\n text-transform: none;\n}\n.badge-section-content {\n display: flex;\n flex-direction: column;\n justify-content: start;\n padding-left: 1rem;\n padding-right: 2rem;\n padding-top: 1rem;\n}\n.badge-section-badges {\n display: flex;\n justify-content: center;\n white-space: nowrap;\n overflow-x: scroll;\n /* width */\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.badge-section-badges-no-data {\n margin-top: 2rem;\n}\n.badge-section-badges::-webkit-scrollbar {\n width: 10px;\n height: 8px;\n}\n.badge-section-badges::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n.badge-section-badges::-webkit-scrollbar-thumb {\n background: rgb(252, 229, 70);\n border-radius: 10px;\n}\n.badge-section-badges::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n.badge-section-text {\n display: flex;\n justify-content: center;\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.badge-section-text-content {\n text-align: justify;\n max-width: 25rem;\n}\n.badge-container {\n position: relative;\n margin-right: 1rem;\n margin-left: 1rem;\n box-sizing: border-box;\n display: flex;\n}\n.badge-container-no-data {\n position: relative;\n width: 5rem;\n box-sizing: border-box;\n}\n.badge-container-no-data-container {\n position: relative;\n box-sizing: border-box;\n display: flex;\n margin-right: 0;\n margin-left: 0;\n padding-bottom: 2rem;\n justify-content: start;\n flex-wrap: wrap;\n}\n.badge-container-thumb {\n border-radius: 50%;\n border: 1px rgb(235, 232, 232) solid;\n height: 1.5rem;\n width: 1.5rem;\n font-size: 0.6rem;\n justify-self: center;\n}\n.badge-container-thumb-light {\n background-color: rgb(253, 253, 253);\n color: #000000;\n}\n.badge-container-thumb-dark {\n background-color: rgb(36, 35, 35);\n color: #ffffff;\n}\n.badge-container-img {\n height: 4rem;\n width: 4rem;\n margin-bottom: 4rem;\n}\n.badge-container-img-no-data {\n opacity: 0.5;\n}\n.badge-container-profile {\n border-radius: 50%;\n border: 1px rgb(235, 232, 232) solid;\n height: 1.5rem;\n width: 1.5rem;\n font-size: 0.6rem;\n justify-self: center;\n margin-left: -0.5rem;\n}\n.badge-container-profile-light {\n background-color: rgb(253, 253, 253);\n color: #000000;\n}\n.badge-container-profile-dark {\n background-color: rgb(36, 35, 35);\n color: #ffffff;\n}\n.badge-container-profile-container {\n display: flex;\n justify-content: center;\n position: absolute;\n bottom: 5.5rem;\n right: 3.5rem;\n}\n.badge-container-title {\n padding-bottom: 0.5rem;\n font-size: 0.7rem;\n position: absolute;\n top: 5.5rem;\n left: 0.5rem;\n}\n.badge-container-title-dark {\n color: #ffffff;\n}\n.badge-container-title-light {\n color: #000000;\n}\n.badge-container-position-child-thumb {\n position: absolute;\n top: 1.3rem;\n right: -1rem;\n}\n.badge-container-position-child-profile {\n position: relative;\n top: 2.5rem;\n right: -3.3rem;\n}\n\n/* ----------- Transition screens ----------- */\n@media only screen and (min-width: 768px) {\n .badge-section {\n width: 100%;\n }\n .badge-section-badges {\n justify-content: space-evenly;\n }\n}\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 1481px) {\n .badge-container-no-data-container {\n flex-wrap: unset;\n }\n .badge-section {\n width: 47%;\n }\n .badge-section-content {\n padding-top: 0;\n }\n .badge-section-badges {\n justify-content: start;\n }\n .badge-section-text {\n justify-content: start;\n }\n .badge-badges {\n justify-content: start;\n }\n .badge-spacing {\n margin-right: 1rem;\n padding-top: 2rem;\n }\n}";
54701
+ styleInject(css_248z$3);
54703
54702
 
54704
54703
  function BadgesShow$1(props) {
54705
54704
  var _props$feedbackSummar, _props$feedbackSummar2, _props$feedbackSummar3;
@@ -54762,12 +54761,22 @@
54762
54761
  });
54763
54762
  });
54764
54763
  const badgeGroupNoData = y$1("div", {
54765
- className: "badge-container-no-data-container"
54764
+ className: "review-card x-utu-section-no-border-mid-".concat(envCondition)
54765
+ }, y$1("div", {
54766
+ className: "review-card-group"
54766
54767
  }, y$1("div", {
54767
- className: "badge-container-no-data"
54768
- }, y$1(NoBadgeLogo, null)));
54768
+ className: "ml-5 placeholder-avatar rounded-circle"
54769
+ }, y$1(NoBadgeLogo, props)), y$1("div", {
54770
+ className: "review-text"
54771
+ }, y$1("div", {
54772
+ className: "review-text-sum review-text-".concat(envCondition)
54773
+ }, "No badges available"), y$1("div", {
54774
+ className: "review-text-sum review-text-".concat(envCondition)
54775
+ }), y$1("div", {
54776
+ className: "review-text-cont review-text-".concat(envCondition)
54777
+ }, "when you have been reviewed by others, you will see their badge reviews"))));
54769
54778
  return y$1(BaseComponent, {
54770
- style: css_248z$2,
54779
+ style: css_248z$3,
54771
54780
  className: "badge-section x-utu-section-no-border-".concat(isDark ? "dark" : "light"),
54772
54781
  excludeBootstrap: true,
54773
54782
  excludeFonts: true
@@ -54777,9 +54786,7 @@
54777
54786
  className: "badge-section-content x-utu-section x-utu-section-".concat(envCondition)
54778
54787
  }, y$1("div", {
54779
54788
  className: "badge-section-badges-no-data"
54780
- }, badgeGroupNoData), y$1("p", {
54781
- className: "badge-section-title"
54782
- }, (fbBadges === null || fbBadges === void 0 ? void 0 : fbBadges.summaryText) || "no badges to show")) : y$1("section", {
54789
+ }, badgeGroupNoData)) : y$1("section", {
54783
54790
  className: "badge-section-content x-utu-section x-utu-section-".concat(envCondition)
54784
54791
  }, y$1("div", {
54785
54792
  className: "badge-section-badges"
@@ -54790,9 +54797,37 @@
54790
54797
  }, summaryText)))));
54791
54798
  }
54792
54799
 
54793
- var css_248z$1 = ".x-utu-h3 {\n text-transform: capitalize;\n font-weight: 500;\n font-size: 12px;\n}\n\n.error {\n color: #e80054;\n}\n\n:host {\n margin: 0;\n font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 14px;\n font-weight: 300;\n line-height: 1.5;\n color: #000000;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0);\n }\n 50% {\n transform: rotate(180deg);\n border-top-color: rgb(252, 229, 70);\n border-bottom-color: rgb(155, 152, 152);\n border-right-color: transparent;\n border-left-color: transparent;\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.spinner {\n width: 21px;\n height: 21px;\n display: inline-block;\n border: 3px solid rgb(252, 229, 70);\n border-top-color: transparent;\n border-bottom-color: transparent;\n border-radius: 50%;\n animation: spin 1s infinite;\n margin: 12px;\n}\n\n.x-utu-section {\n width: 100%;\n}\n.x-utu-section-light {\n border-bottom: 1px solid rgb(155, 152, 152);\n background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n border-bottom: 1px solid rgb(235, 232, 232);\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n background: #494949;\n}\n\n.x-utu-btn {\n padding: 12px;\n border: none;\n 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 {\n position: absolute;\n top: -1rem;\n right: 20%;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-details {\n position: absolute;\n top: -1.1rem;\n right: 6rem;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-player {\n position: absolute;\n bottom: -0.5rem;\n left: 22rem;\n z-index: 0;\n display: none;\n width: 0.5rem;\n}\n.logo-position-mobile {\n position: absolute;\n top: -1rem;\n right: 4rem;\n z-index: 2;\n width: 0.5rem;\n}\n.logo-position-video {\n position: absolute;\n bottom: 0;\n right: 10%;\n}\n.logo-section {\n position: relative;\n}\n.logo-section-mobile {\n position: relative;\n}\n.logo-size {\n width: 3rem;\n}\n.logo-video-section {\n position: relative;\n}\n.logo-video-position {\n position: absolute;\n z-index: 0;\n display: none;\n width: 5rem;\n left: 21rem;\n top: 35.6rem;\n}\n\n.x-utu-text-area {\n resize: vertical;\n min-height: 8rem;\n border-radius: 10px;\n border: none;\n padding: 16px;\n font-weight: 300;\n font-size: 0.9rem;\n background-color: rgba(255, 221, 51, 0.1);\n}\n\n.video-icon {\n width: 2rem;\n height: 1.4rem;\n}\n.video-icon-dark {\n fill: #000000;\n}\n.video-icon-light {\n fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n .x-utu-section {\n width: 100%;\n }\n .x-utu-section-light {\n border-bottom: 0;\n background-color: #fcf8e5;\n }\n .x-utu-section-dark {\n border-bottom: 0;\n background: rgb(36, 35, 35);\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-dark {\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-mid-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-mid-dark {\n background-color: #3d3d3c;\n }\n .x-utu-text-area {\n background-color: rgba(255, 221, 51, 0.1);\n }\n .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section {\n position: relative;\n }\n .logo-section-mobile .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section-mobile .logo-section {\n position: relative;\n }\n}\n.x-utu-border-radius {\n border-radius: 5px;\n}\n\n/*\nshimmer effect animation\n*/\n.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.description {\n display: flex;\n flex-direction: row;\n}\n\n.details {\n display: flex;\n flex-direction: column;\n margin: 5px 5px;\n}\n\n.icon {\n width: 70px;\n min-height: 70px;\n border-radius: 4px;\n margin: 5px 0;\n}\n\n.title {\n width: 500px;\n min-height: 28px;\n border-radius: 4px;\n margin-bottom: 5px;\n line-height: 28px;\n}\n\n.information {\n min-height: 42px;\n border-radius: 4px;\n width: 500px;\n}\n\n.video-avatar {\n width: 2rem;\n}\n\n.video-placeholder {\n height: 2rem;\n}\n\n.review-section {\n width: 100%;\n display: flex;\n justify-content: center;\n white-space: nowrap;\n overflow-x: scroll;\n /* width */\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.review-section-no-data {\n justify-content: center;\n}\n.review-section::-webkit-scrollbar {\n width: 10px;\n height: 8px;\n}\n.review-section::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n.review-section::-webkit-scrollbar-thumb {\n background: rgb(252, 229, 70);\n border-radius: 10px;\n}\n.review-section::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n.review-text {\n display: flex;\n flex-direction: column;\n}\n.review-text-sum {\n display: flex;\n text-align: left;\n padding-left: 1rem;\n font-size: 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.review-text-cont {\n display: flex;\n text-align: left;\n padding-left: 1rem;\n font-size: 1rem;\n align-items: center;\n margin: 0.5rem 8px;\n white-space: pre-line;\n width: 50px;\n inline-size: 100%;\n}\n.review-text-dark {\n color: #ffffff;\n}\n.review-text-light {\n color: #000000;\n}\n.review-card {\n font-size: 0.7rem;\n display: flex;\n padding: 2rem 1.5rem;\n justify-content: space-around;\n}\n.review-card-group {\n width: 30rem;\n display: flex;\n padding: 2rem 2.5rem 2rem 1.5rem;\n background-color: rgba(255, 221, 51, 0.15);\n align-items: center;\n min-height: 10rem;\n}\n.review-card-section {\n display: flex;\n}\n.review-img {\n border-radius: 50%;\n height: 3rem;\n border: 1px rgb(155, 152, 152) solid;\n}\n\n.onerror-review-img {\n border-radius: 50%;\n height: 3rem;\n border: 1px rgb(155, 152, 152) solid;\n}\n\n/* ----------- Transition screen ----------- */\n@media only screen and (min-width: 768px) {\n .review-section {\n width: 100%;\n display: flex;\n justify-content: start;\n }\n}\n@media only screen and (min-width: 1481px) {\n .review-section {\n width: 45%;\n display: flex;\n white-space: nowrap;\n overflow-x: scroll;\n }\n .review-text-cont {\n inline-size: 100%;\n }\n .review-text-dark {\n color: rgb(36, 35, 35);\n }\n .review-text-light {\n color: #000000;\n }\n .review-card {\n padding-top: 2rem;\n padding-bottom: 2rem;\n display: flex;\n justify-content: center;\n max-width: 100%;\n overflow: hidden;\n word-wrap: break-word !important;\n }\n}";
54800
+ var css_248z$2 = ".x-utu-h3 {\n text-transform: capitalize;\n font-weight: 500;\n font-size: 12px;\n}\n\n.error {\n color: #e80054;\n}\n\n:host {\n margin: 0;\n font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 14px;\n font-weight: 300;\n line-height: 1.5;\n color: #000000;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: #000000;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0);\n }\n 50% {\n transform: rotate(180deg);\n border-top-color: rgb(252, 229, 70);\n border-bottom-color: rgb(155, 152, 152);\n border-right-color: transparent;\n border-left-color: transparent;\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.spinner {\n width: 21px;\n height: 21px;\n display: inline-block;\n border: 3px solid rgb(252, 229, 70);\n border-top-color: transparent;\n border-bottom-color: transparent;\n border-radius: 50%;\n animation: spin 1s infinite;\n margin: 12px;\n}\n\n.x-utu-section {\n width: 100%;\n}\n.x-utu-section-light {\n border-bottom: 1px solid rgb(155, 152, 152);\n background: rgb(253, 253, 253);\n}\n.x-utu-section-dark {\n border-bottom: 1px solid rgb(235, 232, 232);\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-dark {\n background: rgb(36, 35, 35);\n}\n.x-utu-section-no-border-mid-light {\n background: rgb(253, 253, 253);\n}\n.x-utu-section-no-border-mid-dark {\n background: #494949;\n}\n\n.x-utu-btn {\n padding: 12px;\n border: none;\n 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 {\n position: absolute;\n top: -1rem;\n right: 20%;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-details {\n position: absolute;\n top: -1.1rem;\n right: 6rem;\n z-index: 0;\n width: 0.5rem;\n}\n.logo-position-player {\n position: absolute;\n bottom: -0.5rem;\n left: 22rem;\n z-index: 0;\n display: none;\n width: 0.5rem;\n}\n.logo-position-mobile {\n position: absolute;\n top: -1rem;\n right: 4rem;\n z-index: 2;\n width: 0.5rem;\n}\n.logo-position-video {\n position: absolute;\n bottom: 0;\n right: 10%;\n}\n.logo-section {\n position: relative;\n}\n.logo-section-mobile {\n position: relative;\n}\n.logo-size {\n width: 3rem;\n}\n.logo-video-section {\n position: relative;\n}\n.logo-video-position {\n position: absolute;\n z-index: 0;\n display: none;\n width: 5rem;\n left: 21rem;\n top: 35.6rem;\n}\n\n.x-utu-text-area {\n resize: vertical;\n min-height: 8rem;\n border-radius: 10px;\n border: none;\n padding: 16px;\n font-weight: 300;\n font-size: 0.9rem;\n background-color: rgba(255, 221, 51, 0.1);\n}\n\n.video-icon {\n width: 2rem;\n height: 1.4rem;\n}\n.video-icon-dark {\n fill: #000000;\n}\n.video-icon-light {\n fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n .x-utu-section {\n width: 100%;\n }\n .x-utu-section-light {\n border-bottom: 0;\n background-color: #fcf8e5;\n }\n .x-utu-section-dark {\n border-bottom: 0;\n background: rgb(36, 35, 35);\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-dark {\n background-color: #3d3d3c;\n }\n .x-utu-section-no-border-mid-light {\n background-color: #fcf8e5;\n }\n .x-utu-section-no-border-mid-dark {\n background-color: #3d3d3c;\n }\n .x-utu-text-area {\n background-color: rgba(255, 221, 51, 0.1);\n }\n .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section {\n position: relative;\n }\n .logo-section-mobile .logo-position-video {\n top: 41.2rem;\n position: absolute;\n left: 21rem;\n }\n .logo-section-mobile .logo-section {\n position: relative;\n }\n}\n.x-utu-border-radius {\n border-radius: 5px;\n}\n\n/*\nshimmer effect animation\n*/\n.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.description {\n display: flex;\n flex-direction: row;\n}\n\n.details {\n display: flex;\n flex-direction: column;\n margin: 5px 5px;\n}\n\n.icon {\n width: 70px;\n min-height: 70px;\n border-radius: 4px;\n margin: 5px 0;\n}\n\n.title {\n width: 500px;\n min-height: 28px;\n border-radius: 4px;\n margin-bottom: 5px;\n line-height: 28px;\n}\n\n.information {\n min-height: 42px;\n border-radius: 4px;\n width: 500px;\n}\n\n.video-avatar {\n width: 3rem;\n}\n\n.video-placeholder {\n height: 2rem;\n}\n\n.review-section {\n width: 100%;\n display: flex;\n justify-content: center;\n white-space: nowrap;\n overflow-x: scroll;\n /* width */\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.review-section-no-data {\n justify-content: center;\n}\n.review-section::-webkit-scrollbar {\n width: 10px;\n height: 8px;\n}\n.review-section::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n.review-section::-webkit-scrollbar-thumb {\n background: rgb(252, 229, 70);\n border-radius: 10px;\n}\n.review-section::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n.review-text {\n display: flex;\n flex-direction: column;\n}\n.review-text-sum {\n display: flex;\n text-align: left;\n padding-left: 1rem;\n font-size: 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.review-text-cont {\n display: flex;\n text-align: left;\n padding-left: 1rem;\n font-size: 1rem;\n align-items: center;\n margin: 0.5rem 8px;\n white-space: pre-line;\n width: 50px;\n inline-size: 100%;\n}\n.review-text-dark {\n color: #ffffff;\n}\n.review-text-light {\n color: #000000;\n}\n.review-card {\n font-size: 0.7rem;\n display: flex;\n padding: 2rem 1.5rem;\n justify-content: space-around;\n}\n.review-card-group {\n width: 30rem;\n display: flex;\n padding: 2rem 2.5rem 2rem 1.5rem;\n background-color: rgba(255, 221, 51, 0.15);\n align-items: center;\n min-height: 10rem;\n border-radius: 10px;\n}\n.review-card-section {\n display: flex;\n}\n.review-img {\n border-radius: 50%;\n height: 3rem;\n border: 1px rgb(155, 152, 152) solid;\n}\n\n.onerror-review-img {\n border-radius: 50%;\n height: 3rem;\n border: 1px rgb(155, 152, 152) solid;\n}\n\n/* ----------- Transition screen ----------- */\n@media only screen and (min-width: 768px) {\n .review-section {\n width: 100%;\n display: flex;\n justify-content: start;\n }\n}\n@media only screen and (min-width: 1481px) {\n .review-section {\n width: 45%;\n display: flex;\n white-space: nowrap;\n overflow-x: scroll;\n }\n .review-text-cont {\n inline-size: 100%;\n }\n .review-text-dark {\n color: rgb(36, 35, 35);\n }\n .review-text-light {\n color: #000000;\n }\n .review-card {\n padding-top: 2rem;\n padding-bottom: 2rem;\n display: flex;\n justify-content: center;\n max-width: 100%;\n overflow: hidden;\n word-wrap: break-word !important;\n }\n}";
54801
+ styleInject(css_248z$2);
54802
+
54803
+ var css_248z$1 = ".avatar-no-data {\n padding: 0.35rem;\n width: 2.5rem;\n height: 2.5rem;\n}";
54794
54804
  styleInject(css_248z$1);
54795
54805
 
54806
+ function Avatar(_ref) {
54807
+ let props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
54808
+ // environments
54809
+ const [isDark, setIsDark] = h(false);
54810
+ if (props[ATTR_THEME_COLOR] === "dark") {
54811
+ setIsDark(true);
54812
+ }
54813
+ return y$1("svg", {
54814
+ style: css_248z$1,
54815
+ version: "1.1",
54816
+ id: "Capa_1",
54817
+ xmlns: "http://www.w3.org/2000/svg",
54818
+ xmlnsXlink: "http://www.w3.org/1999/xlink",
54819
+ x: "4.5rem",
54820
+ y: "4.5rem",
54821
+ className: "avatar-no-data avatar-no-video-".concat(isDark ? "dark" : "light"),
54822
+ viewBox: "0 0 490.1 490.1",
54823
+ xmlSpace: "preserve"
54824
+ }, y$1("g", null, y$1("g", null, y$1("path", {
54825
+ d: "M245,261.75c71.9,0,131.4-57.3,131.4-130.3S316.9,0.05,245,0.05s-131.4,57.3-131.4,130.3S173.1,261.75,245,261.75z M245,40.75c50,0,90.7,40.7,90.7,89.7s-40.7,89.6-90.7,89.6s-90.7-40.7-90.7-89.7S195,40.75,245,40.75z"
54826
+ }), y$1("path", {
54827
+ d: "M333.6,274.25c-8.3-2.1-16.7,0-21.9,6.3l-66.7,76.1l-66.7-76.1c-5.2-6.3-14.6-8.3-21.9-6.3C61.5,305.55,0,382.65,0,469.15 c0,11.5,9.4,20.9,20.9,20.9h448.3c11.5,0,20.9-9.4,20.9-20.9C490,382.65,428.5,305.55,333.6,274.25z M42.7,449.35 c8.4-57.3,50.1-106.3,114.7-131.3l73,83.4c7.3,9.4,22.9,9.4,30.2,0l73-83.4c63.6,25,106.4,75,114.7,131.3H42.7z"
54828
+ }))));
54829
+ }
54830
+
54796
54831
  function BadgesShow(props) {
54797
54832
  // environments
54798
54833
  const [isDark, setIsDark] = h(false);
@@ -54817,7 +54852,7 @@
54817
54852
  // review
54818
54853
  const fbReview = props.feedbackSummary.reviews;
54819
54854
  return y$1(BaseComponent, {
54820
- style: css_248z$1,
54855
+ style: css_248z$2,
54821
54856
  className: "review-section x-utu-section-no-border-".concat(isDark ? "dark" : "light"),
54822
54857
  excludeBootstrap: true,
54823
54858
  excludeFonts: true