<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;"> </p>
<div class="cc-map-additional-devider"><span>Main 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;">
<td class="color1" style="cursor: pointer; background-color: #2156fa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> bg-primary</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color2" style="cursor: pointer; background-color: #f1eeee; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"><span style="color: #ffffff;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> bg-primary-light</span></td>
</tr>
<tr class="" style="height: 32px;">
<td class="color3" style="cursor: pointer; background-color: #1e2022; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"><span style="color: #ffffff;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> bg-primary-dark</span></td>
</tr>
<tr class="" style="height: 32px;">
<td class="color4" style="cursor: pointer; background-color: #00ff91; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> bg-secondary</span></td>
</tr>
<tr class="" style="height: 32px;">
<td class="color5" style="cursor: pointer; background-color: #3b28cc; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32.5382px;"><span style="color: #ffffff;"> bg-secondary-dark</span></td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template sections</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr class="" style="height: 32px;">
<td class="color6" style="cursor: pointer; background-color: rgba(0, 0, 0, 0); width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> body</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color7" style="cursor: pointer; background-color: #2156fa; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color8" style="cursor: pointer; background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color9" style="cursor: pointer; background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;"><span style="color: #ffffff;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> content</span></td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</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;">
<td class="color10" style="cursor: pointer; background-color: #1e2022; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666; height: 32px;"><span style="color: #ffffff;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> background</span></td>
</tr>
<tr style="height: 32px;">
<td class="color11" style="cursor: pointer; background-color: #ffffff; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #ffffff;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> text color</td>
</tr>
<tr style="height: 32px;">
<td class="color12" style="cursor: pointer; background-color: #2156fa; width: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> link color</td>
</tr>
<tr style="height: 32px;">
<td class="color13" style="cursor: pointer; background-color: #2156fa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> horizontal line</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>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;">
<td class="color14" style="cursor: pointer; background-color: #2156fa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color15" style="cursor: pointer; background-color: #2156fa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color16" style="cursor: pointer; background-color: #2156fa; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> style 3</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</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;">
<td class="color17" style="cursor: pointer; background-color: rgba(0, 0, 0, 0); width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color18" style="cursor: pointer; background-color: #1e2022; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color19" style="cursor: pointer; background-color: #ffffff; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">subnav background</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color20" style="background-color: #ffffff; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> background color</td>
</tr>
<tr style="height: 32px;">
<td class="color21" style="background-color: #444444; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> navigation color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span data-tooltip="has-left-nav, has-right-nav, has-center-nav, has-large-content, no-shopping-cart, g-font" data-tooltip-position="top">Template configurations</span></div>
<div class="config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">has-right-nav g-font</div>
<div class="c"></div>
<div class="cc-map-additional-devider"><span data-tooltip="size-15, weight-400, is-uppercase, is-letterspace-1, is-letterspace-2, is-letterspace-3, snip-nav, --effect01, --effect02, --effect03, --line01, --line02, --line03, --line04, --line05" data-tooltip-position="top">navigation styles</span></div>
<div class="config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">size-15 weight-400 snip-nav</div>
<div class="c"></div>
<div class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">content styles</span></div>
<div class="config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">form-white</div>
<div class="c"></div>
<div class="cc-map-additional-devider"><span data-tooltip="form-white, form-dark, o-form, mid-round-btn, round-btn, dark-outline-btn, white-outline-btn, m-text-15" data-tooltip-position="top">footer styles</span></div>
<div class="config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">o-form color-white</div>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Typography</span></div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-30" data-tooltip-position="top">Heading H1</span></div>
<div class="config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-25" data-tooltip-position="top">Heading H2</span></div>
<div class="config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, m-size-20" data-tooltip-position="top">Heading H3</span></div>
<div class="config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="weight-400, is-uppercase, is-letterspace-1, has-dark-link, size-15" data-tooltip-position="top">Buttons</span></div>
<div class="config8 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;">weight-400</div>
<div class="c"></div>
<div class="add-left-10 is-brandon-font"><span data-tooltip="wow animate__fadeIn, wow animate__fadeInUp" data-tooltip-position="top">Animations</span></div>
<div class="config9 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;"></div>
<div class="c"></div>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>