<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<p style="color: #ffffff!important;">&nbsp;</p>
<div class="cc-map-additional-devider"><span style="color: white;">Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr class="" style="height: 32px; color: white; font-size: 15px;">
<td class="color1" style="cursor: pointer; background-color: #2951d5; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="bg-transparent color-white" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;bg-primary</td>
</tr>
<tr class="" style="height: 32px; color: white; font-size: 15px;">
<td class="color2" style="cursor: pointer; background-color: #f3f4f6; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"><span style="color: #ffffff;">&nbsp;</span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;bg-primary-light</span></td>
</tr>
<tr class="" style="height: 32px; color: white; font-size: 15px;">
<td class="color3" style="cursor: pointer; background-color: #26262c; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"><span style="color: #ffffff;">&nbsp;</span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;bg-primary-dark</span></td>
</tr>
<tr class="" style="height: 32px; color: white; font-size: 15px;">
<td class="color4" style="cursor: pointer; background-color: #2ccab9; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;bg-secondary</span></td>
</tr>
<tr class="" style="height: 32px; color: white; font-size: 15px;">
<td class="color5" style="cursor: pointer; background-color: #76787f; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32.5382px;"><span style="color: #ffffff;">&nbsp;bg-secondary-dark</span></td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span style="color: white;">Custom buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px; color: white; font-size: 15px;">
<td class="color6" style="cursor: pointer; background-color: #2951d5; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;background</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px; color: white; font-size: 15px;">
<td class="color7" style="cursor: pointer; background-color: #ffffff; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;">&nbsp;</td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<br /> <span class="is-brandon-font" style="color: #ccc; font-size: 12px;">Note: All changes made here will be applied to your entire website</span>
<div class="c"></div>
</div>

<var>is-switcher</var> 
<script type="text/javascript">



//<![CDATA[
    jQuery.noConflict(),function(t){t(document).ready(function(){function e(){var e={};[".color1",".color2",".color3",".color4",".color5",".color6",".color7"].forEach(function(i){e[i]=t(i).css("background-color")}),document.documentElement.style.setProperty("--bg-primary",e[".color1"]),document.documentElement.style.setProperty("--bg-primary-light",e[".color2"]),document.documentElement.style.setProperty("--bg-primary-dark",e[".color3"]),document.documentElement.style.setProperty("--bg-secondary",e[".color4"]),document.documentElement.style.setProperty("--bg-secondary-dark",e[".color5"]),document.documentElement.style.setProperty("--bg-btn-01",e[".color6"]),document.documentElement.style.setProperty("--text-btn-01",e[".color7"])}t(".is-boxed").length&&t("body").addClass("has-sidebar"),t(".j-hgrid").unwrap().wrap("<div class='m-section' />"),t(".cc-m-htmlcode").on({mouseenter:function(){t(this).find("var, ins").show().css("display","block")},mouseleave:function(){t(this).find("var, ins").hide()}}),t("var").each(function(){t(this).closest(".m-section").removeClass().addClass(t(this).text())}),t(".matrix-view").on("click",function(e){e.preventDefault(),t("#cms",window.parent.document).parent().parent().parent().toggleClass("j-prev-phone-portrait")}),t(".cc-m-all-opened .is-fluid").removeAttr("data-mce-style");var i,n=t('<div class="guide-lines-container"><\/div>').appendTo(".matrix .is-fluid-area");function o(e){n.empty();var i=e.position(),o=e.outerWidth();e.parent(),t('<div class="guide-line-vertical"><\/div>').css({left:i.left+o/2,top:0,bottom:0}).appendTo(n)}function s(){n.empty()}t(".matrix .is-fluid").draggable({containment:"parent",grid:[1,1],stop:function(){var e=t(this).parent().width(),i=t(this).parent().height(),n=t(this).position().left/e*100+"%",o=t(this).position().top/i*100+"%";t(this).css("left",n),t(this).css("top",o),s()},drag:function(t,e){o(e.helper)}}),t(".matrix .is-fluid").dblclick(function(e){t(e.target).hasClass("btn-radius-plus")||t(e.target).hasClass("btn-radius-minus")||t(this).draggable({disabled:!0})}),t(document).on("click",function(e){t(e.target).closest(".matrix .is-fluid").length||t(".matrix .is-fluid").draggable({disabled:!1})}),t(".matrix .is-fluid-area .is-fluid").resizable({containment:"parent",autoHide:!0,resize:function(t,e){var n=e.element.parent(),o=e.element.width()/n.width()*100+"%";e.element.css({width:o,height:"auto",left:i.left,top:i.top}),s()},start:function(t,e){i=e.element.position(),o(e.helper)},stop:function(){s()}}),t(".matrix .is-fluid-area").resizable({handles:"s",autoHide:!0,stop:function(t,e){var i=e.element.parent();e.element.css({height:e.element.height()+"px",width:e.element.width()/i.width()*100+"%"})}}),t(".matrix .mask-section").resizable({containment:"parent",autoHide:!0,resize:function(t,e){var i=e.element.parent(),n=(e.element.width()+r)/i.width()*100+"%",o=e.element.height()/i.height()*100+"%",r=4;e.element.css({width:n,height:o,left:0,top:0}),s()},start:function(t,e){o(e.helper)},stop:function(){s()}}),t(".matrix .fluid-img").resizable({containment:"parent",autoHide:!0,aspectRatio:!1,resize:function(t,e){var n=e.element.parent(),o=(e.element.width()+a)/n.width()*100+"%",r=e.element.height()/n.height()*100+"%",a=4;e.element.css({width:o,height:r,left:i.left,top:i.top}),s();var l=e.position.left/e.size.width*100+"%",c=e.position.top/e.size.height*100+"%";e.element.css("background-position",l+" "+c)},start:function(t,e){i=e.element.position(),o(e.helper)},stop:function(){s()}}),new MutationObserver(function(i){i.forEach(function(i){"childList"===i.type&&i.addedNodes.length>0&&(e(),t(".bg-custom-color").each(function(){var e=t(this).find("span").css("color");t(this).parent().attr("style","background-color: "+e+"!important")}))})}).observe(document.body,{childList:!0,subtree:!0}),e(),t(".reset-btn").click(function(){t(".matrix .is-fluid").draggable("destroy"),t(".matrix .is-fluid").draggable()}),t(".edit-btn").click(function(){t(".matrix .is-fluid").draggable("destroy")}),t(".btn-delete").click(function(){t(this).parent().remove()}),t(".btn-add").click(function(){var e=t(this).parent(".is-fluid"),i=e.clone();e.hasClass("is-rel")&&i.removeClass("is-rel"),i.css({left:"+=10px",top:"+=10px"}),i.insertAfter(e)}),t(".is-fluid").removeAttr("data-mce-style")})}(jQuery);
//]]>
</script> <!-- editor buttons -->
 <button class="btn btn-sm cc-m-save btn-save btn-float-left matrix-msg matrix-save invisible" data-action="save" style=
"width: 32px;height: 32px;position:fixed;text-align: center;top:1px;left:35px;z-index:999999;border:1px solid transparent;padding:5px;font-size:30px;background: #1ba9e1;color: #fff;-webkit-border-radius: 2px;border-radius:4px;">
&#160;</button><button class="btn btn-sm btn-float-left matrix-msg invisible matrix-view" style=
"width: 32px;height: 32px;position:fixed;text-align: center;top:1px;left:69px;z-index:999999;border:1px solid transparent;padding:5px;font-size:30px;background: #1ba9e1;color: #fff;-webkit-border-radius: 2px;border-radius:4px;"
data-action="save">&#160;</button> <!-- end editor buttons -->