npm - pds-dev-kit-web-test - Versions diffs - 0.2.53 → 0.2.55 - Mend

pds-dev-kit-web-test 0.2.53 → 0.2.55

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.

Files changed (113) hide show

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js CHANGED Viewed

@@ -106,6 +106,21 @@ function CustomSection(props) {
                 }
             });
     };
+    var onContextMenuCB = function (id, e) {
+        if (!isEditMode) {
+            return;
+        }
+        setSelectedCB(id);
+        if (sectionActionHandler) {
+            sectionActionHandler({
+                type: '@CUSTOMSECTION/CB_RIGHT_CLICKED',
+                payload: {
+                    id: id,
+                    e: e
+                }
+            });
+        }
+    };
     var onLayoutChange = function (props) {
         if (!isEditMode) {
             return;
@@ -197,6 +212,9 @@ function CustomSection(props) {
                                 }, onClick: function (e) {
                                     e.stopPropagation();
                                     onClickCB(each.id);
+                                }, onContextMenu: function (e) {
+                                    e.stopPropagation();
+                                    onContextMenuCB(each.id, e);
                                 } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: each, device: device }) }) })) }), each.id)); })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) })) })) })) }) }));
 }
 var S_gleStyles = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  * {\n    box-sizing: border-box;\n  }\n\n  .react-grid-layout {\n    position: relative;\n    z-index: 1;\n  }\n\n  .react-grid-layout .grid-placeholder {\n    box-sizing: border-box;\n  }\n\n  .react-grid-item {\n    left: 0;\n    position: absolute;\n    top: 0;\n    z-index: 1;\n  }\n\n  .react-grid-item.react-draggable.react-resizable:hover,\n  .react-grid-item-selected {\n    box-shadow: 0 0 0 3px #027aff;\n  }\n\n  .react-grid-item img {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .react-grid-item.isResizing,\n  .react-grid-item.isResizing .cb-layout-box,\n  .react-grid-item.isResizing .cb-layout-box .cb-divider {\n    visibility: hidden;\n  }\n\n  .react-grid-item.react-draggable.isDragging,\n  .react-grid-item.react-draggable.isDragging .cb-layout-box,\n  .react-grid-item.react-draggable.isDragging .cb-layout-box .cb-divider {\n    visibility: hidden;\n  }\n\n  /* .react-grid-item.react-draggable.isDragging .cb-layout-box .twitter-embed-container {\n    visibility: hidden;\n  } */\n\n  .react-grid-item.isResizing > .react-resizable-handle,\n  .react-grid-item.react-draggable.isDragging > .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .react-grid-item.dropping {\n    visibility: hidden;\n  }\n\n  .react-grid-item.static::after {\n    color: red;\n    content: \"this is static, can't drag\";\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-grid-item.placeholder {\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    -webkit-user-select: none;\n    user-select: none;\n    z-index: 9999;\n  }\n\n  .react-grid-item > .react-resizable-handle::after {\n    background: rgb(255, 255, 255);\n    border: 3px solid rgb(2, 122, 255);\n    content: '';\n    height: 5px;\n    position: absolute;\n    width: 5px;\n  }\n\n  .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .react-grid-item-selected > .react-resizable-handle {\n    visibility: visible;\n  }\n\n  /* NOTE: Resizable related */\n  .react-resizable {\n    position: relative;\n  }\n\n  .react-resizable-handle {\n    align-items: center;\n    background-origin: content-box;\n    background-repeat: no-repeat;\n    box-sizing: border-box;\n    display: flex;\n    height: 20px;\n    justify-content: center;\n    position: absolute;\n    width: 20px;\n  }\n\n  .react-resizable-handle-sw {\n    bottom: 0;\n    cursor: sw-resize;\n    left: 0;\n    transform: translate(-50%, 50%);\n  }\n\n  .react-resizable-handle-se {\n    bottom: 0;\n    cursor: se-resize;\n    right: 0;\n    transform: translate(50%, 50%);\n  }\n\n  .react-resizable-handle-nw {\n    cursor: nw-resize;\n    left: 0;\n    top: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-ne {\n    cursor: ne-resize;\n    right: 0;\n    top: 0;\n    transform: translate(50%, -50%);\n  }\n\n  .react-resizable-handle-w,\n  .react-resizable-handle-e {\n    cursor: ew-resize;\n    top: 50%;\n  }\n\n  .react-resizable-handle-w {\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-e {\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n\n  .react-resizable-handle-n,\n  .react-resizable-handle-s {\n    cursor: ns-resize;\n    left: 50%;\n  }\n\n  .react-resizable-handle-n {\n    top: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-s {\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n\n  .grid-placeholder {\n    position: absolute;\n    z-index: 0;\n  }\n\n  .grid-pattern-rect {\n    fill: #0000001a;\n    stroke: #ffffff33;\n  }\n\n  .react-grid-item.placeholder .cb-layout-box,\n  .react-grid-item.placeholder .cb-layout-box .cb-divider {\n    animation: none;\n  }\n\n  .react-grid-item.placeholder {\n    box-shadow: 0 0 0 3px #027aff;\n  }\n\n  .react-grid-item.placeholder > .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .grid-guide-line-center {\n    border-color: #ff463aff;\n    border-style: dashed;\n    border-width: 1px;\n    height: 100%;\n    left: 50%;\n    position: absolute;\n    transform: translateX(-50%);\n    z-index: 99999;\n  }\n\n  /* NOTE: Effects */\n\n  @-webkit-keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-fwd {\n    0% {\n      -webkit-transform: translateZ(-80px);\n      transform: translateZ(-80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes fade-in-fwd {\n    0% {\n      -webkit-transform: translateZ(-80px);\n      transform: translateZ(-80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-bck {\n    0% {\n      -webkit-transform: translateZ(80px);\n      transform: translateZ(80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-bck {\n    0% {\n      -webkit-transform: translateZ(80px);\n      transform: translateZ(80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-top {\n    0% {\n      -webkit-transform: translateY(-50px);\n      transform: translateY(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-top {\n    0% {\n      -webkit-transform: translateY(-50px);\n      transform: translateY(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-right {\n    0% {\n      -webkit-transform: translateX(50px);\n      transform: translateX(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-right {\n    0% {\n      -webkit-transform: translateX(50px);\n      transform: translateX(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:29:36\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation fade-in-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes fade-in-bottom {\n    0% {\n      -webkit-transform: translateY(50px);\n      transform: translateY(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-bottom {\n    0% {\n      -webkit-transform: translateY(50px);\n      transform: translateY(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:29:52\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation fade-in-left\n * ----------------------------------------\n */\n  @-webkit-keyframes fade-in-left {\n    0% {\n      -webkit-transform: translateX(-50px);\n      transform: translateX(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-left {\n    0% {\n      -webkit-transform: translateX(-50px);\n      transform: translateX(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:53:50\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-top\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-top {\n    0% {\n      -webkit-transform: translateY(-1000px);\n      transform: translateY(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-top {\n    0% {\n      -webkit-transform: translateY(-1000px);\n      transform: translateY(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:47\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-right\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-right {\n    0% {\n      -webkit-transform: translateX(1000px);\n      transform: translateX(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-right {\n    0% {\n      -webkit-transform: translateX(1000px);\n      transform: translateX(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:1\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-bottom {\n    0% {\n      -webkit-transform: translateY(1000px);\n      transform: translateY(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-bottom {\n    0% {\n      -webkit-transform: translateY(1000px);\n      transform: translateY(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:28\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-left\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-left {\n    0% {\n      -webkit-transform: translateX(-1000px);\n      transform: translateX(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-left {\n    0% {\n      -webkit-transform: translateX(-1000px);\n      transform: translateX(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:52:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation tracking-in-contract\n * ----------------------------------------\n */\n  @-webkit-keyframes tracking-in-contract {\n    0% {\n      letter-spacing: 1em;\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      letter-spacing: normal;\n      opacity: 1;\n    }\n  }\n  @keyframes tracking-in-contract {\n    0% {\n      letter-spacing: 1em;\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      letter-spacing: normal;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:47:57\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation rotate-in-2-cw\n * ----------------------------------------\n */\n  @-webkit-keyframes rotate-in-2-cw {\n    0% {\n      -webkit-transform: rotate(-45deg);\n      transform: rotate(-45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n  @keyframes rotate-in-2-cw {\n    0% {\n      -webkit-transform: rotate(-45deg);\n      transform: rotate(-45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:52:54\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation rotate-in-2-ccw\n * ----------------------------------------\n */\n  @-webkit-keyframes rotate-in-2-ccw {\n    0% {\n      -webkit-transform: rotate(45deg);\n      transform: rotate(45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n  @keyframes rotate-in-2-ccw {\n    0% {\n      -webkit-transform: rotate(45deg);\n      transform: rotate(45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:34:56\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-top-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-top-fwd {\n    0% {\n      -webkit-transform: rotateX(-100deg);\n      transform: rotateX(-100deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-top-fwd {\n    0% {\n      -webkit-transform: rotateX(-100deg);\n      transform: rotateX(-100deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:35:56\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-top-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-top-bck {\n    0% {\n      -webkit-transform: rotateX(70deg);\n      transform: rotateX(70deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-top-bck {\n    0% {\n      -webkit-transform: rotateX(70deg);\n      transform: rotateX(70deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:36:18\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-right-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-right-fwd {\n    0% {\n      -webkit-transform: rotateY(-100deg);\n      transform: rotateY(-100deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-right-fwd {\n    0% {\n      -webkit-transform: rotateY(-100deg);\n      transform: rotateY(-100deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:36:46\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-right-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-right-bck {\n    0% {\n      -webkit-transform: rotateY(70deg);\n      transform: rotateY(70deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-right-bck {\n    0% {\n      -webkit-transform: rotateY(70deg);\n      transform: rotateY(70deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:37:11\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-bottom-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-bottom-fwd {\n    0% {\n      -webkit-transform: rotateX(100deg);\n      transform: rotateX(100deg);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0);\n      transform: rotateX(0);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 1;\n    }\n  }\n\n  @keyframes swing-in-bottom-fwd {\n    0% {\n      -webkit-transform: rotateX(100deg);\n      transform: rotateX(100deg);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0);\n      transform: rotateX(0);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:38:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-left-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-left-fwd {\n    0% {\n      -webkit-transform: rotateY(100deg);\n      transform: rotateY(100deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-left-fwd {\n    0% {\n      -webkit-transform: rotateY(100deg);\n      transform: rotateY(100deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:40:3\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-left-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-left-bck {\n    0% {\n      -webkit-transform: rotateY(-70deg);\n      transform: rotateY(-70deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-left-bck {\n    0% {\n      -webkit-transform: rotateY(-70deg);\n      transform: rotateY(-70deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:44:48\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation scale-in-center\n * ----------------------------------------\n */\n  @-webkit-keyframes scale-in-center {\n    0% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n      opacity: 1;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n  @keyframes scale-in-center {\n    0% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n      opacity: 1;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:46:1\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-bck-center\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-bck-center {\n    0% {\n      -webkit-transform: translateZ(600px);\n      transform: translateZ(600px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-bck-center {\n    0% {\n      -webkit-transform: translateZ(600px);\n      transform: translateZ(600px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:13:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation tracking-in-contract-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes tracking-in-contract-bck {\n    0% {\n      letter-spacing: 1em;\n      -webkit-transform: translateZ(400px);\n      transform: translateZ(400px);\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes tracking-in-contract-bck {\n    0% {\n      letter-spacing: 1em;\n      -webkit-transform: translateZ(400px);\n      transform: translateZ(400px);\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:11:16\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation text-focus-in\n * ----------------------------------------\n */\n  @-webkit-keyframes text-focus-in {\n    0% {\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes text-focus-in {\n    0% {\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:33:10\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation puff-in-center\n * ----------------------------------------\n */\n  @-webkit-keyframes puff-in-center {\n    0% {\n      -webkit-transform: scale(2);\n      transform: scale(2);\n      -webkit-filter: blur(4px);\n      filter: blur(4px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes puff-in-center {\n    0% {\n      -webkit-transform: scale(2);\n      transform: scale(2);\n      -webkit-filter: blur(4px);\n      filter: blur(4px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:11:29\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation focus-in-contract\n * ----------------------------------------\n */\n  @-webkit-keyframes focus-in-contract {\n    0% {\n      letter-spacing: 1em;\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes focus-in-contract {\n    0% {\n      letter-spacing: 1em;\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:22:44\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-horizontal\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-horizontal {\n    0%,\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateX(-10px);\n      transform: translateX(-10px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateX(10px);\n      transform: translateX(10px);\n    }\n    80% {\n      -webkit-transform: translateX(8px);\n      transform: translateX(8px);\n    }\n    90% {\n      -webkit-transform: translateX(-8px);\n      transform: translateX(-8px);\n    }\n  }\n  @keyframes shake-horizontal {\n    0%,\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateX(-10px);\n      transform: translateX(-10px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateX(10px);\n      transform: translateX(10px);\n    }\n    80% {\n      -webkit-transform: translateX(8px);\n      transform: translateX(8px);\n    }\n    90% {\n      -webkit-transform: translateX(-8px);\n      transform: translateX(-8px);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:23:8\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-vertical\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-vertical {\n    0%,\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateY(-8px);\n      transform: translateY(-8px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateY(8px);\n      transform: translateY(8px);\n    }\n    80% {\n      -webkit-transform: translateY(6.4px);\n      transform: translateY(6.4px);\n    }\n    90% {\n      -webkit-transform: translateY(-6.4px);\n      transform: translateY(-6.4px);\n    }\n  }\n  @keyframes shake-vertical {\n    0%,\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateY(-8px);\n      transform: translateY(-8px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateY(8px);\n      transform: translateY(8px);\n    }\n    80% {\n      -webkit-transform: translateY(6.4px);\n      transform: translateY(6.4px);\n    }\n    90% {\n      -webkit-transform: translateY(-6.4px);\n      transform: translateY(-6.4px);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:24:19\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-top\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-top {\n    0%,\n    100% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n      -webkit-transform-origin: 50% 0;\n      transform-origin: 50% 0;\n    }\n    10% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: rotate(-4deg);\n      transform: rotate(-4deg);\n    }\n    30%,\n    50%,\n    70% {\n      -webkit-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n    80% {\n      -webkit-transform: rotate(-2deg);\n      transform: rotate(-2deg);\n    }\n    90% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n  }\n  @keyframes shake-top {\n    0%,\n    100% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n      -webkit-transform-origin: 50% 0;\n      transform-origin: 50% 0;\n    }\n    10% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: rotate(-4deg);\n      transform: rotate(-4deg);\n    }\n    30%,\n    50%,\n    70% {\n      -webkit-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n    80% {\n      -webkit-transform: rotate(-2deg);\n      transform: rotate(-2deg);\n    }\n    90% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:21:6\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation vibrate-1\n * ----------------------------------------\n */\n  @-webkit-keyframes vibrate-1 {\n    0% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n    20% {\n      -webkit-transform: translate(-2px, 2px);\n      transform: translate(-2px, 2px);\n    }\n    40% {\n      -webkit-transform: translate(-2px, -2px);\n      transform: translate(-2px, -2px);\n    }\n    60% {\n      -webkit-transform: translate(2px, 2px);\n      transform: translate(2px, 2px);\n    }\n    80% {\n      -webkit-transform: translate(2px, -2px);\n      transform: translate(2px, -2px);\n    }\n    100% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n  }\n  @keyframes vibrate-1 {\n    0% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n    20% {\n      -webkit-transform: translate(-2px, 2px);\n      transform: translate(-2px, 2px);\n    }\n    40% {\n      -webkit-transform: translate(-2px, -2px);\n      transform: translate(-2px, -2px);\n    }\n    60% {\n      -webkit-transform: translate(2px, 2px);\n      transform: translate(2px, 2px);\n    }\n    80% {\n      -webkit-transform: translate(2px, -2px);\n      transform: translate(2px, -2px);\n    }\n    100% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:27:38\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation blink-1\n * ----------------------------------------\n */\n  @-webkit-keyframes blink-1 {\n    0%,\n    50%,\n    100% {\n      opacity: 1;\n    }\n    25%,\n    75% {\n      opacity: 0;\n    }\n  }\n  @keyframes blink-1 {\n    0%,\n    50%,\n    100% {\n      opacity: 1;\n    }\n    25%,\n    75% {\n      opacity: 0;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:41:14\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * @animation flicker-in-2\n * ----------------------------------------\n */\n  @-webkit-keyframes flicker-in-2 {\n    0% {\n      opacity: 0;\n    }\n    10% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.1% {\n      opacity: 1;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.2% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n    }\n    20.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.5% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    50% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    100% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n  }\n  @keyframes flicker-in-2 {\n    0% {\n      opacity: 0;\n    }\n    10% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.1% {\n      opacity: 1;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.2% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n    }\n    20.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.5% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    50% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    100% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-24 16:9:5\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bounce-top\n * ----------------------------------------\n */\n  @-webkit-keyframes bounce-top {\n    0% {\n      -webkit-transform: translateY(-45px);\n      transform: translateY(-45px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n      opacity: 1;\n    }\n    24% {\n      opacity: 1;\n    }\n    40% {\n      -webkit-transform: translateY(-24px);\n      transform: translateY(-24px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    65% {\n      -webkit-transform: translateY(-12px);\n      transform: translateY(-12px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    82% {\n      -webkit-transform: translateY(-6px);\n      transform: translateY(-6px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    93% {\n      -webkit-transform: translateY(-4px);\n      transform: translateY(-4px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    25%,\n    55%,\n    75%,\n    87% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n      opacity: 1;\n    }\n  }\n  @keyframes bounce-top {\n    0% {\n      -webkit-transform: translateY(-45px);\n      transform: translateY(-45px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n      opacity: 1;\n    }\n    24% {\n      opacity: 1;\n    }\n    40% {\n      -webkit-transform: translateY(-24px);\n      transform: translateY(-24px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    65% {\n      -webkit-transform: translateY(-12px);\n      transform: translateY(-12px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    82% {\n      -webkit-transform: translateY(-6px);\n      transform: translateY(-6px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    93% {\n      -webkit-transform: translateY(-4px);\n      transform: translateY(-4px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    25%,\n    55%,\n    75%,\n    87% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:29:16\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation heartbeat\n * ----------------------------------------\n */\n  @-webkit-keyframes heartbeat {\n    from {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-transform-origin: center center;\n      transform-origin: center center;\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    10% {\n      -webkit-transform: scale(0.91);\n      transform: scale(0.91);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    17% {\n      -webkit-transform: scale(0.98);\n      transform: scale(0.98);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    33% {\n      -webkit-transform: scale(0.87);\n      transform: scale(0.87);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    45% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n  }\n  @keyframes heartbeat {\n    from {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-transform-origin: center center;\n      transform-origin: center center;\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    10% {\n      -webkit-transform: scale(0.91);\n      transform: scale(0.91);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    17% {\n      -webkit-transform: scale(0.98);\n      transform: scale(0.98);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    33% {\n      -webkit-transform: scale(0.87);\n      transform: scale(0.87);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    45% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:30:57\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation kenburns-top\n * ----------------------------------------\n */\n  @-webkit-keyframes kenburns-top {\n    0% {\n      -webkit-transform: scale(1) translateY(0);\n      transform: scale(1) translateY(0);\n      -webkit-transform-origin: 50% 16%;\n      transform-origin: 50% 16%;\n    }\n    100% {\n      -webkit-transform: scale(1.25) translateY(-15px);\n      transform: scale(1.25) translateY(-15px);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n    }\n  }\n  @keyframes kenburns-top {\n    0% {\n      -webkit-transform: scale(1) translateY(0);\n      transform: scale(1) translateY(0);\n      -webkit-transform-origin: 50% 16%;\n      transform-origin: 50% 16%;\n    }\n    100% {\n      -webkit-transform: scale(1.25) translateY(-15px);\n      transform: scale(1.25) translateY(-15px);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:33:12\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-top\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-top {\n    0% {\n      background-position: 50% 100%;\n    }\n    100% {\n      background-position: 50% 0%;\n    }\n  }\n  @keyframes bg-pan-top {\n    0% {\n      background-position: 50% 100%;\n    }\n    100% {\n      background-position: 50% 0%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:34:5\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-right\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-right {\n    0% {\n      background-position: 0% 50%;\n    }\n    100% {\n      background-position: 100% 50%;\n    }\n  }\n  @keyframes bg-pan-right {\n    0% {\n      background-position: 0% 50%;\n    }\n    100% {\n      background-position: 100% 50%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:33:27\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-bottom {\n    0% {\n      background-position: 50% 0%;\n    }\n    100% {\n      background-position: 50% 100%;\n    }\n  }\n  @keyframes bg-pan-bottom {\n    0% {\n      background-position: 50% 0%;\n    }\n    100% {\n      background-position: 50% 100%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:34:26\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-left\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-left {\n    0% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  }\n  @keyframes bg-pan-left {\n    0% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  }\n"], ["\n  * {\n    box-sizing: border-box;\n  }\n\n  .react-grid-layout {\n    position: relative;\n    z-index: 1;\n  }\n\n  .react-grid-layout .grid-placeholder {\n    box-sizing: border-box;\n  }\n\n  .react-grid-item {\n    left: 0;\n    position: absolute;\n    top: 0;\n    z-index: 1;\n  }\n\n  .react-grid-item.react-draggable.react-resizable:hover,\n  .react-grid-item-selected {\n    box-shadow: 0 0 0 3px #027aff;\n  }\n\n  .react-grid-item img {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .react-grid-item.isResizing,\n  .react-grid-item.isResizing .cb-layout-box,\n  .react-grid-item.isResizing .cb-layout-box .cb-divider {\n    visibility: hidden;\n  }\n\n  .react-grid-item.react-draggable.isDragging,\n  .react-grid-item.react-draggable.isDragging .cb-layout-box,\n  .react-grid-item.react-draggable.isDragging .cb-layout-box .cb-divider {\n    visibility: hidden;\n  }\n\n  /* .react-grid-item.react-draggable.isDragging .cb-layout-box .twitter-embed-container {\n    visibility: hidden;\n  } */\n\n  .react-grid-item.isResizing > .react-resizable-handle,\n  .react-grid-item.react-draggable.isDragging > .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .react-grid-item.dropping {\n    visibility: hidden;\n  }\n\n  .react-grid-item.static::after {\n    color: red;\n    content: \"this is static, can't drag\";\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-grid-item.placeholder {\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    -webkit-user-select: none;\n    user-select: none;\n    z-index: 9999;\n  }\n\n  .react-grid-item > .react-resizable-handle::after {\n    background: rgb(255, 255, 255);\n    border: 3px solid rgb(2, 122, 255);\n    content: '';\n    height: 5px;\n    position: absolute;\n    width: 5px;\n  }\n\n  .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .react-grid-item-selected > .react-resizable-handle {\n    visibility: visible;\n  }\n\n  /* NOTE: Resizable related */\n  .react-resizable {\n    position: relative;\n  }\n\n  .react-resizable-handle {\n    align-items: center;\n    background-origin: content-box;\n    background-repeat: no-repeat;\n    box-sizing: border-box;\n    display: flex;\n    height: 20px;\n    justify-content: center;\n    position: absolute;\n    width: 20px;\n  }\n\n  .react-resizable-handle-sw {\n    bottom: 0;\n    cursor: sw-resize;\n    left: 0;\n    transform: translate(-50%, 50%);\n  }\n\n  .react-resizable-handle-se {\n    bottom: 0;\n    cursor: se-resize;\n    right: 0;\n    transform: translate(50%, 50%);\n  }\n\n  .react-resizable-handle-nw {\n    cursor: nw-resize;\n    left: 0;\n    top: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-ne {\n    cursor: ne-resize;\n    right: 0;\n    top: 0;\n    transform: translate(50%, -50%);\n  }\n\n  .react-resizable-handle-w,\n  .react-resizable-handle-e {\n    cursor: ew-resize;\n    top: 50%;\n  }\n\n  .react-resizable-handle-w {\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-e {\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n\n  .react-resizable-handle-n,\n  .react-resizable-handle-s {\n    cursor: ns-resize;\n    left: 50%;\n  }\n\n  .react-resizable-handle-n {\n    top: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-s {\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n\n  .grid-placeholder {\n    position: absolute;\n    z-index: 0;\n  }\n\n  .grid-pattern-rect {\n    fill: #0000001a;\n    stroke: #ffffff33;\n  }\n\n  .react-grid-item.placeholder .cb-layout-box,\n  .react-grid-item.placeholder .cb-layout-box .cb-divider {\n    animation: none;\n  }\n\n  .react-grid-item.placeholder {\n    box-shadow: 0 0 0 3px #027aff;\n  }\n\n  .react-grid-item.placeholder > .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .grid-guide-line-center {\n    border-color: #ff463aff;\n    border-style: dashed;\n    border-width: 1px;\n    height: 100%;\n    left: 50%;\n    position: absolute;\n    transform: translateX(-50%);\n    z-index: 99999;\n  }\n\n  /* NOTE: Effects */\n\n  @-webkit-keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-fwd {\n    0% {\n      -webkit-transform: translateZ(-80px);\n      transform: translateZ(-80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes fade-in-fwd {\n    0% {\n      -webkit-transform: translateZ(-80px);\n      transform: translateZ(-80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-bck {\n    0% {\n      -webkit-transform: translateZ(80px);\n      transform: translateZ(80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-bck {\n    0% {\n      -webkit-transform: translateZ(80px);\n      transform: translateZ(80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-top {\n    0% {\n      -webkit-transform: translateY(-50px);\n      transform: translateY(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-top {\n    0% {\n      -webkit-transform: translateY(-50px);\n      transform: translateY(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-right {\n    0% {\n      -webkit-transform: translateX(50px);\n      transform: translateX(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-right {\n    0% {\n      -webkit-transform: translateX(50px);\n      transform: translateX(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:29:36\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation fade-in-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes fade-in-bottom {\n    0% {\n      -webkit-transform: translateY(50px);\n      transform: translateY(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-bottom {\n    0% {\n      -webkit-transform: translateY(50px);\n      transform: translateY(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:29:52\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation fade-in-left\n * ----------------------------------------\n */\n  @-webkit-keyframes fade-in-left {\n    0% {\n      -webkit-transform: translateX(-50px);\n      transform: translateX(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-left {\n    0% {\n      -webkit-transform: translateX(-50px);\n      transform: translateX(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:53:50\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-top\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-top {\n    0% {\n      -webkit-transform: translateY(-1000px);\n      transform: translateY(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-top {\n    0% {\n      -webkit-transform: translateY(-1000px);\n      transform: translateY(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:47\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-right\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-right {\n    0% {\n      -webkit-transform: translateX(1000px);\n      transform: translateX(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-right {\n    0% {\n      -webkit-transform: translateX(1000px);\n      transform: translateX(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:1\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-bottom {\n    0% {\n      -webkit-transform: translateY(1000px);\n      transform: translateY(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-bottom {\n    0% {\n      -webkit-transform: translateY(1000px);\n      transform: translateY(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:28\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-left\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-left {\n    0% {\n      -webkit-transform: translateX(-1000px);\n      transform: translateX(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-left {\n    0% {\n      -webkit-transform: translateX(-1000px);\n      transform: translateX(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:52:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation tracking-in-contract\n * ----------------------------------------\n */\n  @-webkit-keyframes tracking-in-contract {\n    0% {\n      letter-spacing: 1em;\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      letter-spacing: normal;\n      opacity: 1;\n    }\n  }\n  @keyframes tracking-in-contract {\n    0% {\n      letter-spacing: 1em;\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      letter-spacing: normal;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:47:57\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation rotate-in-2-cw\n * ----------------------------------------\n */\n  @-webkit-keyframes rotate-in-2-cw {\n    0% {\n      -webkit-transform: rotate(-45deg);\n      transform: rotate(-45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n  @keyframes rotate-in-2-cw {\n    0% {\n      -webkit-transform: rotate(-45deg);\n      transform: rotate(-45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:52:54\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation rotate-in-2-ccw\n * ----------------------------------------\n */\n  @-webkit-keyframes rotate-in-2-ccw {\n    0% {\n      -webkit-transform: rotate(45deg);\n      transform: rotate(45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n  @keyframes rotate-in-2-ccw {\n    0% {\n      -webkit-transform: rotate(45deg);\n      transform: rotate(45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:34:56\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-top-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-top-fwd {\n    0% {\n      -webkit-transform: rotateX(-100deg);\n      transform: rotateX(-100deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-top-fwd {\n    0% {\n      -webkit-transform: rotateX(-100deg);\n      transform: rotateX(-100deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:35:56\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-top-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-top-bck {\n    0% {\n      -webkit-transform: rotateX(70deg);\n      transform: rotateX(70deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-top-bck {\n    0% {\n      -webkit-transform: rotateX(70deg);\n      transform: rotateX(70deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:36:18\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-right-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-right-fwd {\n    0% {\n      -webkit-transform: rotateY(-100deg);\n      transform: rotateY(-100deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-right-fwd {\n    0% {\n      -webkit-transform: rotateY(-100deg);\n      transform: rotateY(-100deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:36:46\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-right-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-right-bck {\n    0% {\n      -webkit-transform: rotateY(70deg);\n      transform: rotateY(70deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-right-bck {\n    0% {\n      -webkit-transform: rotateY(70deg);\n      transform: rotateY(70deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:37:11\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-bottom-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-bottom-fwd {\n    0% {\n      -webkit-transform: rotateX(100deg);\n      transform: rotateX(100deg);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0);\n      transform: rotateX(0);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 1;\n    }\n  }\n\n  @keyframes swing-in-bottom-fwd {\n    0% {\n      -webkit-transform: rotateX(100deg);\n      transform: rotateX(100deg);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0);\n      transform: rotateX(0);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:38:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-left-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-left-fwd {\n    0% {\n      -webkit-transform: rotateY(100deg);\n      transform: rotateY(100deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-left-fwd {\n    0% {\n      -webkit-transform: rotateY(100deg);\n      transform: rotateY(100deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:40:3\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-left-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-left-bck {\n    0% {\n      -webkit-transform: rotateY(-70deg);\n      transform: rotateY(-70deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-left-bck {\n    0% {\n      -webkit-transform: rotateY(-70deg);\n      transform: rotateY(-70deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:44:48\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation scale-in-center\n * ----------------------------------------\n */\n  @-webkit-keyframes scale-in-center {\n    0% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n      opacity: 1;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n  @keyframes scale-in-center {\n    0% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n      opacity: 1;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:46:1\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-bck-center\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-bck-center {\n    0% {\n      -webkit-transform: translateZ(600px);\n      transform: translateZ(600px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-bck-center {\n    0% {\n      -webkit-transform: translateZ(600px);\n      transform: translateZ(600px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:13:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation tracking-in-contract-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes tracking-in-contract-bck {\n    0% {\n      letter-spacing: 1em;\n      -webkit-transform: translateZ(400px);\n      transform: translateZ(400px);\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes tracking-in-contract-bck {\n    0% {\n      letter-spacing: 1em;\n      -webkit-transform: translateZ(400px);\n      transform: translateZ(400px);\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:11:16\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation text-focus-in\n * ----------------------------------------\n */\n  @-webkit-keyframes text-focus-in {\n    0% {\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes text-focus-in {\n    0% {\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:33:10\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation puff-in-center\n * ----------------------------------------\n */\n  @-webkit-keyframes puff-in-center {\n    0% {\n      -webkit-transform: scale(2);\n      transform: scale(2);\n      -webkit-filter: blur(4px);\n      filter: blur(4px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes puff-in-center {\n    0% {\n      -webkit-transform: scale(2);\n      transform: scale(2);\n      -webkit-filter: blur(4px);\n      filter: blur(4px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:11:29\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation focus-in-contract\n * ----------------------------------------\n */\n  @-webkit-keyframes focus-in-contract {\n    0% {\n      letter-spacing: 1em;\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes focus-in-contract {\n    0% {\n      letter-spacing: 1em;\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:22:44\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-horizontal\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-horizontal {\n    0%,\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateX(-10px);\n      transform: translateX(-10px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateX(10px);\n      transform: translateX(10px);\n    }\n    80% {\n      -webkit-transform: translateX(8px);\n      transform: translateX(8px);\n    }\n    90% {\n      -webkit-transform: translateX(-8px);\n      transform: translateX(-8px);\n    }\n  }\n  @keyframes shake-horizontal {\n    0%,\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateX(-10px);\n      transform: translateX(-10px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateX(10px);\n      transform: translateX(10px);\n    }\n    80% {\n      -webkit-transform: translateX(8px);\n      transform: translateX(8px);\n    }\n    90% {\n      -webkit-transform: translateX(-8px);\n      transform: translateX(-8px);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:23:8\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-vertical\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-vertical {\n    0%,\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateY(-8px);\n      transform: translateY(-8px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateY(8px);\n      transform: translateY(8px);\n    }\n    80% {\n      -webkit-transform: translateY(6.4px);\n      transform: translateY(6.4px);\n    }\n    90% {\n      -webkit-transform: translateY(-6.4px);\n      transform: translateY(-6.4px);\n    }\n  }\n  @keyframes shake-vertical {\n    0%,\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateY(-8px);\n      transform: translateY(-8px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateY(8px);\n      transform: translateY(8px);\n    }\n    80% {\n      -webkit-transform: translateY(6.4px);\n      transform: translateY(6.4px);\n    }\n    90% {\n      -webkit-transform: translateY(-6.4px);\n      transform: translateY(-6.4px);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:24:19\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-top\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-top {\n    0%,\n    100% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n      -webkit-transform-origin: 50% 0;\n      transform-origin: 50% 0;\n    }\n    10% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: rotate(-4deg);\n      transform: rotate(-4deg);\n    }\n    30%,\n    50%,\n    70% {\n      -webkit-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n    80% {\n      -webkit-transform: rotate(-2deg);\n      transform: rotate(-2deg);\n    }\n    90% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n  }\n  @keyframes shake-top {\n    0%,\n    100% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n      -webkit-transform-origin: 50% 0;\n      transform-origin: 50% 0;\n    }\n    10% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: rotate(-4deg);\n      transform: rotate(-4deg);\n    }\n    30%,\n    50%,\n    70% {\n      -webkit-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n    80% {\n      -webkit-transform: rotate(-2deg);\n      transform: rotate(-2deg);\n    }\n    90% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:21:6\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation vibrate-1\n * ----------------------------------------\n */\n  @-webkit-keyframes vibrate-1 {\n    0% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n    20% {\n      -webkit-transform: translate(-2px, 2px);\n      transform: translate(-2px, 2px);\n    }\n    40% {\n      -webkit-transform: translate(-2px, -2px);\n      transform: translate(-2px, -2px);\n    }\n    60% {\n      -webkit-transform: translate(2px, 2px);\n      transform: translate(2px, 2px);\n    }\n    80% {\n      -webkit-transform: translate(2px, -2px);\n      transform: translate(2px, -2px);\n    }\n    100% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n  }\n  @keyframes vibrate-1 {\n    0% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n    20% {\n      -webkit-transform: translate(-2px, 2px);\n      transform: translate(-2px, 2px);\n    }\n    40% {\n      -webkit-transform: translate(-2px, -2px);\n      transform: translate(-2px, -2px);\n    }\n    60% {\n      -webkit-transform: translate(2px, 2px);\n      transform: translate(2px, 2px);\n    }\n    80% {\n      -webkit-transform: translate(2px, -2px);\n      transform: translate(2px, -2px);\n    }\n    100% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:27:38\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation blink-1\n * ----------------------------------------\n */\n  @-webkit-keyframes blink-1 {\n    0%,\n    50%,\n    100% {\n      opacity: 1;\n    }\n    25%,\n    75% {\n      opacity: 0;\n    }\n  }\n  @keyframes blink-1 {\n    0%,\n    50%,\n    100% {\n      opacity: 1;\n    }\n    25%,\n    75% {\n      opacity: 0;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:41:14\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * @animation flicker-in-2\n * ----------------------------------------\n */\n  @-webkit-keyframes flicker-in-2 {\n    0% {\n      opacity: 0;\n    }\n    10% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.1% {\n      opacity: 1;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.2% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n    }\n    20.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.5% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    50% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    100% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n  }\n  @keyframes flicker-in-2 {\n    0% {\n      opacity: 0;\n    }\n    10% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.1% {\n      opacity: 1;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.2% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n    }\n    20.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.5% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    50% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    100% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-24 16:9:5\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bounce-top\n * ----------------------------------------\n */\n  @-webkit-keyframes bounce-top {\n    0% {\n      -webkit-transform: translateY(-45px);\n      transform: translateY(-45px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n      opacity: 1;\n    }\n    24% {\n      opacity: 1;\n    }\n    40% {\n      -webkit-transform: translateY(-24px);\n      transform: translateY(-24px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    65% {\n      -webkit-transform: translateY(-12px);\n      transform: translateY(-12px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    82% {\n      -webkit-transform: translateY(-6px);\n      transform: translateY(-6px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    93% {\n      -webkit-transform: translateY(-4px);\n      transform: translateY(-4px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    25%,\n    55%,\n    75%,\n    87% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n      opacity: 1;\n    }\n  }\n  @keyframes bounce-top {\n    0% {\n      -webkit-transform: translateY(-45px);\n      transform: translateY(-45px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n      opacity: 1;\n    }\n    24% {\n      opacity: 1;\n    }\n    40% {\n      -webkit-transform: translateY(-24px);\n      transform: translateY(-24px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    65% {\n      -webkit-transform: translateY(-12px);\n      transform: translateY(-12px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    82% {\n      -webkit-transform: translateY(-6px);\n      transform: translateY(-6px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    93% {\n      -webkit-transform: translateY(-4px);\n      transform: translateY(-4px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    25%,\n    55%,\n    75%,\n    87% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:29:16\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation heartbeat\n * ----------------------------------------\n */\n  @-webkit-keyframes heartbeat {\n    from {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-transform-origin: center center;\n      transform-origin: center center;\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    10% {\n      -webkit-transform: scale(0.91);\n      transform: scale(0.91);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    17% {\n      -webkit-transform: scale(0.98);\n      transform: scale(0.98);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    33% {\n      -webkit-transform: scale(0.87);\n      transform: scale(0.87);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    45% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n  }\n  @keyframes heartbeat {\n    from {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-transform-origin: center center;\n      transform-origin: center center;\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    10% {\n      -webkit-transform: scale(0.91);\n      transform: scale(0.91);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    17% {\n      -webkit-transform: scale(0.98);\n      transform: scale(0.98);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    33% {\n      -webkit-transform: scale(0.87);\n      transform: scale(0.87);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    45% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:30:57\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation kenburns-top\n * ----------------------------------------\n */\n  @-webkit-keyframes kenburns-top {\n    0% {\n      -webkit-transform: scale(1) translateY(0);\n      transform: scale(1) translateY(0);\n      -webkit-transform-origin: 50% 16%;\n      transform-origin: 50% 16%;\n    }\n    100% {\n      -webkit-transform: scale(1.25) translateY(-15px);\n      transform: scale(1.25) translateY(-15px);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n    }\n  }\n  @keyframes kenburns-top {\n    0% {\n      -webkit-transform: scale(1) translateY(0);\n      transform: scale(1) translateY(0);\n      -webkit-transform-origin: 50% 16%;\n      transform-origin: 50% 16%;\n    }\n    100% {\n      -webkit-transform: scale(1.25) translateY(-15px);\n      transform: scale(1.25) translateY(-15px);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:33:12\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-top\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-top {\n    0% {\n      background-position: 50% 100%;\n    }\n    100% {\n      background-position: 50% 0%;\n    }\n  }\n  @keyframes bg-pan-top {\n    0% {\n      background-position: 50% 100%;\n    }\n    100% {\n      background-position: 50% 0%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:34:5\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-right\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-right {\n    0% {\n      background-position: 0% 50%;\n    }\n    100% {\n      background-position: 100% 50%;\n    }\n  }\n  @keyframes bg-pan-right {\n    0% {\n      background-position: 0% 50%;\n    }\n    100% {\n      background-position: 100% 50%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:33:27\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-bottom {\n    0% {\n      background-position: 50% 0%;\n    }\n    100% {\n      background-position: 50% 100%;\n    }\n  }\n  @keyframes bg-pan-bottom {\n    0% {\n      background-position: 50% 0%;\n    }\n    100% {\n      background-position: 50% 100%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:34:26\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-left\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-left {\n    0% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  }\n  @keyframes bg-pan-left {\n    0% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  }\n"])));

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js CHANGED Viewed

@@ -30,6 +30,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
+var useGoogleFonts_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks/useGoogleFonts");
 var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
 var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
@@ -50,6 +51,8 @@ function Button(props) {
     var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
     var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, _g = _f.layout, paddingLeft = _g.paddingLeft, paddingRight = _g.paddingRight, paddingTop = _g.paddingTop, paddingBottom = _g.paddingBottom, layoutStyle = __rest(_g, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _f.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromBtnCB)(props.CB_STYLE_PROP_BTNTEXT, device === 'MOBILE');
+    (0, useGoogleFonts_1.useGoogleFonts)({ fonts: googleFonts });
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
     }

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js CHANGED Viewed

@@ -19,14 +19,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var hooks_1 = require("../../../../hooks");
+var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
+var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
 var textUtil_1 = require("../../../../newUtils/textUtil");
 var util_1 = require("../../../../util");
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
-var getGoogleFonts_1 = __importDefault(require("./getGoogleFonts"));
-var useGoogleFonts_1 = __importDefault(require("./useGoogleFonts"));
 function Text(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
@@ -39,7 +39,7 @@ function Text(props) {
     var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
     var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
-    var googleFonts = (0, getGoogleFonts_1.default)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
+    var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextCB)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.default)({ fonts: googleFonts });
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/getGoogleFonts.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { CB_BTNTEXT_STYLE_PROPS } from '../../components/ComponentBlock/componentBlocks/Button/btnTypes';
+import type { CB_STYLE_PROP_TEXT_SPECS } from '../../components/ComponentBlock/componentBlocks/Text/types';
+export declare function getGoogleFontsFromTextCB(props: CB_STYLE_PROP_TEXT_SPECS, isMobile: boolean): string[];
+export declare function getGoogleFontsFromBtnCB(props: CB_BTNTEXT_STYLE_PROPS, isMobile: boolean): string[];

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/getGoogleFonts.js ADDED Viewed

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGoogleFontsFromBtnCB = exports.getGoogleFontsFromTextCB = void 0;
+function getGoogleFontsFromTextCB(props, isMobile) {
+    var typeface = props.CB_STYLE_PROP_TEXT_SPEC_TYPEFACE;
+    var typefaceHover = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER'];
+    var typefaceMobile = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE'];
+    var typefaceMobileHover = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER'];
+    if (isMobile) {
+        return [typefaceMobile, typefaceMobileHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
+    }
+    return [typeface, typefaceHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
+}
+exports.getGoogleFontsFromTextCB = getGoogleFontsFromTextCB;
+function getGoogleFontsFromBtnCB(props, isMobile) {
+    var typeface = props.CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE;
+    var typefaceHover = props['CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:HOVER'];
+    var typefaceMobile = props['CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE'];
+    var typefaceMobileHover = props['CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE:HOVER'];
+    if (isMobile) {
+        return [typefaceMobile, typefaceMobileHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
+    }
+    return [typeface, typefaceHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
+}
+exports.getGoogleFontsFromBtnCB = getGoogleFontsFromBtnCB;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { getGoogleFontsFromBtnCB, getGoogleFontsFromTextCB } from './getGoogleFonts';
2	+ export { default as useGoogleFonts } from './useGoogleFonts';

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/index.js ADDED Viewed

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGoogleFonts = exports.getGoogleFontsFromTextCB = exports.getGoogleFontsFromBtnCB = void 0;
+var getGoogleFonts_1 = require("./getGoogleFonts");
+Object.defineProperty(exports, "getGoogleFontsFromBtnCB", { enumerable: true, get: function () { return getGoogleFonts_1.getGoogleFontsFromBtnCB; } });
+Object.defineProperty(exports, "getGoogleFontsFromTextCB", { enumerable: true, get: function () { return getGoogleFonts_1.getGoogleFontsFromTextCB; } });
+var useGoogleFonts_1 = require("./useGoogleFonts");
+Object.defineProperty(exports, "useGoogleFonts", { enumerable: true, get: function () { return __importDefault(useGoogleFonts_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/{components/ComponentBlock/componentBlocks/Text → hooks/useGoogleFonts}/useGoogleFonts.js RENAMED Viewed

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var callGoogleFontCSSAndApply_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/callGoogleFontCSSAndApply"));
+var callGoogleFontCSSAndApply_1 = __importDefault(require("../../../../../GoogleFontkit/utils/callGoogleFontCSSAndApply"));
 function useGoogleFonts(_a) {
     var fonts = _a.fonts;
     (0, react_1.useEffect)(function () {

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js CHANGED Viewed

@@ -176,7 +176,8 @@ function getFontName(value) {
         default: {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             var _a = value.split(':'), _1 = _a[0], font = _a[1];
-            return "".concat(font);
+            // return font.toString();
+            return "\"".concat(font, "\"");
         }
     }
 }

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.js CHANGED Viewed

@@ -28,7 +28,7 @@ function parsePropPlacement(props, id) {
         y: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY,
         w: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS,
         h: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS,
-        z: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX
+        z: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX + 500
     };
     var mobileLayout = {
         i: id.toString(),
@@ -36,7 +36,7 @@ function parsePropPlacement(props, id) {
         y: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'],
         w: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'],
         h: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'],
-        z: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE']
+        z: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'] + 500
     };
     return {
         mobileLayout: mobileLayout,

package/dist/src/sub/GoogleFontkit/headless/GoogleFontItem.js CHANGED Viewed

@@ -86,20 +86,14 @@ function GoogleFontItem(_a) {
             });
         }
         if ((0, isStyleSheetExists_1.default)(font.id, false)) {
-            // Add CSS declaration to apply the new active font
             (0, applyActiveFont_1.default)(font, '', '');
             setIsLoading(false);
         }
         else if ((0, isStyleSheetExists_1.default)(font.id, true)) {
-            // Update the stylesheet's "data-is-preview" attribute to "false"
             (0, setStyleSheetType_1.default)(font.id, false);
             setIsLoading(false);
         }
         else {
-            // Create stylesheet for the font to be fetched (this prevents other font pickers from loading
-            // the font as well)
-            // eslint-disable-next-line no-console
-            console.log('create sheet');
             (0, createStyleSheet_1.default)(font.id, false);
             getCss();
         }

package/dist/src/sub/GoogleFontkit/headless/GoogleFontsList.js CHANGED Viewed

@@ -50,7 +50,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable no-console */
 var react_1 = require("react");
 var getGoogleWebFonts_1 = __importDefault(require("../api/getGoogleWebFonts"));
 var getFontId_1 = __importDefault(require("../utils/getFontId"));
@@ -65,12 +64,11 @@ function GoogleFontsList(_a) {
     var apiKey = _a.apiKey, sort = _a.sort, children = _a.children;
     var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
     var _c = (0, react_1.useState)([]), fonts = _c[0], setFonts = _c[1];
-    var _d = (0, react_1.useState)([]), filteredFonts = _d[0], setFilteredFonts = _d[1];
-    var _e = (0, react_1.useState)({
+    var _d = (0, react_1.useState)({
         searchQuery: '',
         categories: DEFAULT_CATEGORIES,
         subsets: []
-    }), filterOptions = _e[0], setFilterOptions = _e[1];
+    }), filterOptions = _d[0], setFilterOptions = _d[1];
     (0, react_1.useEffect)(function () {
         function call() {
             return __awaiter(this, void 0, void 0, function () {
@@ -94,37 +92,6 @@ function GoogleFontsList(_a) {
         }
         call();
     }, [apiKey, sort]);
-    (0, react_1.useEffect)(function () {
-        function getFilteredFontsAsync() {
-            return new Promise(function (resolve) {
-                console.log('filter start (1)');
-                setTimeout(function () {
-                    var filteredFonts = fonts.filter(function (font) {
-                        var categories = filterOptions.categories, searchQuery = filterOptions.searchQuery, subsets = filterOptions.subsets;
-                        var isSelectedCategory = categories.includes(font.category);
-                        var query = searchQuery.toLocaleLowerCase().trim();
-                        var matchSearchQuery = font.family.toLocaleLowerCase().includes(query);
-                        if (!matchSearchQuery) {
-                            return false;
-                        }
-                        var hasSomeScript = subsets.length > 0 ? font.subsets.some(function (subset) { return subsets.includes(subset); }) : true;
-                        if (isSelectedCategory && hasSomeScript) {
-                            return true;
-                        }
-                        return false;
-                    });
-                    resolve(filteredFonts);
-                    console.log('filter resolved (3)');
-                }, 0);
-                console.log('after filter (2)');
-            });
-        }
-        setIsLoading(true);
-        getFilteredFontsAsync().then(function (res) {
-            setFilteredFonts(res);
-            setIsLoading(false);
-        });
-    }, [filterOptions, fonts]);
     function changeSort(sortOption) {
         return __awaiter(this, void 0, void 0, function () {
             var items;
@@ -144,14 +111,27 @@ function GoogleFontsList(_a) {
             });
         });
     }
-    function changeFilterOption(arg, setLoading) {
+    function changeFilterOption(arg) {
         var name = arg.name, value = arg.value;
-        setLoading && setIsLoading(true);
         setFilterOptions(function (prev) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[name] = value, _a)));
         });
     }
+    var filteredFonts = fonts.filter(function (font) {
+        var categories = filterOptions.categories, searchQuery = filterOptions.searchQuery, subsets = filterOptions.subsets;
+        var isSelectedCategory = categories.includes(font.category);
+        var query = searchQuery.toLocaleLowerCase().trim();
+        var matchSearchQuery = font.family.toLocaleLowerCase().includes(query);
+        if (!matchSearchQuery) {
+            return false;
+        }
+        var hasSomeScript = subsets.length > 0 ? font.subsets.some(function (subset) { return subsets.includes(subset); }) : true;
+        if (isSelectedCategory && hasSomeScript) {
+            return true;
+        }
+        return false;
+    });
     return children({
         isLoading: isLoading,
         fonts: fonts,

package/dist/src/sub/GoogleFontkit/types.d.ts CHANGED Viewed

@@ -36,7 +36,7 @@ export type FilterOptionHandlerArgType = {
     name: 'subsets';
     value: Subset[];
 };
-export type ChangeFilterOptionHandler = (arg: FilterOptionHandlerArgType, setLoading?: boolean) => void;
+export type ChangeFilterOptionHandler = (arg: FilterOptionHandlerArgType) => void;
 export type FilterOptionType = {
     searchQuery: string;
     categories: Category[];

package/dist/src/sub/GoogleFontkit/utils/applyActiveFont.d.ts CHANGED Viewed

@@ -1,5 +1,2 @@
 import type { Font } from '../types';
-/**
- * Add/update declaration for applying the current active font
- */
 export default function applyActiveFont(activeFont: Font, previousFontFamily: string, selectorSuffix: string): void;

package/dist/src/sub/GoogleFontkit/utils/applyActiveFont.js CHANGED Viewed

@@ -4,9 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var getActiveFontStylesheet_1 = __importDefault(require("./getActiveFontStylesheet"));
-/**
- * Add/update declaration for applying the current active font
- */
 function applyActiveFont(activeFont, previousFontFamily, selectorSuffix) {
     var style = "\n\t\t.apply-font".concat(selectorSuffix, " {\n\t\t\tfont-family: \"").concat(activeFont.family, "\"").concat(previousFontFamily ? ", \"".concat(previousFontFamily, "\"") : '', ";\n\t\t}\n\t");
     var activeFontStylesheet = (0, getActiveFontStylesheet_1.default)(selectorSuffix);

package/dist/src/sub/GoogleFontkit/utils/createStyleSheet.d.ts CHANGED Viewed

@@ -1,4 +1 @@
-/**
- * Attach a new font stylesheet to the document head using the provided content
- */
 export default function createStylesheet(fontId: string, isPreview: boolean): void;

package/dist/src/sub/GoogleFontkit/utils/createStyleSheet.js CHANGED Viewed

@@ -1,9 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var constants_1 = require("../constants");
-/**
- * Attach a new font stylesheet to the document head using the provided content
- */
 function createStylesheet(fontId, isPreview) {
     var stylesheetNode = document.createElement('style');
     stylesheetNode.id = fontId;