@innovastudio/contentbox 1.4.24 → 1.4.25

package/public/contentbox/contentbox.esm.js

@@ -3671,10 +3671,10 @@ class EditSection {
     let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 450px;">' + '<div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">' + out('Are you sure you want to delete this section?') + '</div>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
     html += '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xxs') + '" class="cmd-box-spacing" data-value="xxs">' + out('xxs') + '</button>' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
-    html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
+    html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="display:none;padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:none">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
     '<button title="' + out('Clear') + '" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' + '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-end" data-value="zoom-in">' + out('Zoom In') + '</button>' + '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-end" data-value="zoom-out">' + out('Zoom Out') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionScrollButton" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-value="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-value="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-value="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-value="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-value="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-value="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-value="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-value="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-value="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-value="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-value="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-value="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-value="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-value="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-value="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>';
-    html += '<div class="is-modal editmodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '';
+    html += '<div class="is-modal editmodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;"><span>' + out('Module Settings') + '</span>' + '<button class="is-modal-close" tabindex="-1" title="' + out('Close') + '">' + '<svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>' + '</button>' + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '';
     dom$k.appendHtml(builderStuff, html);
     let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
     this.modalEditSection = modalEditSection;
@@ -3701,7 +3701,8 @@ class EditSection {
     btnOk.addEventListener('click', () => {
       const activeSection = this.builder.activeSection;
       this.builder.editor.saveForUndo();
-      activeSection.parentNode.removeChild(activeSection); //Trigger Render event
+      activeSection.parentNode.removeChild(activeSection);
+      this.builder.sectionStack(); //Trigger Render event
 
       this.builder.settings.onRender();
       this.builder.editor.util.hideModal(modalDelConfirm);
@@ -3719,35 +3720,40 @@ class EditSection {
     const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
     btnSectionUp.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
-      this.sectionUp(); //Trigger Change event
+      this.sectionUp();
+      this.builder.sectionStack(); //Trigger Change event
 
       this.builder.settings.onChange();
     });
     const btnSectionDown = modalEditSection.querySelector('.cmd-section-down');
     btnSectionDown.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
-      this.sectionDown(); //Trigger Change event
+      this.sectionDown();
+      this.builder.sectionStack(); //Trigger Change event
 
       this.builder.settings.onChange();
     });
     const btnSectionTop = modalEditSection.querySelector('.cmd-section-top');
     btnSectionTop.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
-      this.sectionTop(); //Trigger Change event
+      this.sectionTop();
+      this.builder.sectionStack(); //Trigger Change event
 
       this.builder.settings.onChange();
     });
     const btnSectionBottom = modalEditSection.querySelector('.cmd-section-bottom');
     btnSectionBottom.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
-      this.sectionBottom(); //Trigger Change event
+      this.sectionBottom();
+      this.builder.sectionStack(); //Trigger Change event
 
       this.builder.settings.onChange();
     });
     const btnSectionDuplicate = modalEditSection.querySelector('.cmd-section-duplicate');
     btnSectionDuplicate.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
-      this.sectionDuplicate(); //Trigger Change event
+      this.sectionDuplicate();
+      this.builder.sectionStack(); //Trigger Change event
 
       this.builder.settings.onChange();
     });
@@ -4413,6 +4419,8 @@ class EditSection {
       dom$k.removeClass(activeSection, 'box-space-m');
       dom$k.removeClass(activeSection, 'box-space-lg');
     }
+
+    this.builder.sectionStack();
   }
 
   sectionUseScroll() {
@@ -10024,11 +10032,17 @@ class EditBox {
     //     '<button id="btnEditModule" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' +
     // '</div>';
 
+    html += `
+        <form class="is-cover-upload-central" style="opacity:1;position:absolute;width:40px;height:40px;" target="target-upload-cover" method="post" action="${this.builder.coverImageHandler}" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">
+            <input type="file" tabindex="-1" class="input-file-cover-central" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
+            <input tabindex="-1" class="input-custom-value-central" name="hidcustomval" type="hidden" value="${this.builder.customval}" />
+        </form>
+        `;
     html += '<iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>';
-    html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>';
+    html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div style="display:flex">' + '<div id="divBoxSize" style="margin-right: 50px;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxMove">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Left') + '" class="cmd-box-left" style="width:40px;">←</button>' + '<button title="' + out('Right') + '" class="cmd-box-right" style="width:40px;border-left:none">→</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '</div>';
     html += '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ': &nbsp;<span class="val-box-size" style="font-size:12px"></span></div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button>' + '<button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1300" style="width:40px;border-top:none;border-left:none">1300</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button>' + '<button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button>' + '<button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button>' + '<button title="' + out('Clear') + '" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>';
-    html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Clear') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
-    html += '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;">' + '<input id="hidRefId5_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="position: absolute;top: 10px;left: 15px;"><use xlink:href="#ion-image"></use></svg>' + '<input title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" tabindex="-1" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
+    html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Select') + '" class="input-select">' + '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Clear') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
+    html += '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;">' + '<input id="hidRefId5_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>' + '<input onclick="blur()" title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" tabindex="-1" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
     html += '<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Text Style') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Light') + '" class="cmd-box-textcolor" data-value="light">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">' + out('Dark') + '</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textcolor" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>';
     html += '<div id="divContainerTransparency" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button>' + '<button title="' + out('Decrease') + '" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textopacity" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:27px;">' + out('Default Text Formatting') + ':</div>' + '<div id="divContainerTextAlign" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">' + out('Alignment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Align Left') + '" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>' + '<button title="' + out('Align Center') + '" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>' + '<button title="' + out('Align Right') + '" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>' + '<button title="' + out('Align Full') + '" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textalign" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div id="divContainerParagraphSize" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">Paragraph Size:</div>' + '<div style="display:flex">' + '<button title="' + out('16') + '" class="cmd-box-parasize" data-value="16" style="width:40px">16</button>' + '<button title="' + out('17') + '" class="cmd-box-parasize" data-value="17" style="width:40px">17</button>' + '<button title="' + out('18') + '" class="cmd-box-parasize" data-value="18" style="width:40px">18</button>' + '<button title="' + out('19') + '" class="cmd-box-parasize" data-value="19" style="width:40px">19</button>' + '<button title="' + out('20') + '" class="cmd-box-parasize" data-value="20" style="width:40px">20</button>' + '<button title="' + out('21') + '" class="cmd-box-parasize" data-value="21" style="width:40px">21</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-parasize" data-value="" style="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkOptimizeTextSize" style="margin:0;"><input id="chkOptimizeTextSize" type="checkbox" /> ' + out('Auto adjust text size on large screen.') + '</label>' + '</div>' + '<div id="divContainerLineHeight" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">Line Height:</div>' + '<div style="display:flex;flex-flow: wrap;width: 290px;">' + '<button title="' + out('1') + '" class="cmd-box-lineheight" data-value="1" style="width:40px">1</button>' + '<button title="' + out('1.1') + '" class="cmd-box-lineheight" data-value="1.1" style="width:40px">1.1</button>' + '<button title="' + out('1.2') + '" class="cmd-box-lineheight" data-value="1.2" style="width:40px">1.2</button>' + '<button title="' + out('1.3') + '" class="cmd-box-lineheight" data-value="1.3" style="width:40px">1.3</button>' + '<button title="' + out('1.4') + '" class="cmd-box-lineheight" data-value="1.4" style="width:40px">1.4</button>' + '<button title="' + out('1.5') + '" class="cmd-box-lineheight" data-value="1.5" style="width:40px">1.5</button>' + '<button title="' + out('1.6') + '" class="cmd-box-lineheight" data-value="1.6" style="width:40px">1.6</button>' + '<button title="' + out('1.7') + '" class="cmd-box-lineheight" data-value="1.7" style="width:40px">1.7</button>' + '<button title="' + out('1.8') + '" class="cmd-box-lineheight" data-value="1.8" style="width:40px">1.8</button>' + '<button title="' + out('1.9') + '" class="cmd-box-lineheight" data-value="1.9" style="width:40px">1.9</button>' + '<button title="' + out('2') + '" class="cmd-box-lineheight" data-value="2" style="width:40px">2</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-lineheight" data-value="" style="">' + out('Not Set') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>';
     html += (this.builder.settings.enableContentStyle ? '<div style="padding-top:10px;display:flex;flex-direction: column;">' + // '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' +
@@ -10091,6 +10105,67 @@ class EditBox {
     this.modalEditBox = modalEditBox;
     const modalEditCode = builderStuff.querySelector('.is-modal.editcustomcode');
     const modalEditModule = builderStuff.querySelector('.is-modal.editmodule');
+    const divBoxClick = modalEditBox.querySelector('#divBoxClick');
+    this.divBoxClick = divBoxClick;
+    const divBoxGeneral = modalEditBox.querySelector('#divBoxGeneral');
+    this.divBoxGeneral = divBoxGeneral; // ------ Box Cover Upload -------
+
+    let fileCover = builderStuff.querySelector('.input-file-cover-central');
+
+    if (this.builder.iframe) {
+      fileCover = this.builder.contentStuff.querySelector('.input-file-cover-central');
+    }
+
+    if (fileCover) fileCover.addEventListener('click', () => {
+      this.targetBox = this.builder.activeBox;
+    });
+    if (fileCover) fileCover.addEventListener('change', e => {
+      if (fileCover.value === '') return;
+      this.builder.editor.saveForUndo(); // Show Waiting Indicator
+
+      const builderStuff = this.builderStuff;
+      dom$j.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
+            <div class="waiting-indicator">
+                <div>${out('Uploading..')}</div>
+            </div>
+            `);
+      const indicator = builderStuff.querySelector('.waiting-indicator');
+      let targetBox = this.targetBox;
+      let top, left;
+
+      if (!this.builder.iframe) {
+        top = targetBox.getBoundingClientRect().top + window.pageYOffset;
+        left = targetBox.getBoundingClientRect().left + window.pageXOffset;
+        indicator.style.top = top + 'px';
+        indicator.style.left = left + 'px';
+      } else {
+        // let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
+        // let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
+        // top = targetBox.getBoundingClientRect().top + adjY;
+        // left = targetBox.getBoundingClientRect().left + adjX;
+        // indicator.style.top = top + 'px';
+        // indicator.style.left = left + 'px';
+        indicator.style.top = '0';
+        indicator.style.left = 'calc(50% - 68px)';
+      } // builderStuff.querySelector('.input-custom-value-central').value = this.builder.settings.customval;
+
+
+      if (this.builder.settings.onUploadCoverImage) {
+        this.builder.settings.onUploadCoverImage(e);
+      } else {
+        if (!this.builder.iframe) {
+          builderStuff.querySelector('.is-cover-upload-central').submit();
+        } else {
+          this.builder.contentStuff.querySelector('.is-cover-upload-central').submit();
+        }
+      }
+
+      fileCover.value = ''; // Clear Input
+
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }); // /------ Box Cover Upload -------
+
     new Tabs$1(modalEditBox); // Backward compatibility
 
     let s = '<div class="feature-master-style"></div>';
@@ -10138,6 +10213,44 @@ class EditBox {
 
       this.builder.settings.onChange();
     });
+    const btnBoxLeft = modalEditBox.querySelector('.cmd-box-left');
+    btnBoxLeft.addEventListener('click', () => {
+      this.builder.editor.saveForUndo();
+      let activeBox = this.builder.activeBox;
+      let currPrev = activeBox.previousElementSibling;
+
+      if (currPrev) {
+        while (!dom$j.hasClass(currPrev, 'is-box')) {
+          if (!currPrev.previousElementSibling) break;
+          currPrev = currPrev.previousElementSibling;
+        }
+      }
+
+      if (currPrev) {
+        activeBox.parentNode.insertBefore(activeBox, currPrev); //Trigger Change event
+
+        this.builder.settings.onChange();
+      }
+    });
+    const btnBoxRight = modalEditBox.querySelector('.cmd-box-right');
+    btnBoxRight.addEventListener('click', () => {
+      this.builder.editor.saveForUndo();
+      let activeBox = this.builder.activeBox;
+      let currNext = activeBox.nextElementSibling;
+
+      if (currNext) {
+        while (!dom$j.hasClass(currNext, 'is-box')) {
+          if (!currNext.nextElementSibling) break;
+          currNext = currNext.previousElementSibling;
+        }
+      }
+
+      if (currNext) {
+        activeBox.parentNode.insertBefore(currNext, activeBox); //Trigger Change event
+
+        this.builder.settings.onChange();
+      }
+    });
     const btnBoxTextColors = modalEditBox.querySelectorAll('.cmd-box-textcolor');
     btnBoxTextColors.forEach(btnBoxTextColor => {
       btnBoxTextColor.addEventListener('click', () => {
@@ -11420,7 +11533,11 @@ class EditBox {
     }
 
     if (!onImageSelectClick && imageselect === '') {
-      modalEditBox.querySelector('.input-select').style.display = 'none';
+      this.divBoxClick.querySelector('.input-select').style.display = 'none';
+    }
+
+    if (!onImageSelectClick && imageselect === '') {
+      this.divBoxGeneral.querySelector('.input-select').style.display = 'none';
     } // Select image (opens Asset Manager plugin or custom dialog)
 
 
@@ -11444,12 +11561,37 @@ class EditBox {
     }
 
     if (onImageSelectClick || imageselect || onFileSelectClick || fileselect) {
-      const elm = modalEditBox.querySelector('.input-select');
+      const elm = this.divBoxClick.querySelector('.input-select');
       if (elm) elm.addEventListener('click', () => {
         this.builder.editor.openAsset(modalEditBox.querySelector('.input-src'), 'media', elm);
       });
     }
 
+    if (onImageSelectClick || imageselect) {
+      const btnSelectBoxBgImage = this.divBoxGeneral.querySelector('.input-select');
+      this.builder.editor.renderSelectAsset(btnSelectBoxBgImage, 'image', url => {
+        this.boxImage(url);
+        const activeBox = this.builder.activeBox;
+        const overlay = activeBox.querySelector('.is-overlay');
+        const overlayBg = activeBox.querySelector('.is-overlay-bg'); // Reset position & filter (grayscale)
+
+        overlayBg.style.filter = '';
+        overlay.style.filter = '';
+        const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
+        chkBoxBgImageGrayscale.checked = false;
+        overlayBg.style.backgroundPosition = '50% 60%';
+        overlayBg.removeAttribute('data-scale');
+        overlayBg.removeAttribute('data-x');
+        overlayBg.removeAttribute('data-y');
+        overlayBg.style.top = '';
+        overlayBg.style.bottom = '';
+        overlayBg.style.left = '';
+        overlayBg.style.right = '';
+        overlayBg.style.width = '';
+        overlayBg.style.height = ''; // /Reset
+      });
+    }
+
     let fileLargerImage = modalEditBox.querySelector('#fileImage5');
     fileLargerImage.addEventListener('change', e => {
       let element = fileLargerImage;
@@ -11707,8 +11849,10 @@ class EditBox {
 
     if (dom$j.hasClass(activeBox, 'is-section')) {
       modalEditBox.querySelector('#divBoxSize').style.display = 'none';
+      modalEditBox.querySelector('#divBoxMove').style.display = 'none';
     } else {
       modalEditBox.querySelector('#divBoxSize').style.display = 'block';
+      modalEditBox.querySelector('#divBoxMove').style.display = 'block';
     }
 
     modalEditBox.querySelector('#chkParallaxContent').checked = false;
@@ -12191,7 +12335,7 @@ class EditBox {
       doc.open();
       doc.write(result);
       doc.close();
-      this.builder.showModal(modalEditModule);
+      this.builder.showModal(modalEditModule, true);
       setTimeout(() => {
         iframe.style.opacity = 1;
       }, 200);
@@ -12199,9 +12343,9 @@ class EditBox {
       const modalBar = modalEditModule.querySelector('.is-modal-bar');
 
       if (moduleDesc) {
-        modalBar.innerHTML = moduleDesc;
+        modalBar.querySelector('span').innerHTML = out(moduleDesc);
       } else {
-        modalBar.innerHTML = out('Module Settings');
+        modalBar.querySelector('span').innerHTML = out('Module Settings');
       }
 
       let w = activeModule.getAttribute('data-dialog-width');
@@ -12218,6 +12362,12 @@ class EditBox {
 
       modalEditModule.childNodes.forEach(div => {
         if (!dom$j.hasClass(div, 'is-modal-overlay')) {
+          if (moduleName === 'slider-box') {
+            div.style.width = '1600px';
+            w = '90vw';
+            h = '80vh';
+          }
+
           div.style.maxWidth = w;
           div.style.height = h;
         }
@@ -28697,7 +28847,7 @@ class Snippets {
                     z-index:10;width:30px;height:30px;position:absolute;
                     top:2px;right:2px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;text-align:center;cursor:pointer;
                 }
-                .is-pop-close:focus {
+                .is-pop-close:focus-visible {
                     outline:  ${this.builder.styleOutlineColor} 2px solid;
                 }
 
@@ -28838,7 +28988,7 @@ class Snippets {
                     border-radius: 2px;
                 }
 
-                .is-design-list>li:focus {
+                .is-design-list>li:focus-visible {
                     outline:  ${this.builder.styleOutlineColor} 2px solid;
                 }
 
@@ -28937,7 +29087,7 @@ class Snippets {
                     cursor: default;
                 }
 
-                .is-category-list a:focus {
+                .is-category-list a:focus-visible {
                     outline:  ${this.builder.styleOutlineColor} 2px solid;
                 }
         
@@ -62241,10 +62391,10 @@ class Image$1 {
                                 <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
 				                    <input id="hidRefId1" name="hidRefId" type="hidden" value="" />
                                     <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
-                                    <input title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
+                                    <input onclick="blur()" title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                                 </form>
 
-                                <iframe tabindex="0" id="frameTargetImageUpload" name="frameTargetImageUpload" tabindex="-1" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
+                                <iframe id="frameTargetImageUpload" name="frameTargetImageUpload" tabindex="-1" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
                             </div>
                         </div>
 
@@ -62259,7 +62409,7 @@ class Image$1 {
                                 <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
 				                    <input id="hidRefId2" name="hidRefId" type="hidden" value="" />
                                     <svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
-                                    <input title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
+                                    <input onclick="blur()" title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                                 </form>
                             </div>
                         </div>
@@ -65994,9 +66144,13 @@ class Module {
         var moduleDesc = module.getAttribute('data-module-desc');
 
         if (moduleDesc) {
-          moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>`;
+          moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
+                    <svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    </button>`;
         } else {
-          moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out('Module Settings') + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>`;
+          moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out('Module Settings') + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
+                    <svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    </button>`;
         }
 
         var w = module.getAttribute('data-dialog-width');
@@ -66011,6 +66165,12 @@ class Module {
           h = '570px';
         }
 
+        if (modulename === 'slider-builder') {
+          moduleModal.querySelector('div:not(.is-modal-overlay)').style.width = '90vw';
+          w = '1500px';
+          h = '80vh';
+        }
+
         moduleModal.querySelector('div:not(.is-modal-overlay)').style.maxWidth = w;
         moduleModal.querySelector('div:not(.is-modal-overlay)').style.height = h;
         let btnClose = moduleModal.querySelector('.is-modal-close');
@@ -67287,6 +67447,12 @@ class Video {
     let elm = e.target;
 
     if (elm.tagName.toLowerCase() === 'video') {
+      if (elm.closest('[data-html]')) {
+        this.builder.activeVideo = null;
+        this.videoTool.style.display = '';
+        return;
+      }
+
       this.builder.activeVideo = elm;
       this.videoTool.style.display = 'flex';
       let _toolwidth = this.videoTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
@@ -67294,7 +67460,8 @@ class Video {
       let w = elm.offsetWidth * this.builder.opts.zoom;
       let top = elm.getBoundingClientRect().top + this.builder.win.pageYOffset;
       let left = elm.getBoundingClientRect().left;
-      left = left + (w - _toolwidth); //Adjust left in case an element is outside the screen
+      left = left + (w - _toolwidth); // left = left + (w/2 - _toolwidth/2);
+      //Adjust left in case an element is outside the screen
 
       const _screenwidth = window.innerWidth;
       if (_toolwidth + left > _screenwidth) left = elm.getBoundingClientRect().left;
@@ -70019,6 +70186,7 @@ class ColumnTool {
                                         <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
                                         <span>${util.out('Image')}</span>
                                     </button>
+                                    <button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
                                     <button title="${util.out('Remove')}" class="input-cell-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
                                     <button title="${util.out('Adjust')}" class="input-cell-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
                                 </div>
@@ -70153,11 +70321,11 @@ class ColumnTool {
                                 <div class="image-larger4" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
                                     <form class="form-upload-larger" target="frameTargetLinkUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
                                         <input id="hidRefId4" name="hidRefId" type="hidden" value="">
-                                        <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
-                                        <input title="${util.out('Select')}" id="fileImage4" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:68px;opacity: 0;cursor: pointer;">
+                                        <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                        <input onclick="blur()" title="${util.out('Select')}" id="fileImage4" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:68px;opacity: 0;cursor: pointer;">
                                     </form>
 
-                                    <iframe tabindex="0" id="frameTargetLinkUpload" name="frameTargetLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
+                                    <iframe tabindex="-1" id="frameTargetLinkUpload" name="frameTargetLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
                                 </div>
                             </div>
                             <div style="padding-top:20px">
@@ -70250,11 +70418,11 @@ class ColumnTool {
                         <div class="image-larger3 input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
                             <form class="form-upload-larger" target="frameTargetCellImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
                                 <input id="hidRefId3" name="hidRefId" type="hidden" value="">
-                                <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
-                                <input title="${util.out('Select')}" id="fileImage3" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
+                                <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                                <input onclick="blur()" title="${util.out('Select')}" id="fileImage3" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
                             </form>
 
-                            <iframe tabIndex="0" id="frameTargetCellImageUpload" name="frameTargetCellImageUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
+                            <iframe tabindex="-1" tabIndex="0" id="frameTargetCellImageUpload" name="frameTargetCellImageUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
                         </div>
                     </div>
 
@@ -70282,6 +70450,8 @@ class ColumnTool {
 
       columnMore = builderStuff.querySelector('.columnmore');
       this.cellSettings = builderStuff.querySelector('.is-modal.columnsettings');
+      this.divCellClick = builderStuff.querySelector('#divCellClick');
+      this.divCellGeneral = builderStuff.querySelector('#divCellGeneral');
       const quickadd = renderQuickAdd(builder); // Prepare for tooltip
 
       let elms = columnTool.querySelectorAll('[title]');
@@ -70622,6 +70792,36 @@ class ColumnTool {
         btnImageRemove.style.display = 'none';
         div.innerHTML = ''; //Trigger Change event
 
+        this.builder.opts.onChange();
+      }); // Column Background Image Open Asset
+
+      if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
+        this.divCellGeneral.querySelector('.input-select').style.display = 'none';
+      }
+
+      const btnCellBgImageOpenAsset = this.divCellGeneral.querySelector('.input-select');
+      this.builder.renderSelectAsset(btnCellBgImageOpenAsset, 'image', url => {
+        let cell = util.cellSelected();
+        if (!cell) return;
+        this.builder.uo.saveForUndo();
+        cell.style.backgroundImage = `url("${url}")`;
+        cell.style.backgroundSize = 'cover';
+        cell.style.backgroundRepeat = 'no-repeat';
+        const div = cellSettings.querySelector('.cell-bgimage-preview');
+        const btnImageAdjust = this.cellSettings.querySelector('.input-cell-bgimageadjust');
+        const btnImageRemove = this.cellSettings.querySelector('.input-cell-bgremove');
+        btnImageAdjust.style.display = 'none';
+        btnImageRemove.style.display = 'none';
+
+        if (url !== '') {
+          div.innerHTML = `<img src="${url}">`;
+          btnImageAdjust.style.display = 'flex';
+          btnImageRemove.style.display = 'flex';
+        } else {
+          div.innerHTML = '';
+        } //Trigger Change event
+
+
         this.builder.opts.onChange();
       }); // Column Background Image Select Dialog (.is-modal.imagesource) 
 
@@ -71419,13 +71619,13 @@ class ColumnTool {
       }
 
       if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
-        this.cellSettings.querySelector('.input-select').style.display = 'none';
+        this.divCellClick.querySelector('.input-select').style.display = 'none';
       } // Select image (opens Asset Manager plugin or custom dialog)
 
 
       if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect || this.builder.opts.onFileSelectClick || this.builder.opts.fileselect) {
         const inpSrc = this.cellSettings.querySelector('.input-src');
-        elm = this.cellSettings.querySelector('.input-select');
+        elm = this.divCellClick.querySelector('.input-select');
         if (elm) dom.addEventListener(elm, 'click', () => {
           //---default
           this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
@@ -72303,6 +72503,24 @@ class ColumnTool {
         this.columnTool.querySelector('.cell-remove').style.display = '';
         this.columnTool.querySelector('.cell-more').style.display = '';
       }
+    } // Column Lock will hide Add & Remove column
+
+
+    if (col.classList.contains('column-lock')) {
+      this.columnTool.querySelector('.cell-add').style.display = 'none';
+      this.columnTool.querySelector('.cell-remove').style.display = 'none';
+      this.columnMore.querySelector('.cell-prev').style.display = 'none';
+      this.columnMore.querySelector('.cell-next').style.display = 'none';
+      this.columnMore.querySelector('.cell-up').style.display = 'none';
+      this.columnMore.querySelector('.cell-down').style.display = 'none';
+      this.columnMore.querySelector('.cell-increase').style.display = 'none';
+      this.columnMore.querySelector('.cell-decrease').style.display = 'none';
+      this.columnMore.querySelector('.cell-duplicate').style.display = 'none';
+      this.columnMore.querySelector('.is-separator').style.display = 'none';
+      this.columnMore.querySelector('.cell-locking').style.display = 'none';
+    } else {
+      this.columnMore.querySelector('.is-separator').style.display = '';
+      this.columnMore.querySelector('.cell-locking').style.display = '';
     }
   }
 
@@ -83419,7 +83637,7 @@ class Rte {
 
         if (count < 3) {
           //not used     
-          var attr = links[i].getAttribute('data-protect');
+          let attr = links[i].getAttribute('data-protect');
 
           if (!attr) {
             links[i].setAttribute('data-rel', '_del');
@@ -83550,23 +83768,46 @@ class Rte {
     fontname = fontname.replace(/'/g, ''); // NEW 4.0.5 (replace quotes in font family)
 
     if (provider === 'google') {
-      var bExist = false;
-      var links = this.builder.doc.getElementsByTagName('link');
+      let bExist = false;
+      bExist = this.checkIfFontCssLinkExists(fontfamily);
 
-      for (i = 0; i < links.length; i++) {
-        var sSrc = links[i].href.toLowerCase();
-        sSrc = sSrc.replace(/\+/g, ' ').replace(/%20/g, ' ');
-        if (sSrc.indexOf(fontname.toLowerCase()) !== -1) bExist = true;
+      if (!bExist) {
+        let element = elm;
+
+        while (!dom.hasClass(element, 'is-builder')) {
+          element = element.parentNode;
+        }
+
+        let cssUrl = '';
+
+        if (this.builder.fontPath) {
+          const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-') + '.css';
+          cssUrl = this.builder.fontPath + cssFileName;
+          dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet" type="text/css">`);
+        } else {
+          dom.appendHtml(element, '<link href="//fonts.googleapis.com/css?family=' + fontname + d + o + '" rel="stylesheet" property="stylesheet" type="text/css">');
+        }
       }
+    }
+
+    if (provider === 'others') {
+      let bExist = false;
+      bExist = this.checkIfFontCssLinkExists(fontfamily);
 
       if (!bExist) {
-        var element = elm;
+        let element = elm;
 
         while (!dom.hasClass(element, 'is-builder')) {
           element = element.parentNode;
         }
 
-        dom.appendHtml(element, '<link href="//fonts.googleapis.com/css?family=' + fontname + d + o + '" rel="stylesheet" property="stylesheet" type="text/css">');
+        let cssUrl = '';
+
+        if (this.builder.fontPath) {
+          const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-') + '.css';
+          cssUrl = this.builder.fontPath + cssFileName;
+          dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet" type="text/css">`);
+        }
       }
     }
 
@@ -83584,9 +83825,12 @@ class Rte {
     } //Trigger Change event
 
 
-    this.builder.opts.onChange(); //LATER: make function
-    //Cleanup Google font css link
+    this.builder.opts.onChange(); //Cleanup Google font css link
+
+    this.cleanupFontCssLink();
+  }
 
+  cleanupFontCssLink() {
     const fonts = [];
 
     if (this.builder.opts.page !== '') {
@@ -83603,54 +83847,64 @@ class Rte {
           if (fonts.indexOf(fontFamily) === -1) fonts.push(fontFamily);
         });
       });
-    }
+    } // Cleanup
 
-    links = this.builder.doc.getElementsByTagName('link');
 
-    for (i = 0; i < links.length; i++) {
-      sSrc = links[i].href.toLowerCase();
+    let links = this.builder.doc.getElementsByTagName('link');
+
+    for (let i = 0; i < links.length; i++) {
+      let sSrc = links[i].href.toLowerCase();
 
       if (sSrc.indexOf('googleapis') !== -1) {
         //get fontname
         sSrc = sSrc.replace(/\+/g, ' ').replace(/%20/g, ' ');
-        fontname = sSrc.substr(sSrc.indexOf('family=') + 7);
+        let linkFontName = sSrc.substr(sSrc.indexOf('family=') + 7);
 
-        if (fontname.indexOf(':') !== -1) {
-          fontname = fontname.split(':')[0];
+        if (linkFontName.indexOf(':') !== -1) {
+          linkFontName = linkFontName.split(':')[0];
         }
 
-        if (fontname.indexOf('|') !== -1) {
-          fontname = fontname.split('|')[0];
+        if (linkFontName.indexOf('|') !== -1) {
+          linkFontName = linkFontName.split('|')[0];
         }
 
-        fontname = fontname.replace('&display=swap', ''); // NEW 4.0.5
-        //console.log(fontname);
-        //check if fontname used in content
-        // let tmp = this.builder.doc.body.innerHTML.toLowerCase();
+        linkFontName = linkFontName.replace('&display=swap', ''); // NEW 4.0.5
+        // console.log(linkFontName);
+        // check if fontname used in content
 
         let used = false;
         fonts.forEach(item => {
-          if (item.toLowerCase().indexOf(fontname) === -1) ; else {
+          if (item.toLowerCase().indexOf(linkFontName.toLowerCase()) === -1) ; else {
             used = true;
           }
         });
 
         if (!used) {
           //not used
-          var attr = links[i].getAttribute('data-protect');
+          let attr = links[i].getAttribute('data-protect');
 
           if (!attr) {
             links[i].setAttribute('data-rel', '_del');
           }
-        } // var count = tmp.split(fontname).length;     
-        // if(count<3){
-        //     //not used     
-        //     var attr = links[i].getAttribute('data-protect');
-        //     if (!attr) {
-        //         links[i].setAttribute('data-rel','_del');
-        //     }
-        // }
+        }
+      } else if (links[i].getAttribute('data-name') === 'fontfamily') {
+        let used = false;
+        fonts.forEach(item => {
+          const cssFileName = item.split(',')[0].replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-').toLowerCase() + '.css';
+
+          if (sSrc.toLowerCase().indexOf('/' + cssFileName) === -1) ; else {
+            used = true;
+          }
+        });
 
+        if (!used) {
+          //not used
+          let attr = links[i].getAttribute('data-protect');
+
+          if (!attr) {
+            links[i].setAttribute('data-rel', '_del');
+          }
+        }
       }
     }
 
@@ -83659,6 +83913,54 @@ class Rte {
     });
   }
 
+  checkIfFontCssLinkExists(fontfamily) {
+    let bExist = false;
+    let fontname = fontfamily.split(',')[0];
+    fontname = fontname.replace(/'/g, '');
+    fontname = fontname.replace(/"/g, ''); // (replace double quotes in font family)
+
+    fontname = fontname.toLowerCase();
+    let links = this.builder.doc.getElementsByTagName('link');
+
+    for (let i = 0; i < links.length; i++) {
+      let sSrc = links[i].href.toLowerCase();
+
+      if (sSrc.indexOf('googleapis') !== -1) {
+        if (!this.builder.fontPath) {
+          //get fontname
+          sSrc = sSrc.replace(/\+/g, ' ').replace(/%20/g, ' ');
+          let linkFontName = sSrc.substr(sSrc.indexOf('family=') + 7);
+
+          if (linkFontName.indexOf(':') !== -1) {
+            linkFontName = linkFontName.split(':')[0];
+          }
+
+          if (linkFontName.indexOf('|') !== -1) {
+            linkFontName = linkFontName.split('|')[0];
+          }
+
+          linkFontName = linkFontName.replace('&display=swap', ''); // NEW 4.0.5
+          //check if fontname used in content
+          // let tmp = this.builder.doc.body.innerHTML.toLowerCase();
+
+          if (linkFontName === fontname.toLowerCase()) {
+            bExist = true; // console.log(fontname.toLowerCase() + '-' +linkFontName);
+          }
+        }
+      } else if (links[i].getAttribute('data-name') === 'fontfamily') {
+        if (this.builder.fontPath) {
+          let cssFile = fontname.replace(/\s/g, '-').toLowerCase() + '.css';
+
+          if (sSrc.toLowerCase().indexOf('/' + cssFile) !== -1) {
+            bExist = true;
+          }
+        }
+      }
+    }
+
+    return bExist;
+  }
+
   positionToolbar() {
     const viewportWidth = document.body.clientWidth; //window.innerWidth;
 
@@ -86540,6 +86842,177 @@ class ContentStuff$1 {
 
 }
 
+class MediaPicker {
+  constructor(builder) {
+    this.builder = builder;
+    const util = this.builder.util;
+    this.util = util;
+    const builderStuff = this.builder.builderStuff;
+    const dom = this.builder.dom;
+    this.dom = dom;
+    this.id = this.builder.util.makeId();
+    const html = `
+        <div class="is-modal mediasource" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="is-modal-content" style="max-width:550px;">
+
+                <label for="inpMediaSource" style="display:block">${util.out('Source')}:</label>
+                <div class="image-src">
+                    <input id="inpMediaSource" class="input-src" type="text">
+                    <button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+                    <div class="input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
+                        <form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.onLargerImageUpload}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
+                            <input name="hidRefId" class="input-ref-id" type="hidden" value="">
+                            <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
+                            <input title="${util.out('Select')}" name="fileImage" class="input-file-select" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
+                        </form>
+                        <iframe tabIndex="0" id="frameTarget${this.id}" name="frameTarget${this.id}" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
+                    </div>
+                </div>
+
+                <div style="text-align:right;margin-top:20px;">
+                    <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
+                    <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
+                </div>
+
+            </div>
+        </div>
+        `;
+    dom.appendHtml(builderStuff, html);
+    const modalMediaSelect = document.querySelector('.mediasource');
+    this.modalMediaSelect = modalMediaSelect;
+
+    if (this.builder.opts.largerImageHandler === '' && !this.builder.opts.onLargerImageUpload) {
+      modalMediaSelect.querySelector('.input-upload').style.display = 'none';
+    }
+
+    if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
+      modalMediaSelect.querySelector('.input-select').style.display = 'none';
+    }
+
+    if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect || this.builder.opts.onFileSelectClick || this.builder.opts.fileselect) {
+      const inpSrc = modalMediaSelect.querySelector('.input-src');
+      const elm = modalMediaSelect.querySelector('.input-select');
+      if (elm) dom.addEventListener(elm, 'click', () => {
+        if (this.builder.opts.onFileSelectClick) {
+          this.builder.opts.onFileSelectClick({
+            targetInput: inpSrc,
+            theTrigger: elm
+          });
+        } else if (this.builder.opts.onImageSelectClick) {
+          this.builder.opts.onImageSelectClick({
+            targetInput: inpSrc,
+            theTrigger: elm
+          });
+        } else if (this.builder.opts.fileselect) {
+          let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
+          let iframe = modalFileSelect.querySelector('iframe');
+
+          if (this.builder.opts.assetRefresh) {
+            iframe.src = this.builder.opts.fileselect;
+            this.builder.opts.assetRefresh = false;
+          }
+
+          if (iframe.src === 'about:blank') {
+            iframe.src = this.builder.opts.fileselect;
+          }
+
+          util.showModal(modalFileSelect, false, () => {
+            elm.removeAttribute('data-focus');
+            elm.focus();
+          });
+          elm.setAttribute('data-focus', true);
+          this.builder.targetInput = inpSrc;
+          this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
+        } else if (this.builder.opts.imageselect) {
+          let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
+          let iframe = modalImageSelect.querySelector('iframe');
+
+          if (this.builder.opts.assetRefresh) {
+            iframe.src = this.builder.opts.imageselect;
+            this.builder.opts.assetRefresh = false;
+          }
+
+          if (iframe.src === 'about:blank') {
+            iframe.src = this.builder.opts.imageselect;
+          }
+
+          util.showModal(modalImageSelect, false, () => {
+            elm.removeAttribute('data-focus');
+            elm.focus();
+          });
+          elm.setAttribute('data-focus', true);
+          this.builder.targetInput = inpSrc;
+          this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
+        }
+      });
+    }
+
+    let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
+    dom.addEventListener(inputFileSelect, 'change', e => {
+      let element = inputFileSelect;
+
+      while (element.nodeName.toLowerCase() !== 'form') {
+        element = element.parentNode;
+      }
+
+      let frmUpload = element;
+      dom.addClass(frmUpload, 'please-wait');
+      modalMediaSelect.querySelector('.input-ref-id').value = this.builder.opts.customval;
+
+      if (this.builder.opts.onLargerImageUpload) {
+        this.builder.opts.onLargerImageUpload(e);
+      } else {
+        frmUpload.submit();
+      }
+
+      inputFileSelect.value = ''; // Clear Input
+    });
+    const btnImageOk = modalMediaSelect.querySelector('.input-ok');
+    dom.addEventListener(btnImageOk, 'click', () => {
+      const inpSrc = modalMediaSelect.querySelector('.input-src');
+      const url = inpSrc.value;
+      if (this.builder.mediaSelectedCallback) this.builder.mediaSelectedCallback(url);
+      this.builder.hideModal(modalMediaSelect);
+    });
+    const btnImageCancel = modalMediaSelect.querySelector('.input-cancel');
+    dom.addEventListener(btnImageCancel, 'click', () => {
+      this.builder.hideModal(modalMediaSelect);
+    });
+  }
+
+  openMediaPicker(currentUrl, assetType, callback, btn) {
+    this.builder.targetAssetType = assetType;
+    const modalMediaSelect = this.modalMediaSelect;
+    let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
+
+    if (assetType === 'media') {
+      inputFileSelect.setAttribute('accept', 'image/*,video/mp4');
+    } else if (assetType === 'video') {
+      inputFileSelect.setAttribute('accept', 'video/mp4');
+    } else if (assetType === 'image') {
+      inputFileSelect.setAttribute('accept', 'image/*');
+    } else if (assetType === 'audio') {
+      inputFileSelect.setAttribute('accept', 'audio/mp3');
+    } //Current value
+
+
+    const inpSrc = modalMediaSelect.querySelector('.input-src');
+    inpSrc.value = currentUrl; //mediaSelectedCallback
+
+    this.builder.mediaSelectedCallback = callback; //Show modal
+
+    modalMediaSelect.style.zIndex = '10005';
+    this.util.showModal(modalMediaSelect, false, () => {
+      if (btn) {
+        btn.removeAttribute('data-focus');
+        btn.focus();
+      }
+    });
+    if (btn) btn.setAttribute('data-focus', true);
+  }
+
+}
+
 class ContentBuilder {
   constructor(opts = {}) {
     let defaults = {
@@ -86583,6 +87056,8 @@ class ContentBuilder {
       assetPath: 'assets/',
       // Used for the location of ionicons/ (see rte.js 2788) & scripts/ (see plugins/preview/plugin.js 237)
       fontAssetPath: 'assets/fonts/',
+      // Option for self-hosted fonts:
+      // fontPath: 'assets/cssfonts/', // If set, will be used
       snippetData: 'assets/minimalist-blocks/snippetlist.html',
       // Deprecated
       snippetUrl: 'assets/minimalist-blocks/content.js',
@@ -87286,7 +87761,8 @@ class ContentBuilder {
     }
 
     this.colTool = new ColumnTool(this); // Render Column Tool
-    // Extend the onChange function
+
+    this.mediaPicker = new MediaPicker(this); // Extend the onChange function
 
     var oldget = this.opts.onChange;
 
@@ -88180,6 +88656,10 @@ class ContentBuilder {
     this.opts.assetRefresh = true; // After file upload, make open asset refreshed
   }
 
+  openMediaPicker(currentUrl, assetType = 'media', callback, btn) {
+    this.mediaPicker.openMediaPicker(currentUrl, assetType, callback, btn);
+  }
+
   openImagePicker(currentUrl, callback, btn) {
     this.colTool.openImagePicker(currentUrl, callback, btn);
   }
@@ -88265,6 +88745,65 @@ class ContentBuilder {
     return this.targetAssetType; // not used yet
   }
 
+  renderSelectAsset(btn, targetAssetType, callback) {
+    const _id = 'inp_' + this.util.makeId();
+
+    btn.insertAdjacentHTML('afterend', `<input type="hidden" id="${_id}">`);
+    const inpUrl = btn.parentNode.querySelector(`#${_id}`);
+    btn.addEventListener('click', () => {
+      this.openAsset(inpUrl, targetAssetType, btn);
+    });
+
+    let out = s => this.util.out(s);
+
+    const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+    Object.defineProperty(inpUrl, 'value', {
+      get: desc.get,
+      set: function (s) {
+        // Additional protection if normal selectAsset() is not used in asset dialog.
+        // This is used if onImageSelectClick or onFileSelectClick are used.
+        const filename = s.substring(s.lastIndexOf('/') + 1);
+        let extension = filename.split('.').pop();
+        extension = extension.toLowerCase();
+        let ok = false;
+
+        if (targetAssetType === 'all') {
+          ok = true;
+        } else if (targetAssetType === 'media') {
+          if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'mp4') {
+            ok = true;
+          } else {
+            alert(out('Please select an image or video file.'));
+          }
+        } else if (targetAssetType === 'video') {
+          if (extension === 'mp4') {
+            ok = true;
+          } else {
+            alert(out('Please select an mp4 file.'));
+          }
+        } else if (targetAssetType === 'image') {
+          if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
+            ok = true;
+          } else {
+            alert(out('Please select an image file.'));
+          }
+        } else if (targetAssetType === 'audio') {
+          if (extension === 'mp3') {
+            ok = true;
+          } else {
+            alert(out('Please select an mp3 file.'));
+          }
+        }
+
+        if (ok) {
+          if (callback) callback(s);
+        }
+
+        desc.set.call(this, s);
+      }
+    });
+  }
+
   openAsset(targetInput, targetAssetType, theTrigger) {
     if (targetAssetType === 'media' && (this.opts.onFileSelectClick || this.opts.onImageSelectClick)) {
       if (this.opts.onFileSelectClick) {
@@ -91412,6 +91951,10 @@ class ContentStuff {
     this.builder = builder; // const util = builder.util;
 
     const html = `
+            <form class="is-cover-upload-central" style="opacity:1;position:absolute;width:40px;height:40px;" target="target-upload-cover" method="post" action="${this.builder.coverImageHandler}" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">
+              <input type="file" tabindex="-1" class="input-file-cover-central" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
+              <input tabindex="-1" class="input-custom-value-central" name="hidcustomval" type="hidden" value="${this.builder.customval}" />
+          </form>
             <iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
         `;
     builder.contentStuff.insertAdjacentHTML('afterbegin', html);
@@ -91705,6 +92248,8 @@ class ContentBox {
       contentStylePath: 'assets/styles/',
       pluginPath: 'contentbuilder/',
       fontAssetPath: 'assets/fonts/',
+      // Option for self-hosted fonts:
+      // fontPath: 'assets/cssfonts/', // If set, will be used
       plugins: [{
         name: 'preview',
         showInMainToolbar: true,
@@ -91794,7 +92339,7 @@ class ContentBox {
       dragWithoutHandle: false,
       addButtonPlacement: '',
       snippetCategories: [[120, 'Basic'], [118, 'Article'], [101, 'Headline'], [119, 'Buttons'], [102, 'Photos'], [103, 'Profile'], [116, 'Contact'], [104, 'Products'], [105, 'Features'], [106, 'Process'], [107, 'Pricing'], [108, 'Skills'], [109, 'Achievements'], [110, 'Quotes'], [111, 'Partners'], [112, 'As Featured On'], [113, 'Page Not Found'], [114, 'Coming Soon'], [115, 'Help, FAQ']],
-      defaultSnippetCategory: 101,
+      defaultSnippetCategory: 120,
       outlineMode: '',
       elementHighlight: true,
       rowTool: 'right',
@@ -94233,6 +94778,7 @@ class ContentBox {
       pluginPath: this.settings.pluginPath,
       modulePath: this.settings.modulePath,
       fontAssetPath: this.settings.fontAssetPath,
+      fontPath: this.settings.fontPath,
       assetPath: this.settings.assetPath,
       plugins: this.settings.plugins,
       disableConfig: this.settings.disableConfig,
@@ -94822,7 +95368,7 @@ class ContentBox {
   }
 
   sectionSetup(section) {
-    dom.appendHtml(section, '<div class="is-section-tool">' + '<button class="is-section-edit" tabindex="-1" data-title="' + out('Section Settings') + '" title="' + out('Section Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">&#10005;</button>' + '</div>'); // this.editor.setTooltip(section);
+    dom.appendHtml(section, '<div class="is-section-tool">' + '<button type="button" class="is-section-edit" tabindex="-1" data-title="' + out('Section Settings') + '" title="' + out('Section Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">&#10005;</button>' + '</div>'); // this.editor.setTooltip(section);
     // Prepare for tooltip
 
     let elms = section.querySelector('.is-section-tool').querySelectorAll('[title]');
@@ -94850,7 +95396,7 @@ class ContentBox {
   boxSetup(box) {
     let tool = box.querySelector('.is-box-tool');
     if (tool) tool.parentNode.removeChild(tool);
-    dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<form class="is-cover-upload" data-tooltip-top title="' + out('Background Image') + '" data-title="' + out('Background Image') + '" target="target-upload-cover" method="post" action="' + this.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" tabindex="-1" class="input-file-cover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input tabindex="-1" class="input-custom-value" name="hidcustomval" type="hidden" value="" />' + '</form>' + '<button class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>'); // this.editor.setTooltip(box);
+    dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<div role="button" class="is-cover-upload" data-tooltip-top title="' + out('Background Image') + '" data-title="' + out('Background Image') + '" target="target-upload-cover" method="post" action="' + this.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" tabindex="-1" class="input-file-cover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input tabindex="-1" class="input-custom-value" name="hidcustomval" type="hidden" value="" />' + '</div>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>'); // this.editor.setTooltip(box);
     // Prepare for tooltip
 
     if (tool) {
@@ -94874,60 +95420,66 @@ class ContentBox {
     if (btnModuleEdit) btnModuleEdit.addEventListener('click', () => {
       this.editbox.editModule();
     });
-    const fileCover = box.querySelector('.input-file-cover');
-    if (fileCover) fileCover.addEventListener('click', () => {
-      /*
-      // Remove Waiting Indicator
-      const builderStuff = this.builderStuff;
-      const indicator = builderStuff.querySelector('.waiting-indicator');
-      if(indicator) {
-          alert('Please wait until another upload process completed.')
-          e.preventDefault();
-          return;
-      }
-      */
-      // prevent lost of activeBox during uploading cover (save to targetBox)
-      this.editbox.targetBox = this.activeBox;
-    });
-    if (fileCover) fileCover.addEventListener('change', e => {
-      if (fileCover.value === '') return;
-      this.editor.saveForUndo(); // Show Waiting Indicator
-
-      const builderStuff = this.builderStuff;
-      dom.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
-            <div class="waiting-indicator">
-                <div>${out('Uploading..')}</div>
-            </div>
-            `);
-      const indicator = builderStuff.querySelector('.waiting-indicator');
-      let targetBox = this.editbox.targetBox;
-      let top, left;
+    let btnCover = box.querySelector('.is-cover-upload');
+    if (btnCover) btnCover.addEventListener('mouseenter', () => {
+      let btnCoverCentral;
 
       if (!this.iframe) {
-        top = targetBox.getBoundingClientRect().top + window.pageYOffset;
-        left = targetBox.getBoundingClientRect().left + window.pageXOffset;
+        btnCoverCentral = this.builderStuff.querySelector('.is-cover-upload-central');
       } else {
-        let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
-        let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
-        top = targetBox.getBoundingClientRect().top + adjY;
-        left = targetBox.getBoundingClientRect().left + adjX;
+        btnCoverCentral = this.contentStuff.querySelector('.is-cover-upload-central');
       }
 
-      indicator.style.top = top + 'px';
-      indicator.style.left = left + 'px';
-      box.querySelector('.input-custom-value').value = this.settings.customval;
-
-      if (this.settings.onUploadCoverImage) {
-        this.settings.onUploadCoverImage(e);
-      } else {
-        box.querySelector('.is-cover-upload').submit();
-      }
-
-      fileCover.value = ''; // Clear Input
-
-      e.preventDefault();
-      e.stopImmediatePropagation();
+      let top, left;
+      top = btnCover.getBoundingClientRect().top + this.win.pageYOffset;
+      left = btnCover.getBoundingClientRect().left + this.win.pageXOffset;
+      btnCoverCentral.style.top = top + 'px';
+      btnCoverCentral.style.left = left + 'px';
+    });
+    /*
+    const fileCover = box.querySelector('.input-file-cover');
+    if(fileCover) fileCover.addEventListener('click', ()=>{
+         // prevent lost of activeBox during uploading cover (save to targetBox)
+        this.editbox.targetBox = this.activeBox;
+     });
+    if(fileCover) fileCover.addEventListener('change', (e)=>{
+         if (fileCover.value === '') return;
+     
+        this.editor.saveForUndo();            
+         // Show Waiting Indicator
+        const builderStuff = this.builderStuff;
+        dom.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
+        <div class="waiting-indicator">
+            <div>${out('Uploading..')}</div>
+        </div>
+        `);
+        const indicator = builderStuff.querySelector('.waiting-indicator');
+        let targetBox = this.editbox.targetBox;
+        let top, left;
+        if(!this.iframe) {
+             top = (targetBox.getBoundingClientRect().top + window.pageYOffset);
+            left = (targetBox.getBoundingClientRect().left + window.pageXOffset);
+         } else {
+             let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
+            let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
+                 top = targetBox.getBoundingClientRect().top + adjY;
+            left = targetBox.getBoundingClientRect().left + adjX;
+        }
+         indicator.style.top = top + 'px';
+        indicator.style.left = left + 'px';
+         box.querySelector('.input-custom-value').value = this.settings.customval;
+         if(this.settings.onUploadCoverImage) {
+             this.settings.onUploadCoverImage(e);
+         } else {
+             box.querySelector('.is-cover-upload').submit();
+                }
+        
+        fileCover.value = ''; // Clear Input
+         e.preventDefault();
+        e.stopImmediatePropagation();
     });
+    */
+
     box.addEventListener('mouseenter', () => {
       this.positionTool(box);
       let activeSection;
@@ -94968,6 +95520,47 @@ class ContentBox {
     }
   }
 
+  sectionStack() {
+    const sections = this.wrapperEl.querySelectorAll('.is-section.box-space');
+    sections.forEach(section => {
+      let prev = false;
+
+      if (section.previousElementSibling) {
+        if (section.previousElementSibling.classList.contains('box-space')) prev = true;
+      }
+
+      let next = false;
+
+      if (section.nextElementSibling) {
+        if (section.nextElementSibling.classList.contains('box-space')) next = true;
+      }
+
+      if (!prev && next) {
+        section.classList.add('stack-top');
+        section.classList.remove('stack-middle');
+        section.classList.remove('stack-bottom');
+      }
+
+      if (!prev && !next) {
+        section.classList.remove('stack-top');
+        section.classList.remove('stack-middle');
+        section.classList.remove('stack-bottom');
+      }
+
+      if (!next && prev) {
+        section.classList.add('stack-bottom');
+        section.classList.remove('stack-middle');
+        section.classList.remove('stack-top');
+      }
+
+      if (prev && next) {
+        section.classList.remove('stack-top');
+        section.classList.add('stack-middle');
+        section.classList.remove('stack-bottom');
+      }
+    });
+  }
+
   addIdea(newArea) {
     this.editor.saveForUndo();
     const designPath = this.designPath;
@@ -95109,31 +95702,42 @@ class ContentBox {
       }
     } // arrSections.push(newSection);
     // Check up to 3 sections (in case a template has up to 3 sections)
+    // let prevSection = newSection.previousElementSibling;
+    // if(prevSection) {
+    //     let ok = prevSection.querySelector('.is-section-tool');
+    //     if(!ok) {
+    //         arrSections.push(prevSection);
+    //     }
+    //     prevSection = prevSection.previousElementSibling;
+    //     if(prevSection) {
+    //         ok = prevSection.querySelector('.is-section-tool');
+    //         if(!ok) {
+    //             arrSections.push(prevSection);
+    //         }
+    //         // more sections here
+    //     }
+    // }
+    // Check all sections
 
 
-    let prevSection = newSection.previousElementSibling;
-
-    if (prevSection) {
-      let ok = prevSection.querySelector('.is-section-tool');
+    const sections = this.wrapperEl.querySelectorAll('.is-section');
+    sections.forEach(section => {
+      let ok = section.querySelector('.is-section-tool');
 
       if (!ok) {
-        arrSections.push(prevSection);
+        arrSections.push(section);
       }
-
-      prevSection = prevSection.previousElementSibling;
-
-      if (prevSection) {
-        ok = prevSection.querySelector('.is-section-tool');
-
-        if (!ok) {
-          arrSections.push(prevSection);
-        }
-      }
-    }
-
+    });
     arrSections.forEach(section => {
       // Code Blocks Handling
-      let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
+      // let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
+      // codeBlocks.forEach(element => {
+      //     let html = (decodeURIComponent(element.getAttribute('data-html'))); // Original code is stored in data-html attribute
+      //     html = html.replace(/{id}/g, dom.uniqueId());
+      //     //Fill the block with original code
+      //     dom.html(element, html);
+      // });
+      let codeBlocks = section.querySelectorAll('[data-html]');
       codeBlocks.forEach(element => {
         let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
 
@@ -95187,7 +95791,8 @@ class ContentBox {
         e.stopImmediatePropagation();
         return false;
       });
-    }); //Trigger Change event
+    });
+    this.sectionStack(); //Trigger Change event
 
     this.onChange();
     dom.removeElement(document.querySelector('.is-sidebar-overlay'));
@@ -95420,11 +96025,11 @@ class ContentBox {
     let btnHtml;
 
     if (btn.src) {
-      btnHtml = '<button id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-content="' + panelId + '" data-src="' + btn.src + '" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
+      btnHtml = '<button type="button" id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-content="' + panelId + '" data-src="' + btn.src + '" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
       var panelHtml = '<div id="' + panelId + '" class="is-sidebar-content ' + btn.class + '" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
       dom.appendHtml(builderStuff, panelHtml);
     } else {
-      btnHtml = '<button id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
+      btnHtml = '<button type="button" id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
     }
 
     const sidebar = builderStuff.querySelector('.is-sidebar');
@@ -95712,40 +96317,38 @@ class ContentBox {
   }
 
   cleanupUnused() {
+    /*
     let links = this.doc.getElementsByTagName('link');
-
     for (let i = 0; i < links.length; i++) {
-      //Remove unused google font links
-      let src = links[i].getAttribute('href');
-
-      if (src.indexOf('googleapis') !== -1) {
-        //get fontname
-        src = src.replace(/\+/g, ' ').replace(/%20/g, ' ');
-        let fontname = src.substr(src.indexOf('family=') + 7);
-
-        if (fontname.indexOf(':') != -1) {
-          fontname = fontname.split(':')[0];
-        }
-
-        fontname = fontname.toLowerCase(); //check if fontname used in content
-
-        let exist = false;
-        let tmp = this.wrapperEl.innerHTML.toLowerCase();
-        let count = tmp.split(fontname).length;
-        if (count >= 3) exist = true;
-
-        if (!exist) {
-          let attr = links[i].getAttribute('data-protect');
-
-          if (typeof attr !== typeof undefined && attr !== false) ; else {
-            links[i].setAttribute('data-rel', '_del');
-          }
+             //Remove unused google font links
+        let src = links[i].getAttribute('href');
+        if (src.indexOf('googleapis') !== -1) {
+            //get fontname
+            src = src.replace(/\+/g, ' ').replace(/%20/g, ' ');
+            let fontname = src.substr(src.indexOf('family=') + 7);
+            if (fontname.indexOf(':') != -1) {
+                fontname = fontname.split(':')[0];
+            }
+            fontname = fontname.toLowerCase();
+            //check if fontname used in content
+                 let exist = false;
+            let tmp = this.wrapperEl.innerHTML.toLowerCase();
+            let count = tmp.split(fontname).length;
+            if (count >= 3) exist = true;
+                 if (!exist) {  
+                let attr = links[i].getAttribute('data-protect');
+                if (typeof attr !== typeof undefined && attr !== false) {
+                    //do not delete
+                } else {
+                    links[i].setAttribute('data-rel', '_del');
+                }
+            }
         }
-      }
-    } //Cleanup unused contentstyles
-
+         }
+    */
+    this.editor.rte.cleanupFontCssLink(); //Cleanup unused contentstyles
 
-    links = this.doc.getElementsByTagName('link');
+    let links = this.doc.getElementsByTagName('link');
 
     for (let i = 0; i < links.length; i++) {
       if (links[i].getAttribute('data-name') === 'contentstyle') {