{"html":"<div class=\"ue_marquee\" id=\"{{uc_id}}\">\n   <div class=\"marquee_text-container \"> \n    <div class=\"marquee_text\">\n      {% if enable_link == \"true\" %}<a href=\"{{link}}\" {{link_html_attributes|raw}}>{% endif %}\t\n        <{{html_tag}}>{{text|raw}}&nbsp;<\/{{html_tag}}>\n      {% if enable_link == \"true\" %}<\/a>{% endif %}\t\n    <\/div>\n  <\/div>\n<\/div>","css":"#{{uc_id}}{\n    box-sizing: border-box;\n    white-space: nowrap;\n    overflow: hidden;\n    box-sizing: border-box;\n    margin:0 auto;\n    display: flex;\n}\n\n#{{uc_id}} .marquee_text {\n    {% if infinite_text_effect == \"true\" %}\n      width: auto;\n      display: flex;\n    {% endif %}\n    align-items: center;\n    justify-content: center;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n#{{uc_id}} a{\n  text-decoration:none;\n}\n\n#{{uc_id}} .marquee_text-container {\n  \n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n  \n  {% if infinite_text_effect == \"false\" %}\n  \n  \tdisplay: inline-block;\n    padding-left: 100%;\n  \n    \/*right to left*\/\n  \t{% if direction == \"marquee\" %}   \t\t\n  \t\tanimation-name: marquee;\n  \t{% endif %}\n  \n    \/*left to right*\/\n  \t{% if direction == \"marquee_flip\" %}\n  \t\tanimation-name: marquee_flip;\n  \t{% endif %}\n  \n  {% endif %}\n  \n  \/* infinite effect *\/\n  {% if infinite_text_effect == \"true\" %}\n  \n  \tdisplay: flex;\t\n  \n    \/*right to left*\/\n  \t{% if direction == \"marquee\" %} \n  \t\tanimation-name: marquee_infinite;\n  \t{% endif %}\n  \n    \/*left to right*\/\n  \t{% if direction == \"marquee_flip\" %}\n  \t\tanimation-name: marquee_flip_infinite;\n  \t{% endif %}\n  \n  {% endif %}\n  \/* end infinite effect *\/\n  \n  animation-delay: 250ms;\n  \n}\n\n\n\/*right to left*\/\n@keyframes marquee_infinite { \n    0% { transform: translateX(0); }\n    100% { transform: translateX(-50%); }\n}\n\n\/*left to right*\/\n@keyframes marquee_flip_infinite {\n    0% { transform: translateX(-50%); }\n    100% { transform: translateX(0); }    \n}\n\n\/*right to left*\/\n@keyframes marquee {  \n    0% { transform: translateX(0); }\n    100% { transform: translateX(-100%); }\n}\n\n\/*left to right*\/\n@keyframes marquee_flip { \n    0% { transform: translateX(-100%); }\n    100% { transform: translateX(0); }    \n}","js":"{% if infinite_text_effect == \"true\" %}\n{{ ucfunc(\"put_docready_start\") }}\n\t\t\n   var objListMarquee = jQuery(\"#{{uc_id}}\");\n   \n   function cloneItems(){\n   \n      var objItemsWrapper = objListMarquee.find(\".marquee_text-container\");\n\n      for(let i=0; i<3; i++){\n\n          var objItemsCloned = objListMarquee.find(\".marquee_text\").clone();      \n          objItemsWrapper.append(objItemsCloned);\n\n      }    \n   }\n   \n   cloneItems();\n    \t\n{{ ucfunc(\"put_docready_end\") }}\n{% endif %}"}