The Advanced Style Editor

<div class="color-switcher admin-only mid-round br5 add-10 color-white" spellcheck="false" style="background: #404040; max-height: 270px; 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>
<div class="cc-map-additional-devider"><span style="color: white;">Custom CSS</span></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-config cc-css config10 col-6">
<p>&nbsp;</p>
<p>#cc-inner .my class {</p>
<p>&nbsp;background:red;</p>
<p>}</p>
<p>&nbsp;</p>
</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(".config10").each(function(){var e=t(this);if(e.hasClass("config10")){var i=e.find("p").map(function(){return t(this).text().trim()}).get().join("");i=i.replace(/\s+/g," ").trim();var n=t('style[data-type="custom-css"]');n.length>0&&!i?n.remove():(n.remove(),t("head").append('<style data-type="custom-css">'+i+"</style>"))}else e[0].textContent.trim().replace(/\s+/g," ").trim().split(" ")}),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 s(e){n.empty();var i=e.position(),s=e.outerWidth();e.parent(),t('<div class="guide-line-vertical"></div>').css({left:i.left+s/2,top:0,bottom:0}).appendTo(n)}function o(){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+"%",s=t(this).position().top/i*100+"%";t(this).css("left",n),t(this).css("top",s),o()},drag:function(t,e){s(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(),s=e.element.width()/n.width()*100+"%";e.element.css({width:s,height:"auto",left:i.left,top:i.top}),o()},start:function(t,e){i=e.element.position(),s(e.helper)},stop:function(){o()}}),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+"%",s=e.element.height()/i.height()*100+"%",r=4;e.element.css({width:n,height:s,left:0,top:0}),o()},start:function(t,e){s(e.helper)},stop:function(){o()}}),t(".matrix .fluid-img").resizable({containment:"parent",autoHide:!0,aspectRatio:!1,resize:function(t,e){var n=e.element.parent(),s=(e.element.width()+a)/n.width()*100+"%",r=e.element.height()/n.height()*100+"%",a=4;e.element.css({width:s,height:r,left:i.left,top:i.top}),o();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(),s(e.helper)},stop:function(){o()}}),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> 
<button class="btn btn-sm cc-m-save btn-save matrix-msg matrix-save" data-action="save">&#160;</button> 
<button class="btn btn-sm matrix-msg matrix-view">&#160;</button>